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

    winter

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

.season-title {
    color:#93A8AE !important;
}

.story-wrapper p.past {
    color: #665445;
}

/* ---------------------------------------
    scene01
--------------------------------------- */

.story-wrapper .scene01 {
    padding-top: 0;
}

/* ---------------------------------------
    scene02
--------------------------------------- */

.story-wrapper .scene02 {
    position: relative;
    padding-top: 0;
    background: linear-gradient(0deg, transparent 40%, #ffffff 80%), url('../img/bg_seamless.jpg') repeat;
}

.story-wrapper .scene02 .ribbon {
    float: right;
    display: block;
    shape-outside: url(../img/wtr/ribbon.png);
    shape-margin: 20px;
    shape-image-threshold: 0.5;
    width: 85px;
    height: 90px;
    margin-right: 20px;
}

.scene02:after, .scene02:before {
	content: "";
	clear: both;
	display: block;
}

/* ---------------------------------------
    scene03
--------------------------------------- */

.story-wrapper .scene03 {
    position: relative; 
    overflow: hidden;
    background: linear-gradient(0deg, #e6f4f8 50%, #fff 100%), url('../img/bg_seamless.jpg') repeat;
}

.story-wrapper .scene03 .milkpudding {
    text-align: center;
}

.story-wrapper .scene03 .milkpudding img {
   width: 25%;
}

#snow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}

/* ---------------------------------------
    scene04
--------------------------------------- */

.story-wrapper .scene04 {
    padding-bottom: 0;
    background: linear-gradient(0deg, transparent 70%, #e6f4f8 100%), url('../img/bg_seamless.jpg') repeat;
}

/* ---------------------------------------
    scene05
--------------------------------------- */

.story-wrapper .scene05 {
    position: relative;
    background: url('../img/bg_seamless.jpg') repeat;
}

/* ---------------------------------------
    scene06
--------------------------------------- */

.story-wrapper .scene06 {
    padding-top: 0;
}

.story-wrapper .scene06 p {
    color: #7C7C7C;
}

.story-wrapper .scene06 .guidebook {
    text-align: right;
}

.story-wrapper .scene06 .guidebook img {
    width: 50%;
}

.scene02:after, .scene06:before {
	content: "";
	clear: both;
	display: block;
}

/* ---------------------------------------
    scene07
--------------------------------------- */

.story-wrapper .scene07 {
    padding-bottom: 0;
    background: linear-gradient(0deg, transparent 50%, #ffffff 70%), url('../img/bg_seamless.jpg') repeat;
}

/* ---------------------------------------
    scene08
--------------------------------------- */

.story-wrapper .scene08 {
    background: linear-gradient(0deg, #ffffff 10%, transparent 50%), url('../img/bg_seamless.jpg') repeat;
}

/* ---------------------------------------
    scene09
--------------------------------------- */

.story-wrapper .scene09 {
    margin-top: 80px;
    padding-bottom: 0;
}

.story-wrapper .scene09 .phone {
    text-align: right;
}

.story-wrapper .scene09 .phone img {
    width: 40%;
}

@keyframes vibrate {
  0%   { transform: translate(0); }
  10%  { transform: translate(-1px, 1px); }
  20%  { transform: translate(1px, -1px); }
  30%  { transform: translate(-1px, -1px); }
  40%  { transform: translate(1px, 1px); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -1px); }
  70%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  90%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0); }
}

.vibrate {
  animation: vibrate 0.2s linear infinite;
}

/* ---------------------------------------
    scene10
--------------------------------------- */

.story-wrapper .scene10 {
    display:flex;
    padding: 0;
    justify-content: space-between;
    background: #E6EEEF;
}

.story-wrapper .scene10 .text {
    padding: 40px 0;
    margin-right: 0;
}

.story-wrapper .scene10 .scene-img {
    position: relative;
    width: 140px;
    height: 266px;
}

.story-wrapper .scene10 .scene-img img {
    position: absolute;
    width: 100%;
    top:0;
    left:0;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.story-wrapper .scene10 .scene-img .show {
    opacity: 1;
}