@charset "UTF-8";
/* monjiro
=================================================================== */
body {
  background: #fff6e9; }
  body.modal {
    overflow: hidden; }

.noscroll {
  overflow: hidden; }

.monjiro {
  position: relative;
  overflow: hidden;
  background: url(../img/contents/monjiro/bg.jpg) no-repeat center top;
  background-size: cover; }

.text {
  width: 531px;
  height: 115px;
  text-indent: -9999px;
  background: url(../img/contents/monjiro/text.png) no-repeat center center;
  background-size: 100% auto;
  margin: 126px auto 0; }

.bg__top {
  text-indent: -9999px;
  background: url(../img/contents/monjiro/bg__top.png) no-repeat center top;
  background-size: 100% auto;
  width: 918px;
  height: 139px;
  margin: 0 auto 10px; }

.monjiro__container {
  position: relative;
  width: 75%;
  height: 0;
  padding-top: 138%;
  margin: 0 auto; }
  .monjiro__container .monjiro__container--list {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin-right: -12px; }
    .monjiro__container .monjiro__container--list li {
      width: calc(25% - 12px);
      margin-right: 12px;
      margin-bottom: 10px;
      height: 0;
      padding-top: calc(39% - 12px);
      float: right;
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 100% auto; }
      .monjiro__container .monjiro__container--list li.active {
        cursor: pointer; }
      .monjiro__container .monjiro__container--list li.story__2 {
        background-image: url(../img/contents/monjiro/story/2/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__3 {
        background-image: url(../img/contents/monjiro/story/3/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__4 {
        background-image: url(../img/contents/monjiro/story/4/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__5 {
        background-image: url(../img/contents/monjiro/story/5/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__6 {
        background-image: url(../img/contents/monjiro/story/6/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__7 {
        background-image: url(../img/contents/monjiro/story/7/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__8 {
        background-image: url(../img/contents/monjiro/story/8/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__9 {
        background-image: url(../img/contents/monjiro/story/9/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__10 {
        background-image: url(../img/contents/monjiro/story/10/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__11 {
        background-image: url(../img/contents/monjiro/story/11/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__12 {
        background-image: url(../img/contents/monjiro/story/12/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__13 {
        background-image: url(../img/contents/monjiro/story/13/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__14 {
        background-image: url(../img/contents/monjiro/story/14/title--off.png); }
      .monjiro__container .monjiro__container--list li.story__15 {
        background-image: url(../img/contents/monjiro/story/15/title--off.png); }

.balloon__cap {
  display: none;
  width: 18.2%;
  padding-top: 9.5%;
  height: 0;
  position: absolute;
  right: 70.2%;
  top: 91.3%; }
  .balloon__cap span {
    display: block;
    height: 0;
    position: absolute; }
    .balloon__cap span.balloon__cap--1 {
      background: url(../img/contents/monjiro/balloon__cap--1.png) no-repeat left top;
      background-size: 100% auto;
      width: 7%;
      padding-top: 6.2%;
      right: 0;
      top: 28%; }
    .balloon__cap span.balloon__cap--2 {
      background: url(../img/contents/monjiro/balloon__cap--2.png) no-repeat left top;
      background-size: 100% auto;
      width: 8%;
      padding-top: 7.1%;
      right: 11%;
      top: 38%; }
    .balloon__cap span.balloon__cap--3 {
      background: url(../img/contents/monjiro/balloon__cap--3.png) no-repeat left top;
      background-size: 100% auto;
      width: 78%;
      padding-top: 53%;
      left: 0;
      top: 0; }

.balloon__cin {
  display: none;
  width: 19.3%;
  padding-top: 8.2%;
  height: 0;
  position: absolute;
  left: 68.9%;
  top: 91.4%; }
  .balloon__cin span {
    display: block;
    height: 0;
    position: absolute; }
    .balloon__cin span.balloon__cin--1 {
      background: url(../img/contents/monjiro/balloon__cin--1.png) no-repeat left top;
      background-size: 100% auto;
      width: 7%;
      padding-top: 6.2%;
      left: 0;
      top: 0; }
    .balloon__cin span.balloon__cin--2 {
      background: url(../img/contents/monjiro/balloon__cin--2.png) no-repeat left top;
      background-size: 100% auto;
      width: 8%;
      padding-top: 7.1%;
      left: 8%;
      top: 10%; }
    .balloon__cin span.balloon__cin--3 {
      background: url(../img/contents/monjiro/balloon__cin--3.png) no-repeat left top;
      background-size: 100% auto;
      width: 83%;
      padding-top: 43%;
      right: 0;
      top: 0; }

.btn__back {
  text-indent: -9999px;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　-moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  width: 200px;
  height: 134px;
  background: url(../img/common/btn__back--chara.png) no-repeat center center;
  background-size: 100% auto;
  margin: 0 auto;
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }
  .btn__back a {
    height: 100%; }
  .btn__back:hover {
    -webkit-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1); }

.footer {
  position: absolute;
  bottom: 20px;
  left: 30px;
  z-index: 10; }

@media only screen and (max-width: 1199px) {
  .bg__top {
    width: 688px;
    height: 104px; } }
/* modal 
=================================================================== */
.m-modal__bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 100;
  display: none;
  overflow-y: scroll; }

.m-modal__container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 940px; }

.m-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 700px;
  z-index: 110;
  -webkit-box-shadow: 0 0 5px 0 rgba(155, 140, 120, 0.7);
  box-shadow: 0 0 5px 0 rgba(155, 140, 120, 0.7); }
  .m-modal .m-modal__main img {
    display: block;
    width: 100%;
    height: auto; }
  .m-modal .m-modal__close {
    text-indent: -9999px;
    cursor: pointer;
    width: 64px;
    height: 62px;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/contents/profile/modal/modal__back.png) no-repeat center center;
    background-size: 31px auto; }