@charset 'utf-8';

/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

*,
:after,
:before {
  background-repeat: no-repeat;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden],
template {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

input {
  border-radius: 0;
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

[type=number] {
  width: auto;
}

[type=search] {
  -webkit-appearance: textfield;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

button,
select {
  text-transform: none;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

img {
  border-style: none;
}

progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

/*
 *  Remodal - v1.1.1
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}

/*
 *  Remodal - v1.1.1
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */

/* Default theme styles for the background */

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* Default theme styles of the overlay */

.remodal-overlay {
  background: rgba(43, 46, 56, 0.9);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */

.remodal-wrapper {
  padding: 10px 10px 0;
}

/* Default theme styles of the modal dialog */

.remodal {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 35px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #2b2e38;
  background: #fff;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */

.remodal-close {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;
  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent;
}

.remodal-close:hover,
.remodal-close:focus {
  color: #2b2e38;
}

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px;
  line-height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */

.remodal-confirm,
.remodal-cancel {
  font: inherit;
  display: inline-block;
  overflow: visible;
  min-width: 110px;
  margin: 0;
  padding: 12px 0;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #66bb6a;
}

.remodal-cancel {
  color: #fff;
  background: #e57373;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* Keyframes
   ========================================================================== */

@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Media queries
   ========================================================================== */

@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
}

/* IE8
   ========================================================================== */

.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}

.lt-ie9 .remodal {
  width: 700px;
}

@charset 'utf-8';

/* var */

@font-face {
  font-family: 'DINMedium';
  src: url('../fonts/DINMedium.ttf') format('truetype'), url('../fonts/DINMedium.woff') format('woff'), url('../fonts/DINMedium.eot') format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

from,
20%,
40%,
60%,
80%,
to {
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

header,
#contents-intro,
section .inner,
.summary .inner,
#report {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

#story1 .figure .score,
#story7 ul li span,
#story7 ul li em {
  font-family: "DINMedium", Helvetica, Arial, sans-serif;
}

.gn-margin1 {
  margin-bottom: 40px;
}

.gn-margin2,
#truth10 h2 {
  margin-bottom: 60px;
}

.sp-elem {
  display: none;
}

@media (max-width: 767px) {
  header,
  #contents-intro,
  section .inner,
  .summary .inner,
  #report {
    width: 100%;
    margin: 0 auto;
  }
}

/*--------------------------------------------------
Base setting
--------------------------------------------------*/

html {
  font-size: 62.5%;
}

body,
select,
input,
textarea {
  font-size: 100%;
  font: 1.6rem Helvetica, Arial, Tahoma, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, Arial, "メイリオ", Meiryo, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.625;
  color: #333;
  background-color: #fff;
  -webkit-text-size-adjust: none;
}

a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 255, 0.2) !important;
}

a:link {
  -webkit-tap-highlight-color: #333;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #333;
  text-decoration: none;
}

caption {
  text-align: left;
}

ins {
  background-color: #fcd700;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #fcd700;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

input {
  padding: 0 2px;
}

textarea {
  padding: 2px;
  resize: vertical;
  width: 98%;
}

i {
  font-style: normal;
}

em {
  font-style: normal;
}

ul li {
  list-style-type: none;
}

img {
  vertical-align: top;
}

@charset 'utf-8';

/*--------------------------------------------------
contents
--------------------------------------------------*/

header {
  height: 80px;
}

header p {
  padding: 12px 0 0 2px;
}

.snsarea {
  margin-top: 20px;
}

.snsarea a {
  display: inline-block;
  vertical-align: top;
}

.snsarea a img {
  width: 40px;
}

.snsarea iframe {
  margin: 0 10px;
  display: inline-block;
  vertical-align: top;
}

#keyvisual {
  background: url(../images/kv_bg.jpg) 0 0 no-repeat;
  background-size: cover;
  text-align: center;
  min-height: 496px;
}

#keyvisual h1 {
  opacity: 0;
}

#keyvisual p {
  color: #fff;
  font-size: 2.0rem;
  padding: 75px 0 30px;
  opacity: 0.9;
}

#contents-intro {
  position: relative;
  padding: 150px 150px 60px;
}

#contents-intro .scroll {
  position: absolute;
  top: 33px;
  left: 531px;
  text-align: center;
}

#contents-intro .scroll i {
  font-size: 11px;
  padding-bottom: 5px;
  color: #005798;
}

#contents-intro .scroll span {
  display: block;
  margin: 0 auto;
  width: 38px;
  height: 63px;
  background: url(../images/scroll.png) 0 50% no-repeat;
  -webkit-animation: scroll_icon 2s ease 1s infinite;
  animation: scroll_icon 2s ease 1s infinite;
}

#contents-intro .lump {
  overflow: hidden;
}

#contents-intro .lump .lumpimg {
  float: left;
  margin: 10px 30px 0 0;
}

#contents-intro .lump .lumpend {
  overflow: hidden;
}

#contents-intro .lump .lumpend p {
  text-align: left;
  margin-top: 10px;
}

#contents-intro .snsarea {
  position: absolute;
  margin: 0;
  top: 20px;
  right: 0;
}

section {
  position: relative;
  text-align: center;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px 0;
}

section .ask {
  margin: 20px 0;
  font-size: 2.0rem;
  opacity: 0;
}

section .inner h2 {
  font-size: 3.0rem;
  line-height: 1.4;
  opacity: 0;
}

section .inner h2 span {
  display: block;
  width: 124px;
  height: 90px;
  background: url(../images/section_number.png) 0 0 no-repeat;
  margin: 0 auto 30px;
  text-indent: -9999px;
}

section .detail {
  margin-top: 20px;
}

section .detail a {
  display: block;
  margin: 0 auto;
  max-width: 240px;
  text-decoration: none;
  border-radius: 30px;
  padding: 10px 38px;
  color: #fff;
  -webkit-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 2px inset;
  box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 2px inset;
  -webkit-transition: all 300ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  transition: all 300ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

section .detail a:hover {
  color: rgba(51, 51, 51, 0.85);
  -webkit-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
  box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
}

#story2 .detail a,
#story8 .detail a,
#story10 .detail a {
  color: #000;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 0px 0px 2px inset;
  box-shadow: rgba(0, 0, 0, 1) 0 0px 0px 2px inset;
}

#story2 .detail a:hover,
#story8 .detail a:hover,
#story10 .detail a:hover {
  color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 0px 0px 40px inset;
  box-shadow: rgba(0, 0, 0, 1) 0 0px 0px 40px inset;
}

#story1 h2 span {
  background-position: 0 0;
}

#story2 h2 span {
  background-position: 0 -90px;
}

#story3 h2 span {
  background-position: 0 -180px;
}

#story4 h2 span {
  background-position: 0 -270px;
}

#story5 h2 span {
  background-position: 0 -360px;
}

#story6 h2 span {
  background-position: 0 -450px;
}

#story7 h2 span {
  background-position: 0 -540px;
}

#story8 h2 span {
  background-position: 0 -630px;
}

#story9 h2 span {
  background-position: 0 -720px;
}

#story10 h2 span {
  background-position: 0 -810px;
}

#story1 {
  background-image: url(../images/story1_bg.jpg);
  background-attachment: fixed;
  color: #fff;
}

#story1 .ask {
  font-size: 100%;
}

#story1 .figure {
  opacity: 0;
  padding: 60px 0 0;
}

#story1 .figure > img {
  display: inline-block;
  width: 106px;
  margin-right: 40px;
}

#story1 .figure .an-graph {
  display: inline-block;
  width: 188px;
  height: 188px;
  background: url(../images/story1_2.png) 0 0 no-repeat;
}

#story1 .figure .score {
  position: absolute;
  top: 250px;
  left: 640px;
  font-size: 6rem;
  line-height: 1;
  opacity: 0;
}

#story1 .figure .score span {
  width: 170px;
  font-size: 9.8rem;
  line-height: 1;
  letter-spacing: -0.5rem;
}

#story2 .ask {
  color: #005798;
}

#story2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 0 50px;
}

#story2 ul li {
  opacity: 0;
  width: 170px;
  position: relative;
  text-align: center;
}

#story2 ul li img {
  display: block;
  margin: 0 auto;
}

#story2 ul li img:nth-of-type(1) {
  height: 200px;
  margin-bottom: 20px;
}

#story2 ul li img:nth-of-type(2) {
  width: 90px;
}

#story2 ul li em {
  display: block;
  margin-top: 10px;
  color: #005798;
  font-size: 1.4rem;
  line-height: 1.3;
}

#story2 .waiting {
  position: absolute;
  bottom: 290px;
  left: 0;
  display: block;
}

#story2 .waiting:nth-of-type(1) {
  left: 280px;
}

#story2 .waiting:nth-of-type(2) {
  left: 530px;
}

#story2 .waiting:nth-of-type(3) {
  left: 777px;
}

#story2 .waiting span {
  display: block;
  position: relative;
  width: 90px;
  height: 15px;
  margin: auto;
}

#story2 .waiting span i {
  display: block;
  position: absolute;
  top: 0px;
  background-color: #005798;
  width: 10px;
  height: 10px;
  -webkit-transform: scale(.3);
  transform: scale(.3);
  border-radius: 19px;
  opacity: 0;
}

#story3 {
  background-image: url(../images/story3_bg.jpg);
  background-attachment: fixed;
  color: #fff;
}

#story3 ul {
  opacity: 0;
  position: relative;
  background: url(../images/story3_0.png) 50% 42% no-repeat;
  background-size: 87px 150px;
  min-height: 400px;
}

#story3 ul li {
  position: absolute;
}

#story3 ul li:nth-of-type(1) {
  left: 219px;
  top: 21px;
}

#story3 ul li:nth-of-type(2) {
  left: 601px;
  top: 112px;
}

#story3 ul li:nth-of-type(3) {
  left: 250px;
  top: 280px;
}

#story3 ul li:nth-of-type(4) {
  left: 544px;
  top: 0px;
}

#story3 ul li:nth-of-type(5) {
  left: 173px;
  top: 156px;
}

#story3 ul li:nth-of-type(6) {
  left: 598px;
  top: 252px;
}

#story4 {
  background-color: #005798;
  color: #fff;
  padding-bottom: 120px;
}

#story4 .figure {
  opacity: 0;
}

#story4 ul {
  display: none;
}

#story4 .detail {
  margin-top: -10px;
}

#story4 .picts {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 126px;
  overflow: hidden;
}

#story4 .picts .pictsinner {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

#story4 .picts i {
  display: block;
  position: absolute;
  width: 97px;
  height: 126px;
  background: url(../images/story4_pict.png) 0 0 no-repeat;
}

#story4 .picts i:nth-of-type(1) {
  left: -250px;
  top: 47px;
}

#story4 .picts i:nth-of-type(2) {
  left: -107px;
  top: 47px;
}

#story4 .picts i:nth-of-type(3) {
  left: 40px;
  top: 30px;
}

#story4 .picts i:nth-of-type(4) {
  left: 218px;
  top: 49px;
}

#story4 .picts i:nth-of-type(5) {
  left: 347px;
  top: 57px;
}

#story4 .picts i:nth-of-type(6) {
  left: 458px;
  top: 49px;
}

#story4 .picts i:nth-of-type(7) {
  left: 570px;
  top: 64px;
}

#story4 .picts i:nth-of-type(8) {
  left: 684px;
  top: 39px;
}

#story4 .picts i:nth-of-type(9) {
  left: 786px;
  top: 49px;
}

#story4 .picts i:nth-of-type(10) {
  left: 907px;
  top: 25px;
}

#story4 .picts i:nth-of-type(11) {
  left: 1032px;
  top: 50px;
}

#story4 .picts i:nth-of-type(12) {
  left: 1170px;
  top: 25px;
}

#story4 .picts i:nth-of-type(13) {
  left: 1243px;
  top: 49px;
}

#story5 {
  background-image: url(../images/story5_bg1.jpg);
  /*background-attachment: fixed;*/
  color: #fff;
  overflow: hidden;
}

#story5 [class^="bg"] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  background-size: cover !important;
}

#story5 .bg1 {
  background: url(../images/story5_bg1.jpg) 0 0 no-repeat;
}

#story5 .bg2 {
  background: url(../images/story5_bg2.jpg) 0 0 no-repeat;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

#story5 .bg3 {
  background: url(../images/story5_bg3.jpg) 50% 0 no-repeat;
  opacity: 0;
}

#story5 .result {
  position: relative;
}

#story5 #clock {
  background: url(../images/story5_clock.png) 0 0 no-repeat;
  background-size: 185px 185px;
  width: 185px;
  height: 185px;
  margin: 0 auto;
  position: relative;
}

#story5 #clock span {
  display: block;
  position: absolute;
  border-radius: 4px;
  background: #fff;
  right: calc(50% - 2px);
  top: calc(50% - 2px);
  height: 4px;
  -webkit-transform-origin: calc(100% - 2px) center;
  transform-origin: calc(100% - 2px) center;/* hour */
}

#story5 #clock span:nth-of-type(1) {
  width: 38%;
}

/* minute */

#story5 #clock span:nth-of-type(2) {
  width: 25%;
}

#story5 .graph {
  position: absolute;
  width: 400px;
  opacity: 0;
  top: 0;
  left: 456px;
}

#story5 .graph img {
  max-width: 100%;
}

#story6 {
  background: #005798 url(../images/story6_bg1.gif) 50% 0 repeat-y;
  color: #fff;
}

#story6 .figure {
  width: 720px;
  height: 656px;
  position: relative;
  background: url(../images/story6_bg2.png) 50% 10px no-repeat;
  margin: 40px auto 0;
  padding-top: 68px;
  opacity: 0;
  overflow: hidden;
}

#story6 .figure > div {
  width: 126px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
}

#story6 .figure > div:nth-of-type(1) {
  height: 136px;
  background-image: url(../images/story6_1.png);
}

#story6 .figure > div:nth-of-type(2) {
  height: 189px;
  background-image: url(../images/story6_2.png);
}

#story6 .figure > div:nth-of-type(3) {
  height: 114px;
  background-image: url(../images/story6_3.png);
}

#story6 .figure > div:nth-of-type(4) {
  height: 93px;
  background-image: url(../images/story6_4.png);
}

#story6 .figure > div:nth-of-type(5) {
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 666px;
  padding-top: 10px;
  background-image: url(../images/story6_5.png);
}

#story6 .figure p {
  position: absolute;
}

#story6 .figure p:nth-of-type(1) {
  left: 106px;
  top: 106px;
}

#story6 .figure p:nth-of-type(2) {
  left: 438px;
  top: 106px;
}

#story6 .figure p:nth-of-type(3) {
  left: 84px;
  top: 245px;
}

#story6 .figure p:nth-of-type(4) {
  left: 438px;
  top: 245px;
}

#story6 .figure p:nth-of-type(5) {
  left: 51px;
  top: 395px;
}

#story6 .figure p:nth-of-type(6) {
  left: 438px;
  top: 395px;
}

#story6 .figure p:nth-of-type(7) {
  left: 106px;
  top: 514px;
}

#story6 .figure p:nth-of-type(8) {
  left: 438px;
  top: 514px;
}

#story7 {
  background-image: url(../images/story7_bg.jpg);
  background-attachment: fixed;
  color: #fff;
}

#story7 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 60px;
}

#story7 ul li {
  opacity: 0;
  width: 140px;
  margin: 0 40px;
  min-height: 492px;
  position: relative;
  text-align: center;
}

#story7 ul li > div:nth-of-type(1) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

#story7 ul li > div:nth-of-type(2) {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

#story7 ul li > div:nth-of-type(3) {
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

#story7 ul li > div:nth-of-type(4) {
  -webkit-animation-delay: 4.8s;
  animation-delay: 4.8s;
}

#story7 ul li > div:nth-of-type(5) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

#story7 ul li:nth-of-type(1) {
  background: url(../images/story7_1.png) 0 330px no-repeat;
}

#story7 ul li:nth-of-type(2) {
  background: url(../images/story7_2.png) 0 330px no-repeat;
}

#story7 ul li:nth-of-type(3) {
  background: url(../images/story7_3.png) 0 330px no-repeat;
}

#story7 ul li img {
  display: block;
  margin-left: -52px;
}

#story7 ul li span,
#story7 ul li em {
  display: block;
  position: absolute;
  line-height: 1.3;
}

#story7 ul li span::after,
#story7 ul li em::after {
  content: '%';
  font-size: 1.8rem;
  font-weight: 300;
}

#story7 ul li span {
  left: 10px;
  font-size: 2.8rem;
}

#story7 ul li em {
  left: 70px;
  top: 52px;
  font-size: 3.6rem;
}

#story7 ul li:nth-of-type(1) span {
  top: 190px;
}

#story7 ul li:nth-of-type(2) span {
  top: 148px;
  left: 5px;
}

#story7 ul li:nth-of-type(3) span {
  top: 110px;
  left: 5px;
}

#story7 ul li i {
  display: block;
  position: absolute;
  width: 40px;
  height: 100px;
  background-color: #fff;
}

#story7 ul li i:nth-of-type(1) {
  left: 15px;
  bottom: 162px;
}

#story7 ul li i:nth-of-type(2) {
  right: 15px;
  bottom: 162px;
  height: 230px;
}

#story7 ul li:nth-of-type(1) i:nth-of-type(1) {
  height: 98px;
}

#story7 ul li:nth-of-type(2) i:nth-of-type(1) {
  height: 142px;
}

#story7 ul li:nth-of-type(3) i:nth-of-type(1) {
  height: 183px;
}

#story8 .channel {
  width: 100%;
  height: 568px;
  overflow: hidden;
  position: relative;
  background-color: #d8e9f6;
  margin-top: 60px;
}

#story8 .channel p {
  position: absolute;
  color: #005798;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}

#story8 .channel .legacy {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../images/story8_pict.png) 0 325px no-repeat;
}

#story8 .channel .legacy p {
  left: 56px;
  top: 74px;
}

#story8 .channel .legacy img {
  position: absolute;
  left: 40px;
  bottom: 14px;
}

#story8 .channel .open {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../images/story8_cloud.png) 100% 0 no-repeat;
}

#story8 .channel .open p {
  right: 34px;
  top: 74px;
  opacity: 0;
}

#story8 .channel .open .picttable {
  width: 100%;
  height: 100%;
  background: url(../images/story8_pict.png) 100% 195px no-repeat;
  -webkit-transform: translateY(130px);
  transform: translateY(130px);
}

#story8 .channel .open .picttable img {
  position: absolute;
}

#story8 .channel .open .picttable img:nth-of-type(1) {
  right: 56px;
  bottom: 143px;
}

#story8 .channel .open .picttable img:nth-of-type(2) {
  right: 56px;
  bottom: 16px;
}

#story8 .channel .open .picttable img:nth-of-type(3) {
  right: 6px;
  bottom: 0px;
}

#story8 .channel .open .picttable .twincle {
  width: 506px;
  height: 146px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/*opacity: 0;*/

#story8 .channel .open .picttable .twincle i {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: url(../images/story8_twincle.png) 0 0;
  background-size: cover;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(1) {
  right: 463px;
  bottom: 104px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(2) {
  right: 413px;
  bottom: 121px;
  width: 15px;
  height: 15px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(3) {
  right: 398px;
  bottom: 106px;
  width: 20px;
  height: 20px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(4) {
  right: 306px;
  bottom: 12px;
  width: 22px;
  height: 22px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(5) {
  right: 211px;
  bottom: 107px;
  width: 33px;
  height: 33px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(6) {
  right: 26px;
  bottom: 109px;
  width: 21px;
  height: 21px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(7) {
  right: 38px;
  bottom: 92px;
  width: 13px;
  height: 13px;
}

#story8 .channel .open .picttable .twincle i:nth-of-type(8) {
  right: 0px;
  bottom: 33px;
}

#story9 {
  background-color: #005798;
  color: #fff;
}

#story9 .channelwrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 60px;
}

#story9 .channelwrap .channel {
  opacity: 0;
  width: 549px;
  height: 214px;
  text-align: center;
  padding: 28px 30px 0;
  position: relative;
  overflow: hidden;
}

#story9 .channelwrap .channel > img {
  position: absolute;
  top: 0;
  left: 0;
}

#story9 .channelwrap .channel h3 {
  font-size: 2.0rem;
  position: relative;
}

#story9 .channelwrap .channel em {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  margin: 0 auto;
  font-size: 3.2rem;
  line-height: 1.3;
}

#story9 .channelwrap .channel em span {
  font-size: 3rem;
}

#story9 .channelwrap .channel p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0 auto;
}

#story9 .channelwrap .channel p img {
  display: block;
  margin: 25px auto 0;
}

#story9 .channelwrap .channel:nth-of-type(1) {
  width: 100%;
  height: 309px;
}

#story9 .channelwrap .channel:nth-of-type(1) p {
  bottom: 122px;
}

#story9 .channelwrap .channel:not(:nth-of-type(1)) {
  margin-top: 2px;
  height: 214px;
}

#story9 .channelwrap .channel:nth-of-type(even) {
  margin-right: 2px;
}

#story10 .figure {
  padding: 60px 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: left;
  opacity: 0;
}

#story10 .figure > div {
  width: 447px;
  margin-top: 100px;
}

#story10 .figure > div:nth-of-type(1),
#story10 .figure > div:nth-of-type(2) {
  margin-top: 0;
}

#story10 .figure > div:nth-of-type(even) {
  margin-right: 5px;
}

#story10 .figure [class*="service"] {
  overflow: hidden;
}

#story10 .figure [class*="service"] h3 {
  float: left;
}

#story10 .figure [class*="service"] p {
  overflow: hidden;
  text-indent: -9999px;
}

#story10 .figure [class*="service"] p:nth-of-type(1) {
  height: 62px;
  margin-bottom: 25px;
}

#story10 .figure [class*="service"] p:nth-of-type(2) {
  height: 52px;
}

#story10 .figure .service1 p:nth-of-type(1) {
  background: url(../images/story10_1_1.png) no-repeat;
}

#story10 .figure .service1 p:nth-of-type(2) {
  background: url(../images/story10_1_2.png) no-repeat;
}

#story10 .figure .service2 p:nth-of-type(1) {
  background: url(../images/story10_2_1.png) no-repeat;
}

#story10 .figure .service2 p:nth-of-type(2) {
  background: url(../images/story10_2_2.png) no-repeat;
}

#story10 .figure .service3 p:nth-of-type(1) {
  background: url(../images/story10_3_1.png) no-repeat;
}

#story10 .figure .service3 p:nth-of-type(2) {
  background: url(../images/story10_3_2.png) no-repeat;
}

#story10 .figure .service4 p:nth-of-type(1) {
  background: url(../images/story10_4_1.png) no-repeat;
}

#story10 .figure .service4 p:nth-of-type(2) {
  background: url(../images/story10_4_2.png) no-repeat;
}

#story10 .figure .service5 p:nth-of-type(1) {
  background: url(../images/story10_5_1.png) no-repeat;
}

#story10 .figure .service5 p:nth-of-type(2) {
  background: url(../images/story10_5_2.png) no-repeat;
}

#story10 .note {
  margin: 40px 125px 0;
  text-align: left;
  text-indent: -2rem;
  padding-left: 2rem;
  font-size: 1.4rem;
}

/*--------------------------------------------------
animation
--------------------------------------------------*/

#keyvisual h1 {
  -webkit-animation: appear 2.5s ease .5s both;
  animation: appear 2.5s ease .5s both;
}

section[data-action="true"] h2 {
  -webkit-animation: section_title 0.7s ease 0s both;
  animation: section_title 0.7s ease 0s both;
}

section[data-action="true"] .ask {
  -webkit-animation: letter 1s ease .7s both;
  animation: letter 1s ease .7s both;
}

section[data-action="true"]#story1 .figure {
  -webkit-animation: appear 1s ease .7s both;
  animation: appear 1s ease .7s both;
}

section[data-action="true"]#story1 .ask {
  -webkit-animation: appear 1s ease 2s both;
  animation: appear 1s ease 2s both;
}

section[data-action="true"]#story1 .an-graph {
  -webkit-animation: st1_meter 2s steps(30) 1.5s both;
  animation: st1_meter 2s steps(30) 1.5s both;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

section[data-action="true"]#story1 .score {
  opacity: 0;
  -webkit-transition: all .8s;
  transition: all .8s;
}

section[data-action="true"]#story1 .score.finish {
  opacity: 1;
}

section[data-action="true"]#story1 .cu-elem {
}

section[data-action="true"]#story2 li {
  -webkit-animation-name: st2_list;
  animation-name: st2_list;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

section[data-action="true"]#story2 li:nth-of-type(1) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

section[data-action="true"]#story2 li:nth-of-type(2) {
  -webkit-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

section[data-action="true"]#story2 li:nth-of-type(3) {
  -webkit-animation-delay: 3.3s;
  animation-delay: 3.3s;
}

section[data-action="true"]#story2 li:nth-of-type(4) {
  -webkit-animation-delay: 4.3s;
  animation-delay: 4.3s;
}

section[data-action="true"]#story2 .waiting.act {
  /*opacity: 0;*/
  /*animation-name:wait_act;*/
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
}

section[data-action="true"]#story2 .waiting.act:nth-of-type(1) {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

section[data-action="true"]#story2 .waiting.act:nth-of-type(2) {
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}

section[data-action="true"]#story2 .waiting.act:nth-of-type(3) {
  -webkit-animation-delay: 4.2s;
  animation-delay: 4.2s;
}

section[data-action="true"]#story2 .waiting.act span i {
  -webkit-animation-name: wait_bounce;
  animation-name: wait_bounce;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
}

section[data-action="true"]#story2 .waiting.act span i:nth-of-type(1) {
  left: 0;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

section[data-action="true"]#story2 .waiting.act span i:nth-of-type(2) {
  left: 20px;
  -webkit-animation-delay: 2.35s;
  animation-delay: 2.35s;
}

section[data-action="true"]#story2 .waiting.act span i:nth-of-type(3) {
  left: 40px;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

section[data-action="true"]#story3 ul {
  -webkit-animation: appear 2s ease 0.7s both;
  animation: appear 2s ease 0.7s both;
}

section[data-action="true"]#story3 ul li {
  opacity: 0;
  -webkit-animation: bounceIn .75s linear 1.75s both;
  animation: bounceIn .75s linear 1.75s both;
}

section[data-action="true"]#story3 ul li:nth-of-type(1) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

section[data-action="true"]#story3 ul li:nth-of-type(2) {
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
}

section[data-action="true"]#story3 ul li:nth-of-type(3) {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

section[data-action="true"]#story3 ul li:nth-of-type(4) {
  -webkit-animation-delay: 2.75s;
  animation-delay: 2.75s;
}

section[data-action="true"]#story3 ul li:nth-of-type(5) {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

section[data-action="true"]#story3 ul li:nth-of-type(6) {
  -webkit-animation-delay: 3.25s;
  animation-delay: 3.25s;
}

section[data-action="true"]#story4 .figure {
  -webkit-animation: st4_fig .5s ease 2.5s both;
  animation: st4_fig .5s ease 2.5s both;
}

/*.detail{animation:appear 1s ease 3.5s both;}*/

section[data-action="true"]#story4 .picts {
  -webkit-animation: appear 1s ease 1.5s both;
  animation: appear 1s ease 1.5s both;
}

section[data-action="true"]#story4 .picts i.up {
  -webkit-animation: st4_pict .7s ease 0s both;
  animation: st4_pict .7s ease 0s both;
}

section[data-action="true"]#story5 #clock {
  opacity: 0;
  -webkit-animation: appear 1s ease .7s both;
  animation: appear 1s ease .7s both;
  -webkit-animation: st5_clock_disappear 2s ease 5.5s both;
  animation: st5_clock_disappear 2s ease 5.5s both;
}

section[data-action="true"]#story5 #clock span:nth-of-type(1) {
  -webkit-animation: clock_m 3s ease 2s both;
  animation: clock_m 3s ease 2s both;
}

section[data-action="true"]#story5 #clock span:nth-of-type(2) {
  -webkit-animation: clock_h 3s ease 2s both;
  animation: clock_h 3s ease 2s both;
}

section[data-action="true"]#story5 .graph {
  -webkit-animation: st5_graph_appear 1s ease-out 5.5s both;
  animation: st5_graph_appear 1s ease-out 5.5s both;
}

section[data-action="true"]#story5 .bg1 {
  -webkit-animation: st5_bg1 3s ease-out 2s both;
  animation: st5_bg1 3s ease-out 2s both;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

section[data-action="true"]#story5 .bg2 {
  -webkit-animation: st5_bg2 3s ease-out 2s both;
  animation: st5_bg2 3s ease-out 2s both;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

section[data-action="true"]#story5 .bg3 {
  -webkit-animation: appear 1.5s linear 5.5s both;
  animation: appear 1.5s linear 5.5s both;
  opacity: 0;
}

section[data-action="true"]#story6 .figure {
  -webkit-animation: appear 1s ease both;
  animation: appear 1s ease both;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(n) {
  -webkit-animation: st6_fig .7s ease-out 0s both;
  animation: st6_fig .7s ease-out 0s both;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(1) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(2) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(3) {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(4) {
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
}

section[data-action="true"]#story6 .figure > div:nth-of-type(5) {
  -webkit-animation: st6_fig_last .5s ease 4.5s both;
  animation: st6_fig_last .5s ease 4.5s both;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

section[data-action="true"]#story6 .figure p {
  opacity: 0;
}

section[data-action="true"]#story6 .figure p:nth-of-type(odd) {
  -webkit-animation: st6_txt_odd .7s ease-out 0s both;
  animation: st6_txt_odd .7s ease-out 0s both;
}

section[data-action="true"]#story6 .figure p:nth-of-type(even) {
  -webkit-animation: st6_txt_even .7s ease-out 0s both;
  animation: st6_txt_even .7s ease-out 0s both;
}

section[data-action="true"]#story6 .figure p:nth-of-type(1) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(2) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(3) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(4) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(5) {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(6) {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(7) {
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
}

section[data-action="true"]#story6 .figure p:nth-of-type(8) {
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
}

section[data-action="true"]#story7 ul li {
  -webkit-animation: appear 1s ease both;
  animation: appear 1s ease both;
}

section[data-action="true"]#story7 ul li i {
  -webkit-animation: st7_graph .6s linear both;
  animation: st7_graph .6s linear both;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

section[data-action="true"]#story7 ul li img {
  -webkit-animation: bounceIn .5s ease-out both;
  animation: bounceIn .5s ease-out both;
}

section[data-action="true"]#story7 ul li em,
section[data-action="true"]#story7 ul li span {
  -webkit-animation: appear .5s linear both;
  animation: appear .5s linear both;
}

section[data-action="true"]#story7 ul li:nth-of-type(1) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

section[data-action="true"]#story7 ul li:nth-of-type(1) i {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

section[data-action="true"]#story7 ul li:nth-of-type(1) em,
section[data-action="true"]#story7 ul li:nth-of-type(1) span {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

section[data-action="true"]#story7 ul li:nth-of-type(1) img {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

section[data-action="true"]#story7 ul li:nth-of-type(2) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

section[data-action="true"]#story7 ul li:nth-of-type(2) i {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

section[data-action="true"]#story7 ul li:nth-of-type(2) em,
section[data-action="true"]#story7 ul li:nth-of-type(2) span {
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s;
}

section[data-action="true"]#story7 ul li:nth-of-type(2) img {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

section[data-action="true"]#story7 ul li:nth-of-type(3) {
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

section[data-action="true"]#story7 ul li:nth-of-type(3) i {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

section[data-action="true"]#story7 ul li:nth-of-type(3) em,
section[data-action="true"]#story7 ul li:nth-of-type(3) span {
  -webkit-animation-delay: 4.2s;
  animation-delay: 4.2s;
}

section[data-action="true"]#story7 ul li:nth-of-type(3) img {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

section[data-action="true"]#story8 .open .picttable {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: st8_pict .5s ease 1.5s both;
  animation: st8_pict .5s ease 1.5s both;
}

section[data-action="true"]#story8 .open .picttable img:nth-of-type(2) {
  -webkit-animation: st8_open .8s ease 2.5s both;
  animation: st8_open .8s ease 2.5s both;
}

section[data-action="true"]#story8 .open .picttable img:nth-of-type(3) {
  -webkit-animation: st8_open 1.5s ease 2.5s both;
  animation: st8_open 1.5s ease 2.5s both;
}

section[data-action="true"]#story8 .open .picttable .twincle {
  -webkit-animation: st8_open .8s ease 2.5s both;
  animation: st8_open .8s ease 2.5s both;
}

section[data-action="true"]#story8 .open .picttable .twincle i {
  -webkit-animation: st8_tw 1.5s linear infinite;
  animation: st8_tw 1.5s linear infinite;
}

section[data-action="true"]#story8 .open p {
  -webkit-animation: zoomin 1s ease 3.5s both;
  animation: zoomin 1s ease 3.5s both;
}

section[data-action="true"]#story9 .channel {
  -webkit-animation: appear 1s ease both;
  animation: appear 1s ease both;
}

section[data-action="true"]#story9 .channel:nth-of-type(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

section[data-action="true"]#story9 .channel:nth-of-type(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

section[data-action="true"]#story9 .channel:nth-of-type(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

section[data-action="true"]#story9 .channel:nth-of-type(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

section[data-action="true"]#story9 .channel:nth-of-type(5) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

section[data-action="true"]#story9 .channel > img {
  -webkit-animation: st9_blur 2s ease 3s both;
  animation: st9_blur 2s ease 3s both;
}

section[data-action="true"]#story9 .channel h3,
section[data-action="true"]#story9 .channel p,
section[data-action="true"]#story9 .channel em {
  -webkit-animation: appear 1s ease 3.5s both;
  animation: appear 1s ease 3.5s both;
}

section[data-action="true"]#story10 .figure {
  -webkit-animation: appear 1s ease both;
  animation: appear 1s ease both;
}

section[data-action="true"]#story10 .figure p:nth-of-type(5) {
  background-color: #000;
}

section[data-action="true"]#story10 .figure [class*="service"] p {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

section[data-action="true"]#story10 .figure [class*="service"] p:nth-of-type(1) {
  -webkit-animation: st10_fig .5s both;
  animation: st10_fig .5s both;
}

section[data-action="true"]#story10 .figure [class*="service"] p:nth-of-type(2) {
  -webkit-animation: st10_fig .2s both;
  animation: st10_fig .2s both;
}

section[data-action="true"]#story10 .figure .service1 p:nth-of-type(1) {
  -webkit-animation-timing-function: steps(6);
  animation-timing-function: steps(6);
  -webkit-animation-name: st10_p_step6;
  animation-name: st10_p_step6;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

section[data-action="true"]#story10 .figure .service1 p:nth-of-type(2) {
  -webkit-animation-timing-function: steps(3);
  animation-timing-function: steps(3);
  -webkit-animation-name: st10_c_step3;
  animation-name: st10_c_step3;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

section[data-action="true"]#story10 .figure .service2 p:nth-of-type(1) {
  -webkit-animation-timing-function: steps(6);
  animation-timing-function: steps(6);
  -webkit-animation-name: st10_p_step6;
  animation-name: st10_p_step6;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

section[data-action="true"]#story10 .figure .service2 p:nth-of-type(2) {
  -webkit-animation-timing-function: steps(2);
  animation-timing-function: steps(2);
  -webkit-animation-name: st10_c_step2;
  animation-name: st10_c_step2;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

section[data-action="true"]#story10 .figure .service3 p:nth-of-type(1) {
  -webkit-animation-timing-function: steps(4);
  animation-timing-function: steps(4);
  -webkit-animation-name: st10_p_step4;
  animation-name: st10_p_step4;
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

section[data-action="true"]#story10 .figure .service3 p:nth-of-type(2) {
  -webkit-animation-timing-function: steps(2);
  animation-timing-function: steps(2);
  -webkit-animation-name: st10_c_step2;
  animation-name: st10_c_step2;
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

section[data-action="true"]#story10 .figure .service4 p:nth-of-type(1) {
  -webkit-animation-timing-function: steps(5);
  animation-timing-function: steps(5);
  -webkit-animation-name: st10_p_step5;
  animation-name: st10_p_step5;
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

section[data-action="true"]#story10 .figure .service4 p:nth-of-type(2) {
  -webkit-animation-timing-function: steps(2);
  animation-timing-function: steps(2);
  -webkit-animation-name: st10_c_step2;
  animation-name: st10_c_step2;
  -webkit-animation-delay: 3.1s;
  animation-delay: 3.1s;
}

section[data-action="true"]#story10 .figure .service5 p:nth-of-type(1) {
  -webkit-animation-timing-function: steps(5);
  animation-timing-function: steps(5);
  -webkit-animation-name: st10_p_step5;
  animation-name: st10_p_step5;
  -webkit-animation-delay: 3.3s;
  animation-delay: 3.3s;
}

section[data-action="true"]#story10 .figure .service5 p:nth-of-type(2) {
  -webkit-animation-timing-function: steps(2);
  animation-timing-function: steps(2);
  -webkit-animation-name: st10_c_step2;
  animation-name: st10_c_step2;
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes letter {
  0% {
    opacity: 0;
    letter-spacing: .5rem;
  }

  100% {
    opacity: 1;
    letter-spacing: 0;
  }
}

@keyframes letter {
  0% {
    opacity: 0;
    letter-spacing: .5rem;
  }

  100% {
    opacity: 1;
    letter-spacing: 0;
  }
}

@-webkit-keyframes disappear {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes disappear {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes scroll_icon {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  20% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes scroll_icon {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  20% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }

  40% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes section_title {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes section_title {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomin {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes zoomout {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomout {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* story1 */

@-webkit-keyframes st1_meter {
  0% {
    background-position: 188px 0;
  }

  100% {
    background-position: -5452px 0;
  }
}

@keyframes st1_meter {
  0% {
    background-position: 188px 0;
  }

  100% {
    background-position: -5452px 0;
  }
}

/* story2 */

@-webkit-keyframes wait_act {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes wait_act {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes wait_bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
  }
}

@keyframes wait_bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
  }
}

@-webkit-keyframes st2_list {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes st2_list {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* story3 */

@-webkit-keyframes bounceIn {
  0% {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
    opacity: 1;
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
    opacity: 1;
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

/* story4 */

@-webkit-keyframes st4_fig {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100px) scale(.8);
    transform: translate(0, 100px) scale(.8);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
}

@keyframes st4_fig {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100px) scale(.8);
    transform: translate(0, 100px) scale(.8);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
}

@-webkit-keyframes st4_pict {
  0% {
    margin-top: 5px;
  }

  20% {
    margin-top: -15px;
  }

  40% {
    margin-top: 8px;
  }

  60% {
    margin-top: -5px;
  }

  80% {
    margin-top: 5px;
  }

  to {
    margin-top: 0;
  }
}

@keyframes st4_pict {
  0% {
    margin-top: 5px;
  }

  20% {
    margin-top: -15px;
  }

  40% {
    margin-top: 8px;
  }

  60% {
    margin-top: -5px;
  }

  80% {
    margin-top: 5px;
  }

  to {
    margin-top: 0;
  }
}

/* story5 */

@-webkit-keyframes clock_m {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  100% {
    -webkit-transform: rotate(2250deg);
    transform: rotate(2250deg);
  }
}

@keyframes clock_m {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  100% {
    -webkit-transform: rotate(2250deg);
    transform: rotate(2250deg);
  }
}

@-webkit-keyframes clock_h {
  0% {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
  }

  100% {
    -webkit-transform: rotate(370deg);
    transform: rotate(370deg);
  }
}

@keyframes clock_h {
  0% {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
  }

  100% {
    -webkit-transform: rotate(370deg);
    transform: rotate(370deg);
  }
}

@-webkit-keyframes st5_bg1 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}

@keyframes st5_bg1 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
}

@-webkit-keyframes st5_bg2 {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes st5_bg2 {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes st5_clock_disappear {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes st5_clock_disappear {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes st5_graph_appear {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes st5_graph_appear {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* story6 */

@-webkit-keyframes st6_fig {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    opacity: 0;
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes st6_fig {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    opacity: 0;
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    opacity: 1;
  }
}

@-webkit-keyframes st6_fig_last {
  0% {
    -webkit-transform: scaleY(.3);
    transform: scaleY(.3);
    opacity: 0;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes st6_fig_last {
  0% {
    -webkit-transform: scaleY(.3);
    transform: scaleY(.3);
    opacity: 0;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

@-webkit-keyframes st6_txt_odd {
  0% {
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes st6_txt_odd {
  0% {
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes st6_txt_even {
  0% {
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes st6_txt_even {
  0% {
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* story7 */

@-webkit-keyframes st7_graph {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }

  85% {
    -webkit-transform: scaleY(1.03);
    transform: scaleY(1.03);
  }

  90% {
    -webkit-transform: scaleY(.97);
    transform: scaleY(.97);
  }

  93% {
    -webkit-transform: scaleY(1.01);
    transform: scaleY(1.01);
  }

  97% {
    -webkit-transform: scaleY(.98);
    transform: scaleY(.98);
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes st7_graph {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }

  85% {
    -webkit-transform: scaleY(1.03);
    transform: scaleY(1.03);
  }

  90% {
    -webkit-transform: scaleY(.97);
    transform: scaleY(.97);
  }

  93% {
    -webkit-transform: scaleY(1.01);
    transform: scaleY(1.01);
  }

  97% {
    -webkit-transform: scaleY(.98);
    transform: scaleY(.98);
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

/* story8 */

@-webkit-keyframes st8_pict {
  0% {
    -webkit-transform: translateY(130px);
    transform: translateY(130px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes st8_pict {
  0% {
    -webkit-transform: translateY(130px);
    transform: translateY(130px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes st8_open {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    opacity: 1;
  }

  40% {
    -webkit-transform: scale(.97);
    transform: scale(.97);
  }

  60% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }

  100% {
    -webkit-transform: scale(.98);
    transform: scale(.98);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes st8_open {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  20% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    opacity: 1;
  }

  40% {
    -webkit-transform: scale(.97);
    transform: scale(.97);
  }

  60% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }

  100% {
    -webkit-transform: scale(.98);
    transform: scale(.98);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes st8_tw {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes st8_tw {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

/* story9 */

@-webkit-keyframes st9_blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }

  100% {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes st9_blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }

  100% {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* story10 */

@-webkit-keyframes st10_graph {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes st10_graph {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }

  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@-webkit-keyframes st10_p_step6 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -310px;
  }
}

@keyframes st10_p_step6 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -310px;
  }
}

@-webkit-keyframes st10_p_step5 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -248px;
  }
}

@keyframes st10_p_step5 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -248px;
  }
}

@-webkit-keyframes st10_p_step4 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -186px;
  }
}

@keyframes st10_p_step4 {
  0% {
    background-position: 0 62px;
  }

  100% {
    background-position: 0 -186px;
  }
}

@-webkit-keyframes st10_c_step3 {
  0% {
    background-position: 0 52px;
  }

  100% {
    background-position: 0 -104px;
  }
}

@keyframes st10_c_step3 {
  0% {
    background-position: 0 52px;
  }

  100% {
    background-position: 0 -104px;
  }
}

@-webkit-keyframes st10_c_step2 {
  0% {
    background-position: 0 52px;
  }

  100% {
    background-position: 0 -52px;
  }
}

@keyframes st10_c_step2 {
  0% {
    background-position: 0 52px;
  }

  100% {
    background-position: 0 -52px;
  }
}

/*--------------------------------------------------
summary
--------------------------------------------------*/

.summary {
  position: relative;
  padding: 60px 0;
}

.summary .inner {
  padding: 0 100px;
}

#truth10 {
  background: url(../images/summary_bg.gif) 0 0;
  background-size: cover;
  color: #fff;
  padding: 60px 0 100px;
}

#truth10 h2 {
  text-align: center;
}

#truth10 ol {
  position: relative;
}

#truth10 ol li {
  list-style-type: none;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: left;
}

#truth10 ol li i {
  font-family: helvetica, arial, sans-serif;
  font-size: 3rem;
  line-height: 1;
  width: 5%;
}

#truth10 p {
  position: absolute;
  right: 0%;
  top: 10%;
}

#overview {
  background: #f1f1f1 url(../images/summary_bg2.png) 80% 100% no-repeat;
  padding: 40px 0;
}

#overview .inner {
  overflow: hidden;
}

#overview .inner h2 {
  margin-bottom: 30px;
}

#overview .inner dl {
  float: left;
  overflow: hidden;
  margin-right: 40px;
  font-size: 1.4rem;
}

#overview .inner dl dt {
  font-weight: bold;
  float: left;
}

#overview .inner dl dd {
  overflow: hidden;
}

#report {
  padding: 60px 100px;
  text-align: center;
  font-size: 1.4rem;
}

#report h2 {
  margin-bottom: 30px;
  font-size: 3rem;
}

#report h3 {
  margin: 40px 0 30px;
  font-size: 2.0rem;
}

#report .policy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 30px;
}

#report .policy ol {
  width: 46%;
}

#report .policy ol li {
  list-style-type: decimal;
  text-align: left;
}

#report [class^="btn"] a {
  display: block;
  margin: 0 auto;
  text-decoration: none;
  border-radius: 30px;
  -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

#report .btn-dl {
  margin: 40px 0;
}

#report .btn-dl a {
  max-width: 400px;
  padding: 15px 80px;
  font-size: 2.0rem;
  color: #fff;
  background-color: #005798;
  -webkit-box-shadow: rgba(0, 87, 152, 1) 0 0px 0px 40px inset;
  box-shadow: rgba(0, 87, 152, 1) 0 0px 0px 40px inset;
}

#report .btn-dl a:hover {
  background-color: rgba(0, 54, 94, 1);
  -webkit-box-shadow: rgba(0, 87, 152, 1) 0 0px 0px 0px inset;
  box-shadow: rgba(0, 87, 152, 1) 0 0px 0px 0px inset;
}

#report .btn-old a {
  max-width: 305px;
  padding: 10px 23px;
  font-size: 1.6rem;
  color: #333;
  -webkit-box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 2px inset;
  box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 2px inset;
}

#report .btn-old a:hover {
  color: #fff;
  -webkit-box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 30px inset;
  box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 30px inset;
}

/*--------------------------------------------------
modal
--------------------------------------------------*/

.remodal {
  text-align: center;
  max-width: 850px;
  padding: 35px 20px;
}

.remodal h2 {
  font-size: 2.0rem;
  font-weight: normal;
  line-height: 1.4;
  margin: 0 0 30px;
}

.remodal p {
  font-size: 1.4rem;
}

.remodal .graph {
  margin: 40px 0 0;
}

.remodal .note {
  margin: 20px 0 0;
  text-align: left;
  text-indent: -2rem;
  padding-left: 2rem;
}

.remodal .remodal-close {
  position: relative;
  width: auto;
  height: auto;
  text-align: center;
  margin: 30px auto 0;
  max-width: 125px;
  border-radius: 30px;
  padding: 7px 30px 7px 45px;
  color: #333;
  -webkit-box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 1px inset;
  box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 1px inset;
  -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.remodal .remodal-close::before {
  font-size: 1.3rem;
  content: '\002715';
  color: #333;
  left: inherit;
  width: auto;
  top: inherit;
  margin-left: 25px;
  padding: 2px 0 0 0;
}

.remodal .remodal-close:hover {
  color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 40px inset;
  box-shadow: rgba(51, 51, 51, 1) 0 0px 0px 40px inset;
}

.remodal .remodal-close:hover::before {
  color: #fff;
}

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(0);
  filter: blur(0);
}

@media (min-width: 768px) {
  .graph .sp {
    display: none;
  }
}

/*--------------------------------------------------
footer
--------------------------------------------------*/

footer {
  padding: 20px;
  color: #fff;
  background-color: #000;
  text-align: center;
  font-size: 1.2rem;
}

#pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

#pagetop > a {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #005798;
  border-radius: 40px;
  -webkit-transition: all .5s;
  transition: all .5s;
}

#pagetop > a:hover {
  -webkit-transform: translate(0, -10px);
  transform: translate(0, -10px);
}

#pagetop > a::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 42%;
  left: 48%;
  width: 18px;
  height: 18px;
  margin-left: -6px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@charset 'utf-8';

@media (max-width: 767px) {
  a:hover {
    opacity: 1 !important;
  }

  img {
    max-width: 100%;
  }

  body {
    min-width: 320px;
  }

  .sp-elem {
    display: block;
    margin: 30px 0 0;
  }


  /*--------------------------------------------------
contents
--------------------------------------------------*/
  header {
    height: 40px;
  }

  header p {
    padding: 6px 0 0 10px;
  }

  header p img {
    width: 80px;
  }

  .snsarea {
    margin-top: 20px;
  }

  #keyvisual {
    padding: 5% 10%;
    min-height: 0;
  }

  #keyvisual p {
    padding: 15px 0;
    font-size: 1rem;
  }

  #contents-intro {
    padding: 30px 20px;
  }

  #contents-intro .scroll {
    display: none;
  }

  #contents-intro .lump {
    padding: 0;
  }

  #contents-intro .lump .lumpimg {
    float: none;
    margin: 0 auto 10px;
    width: 116px;
  }

  #contents-intro .snsarea {
    position: relative;
    margin: 0;
    top: inherit;
    right: inherit;
    text-align: center;
    margin: 20px 0 0;
  }

  article {
    display: block;
  }

  section {
    display: block;
    padding: 30px 20px;
  }

  section .ask {
    margin: 20px 0 30px;
    opacity: 1;
    font-size: 100%;
  }

  section .inner h2 {
    font-size: 2rem;
    opacity: 1;
  }

  section .inner h2 br {
    display: none;
  }

  section .inner h2 span {
    margin-bottom: 10px;
    width: 62px;
    height: 45px;
    background-size: cover;
  }

  section .detail {
    margin-top: 20px;
  }

  #story1 h2 span {
    background-position: 0 0;
  }

  #story2 h2 span {
    background-position: 0 -45px;
  }

  #story3 h2 span {
    background-position: 0 -90px;
  }

  #story4 h2 span {
    background-position: 0 -135px;
  }

  #story5 h2 span {
    background-position: 0 -180px;
  }

  #story6 h2 span {
    background-position: 0 -225px;
  }

  #story7 h2 span {
    background-position: 0 -270px;
  }

  #story8 h2 span {
    background-position: 0 -315px;
  }

  #story9 h2 span {
    background-position: 0 -360px;
  }

  #story10 h2 span {
    background-position: 0 -405px;
  }

  #story1 {
    background-image: url(../images/sp_story1_bg.jpg);
    background-attachment: scroll;
  }

  #story1 .figure {
    display: none;
  }

  #story1 .sp-elem {
    margin: 30px 40px 0;
  }

  #story2 ul {
    display: none;
  }

  #story3 {
    background-image: url(../images/sp_story3_bg.jpg);
    background-attachment: scroll;
  }

  #story3 ul {
    display: none;
  }

  #story3 .detail {
    display: none;
  }

  #story4 {
    padding: 30px 20px 60px;
    background-image: url(../images/sp_story4_bg.png);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 350px 55px;
  }

  #story4 .figure {
    display: none;
  }

  #story4 .detail {
    display: none;
  }

  #story5 {
    background: url(../images/sp_story5_bg.jpg) 50% 0 no-repeat;
    background-size: cover;
  }

  #story5 [class^='bg'] {
    display: none;
  }

  #story5 #clock {
    display: none;
  }

  #story5 .graph {
    position: relative;
    opacity: 1;
    left: 36%;
    width: 60%;
  }

  #story6 {
    /*.sp-elem{margin:30px 0 0;}*/
  }

  #story6 .figure {
    display: none;
  }

  #story7 {
    background-attachment: scroll;
    background-position: 60% 0;
    /*.sp-elem{margin:30px 0 0;}*/
  }

  #story7 ul {
    display: none;
  }

  #story8 .channel {
    display: none;
  }

  #story9 .channelwrap {
    display: none;
  }

  #story10 .figure {
    display: none;
  }

  #story10 .note {
    margin: 20px 0 0;
  }

  .summary {
    position: relative;
    padding: 30px 20px !important;
  }

  .summary .inner {
    padding: 0;
  }

  #overview .inner h2,
  #report h2 {
    margin: 0 0 20px;
    font-size: 2rem;
  }

  #truth10 h2 {
    margin: 0 13.5% 30px;
  }

  #truth10 ol li {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  #truth10 ol li i {
    font-size: 2.2rem;
    width: 10%;
  }

  #truth10 ol li span {
    display: block;
    width: 85%;
  }

  #truth10 p {
    display: none;
  }

  #overview {
    background-position: 95% 100%;
    background-size: 30% 30%;
    padding: 0;
  }

  #overview .inner dl {
    float: none;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }

  #overview .inner dl dt {
    float: none;
    width: 25%;
  }

  #overview .inner dl dd {
    width: 75%;
  }

  #report {
    text-align: left;
  }

  #report h3 {
    margin: 20px 0 15px;
    font-size: 1.8rem;
  }

  #report p br {
    display: none;
  }

  #report .policy {
    display: block;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
  }

  #report .policy ol {
    width: 100%;
  }

  #report .policy ol li {
    margin-left: 2rem;
  }

  #report [class^="btn"] {
    text-align: center;
  }

  #report .btn-dl {
    margin: 20px 0;
  }

  #report .btn-dl a {
    max-width: 100%;
    padding: 10px 30px;
    font-size: 1.8rem;
  }

  #report .btn-old a {
    max-width: 90%;
  }

  #report .snsarea {
    text-align: center;
  }

  .remodal h2 {
    font-size: 1.8rem;
  }

  .remodal br {
    display: none;
  }

  .remodal .graph .pc {
    display: none;
  }

  .remodal .note {
    font-size: 1rem;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
  }


  /*--------------------------------------------------
footer
--------------------------------------------------*/
  #pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

  #pagetop > a {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  #pagetop > a::before {
    top: 42%;
    left: 48%;
    width: 9px;
    height: 9px;
    margin-left: -3px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}

/*END media*/

/*--------------------------------------------------
tablet
--------------------------------------------------*/

/* DINfont対応 */

body.iPad #story1 .figure .score,
body.iPad #story7 ul li span,
body.iPad #story7 ul li em,
body.mac #story1 .figure .score,
body.mac #story7 ul li span,
body.mac #story7 ul li em {
  font-family: Helvetica, arial, sans-serif;
}

/* tablet */

body.tablet #story1,
body.tablet #story3,
body.tablet #story7 {
  background-attachment: scroll;
  background-size: cover;
}