/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
@-webkit-keyframes heart {
  0% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  60% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  64% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }
@keyframes heart {
  0% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  60% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  64% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@-webkit-keyframes heart-position {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  60% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  100% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px); } }

@keyframes heart-position {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  60% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  100% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px); } }

@-webkit-keyframes heart-sp {
  0% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes heart-sp {
  0% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@-webkit-keyframes heart-position-sp {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  100% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px); } }

@keyframes heart-position-sp {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  100% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px); } }

@-webkit-keyframes hand {
  0% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  60% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  70% {
    -webkit-transform: translate(90px, 20px);
            transform: translate(90px, 20px); }
  80% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  90% {
    -webkit-transform: translate(40px, 50px);
            transform: translate(40px, 50px); }
  100% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); } }

@keyframes hand {
  0% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  60% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  70% {
    -webkit-transform: translate(90px, 20px);
            transform: translate(90px, 20px); }
  80% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); }
  90% {
    -webkit-transform: translate(40px, 50px);
            transform: translate(40px, 50px); }
  100% {
    -webkit-transform: translate(-40px, 0px);
            transform: translate(-40px, 0px); } }

@-webkit-keyframes naderare {
  0% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px); }
  10% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px); }
  20% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  30% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px); }
  40% {
    -webkit-transform: translateX(0.5px);
            transform: translateX(0.5px); }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes naderare {
  0% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px); }
  10% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px); }
  20% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  30% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px); }
  40% {
    -webkit-transform: translateX(0.5px);
            transform: translateX(0.5px); }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@-webkit-keyframes naderare2 {
  0% {
    -webkit-transform: rotate(1.5deg);
            transform: rotate(1.5deg); }
  10% {
    -webkit-transform: rotate(-1.1deg);
            transform: rotate(-1.1deg); }
  20% {
    -webkit-transform: rotate(0.8deg);
            transform: rotate(0.8deg); }
  30% {
    -webkit-transform: rotate(-0.4deg);
            transform: rotate(-0.4deg); }
  40% {
    -webkit-transform: rotate(0.1deg);
            transform: rotate(0.1deg); }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes naderare2 {
  0% {
    -webkit-transform: rotate(1.5deg);
            transform: rotate(1.5deg); }
  10% {
    -webkit-transform: rotate(-1.1deg);
            transform: rotate(-1.1deg); }
  20% {
    -webkit-transform: rotate(0.8deg);
            transform: rotate(0.8deg); }
  30% {
    -webkit-transform: rotate(-0.4deg);
            transform: rotate(-0.4deg); }
  40% {
    -webkit-transform: rotate(0.1deg);
            transform: rotate(0.1deg); }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

.wrapper {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5; }

.content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-height: 450px;
  background-color: #FF94C6;
  overflow: hidden; }
  .content:after {
    content: '';
    position: absolute;
    top: 36px;
    right: 10px;
    bottom: 13px;
    left: 10px;
    border: solid 2px #fff;
    pointer-events: none; }
  .content.bg-plaid {
    background-image: url("../img/bg_plaid.gif");
    background-size: 32.5px 32.5px; }
  .content.bg-yotsugi {
    background-color: rgba(0, 0, 0, 0.75);
    background-image: url("../img/bg_yotsugi.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom; }
  .content.bg-shinobu {
    background-color: rgba(0, 0, 0, 0.75);
    background-image: url("../img/bg_shinobu.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom; }
  .content.bg-theme-yotsugi {
    background-color: #94E9E3;
    background-size: 732.90323px 570.32258px;
    background-position: 57% 450px;
    background-repeat: no-repeat; }
  .content.bg-theme-shinobu {
    background-color: #E4C678;
    background-size: 568px 803px;
    background-position: 50% 0px; }
  .content.bg-wallpaper {
    background-color: #404040; }
  .is-opening .content:after {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.content__inner {
  margin: 10px;
  margin-top: 36px; }

.gnav {
  position: absolute;
  top: 0px;
  left: 10px;
  right: 10px;
  height: 36px;
  background-image: url("../img/logo_nademonogatari.png");
  background-size: 72px 25px;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s; }
  .is-opening .gnav {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition-duration: 0s; }

.gnav__sns, .gnav__sns--tw, .gnav__sns--fb {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 25px;
  margin-right: 12px;
  margin-top: 5px;
  font-size: 0px;
  background-repeat: no-repeat;
  background-position: left center; }
  .gnav__sns span, .gnav__sns--tw span, .gnav__sns--fb span {
    display: none; }

.gnav__sns--tw {
  background-size: 14px 11px;
  background-image: url("../img/ico_twitter.png"); }

.gnav__sns--fb {
  background-size: 7px 15px;
  background-image: url("../img/ico_facebook.png"); }

.gnav__menu {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  position: absolute;
  top: 10px;
  right: 0px;
  width: 16px;
  height: 13px;
  background-size: 16px 13px;
  background-image: url("../img/ico_menu.png"); }

.modal {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff; }

.modal__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px; }
  .modal__close:before, .modal__close:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    height: 2px;
    background-color: #fff;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  .modal__close:before {
    -webkit-transform: translateY(6px) rotate(45deg);
            transform: translateY(6px) rotate(45deg); }
  .modal__close:after {
    -webkit-transform: translateY(6px) rotate(-45deg);
            transform: translateY(6px) rotate(-45deg); }

.menu {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 50%;
  padding-bottom: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.menu__link {
  text-align: center;
  font-size: 22px; }
  .menu__link li {
    margin-top: 25px;
    margin-bottom: 20px; }
  .menu__link a {
    color: inherit;
    text-decoration: none; }

.menu__link__top {
  width: 58px;
  height: 20px;
  width: image-width("menu/top.png");
  height: image-height("menu/top.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/menu/top.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.menu__link__chara {
  width: 166px;
  height: 21px;
  width: image-width("menu/chara-select.png");
  height: image-height("menu/chara-select.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/menu/chara-select.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.menu__link__info {
  width: 93px;
  height: 21px;
  width: image-width("menu/info.png");
  height: image-height("menu/info.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/menu/info.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.menu__link__wallpaper {
  width: 93px;
  height: 21px;
  width: image-width("menu/wallpaper.png");
  height: image-height("menu/wallpaper.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/menu/wallpaper.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.menu__banner-grid {
  border-top: solid 1px white;
  margin: 0px 10px;
  /* padding: 0px 20px; */
  padding-top: 10px;
  text-align: center; }
  .menu__banner-grid li {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    margin: 10px 0px; }

.menu__banner, .menu__banner--matsuri, .menu__banner--nisioisin, .menu__banner--box, .menu__banner--club, .menu__banner--novels, .menu__banner--info {
  display: inline-block; }
  .menu__banner span, .menu__banner--matsuri span, .menu__banner--nisioisin span, .menu__banner--box span, .menu__banner--club span, .menu__banner--novels span, .menu__banner--info span {
    display: none; }

.menu__banner--matsuri {
  width: 61px;
  height: 51px;
  background-size: 61px 51px;
  background-image: url("../img/bnr_matsuri.png"); }

.menu__banner--nisioisin {
  width: 73px;
  height: 23px;
  background-size: 73px 23px;
  background-image: url("../img/bnr_nisioisin.png"); }

.menu__banner--box {
  width: 74px;
  height: 26px;
  background-size: 74px 26px;
  background-image: url("../img/bnr_box.png"); }

.menu__banner--club {
  width: 73px;
  height: 26px;
  background-size: 73px 26px;
  background-image: url("../img/bnr_club.png"); }

.menu__banner--novels {
  width: 73px;
  height: 26px;
  background-size: 73px 26px;
  background-image: url("../img/bnr_novels.png"); }

.menu__banner--info {
  width: 73px;
  height: 26px;
  background-size: 73px 26px;
  background-image: url("../img/bnr_info.png"); }

.menu__copyright {
  width: 269px;
  height: 9px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -135px;
  width: image-width("/copy.png");
  height: image-height("/copy.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/copy.png")no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: contain; }

.chara-page {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.chara-page .common-midashi {
  width: 171px;
  height: 22px;
  width: image-width("chara_select/chara_select_under.png");
  height: image-height("chara_select/chara_select_under.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/chara_select/chara_select_under.png")no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  margin-bottom: 5%; }

.chara-select {
  text-align: center; }

.chara-select__item, .chara-select__item--1c {
  display: inline-block; }

.chara-select__item--1c {
  display: block; }

.chara-select__btn, .chara-select__btn--nadeko, .chara-select__btn--shinobu, .chara-select__btn--yotsugi {
  display: inline-block;
  margin: 0px 6px; }
  .chara-select__btn span, .chara-select__btn--nadeko span, .chara-select__btn--shinobu span, .chara-select__btn--yotsugi span {
    display: none; }

.chara-select__btn--nadeko {
  width: 153px;
  height: 183px;
  background-size: 153px 183px;
  background-image: url("../img/btn_chara-nadeko.png"); }

.chara-select__btn--shinobu {
  width: 117px;
  height: 140px;
  background-size: 117px 140px;
  background-image: url("../img/btn_chara-shinobu.png"); }
  .chara-select__btn--shinobu.is-disable {
    background-image: url("../img/btn_chara-shinobu-disable.png"); }

.chara-select__btn--yotsugi {
  width: 117px;
  height: 141px;
  background-size: 117px 141px;
  background-image: url("../img/btn_chara-yotsugi.png"); }
  .chara-select__btn--yotsugi.is-disable {
    background-image: url("../img/btn_chara-yotsugi-disable.png"); }

.common-midashi {
  text-align: center;
  text-decoration: underline;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  margin: 20px 0px; }

.top-page {
  transition: opacity 0.5s; }
  .is-opening .top-page {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition-duration: 0s; }

.top-page__title {
  position: absolute;
  top: 20%;
  left: 50%;
  margin-left: -146.75px;
  background-image: url("../img/logo_nadekkoshare.png");
  width: 293.5px;
  height: 103px;
  background-size: 293.5px 103px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: opacity 0.5s; }
  .top-page__title span {
    display: none; }
  .is-title .top-page__title {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

.top-page__nadeko {
  position: absolute;
  width: 100%;
  height: 70%;
  top: 40%;
  left: -7%;
  background-image: url("../img/img_top_nadeko.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

.top-page__btn {
  display: block;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -134.5px;
  width: 269px;
  height: 66px;
  background-size: 269px 66px;
  background-image: url("../img/btn_top_nade.png");
  background-repeat: no-repeat;
  transition: opacity 0.5s;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .is-title .top-page__btn {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  .top-page__btn span {
    display: none; }

.top-page__baloon {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -45%;
  width: 90%;
  height: 22%;
  padding-top: 10%;
  background-size: 90% 32%;
  background-image: url("../img/bg_top_baloon.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%, 55%;
  text-align: center;
  color: #FF94C6;
  font-size: 27px;
  transition: opacity 0.5s;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .top-page__baloon .top-page__count {
    position: absolute;
    top: 39%;
    left: 0;
    right: 0; }
  .is-title .top-page__baloon {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  .top-page__baloon .is-half {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    margin: 0px -6px; }

.nade-area {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }
  .nade-area canvas {
    -webkit-tap-highlight-color: transparent; }

.nade-area.is-naderare {
  -webkit-transform-origin: 50% 400px;
          transform-origin: 50% 400px;
  -webkit-animation: naderare2 2s infinite;
          animation: naderare2 2s infinite;
  -moz-animation: naderare2 2s infinite; }

.nade-hand {
  position: absolute;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  background-size: 96px 96px;
  background-image: url("../img/ico_hand.png");
  pointer-events: none; }

.nade-heart {
  position: absolute;
  pointer-events: none; }
  .nade-heart.heart {
    -webkit-animation: "heart-position-sp" 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
            animation: "heart-position-sp" 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
    -moz-animation: "heart-position-sp" 1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards; }

.nade-heart01 {
  display: none;
  position: absolute;
  pointer-events: none; }
  .nade-heart01.heart {
    display: block;
    -webkit-animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    -moz-animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

.nade-heart02 {
  position: absolute;
  pointer-events: none; }
  .nade-heart02.heart {
    -webkit-animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    -moz-animation: "heart-sp" 3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

.nade-heart03 {
  position: absolute;
  transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  pointer-events: none; }

.nadeko .nade-body {
  position: absolute;
  top: 205px;
  left: 50%;
  margin-left: -304px;
  width: 484.33615px;
  height: 1286.42466px; }
  .nadeko .nade-body.push {
    top: 210px; }
  .nadeko .nade-body.pull {
    top: 205px;
    transition: top 0.5s; }
  .nadeko .nade-body.open {
    background-size: 484.33615px 1286.42466px;
    background-image: url("../img/nadeko/nadeko_base.png");
    background-repeat: no-repeat; }

.nadeko canvas {
  position: absolute;
  top: 71px;
  left: 50%;
  margin-left: -204px; }
  .nadeko canvas.push {
    top: 76px; }
  .nadeko canvas.pull {
    top: 71px;
    transition: top 0.5s; }

.yotugi .nade-body {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -252px;
  width: 498px;
  height: 706px; }
  .yotugi .nade-body.push {
    top: 105px; }
  .yotugi .nade-body.pull {
    top: 100px;
    transition: top 0.5s; }
  .yotugi .nade-body.open {
    background-size: 498px 706px;
    background-image: url("../img/yotugi/base_yotugi.png");
    background-repeat: no-repeat; }

.yotugi canvas {
  width: 341px !important;
  height: 291px !important;
  position: absolute;
  top: 12px;
  left: 50%;
  margin-left: -175px; }
  .yotugi canvas.push {
    top: 17px; }
  .yotugi canvas.pull {
    top: 12px;
    transition: top 0.5s; }

.shinobu .nade-body {
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -382px;
  width: 734.16459px;
  height: 1133.16708px; }
  .shinobu .nade-body.push {
    top: 45px; }
  .shinobu .nade-body.pull {
    top: 40px;
    transition: top 0.5s; }
  .shinobu .nade-body.open {
    background-size: 734.16459px 1133.16708px;
    background-image: url("../img/shinobu/shinobu_base.png");
    background-repeat: no-repeat; }

.shinobu canvas {
  width: 400px !important;
  height: 341px !important;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -205px; }
  .shinobu canvas.push {
    top: 21px; }
  .shinobu canvas.pull {
    top: 16px;
    transition: top 0.5s; }

.nade-header {
  position: absolute;
  top: 36px;
  left: 12px;
  right: 12px;
  height: 40px;
  color: #fff;
  line-height: 1;
  text-align: center;
  border-bottom: solid 2px #fff;
  pointer-events: none; }
  .nade-header:before, .nade-header:after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    top: 0px;
    background-position: center;
    background-repeat: no-repeat; }
  .nade-header:before {
    left: 0px;
    width: 80px;
    border-right: solid 2px #fff;
    background-image: url("../img/txt_nade-header_key.png");
    background-size: 66px 27px; }
  .nade-header:after {
    right: 0px;
    width: 22px;
    border-left: solid 2px #fff;
    background-image: url("../img/txt_nade-header_nade.png");
    background-size: 17px 23px; }

.nade-header__count {
  margin-left: 80px;
  margin-right: 22px;
  padding-top: 9px;
  font-size: 30px;
  line-height: 1; }
  .nade-header__count .is-half {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    margin: 0px -4.5px; }

.nade-footer, .nade-footer--nadeko, .nade-footer--shinobu, .nade-footer--yotsugi {
  position: absolute;
  bottom: 13px;
  left: 12px;
  right: 12px;
  height: 80px;
  line-height: 1;
  text-align: center;
  color: #fff;
  border-top: solid 2px #fff;
  pointer-events: none; }
  .nade-footer:before, .nade-footer--nadeko:before, .nade-footer--shinobu:before, .nade-footer--yotsugi:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    mix-blend-mode: multiply; }
  .nade-footer:after, .nade-footer--nadeko:after, .nade-footer--shinobu:after, .nade-footer--yotsugi:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 100%;
    background-size: 35px 48px;
    background-image: url("../img/txt_nade-footer_nade.png");
    background-repeat: no-repeat;
    background-position: center;
    border-left: solid 2px #fff; }

.nade-footer--nadeko:before {
  background-color: #A41E50; }

.nade-footer--shinobu:before {
  background-color: #8B3728; }

.nade-footer--yotsugi:before {
  background-color: #009F97; }

.nade-footer__count {
  position: relative;
  margin-right: 50px;
  font-size: 64px;
  line-height: 1;
  padding-top: 14px; }
  .nade-footer__count .is-half {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    margin: 0px -10px; }

.quiz {
  position: absolute;
  width: 100%;
  left: 0px;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  font-size: 14px; }

.quiz__form, .quiz__form--correct, .quiz__form--incorrect {
  display: block;
  margin: 0px 10px;
  padding: 25px 20px;
  border-style: solid none;
  border-width: 2px;
  border-color: #fff;
  background-color: rgba(0, 159, 151, 0.8); }

.quiz__form--correct {
  height: 110px;
  background-image: url("../img/txt_quiz_correct.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 143px 115px; }

.quiz__form--incorrect {
  height: 110px;
  background-image: url("../img/txt_quiz_incorrect.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 201px 115px; }

.quiz__text {
  width: 240px;
  height: 60px;
  width: image-width("../img/modal/yotugi/quiz.png");
  height: image-height("../img/modal/yotugi/quiz.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/yotugi/quiz.png")no-repeat 0 0;
  background-size: contain;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto; }

.quiz__bar {
  position: relative;
  margin-top: 10px;
  margin-right: 75px;
  height: 35px; }
  .quiz__bar input,
  .quiz__bar button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    position: absolute;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    height: 100%;
    border: solid 2px #fff;
    font-size: 18px; }
  .quiz__bar input {
    background-color: #fff;
    border-color: #9C9C9D;
    width: 100%;
    color: #333;
    padding: 0em 0.2em; }
  .quiz__bar button {
    top: 0px;
    left: 100%;
    margin-left: 5px;
    width: 70px; }

.quiz__bar__inout {
  width: 42px;
  width: image-width("../img/modal/yotugi/input.png");
  height: image-height("../img/modal/yotugi/input.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/yotugi/input.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px; }

.quiz__btn {
  position: absolute;
  top: 100%;
  left: 30px;
  right: 30px;
  display: block;
  margin: 15px 0px;
  padding: 15px 0px;
  border: solid 2px #fff;
  background-color: #f09400;
  text-decoration: none;
  text-align: center;
  color: inherit;
  line-height: 1;
  border-radius: 10px; }

.quiz__btn__text {
  width: 219px;
  width: image-width("../img/modal/yotugi/hint.png");
  height: image-height("../img/modal/yotugi/hint.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/yotugi/hint.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.book {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.9);
  top: 38px;
  left: 12px;
  bottom: 15px;
  right: 12px; }

.book__text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-70%);
          transform: translateY(-70%);
  font-size: 13px;
  width: 82%;
  height: 70%;
  width: image-width("../img/modal/yotugi/nademono_read_text.png");
  height: image-height("../img/modal/yotugi/nademono_read_text.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/yotugi/nademono_read_text.png")no-repeat 0 0;
  background-size: contain;
  background-position: 50%, 55%;
  margin: 9%; }

.book__back {
  position: absolute;
  bottom: 40px;
  left: 5%;
  position: absolute;
  bottom: 30px;
  width: 90%;
  height: 50px;
  border: solid 2px white;
  border-radius: 10px;
  background-color: #009E96; }

.book__back__text {
  width: 86px;
  height: 14px;
  width: image-width("../img/modal/yotugi/back.png");
  height: image-height("../img/modal/yotugi/back.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/yotugi/back.png")no-repeat 0 0;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.book-info {
  position: absolute;
  top: 39px;
  bottom: 16px;
  left: 12px;
  right: 12px; }

.book-info__title {
  position: absolute;
  width: 100%;
  top: 0px; }
  .book-info__title .common-midashi {
    width: 98px;
    height: 22px;
    text-decoration: underline;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    margin: 27px 0px;
    width: image-width("../img/info/book-info.png");
    height: image-height("../img/info/book-info.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/info/book-info.png")no-repeat 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto; }

.book-info__image {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 80px;
  bottom: 190px;
  background-size: contain;
  background-image: url("../img/info/img_book-info.png");
  background-repeat: no-repeat;
  background-position: 50% 55%;
  background-color: #fff; }

.book-info__text {
  width: 90%;
  height: 147px;
  width: image-width("../img/info/book-text.png");
  height: image-height("../img/info/book-text.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/info/book-text.png")no-repeat 0 0;
  background-position: 50% 55%;
  background-size: contain;
  position: absolute;
  bottom: 0px;
  color: #fff;
  font-size: 12px;
  margin: 5%;
  line-height: 1.8; }

.wallpaper {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 38px;
  left: 12px;
  bottom: 15px;
  right: 12px;
  background-color: #000; }

.wallpaper__content {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 0px; }

.wallpaper__grid {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 10px;
  width: 100px;
  height: 180px;
  margin: 10px; }

.wallpaper__preview {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 40px;
  width: 79.09091px;
  margin: auto;
  border: solid 1px #fff;
  background-image: url("../img/ico_unknown.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.wallpaper__title, .wallpaper__title--n100, .wallpaper__title--n1000, .wallpaper__title--n5000, .wallpaper__title--n10000 {
  display: block;
  position: absolute;
  bottom: 0px;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-position: center; }
  .wallpaper__title span, .wallpaper__title--n100 span, .wallpaper__title--n1000 span, .wallpaper__title--n5000 span, .wallpaper__title--n10000 span {
    display: none; }

.wallpaper__title--n100 {
  height: 29px;
  background-size: 80px 29px;
  background-image: url("../img/txt_wallpaper_count-100.png"); }

.wallpaper__title--n1000 {
  height: 29px;
  background-size: 80px 29px;
  background-image: url("../img/txt_wallpaper_count-1000.png"); }

.wallpaper__title--n5000 {
  height: 29px;
  background-size: 80px 29px;
  background-image: url("../img/txt_wallpaper_count-5000.png"); }

.wallpaper__title--n10000 {
  height: 29px;
  background-size: 80px 29px;
  background-image: url("../img/txt_wallpaper_count-10000.png"); }

.splash-a {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../img/logo_splash_nisioisin.png");
  background-size: 239px 52px;
  background-position: center;
  background-repeat: no-repeat; }

.splash-a__copyright {
  width: 74px;
  height: 11px;
  width: image-width("/copyright.png");
  height: image-height("/copyright.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/copyright.png")no-repeat 0 0;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -37px;
  background-size: contain;
  background-repeat: no-repeat; }

.splash-b {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../img/logo_splash_nademonogatari.png");
  background-size: 227px 147px;
  background-position: center;
  background-repeat: no-repeat; }

.sound-check {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #EF91BA; }
  .sound-check.bg-theme-yotsugi {
    background-color: #9BD4D3; }
  .sound-check.bg-theme-shinobu {
    background-color: #DDC07C; }

.sound-check__content {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0px;
  text-align: center;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 0px; }
  .sound-check__content:before {
    content: '';
    display: block;
    margin: auto;
    margin-bottom: 37px;
    width: 171px;
    height: 44px;
    background-image: url("../img/txt_sound.png");
    background-size: 171px 44px;
    background-repeat: no-repeat; }

.sound-check__btn, .sound-check__btn--on, .sound-check__btn--off {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 67px;
  height: 67px;
  margin: 0px 13px;
  background-size: 67px 67px; }
  .sound-check__btn span, .sound-check__btn--on span, .sound-check__btn--off span {
    display: none; }

.sound-check__btn--on {
  background-image: url("../img/ico_sound_on.png"); }

.sound-check__btn--off {
  background-image: url("../img/ico_sound_off.png"); }

.present {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  margin-left: -85px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  font-size: 15px; }

.present__title {
  font-size: 21px;
  line-height: 1; }
  .present__title strong {
    display: block;
    font-weight: bold;
    font-size: 47px; }

.js-present-count {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px; }
  .js-present-count.present-count-100 {
    width: 79px;
    height: 38px;
    width: image-width("modal/get_wallpaper/100.png");
    height: image-height("modal/get_wallpaper/100.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/modal/get_wallpaper/100.png")no-repeat 0 0;
    background-repeat: no-repeat;
    background-size: contain; }
  .js-present-count.present-count-1000 {
    width: 103px;
    height: 38px;
    width: image-width("modal/get_wallpaper/1000.png");
    height: image-height("modal/get_wallpaper/1000.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/modal/get_wallpaper/1000.png")no-repeat 0 0;
    background-repeat: no-repeat;
    background-size: contain; }
  .js-present-count.present-count-5000 {
    width: 112px;
    height: 38px;
    width: image-width("modal/get_wallpaper/5000.png");
    height: image-height("modal/get_wallpaper/5000.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/modal/get_wallpaper/5000.png")no-repeat 0 0;
    background-repeat: no-repeat;
    background-size: contain; }
  .js-present-count.present-count-10000 {
    width: 130px;
    height: 37px;
    width: image-width("modal/get_wallpaper/10000.png");
    height: image-height("modal/get_wallpaper/10000.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/modal/get_wallpaper/10000.png")no-repeat 0 0;
    background-repeat: no-repeat;
    background-size: contain; }

.present__count__text {
  width: 149px;
  height: 19px;
  width: image-width("modal/get_wallpaper/count.png");
  height: image-height("modal/get_wallpaper/count.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/get_wallpaper/count.png")no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px; }

.present__preview {
  display: block;
  border: solid 2px #fff;
  margin: 15px auto;
  width: auto;
  height: 170px; }

.present__get {
  width: 145px;
  height: 15px;
  width: image-width("modal/get_wallpaper/get-wallpaper.png");
  height: image-height("modal/get_wallpaper/get-wallpaper.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/get_wallpaper/get-wallpaper.png")no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px; }

.present__btn {
  width: 147px;
  height: 24px;
  display: block;
  margin-bottom: 15px;
  width: image-width("modal/get_wallpaper/save.png");
  height: image-height("modal/get_wallpaper/save.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/modal/get_wallpaper/save.png")no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto; }

.share-shinobu {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff; }

.share-shinobu__title {
  width: 200px;
  height: 25px;
  width: image-width("txt_share.png");
  height: image-height("txt_share.png");
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url("../img/txt_share.png")no-repeat 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px; }

.share-shinobu__done {
  display: block;
  height: 160px;
  margin: 0px 10px;
  border-style: solid none;
  border-width: 2px;
  border-color: #fff;
  background-color: rgba(239, 147, 0, 0.8);
  background-image: url("../img/txt_share_done.png");
  background-size: 234px 112px;
  background-repeat: no-repeat;
  background-position: center; }

.share-icon, .share-icon--tw, .share-icon--fb {
  display: inline-block;
  margin: 0px 10px;
  width: 40px;
  height: 40px;
  background-size: 40px 40px; }
  .share-icon span, .share-icon--tw span, .share-icon--fb span {
    display: none; }

.share-icon--tw {
  background-image: url("../img/btn_menu_twitter.png"); }

.share-icon--fb {
  background-image: url("../img/btn_menu_facebook.png"); }

.num-pink, .num-pink--n0, .num-pink--n1, .num-pink--n2, .num-pink--n3, .num-pink--n4, .num-pink--n5, .num-pink--n6, .num-pink--n7, .num-pink--n8, .num-pink--n9 {
  background-image: url("../img/num_pink.png");
  background-size: 24px 310px;
  width: 24px;
  height: 31px;
  display: inline-block;
  vertical-align: top;
  font-size: 0px; }

.num-pink--n0 {
  background-position: 0px 0px; }

.num-pink--n1 {
  background-position: 0px -31px; }

.num-pink--n2 {
  background-position: 0px -62px; }

.num-pink--n3 {
  background-position: 0px -93px; }

.num-pink--n4 {
  background-position: 0px -124px; }

.num-pink--n5 {
  background-position: 0px -155px; }

.num-pink--n6 {
  background-position: 0px -186px; }

.num-pink--n7 {
  background-position: 0px -217px; }

.num-pink--n8 {
  background-position: 0px -248px; }

.num-pink--n9 {
  background-position: 0px -279px; }

.num-white-s, .num-white-s--n0, .num-white-s--n1, .num-white-s--n2, .num-white-s--n3, .num-white-s--n4, .num-white-s--n5, .num-white-s--n6, .num-white-s--n7, .num-white-s--n8, .num-white-s--n9 {
  background-image: url("../img/num_white-s.png");
  background-size: 14px 170px;
  width: 14px;
  height: 17px;
  display: inline-block;
  vertical-align: top;
  font-size: 0px; }

.num-white-s--n0 {
  background-position: 0px 0px; }

.num-white-s--n1 {
  background-position: 0px -17px; }

.num-white-s--n2 {
  background-position: 0px -34px; }

.num-white-s--n3 {
  background-position: 0px -51px; }

.num-white-s--n4 {
  background-position: 0px -68px; }

.num-white-s--n5 {
  background-position: 0px -85px; }

.num-white-s--n6 {
  background-position: 0px -102px; }

.num-white-s--n7 {
  background-position: 0px -119px; }

.num-white-s--n8 {
  background-position: 0px -136px; }

.num-white-s--n9 {
  background-position: 0px -153px; }

.num-white-m, .num-white-m--n0, .num-white-m--n1, .num-white-m--n2, .num-white-m--n3, .num-white-m--n4, .num-white-m--n5, .num-white-m--n6, .num-white-m--n7, .num-white-m--n8, .num-white-m--n9 {
  background-image: url("../img/num_white-m.png");
  background-size: 19px 250px;
  width: 19px;
  height: 25px;
  display: inline-block;
  vertical-align: top;
  font-size: 0px; }

.num-white-m--n0 {
  background-position: 0px 0px; }

.num-white-m--n1 {
  background-position: 0px -25px; }

.num-white-m--n2 {
  background-position: 0px -50px; }

.num-white-m--n3 {
  background-position: 0px -75px; }

.num-white-m--n4 {
  background-position: 0px -100px; }

.num-white-m--n5 {
  background-position: 0px -125px; }

.num-white-m--n6 {
  background-position: 0px -150px; }

.num-white-m--n7 {
  background-position: 0px -175px; }

.num-white-m--n8 {
  background-position: 0px -200px; }

.num-white-m--n9 {
  background-position: 0px -225px; }

.num-white-l, .num-white-l--n0, .num-white-l--n1, .num-white-l--n2, .num-white-l--n3, .num-white-l--n4, .num-white-l--n5, .num-white-l--n6, .num-white-l--n7, .num-white-l--n8, .num-white-l--n9 {
  background-image: url("../img/num_white-l.png");
  background-size: 40px 520px;
  width: 40px;
  height: 52px;
  display: inline-block;
  vertical-align: top;
  font-size: 0px; }

.num-white-l--n0 {
  background-position: 0px 0px; }

.num-white-l--n1 {
  background-position: 0px -52px; }

.num-white-l--n2 {
  background-position: 0px -104px; }

.num-white-l--n3 {
  background-position: 0px -156px; }

.num-white-l--n4 {
  background-position: 0px -208px; }

.num-white-l--n5 {
  background-position: 0px -260px; }

.num-white-l--n6 {
  background-position: 0px -312px; }

.num-white-l--n7 {
  background-position: 0px -364px; }

.num-white-l--n8 {
  background-position: 0px -416px; }

.num-white-l--n9 {
  background-position: 0px -468px; }

.pc {
  width: 100%;
  height: 1400px;
  background-color: #FF5082; }
  .pc .pc-center {
    width: 1280px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #FF5082; }
  .pc .pc-logo {
    position: absolute;
    top: 38px;
    left: 36px;
    width: 426px;
    height: 72px;
    background-image: url("../img/pc/nademonogatari_bunner.png");
    background-repeat: no-repeat; }
  .pc h1 {
    position: absolute;
    top: 317px;
    left: 55px;
    width: 385px;
    height: 100px;
    width: image-width("/logo_top_title.png");
    height: image-height("/logo_top_title.png");
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../img/logo_top_title.png")no-repeat 0 0;
    background-size: contain; }
  .pc .pc-count {
    position: absolute;
    top: 458px;
    left: 40px;
    width: 416px;
    height: 60px;
    display: inline-block;
    text-align: center; }
    .pc .pc-count .pc-count-bg {
      height: 60px;
      background-image: url("../img/pc/nadecount.png");
      background-repeat: no-repeat; }
      .pc .pc-count .pc-count-bg .pc-count-num {
        text-align: center;
        color: white;
        font-size: 40px;
        display: inline-block;
        margin-top: 18px;
        margin-left: 75px; }
        .pc .pc-count .pc-count-bg .pc-count-num .is-half {
          -webkit-transform: scale(0.5);
                  transform: scale(0.5);
          margin: 0px -4.5px; }
  .pc .pc-nadeko {
    overflow: hidden;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 760px;
    height: 740px;
    background-image: url("../img/bg_plaid_pc.gif"); }
    .pc .pc-nadeko .pc-nadeko-text {
      width: 233px;
      height: 68px;
      position: absolute;
      top: 29px;
      right: 502px;
      width: image-width("pc/nadenade.png");
      height: image-height("pc/nadenade.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/nadenade.png")no-repeat 0 0; }
    .pc .pc-nadeko canvas {
      width: 612px !important;
      height: 522px !important;
      position: absolute;
      top: 20px;
      left: 23px; }
    .pc .pc-nadeko .pc-nadeko-img {
      width: 870.53571px;
      height: 1277.67857px;
      position: absolute;
      top: 261px;
      left: -154px; }
      .pc .pc-nadeko .pc-nadeko-img.open {
        background-image: url("../img/nadeko/nadeko_base.png");
        background-repeat: no-repeat;
        background-size: cover; }
    .pc .pc-nadeko .pc-nadeko-heart {
      display: none; }
      .pc .pc-nadeko .pc-nadeko-heart.open {
        display: block; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart01 {
          position: absolute;
          top: 10px;
          left: 380px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart01 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart02 {
          position: absolute;
          top: 100px;
          left: 400px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart02 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart03 {
          position: absolute;
          top: 40px;
          left: 480px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 2s infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 2s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart03 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 2s infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 2s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart04 {
          position: absolute;
          top: 40px;
          left: 370px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.3s infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.3s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart04 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart05 {
          position: absolute;
          top: 40px;
          left: 330px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.4s infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1.4s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart05 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .nade-heart06 {
          position: absolute;
          top: 40px;
          left: 300px;
          -webkit-animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s infinite;
                  animation: heart-position 8.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s infinite; }
        .pc .pc-nadeko .pc-nadeko-heart.open .heart06 {
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s infinite;
                  animation: heart 8.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s infinite; }
    .pc .pc-nadeko .pc-nadeko-hand {
      width: 160px;
      height: 160px;
      position: absolute;
      top: 60px;
      right: 200px;
      -webkit-animation: hand 8.3s ease-out infinite;
              animation: hand 8.3s ease-out infinite; }
    .pc .pc-nadeko .pc-nadeko-spsite {
      width: 329px;
      height: 321px;
      position: absolute;
      bottom: 20px;
      right: 15px;
      width: image-width("pc/nademonogatari_sp.png");
      height: image-height("pc/nademonogatari_sp.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/nademonogatari_sp.png")no-repeat 0 0; }
  .pc .pc-info {
    width: 1280px;
    height: 560px;
    position: relative;
    top: 800px;
    left: 0px;
    background-image: url("../img/pc/img_book-info.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -80px, 0px; }
    .pc .pc-info .pc-info-bg {
      width: 950px;
      height: 484px;
      opacity: 0.75;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
      position: absolute;
      top: 40px;
      left: 240px;
      background-color: white; }
    .pc .pc-info .pc-info-img {
      position: absolute;
      top: 80px;
      left: 285px; }
    .pc .pc-info .pc-info-title {
      position: absolute;
      top: 90px;
      left: 540px;
      width: 369px;
      height: 182px;
      width: image-width("/logo_effect.png");
      height: image-height("/logo_effect.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/logo_effect.png")no-repeat 0 0;
      background-repeat: no-repeat; }
    .pc .pc-info .pc-info-nisioisin {
      position: absolute;
      top: 170px;
      right: 210px;
      width: 161px;
      height: 23px;
      width: image-width("pc/nisioishin.png");
      height: image-height("pc/nisioishin.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/nisioishin.png")no-repeat 0 0;
      background-repeat: no-repeat; }
    .pc .pc-info .pc-info-text {
      position: absolute;
      top: 265px;
      left: 575px;
      width: 573px;
      height: 143px;
      width: image-width("pc/nademonogatari_text.png");
      height: image-height("pc/nademonogatari_text.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/nademonogatari_text.png")no-repeat 0 0;
      background-repeat: no-repeat; }
    .pc .pc-info .pc-info-price {
      position: absolute;
      bottom: 80px;
      right: 135px;
      width: 171px;
      height: 15px;
      width: image-width("pc/price.png");
      height: image-height("pc/price.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/price.png")no-repeat 0 0;
      background-repeat: no-repeat; }
    .pc .pc-info .pc-info-vofan {
      position: absolute;
      bottom: 87px;
      left: 287px;
      width: 163px;
      height: 13px;
      width: image-width("pc/vofan.png");
      height: image-height("pc/vofan.png");
      display: block;
      overflow: hidden;
      text-indent: -9999px;
      background: url("../img/pc/vofan.png")no-repeat 0 0;
      background-repeat: no-repeat; }
  .pc footer {
    position: absolute;
    bottom: 10px;
    right: 10px; }