@charset "UTF-8";
/*　変数設定のみを行う
**************************/
/*---- font -----*/
/*---- color -----*/
/*----path -----*/
html, body {
  height: 100% !important;
  margin: 0; }

.wrap-preview {
  background: #fff;
  pointer-events: none;
  position: relative;
  margin-top: 55px; }
  .wrap-preview header {
    position: absolute;
    z-index: 1; }
  .wrap-preview footer {
    pointer-events: auto; }

.alert-band {
  border-bottom: 1px solid #fff;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Roboto", "Helvetica", "Arial", sans-serif;
  margin-bottom: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; }
  .alert-band ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    list-style-type: none;
    margin: 0 auto;
    max-width: 940px;
    min-width: 360px;
    padding: 12px; }
    .alert-band ul li {
      height: 30px; }
      .alert-band ul li .preview-link {
        color: #fff;
        line-height: 30px; }
        .alert-band ul li .preview-link:hover {
          text-decoration: underline; }
      .alert-band ul li span {
        border: 1px solid #fff;
        border-radius: 4px;
        display: inline-block;
        font-size: 12px;
        margin-right: .5em;
        padding: .5em; }

.help {
  background: #007f4c;
  color: #fff; }

.body-sp {
  background: #363636 !important; }

.body-bg {
  display: -webkit-flex;
  display: flex;
  height: 100vh;
  padding-top: 55px;
  width: 100%; }
  .body-bg .phone-model {
    background: #fff;
    border-radius: 16px;
    -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
    display: -webkit-flex;
    display: flex;
    height: 668px;
    margin: auto;
    max-height: 85vh;
    position: relative;
    width: 340px; }
    .body-bg .phone-model:before, .body-bg .phone-model:after {
      content: "";
      display: block;
      left: 50%;
      margin-left: -20px;
      position: absolute;
      width: 40px; }
    .body-bg .phone-model:before {
      background: #ddd;
      border-radius: 3px;
      height: 6px;
      top: 17px; }
    .body-bg .phone-model:after {
      border: 3px solid #ddd;
      border-radius: 50%;
      bottom: 10px;
      height: 40px; }

.sp-view {
  border: 1px solid #d5d4d4;
  height: 568px;
  margin: 40px auto 60px;
  max-height: calc(85vh - 100px);
  overflow-y: scroll;
  width: 320px; }

.sp-view .wrap-preview, .app-view .wrap-preview {
  margin-top: 0;
  position: relative; }
  .sp-view .wrap-preview header, .app-view .wrap-preview header {
    position: absolute; }
  .sp-view .wrap-preview .drawer-nav, .app-view .wrap-preview .drawer-nav {
    display: none; }
  .sp-view .wrap-preview .drawer-hamburger, .sp-view .wrap-preview .btn-fixed, .app-view .wrap-preview .drawer-hamburger, .app-view .wrap-preview .btn-fixed {
    position: absolute; }
  .sp-view .wrap-preview footer, .app-view .wrap-preview footer {
    pointer-events: none; }
  .sp-view .wrap-preview header .logo img, .app-view .wrap-preview header .logo img {
    height: 48px; }
  .sp-view .wrap-preview .service-main .star-rate span, .app-view .wrap-preview .service-main .star-rate span {
    line-height: 1.4; }
  .sp-view .wrap-preview .footer-link li, .app-view .wrap-preview .footer-link li {
    font-size: 9px; }

.detail-mgr-img-box {
  bottom: -64px !important;
  height: 96px !important;
  width: 320px !important; }

.detail-mgr-img-box-inner {
  height: 96px !important;
  width: 96px !important; }

.detail-mgr-img {
  height: 96px !important;
  width: 96px !important; }

.list-mgr-box {
  padding: 25px 5% !important; }

.list-mgr-left {
  margin-right: 5% !important;
  width: 30% !important; }

.list-mgr-right {
  width: 65% !important; }

.preview_bottom_button {
  display: none !important; }

@media only screen and (max-width: 380px) {
  .alert-band {
    position: relative; }
  .body-bg {
    height: calc(100vh - 60px);
    padding: 0; }
    .body-bg .phone-model {
      margin: 10px auto;
      max-height: 90vh; }
      .body-bg .phone-model .sp-view {
        max-height: calc(90vh - 100px); }
  .alert-band ul {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 14px; }
    .alert-band ul .preview-link {
      text-shadow: none; } }

@media only screen and (max-height: 400px) {
  .body-bg .phone-model {
    max-height: none !important; }
    .body-bg .phone-model .sp-view {
      max-height: none !important; } }