@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 運営サイト ◇◆◇
  
  
========================================================================================================================*/

.mess {
  overflow-y:hidden;
}

.mess h3 {
  text-align:center;
  padding-bottom:0.5em;
  font-weight:normal;
}

.mess p {
  padding-top:1em;
}

.mess .ani1 {
  display:inline-block;
  float:right;
  margin-left:40px;
  margin-top:1.5em;
  position:relative;
}

@media only screen {
  .cssanimations .mess .ani1-txt {
    display:inline-block;
    visibility:visible;
    -webkit-animation:pulse 0.9s infinite;
    animation:pulse 0.9s infinite;
  }
}

@media (max-width:767px) {
  .mess h3 {
    padding-bottom:0;
  }
  
  .mess .ani1 {
    float:none;
    display:block;
    text-align:center;
    margin-left:0;
    padding-bottom:0.5em;
  }
}


/*----------------------------------------------------------------------------------------------------

  サイト紹介
  
----------------------------------------------------------------------------------------------------*/

.site-oracity {
  border-top:1px solid #dcdcdc;
  border-bottom:1px solid #dcdcdc;
}

.site-omakase,
.site-shoppachi,
.site-r38 {
  border-bottom:1px solid #dcdcdc;
}

.site-gurumecca {
  border-bottom:1px solid #fff;
}

.site-block .block:not(.block-clear) {
  position:relative;
  min-height:413px;
}

.site-block p {
  padding-top:1em;
}

.site-oracity .timeline-block,
.site-omakase .timeline-block {
}

.site-title {
  font-size:100%;
  font-weight:normal;
  padding-bottom:0.5em;
}

.site-title small,
.site-title span {
  display:block;
}

.site-tmb--l .site-title,
.site-tmb--l p {
  margin-left:570px;
}

.site-tmb--r .site-title,
.site-tmb--r p {
  margin-right:570px;
}


@media (max-width:767px) {
  .site-title,
  .site-block p {
    margin-left:0 !important;
    margin-right:0 !important;
  }
  
  .site-title {
    text-align:center;
    padding-bottom:1.5em;
  }
}

.timeline-block--txt {
  padding-top:0.5em;
}

.timeline-block--txtL {
  width:530px;
  float:left;
}

.timeline-block--txtR {
  width:530px;
  float:right;
}

@media (max-width:767px) {
  .timeline-block--txt {
    padding-top:0;
  }
  
  .timeline-block--txtL,
  .timeline-block--txtR {
    width:100%;
    float:none;
  }
}


/*-----------------------------------------------------------------------------------
  タイムライン有
-----------------------------------------------------------------------------------*/

.timeline-block {
  text-align:center;
  max-width:1100px;
}

.timeline-block .site-title {
  padding-bottom:1.5em;
}

@media (max-width:640px) {
  .timeline-block .site-title {
    padding-bottom:1.6em;
  }
}

.timeline-block p {
  text-align:left;
}

.timeline {
  width:100%;
  height:413px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  margin-top:21px;
}

.timeline .display {
  background:url(../../image/display-500.png) no-repeat center top;
  background-size:contain;
  display:inline-block;
  width:500px;
  height:413px;
  position:absolute;
  left:50%;
  top:-21px;
  margin-left:-250px;
  z-index:1;
}

.timeline-tmb {
  overflow-x:hidden;
  position:absolute;
  left:50%;
  top:0;
}

.timeline-oracity .timeline-tmb {
  width:1380px;
  height:413px;
  margin-left:-690px;
}

.timeline-omakase .timeline-tmb {
  width:460px;
  height:413px;
  margin-left:-230px;
}

.pc .timeline-tmb ul,
.pc .timeline-tmb li {
  height:260px !important;
}

@media all and (min-width:641px) {
  .timeline-tmb ul,
  .timeline-tmb li {
    height:260px !important;
  }
}

.timeline-tmb ul {
  overflow-y:hidden;
  z-index:2;
}

.timeline-tmb li {
  width:460px;
  position:relative;
  overflow-y:hidden;
  text-align:center;
  filter:alpha(opacity=60);
  opacity:0.6;
  -moz-opacity:0.6;

  -webkit-transform:scale(0.8);
  -moz-transform:scale(0.8);
  -ms-transform:scale(0.8);
  -o-transform:scale(0.8);
  transform:scale(0.8);
}

.timeline-tmb li.slick-center {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;

  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}

.lte-ie8 .timeline-tmb li.slick-center {
  overflow-y:auto;
}

.no-csstransforms .timeline-tmb li figure {
  width:80%;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
}

.no-csstransforms .timeline-tmb li.slick-center figure  {
  width:100%;
}

.timeline-oracity .timeline-pagination { width:80%; }
.timeline-omakase .timeline-pagination { width:30%; margin-top:2em; }

.timeline-pagination {
  width:80%;
  position:relative;
  z-index:3;
  padding-left:2em;
  padding-right:2em;
  margin-left:-0.5%;
  margin-bottom:2em;
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
}

.timeline-pagination .slick-dots {
  position:relative;
  bottom:inherit;
  width:100%;
  display:table;
  text-align:center;
  border-bottom:4px solid #e2e2e2;
}

.timeline-pagination li {
  margin:0;
  display:table-cell;
  padding-bottom:0.75em;
  text-align:center;
  vertical-align:top;
  position:relative;
  cursor:pointer;
  color:#969696;
  height:auto;
  -webkit-transition:color ease 0.3s;
  -moz-transition:color ease 0.3s;
  -ms-transition:color ease 0.3s;
  -o-transition:color ease 0.3s;
  transition:color ease 0.3s;
}

.timeline-pagination li:first-child {
  width:4em !important;
  position:absolute;
  left:-2em;
}

.timeline-pagination li:last-child {
  width:4em !important;
  position:absolute;
  right:-2em;
}

.timeline-pagination li small:before {
  content:"";
  width:14px;
  height:14px;
  display:inline-block;
  border-radius:100%;
  border:2px solid #969696;
  background-color:#fff;
  position:absolute;
  left:50%;
  bottom:-11px;
  margin-left:-9.5px;

  -webkit-transition:background ease 0.3s, border ease 0.3s;
  -moz-transition:background ease 0.3s, border ease 0.3s;
  -ms-transition:background ease 0.3s, border ease 0.3s;
  -o-transition:background ease 0.3s, border ease 0.3s;
  transition:background ease 0.3s, border ease 0.3s;
}

.timeline-omakase .timeline-pagination li small:before {
  bottom:-10px;
}

.timeline-pagination .slick-active {
  color:#00a08c;
}

.timeline-pagination li:hover small:before {
  border-color:#969696;
  background:#969696;
}

.timeline-pagination .slick-active:hover small:before,
.timeline-pagination .slick-active small:before {
  border-color:#33b3a3;
  background:#33b3a3;
}

.timeline-omakase .timeline-pagination li:first-child,
.timeline-omakase .timeline-pagination li:last-child {
  margin-top:-2.5em;
}

@media print {
  .timeline .display {
    z-index:5 !important;
  }
  
  .site-block .tmb {
    width:460px !important;
    height:260px !important;
  }

  .timeline-oracity .timeline-tmb {
    width:460px;
    height:413px;
    margin-left:-230px;
  }
  
  .timeline-tmb li {
    width:460px !important;
    height:260px !important;
    opacity:1 !important;
  }
}

@media (max-width:767px) {
  .timeline {
    width:100%;
    max-width:500px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:3.28125%;
  }

  .timeline .display {
    width:100%;
    max-width:500px;
    height:0;
    padding-top:82.8%;
    position:relative;
    left:auto;
    top:inherit;
    margin-left:0;
    margin-top:-4.2%;
  }

  .timeline-oracity .timeline-pagination { width:100%; }
  .timeline-omakase .timeline-pagination { width:60%; }
}

@media (max-width:640px) {
  .timeline-oracity .timeline-tmb,
  .timeline-omakase .timeline-tmb {
    width:92%;
    max-width:460px;
    height:65.15399%;
    max-height:260px;
    margin-left:0;
    left:4%;
    z-index:9;
  }

  .timeline-pagination {
    margin-bottom:1.5em;
  }
}

@media (max-width:500px) {
  .timeline-pagination li {
    font-size:87.5%;
  }
  
  .timeline-pagination li small:before {
    width:10px;
    height:10px;
    bottom:-9px;
    margin-left:-7px;
  }

  .timeline-omakase .timeline-pagination li small:before {
    bottom:-11px;
  }
}


/*-----------------------------------------------------------------------------------
  タイムライン無
-----------------------------------------------------------------------------------*/

.site-block .tmb-warp {
  width:500px;
  height:413px;
  line-height:0;
  font-size:0;
  text-align:center;
  position:absolute;
  top:50px;
  /*bottom:50px;*/
}

.site-tmb--r .tmb-warp {
  right:0;
}

.site-tmb--c .tmb-warp {
  position:inherit;
  bottom:inherit;
}

.site-block .tmb-warp:before {
  content:"";
  background:url(../../image/display-500.png) no-repeat center top;
  background-size:contain;
  display:inline-block;
  width:500px;
  height:413px;
  position:relative;
}

.site-block .tmb {
  width:460px;
  height:260px;
  position:absolute;
  left:20px;
  top:21px;
}

.site-block .tmb figure {
  width:100%;
  height:100%;
  overflow-y:scroll;
	position:relative;
}

.site-block .tmb figure img {
	position:relative;
}

.site-block .block-clear {
  clear:both;
  padding-top:1em;
}

.site-block .block-clear:not(:last-of-type) {
  padding-bottom:0;
}

@media (max-width:767px) {
  .site-block .tmb-warp {
    width:100%;
    max-width:500px;
    height:auto;
    position:inherit;
    top:inherit;
    bottom:inherit;
    right:inherit;
    margin-left:auto;
    margin-right:auto;
  }

  .site-block .tmb-warp:before {
    width:100%;
    max-width:500px;
    height:0;
    padding-top:82.8%;
  }

  .site-block .tmb {
    width:92%;
    max-width:460px;
    height:62.95399%;
    max-height:260px;
    left:4%;
    top:5.084%;
  }
  
  .site-block .tmb-warp + p {
    margin-top:1em;
  }
  
  .site-block .block-clear {
    padding-top:1em;
  }
  
  .site-block .block-clear:first-of-type {
    margin-top:-3em;
  }
}

@media (max-width:640px) {
  .site-block .tmb-warp + p {
    margin-top:0.75em;
  }
}