@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : uranai.css
Description : 占いページ
===================================================================== */
/* =====================================================================
    共通
======================================================================*/
.wrapper {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.wrapper .main {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.bg-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_main-sp.jpg) no-repeat center/cover;
  z-index: -1;
}
@media screen and (orientation: landscape) {
  .bg-main {
    background-image: url(../images/bg_main-pc.jpg);
  }
}

.uranai {
  padding: 2.09em 0 3.75em;
  font-family: YakuHanJP, "Zen Maru Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .uranai {
    font-size: 2rem;
    font-size: max(2rem, 15px);
  }
}
.uranai-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
  width: calc(680 / 750 * 100%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .uranai-inner-left {
    display: contents;
  }
  .uranai-inner-right {
    display: contents;
  }
  .uranai-inner-right .uranai-ttl {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
@media screen and (min-width: 768px) {
  .uranai-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 90%;
    max-width: 1280px;
  }
  .uranai-inner-left {
    margin-right: calc(15 / 1280 * 100%);
    width: calc(665 / 1280 * 100%);
  }
  .uranai-inner-right {
    width: calc(500 / 1280 * 100%);
  }
}
.uranai-ttl {
  margin: 0 0 1.3em calc(12 / 680 * 100%);
  width: calc(639 / 680 * 100%);
}
@media screen and (min-width: 768px) {
  .uranai-ttl {
    margin: 0 auto 2.3em;
    width: 89.4%;
  }
}
.uranai-btn {
  display: block;
  margin: 2em auto 0;
  width: calc(632 / 680 * 100%);
  -webkit-filter: drop-shadow(0 0.3em 0.3em rgba(167, 111, 116, 0.8));
          filter: drop-shadow(0 0.3em 0.3em rgba(167, 111, 116, 0.8));
}
@media screen and (min-width: 768px) {
  .uranai-btn {
    margin-top: 3em;
    width: 63.8%;
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-filter 0.5s ease;
    transition: -webkit-transform 0.3s ease, -webkit-filter 0.5s ease;
    transition: transform 0.3s ease, filter 0.5s ease;
    transition: transform 0.3s ease, filter 0.5s ease, -webkit-transform 0.3s ease, -webkit-filter 0.5s ease;
  }
  .uranai-btn:hover {
    -webkit-filter: drop-shadow(0 0.1em 0.1em rgba(167, 111, 116, 0.8));
            filter: drop-shadow(0 0.1em 0.1em rgba(167, 111, 116, 0.8));
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}
.uranai p {
  line-height: 1.875;
}

/* =====================================================================
*    uranai_language
* =================================================================== */
.uranai_language {
  background: rgba(112, 21, 0, 0.9);
}
.uranai_language-box {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
}
.uranai_language-box > * {
  text-align: center;
  padding: 1.5em;
  font-weight: bold;
}
.uranai_language-box dt {
  color: #fffdf8;
  background-color: #5c170a;
}
.uranai_language-box a,
.uranai_language-box button {
  color: #fffdf8;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.uranai_language-box a:hover,
.uranai_language-box button:hover {
  opacity: 0.7;
}
.uranai_language-box dd {
  background-color: #671e10;
}
.uranai_language-box dd > *:not(:last-child) {
  margin-bottom: 1.5em;
}
/* =====================================================================
    uranai_language
======================================================================*/
/* =====================================================================
    uranai_mv
======================================================================*/
@media screen and (max-width: 767px) {
  .uranai_mv-lead {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .uranai_mv-img {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .uranai_mv-btn {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}
.uranai_mv-lead {
  position: relative;
  text-align: center;
  font-size: 3.4rem;
  line-height: 2.058;
}
.uranai_mv-lead span {
  color: #da5285;
}
.uranai_mv-img {
  margin-top: -1.5em;
}
@media screen and (min-width: 768px) {
  .uranai_mv-lead {
    font-size: 110%;
  }
  .uranai_mv-img {
    margin-top: -1.5em;
  }
}

/* =====================================================================
    uranai_roulette
======================================================================*/
.uranai_roulette {
  display: none;
}
.uranai_roulette-img {
  position: relative;
  height: calc(791 / 750 * 100vw);
}
@media screen and (max-width: 767px) {
  .uranai_roulette-img {
    margin: 0 calc(50% - 50vw);
  }
}
.uranai_roulette-img img {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .uranai_roulette-img {
    margin-left: -6.3157894737%;
    width: 87.6691729323%;
    height: 44vw;
    max-height: 641px;
  }
}

/* =====================================================================
    uranai_loading
======================================================================*/
.uranai_loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}

/* =====================================================================
    uranai_result
======================================================================*/
.uranai_result {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.uranai_result-img {
  margin: 0 auto;
  width: calc(516 / 680 * 100%);
}
.uranai_result-content {
  margin-top: 1.3em;
}
.uranai_result-content-ttl {
  margin-bottom: calc(-120 / 680 * 100%);
}
.uranai_result-content p {
  padding: 5em calc(50 / 680 * 100%) 4em;
  background: url(../images/bg_pattern01.jpg) no-repeat center/cover;
  border: 0.6rem solid #e6ddbc;
  -o-border-image: linear-gradient(48deg, #f5f0da 0%, #e6ddbc 33%, #f5f0da 66%, #e6ddbc 100%);
     border-image: linear-gradient(48deg, #f5f0da 0%, #e6ddbc 33%, #f5f0da 66%, #e6ddbc 100%);
  border-image-slice: 1;
}
@media screen and (min-width: 768px) {
  .uranai_result-img {
    margin-left: 12.030075188%;
    width: 69.1729323308%;
  }
  .uranai_result-content-ttl {
    margin: 0 auto -13.0909090909%;
    width: 72.7272727273%;
  }
  .uranai_result-content p {
    padding: 5em calc(40 / 680 * 100%) 4em;
  }
}/*# sourceMappingURL=uranai.css.map */