@charset "UTF-8";
/* media-queries.css */
@media screen and (max-width: 1024px) {
  /* 1024px以下 */
  #on-scene .items .inner .scene,
  #off-scene .items .inner .scene,
  #kids .items .inner .scene {
    margin-bottom: -80px; }
  #on-scene .items .inner .feature,
  #off-scene .items .inner .feature,
  #kids .items .inner .feature {
    padding-top: 160px; }
  #on-scene .links .backtotop,
  #off-scene .links .backtotop,
  #kids .links .backtotop {
    right: -1%; } }
@media screen and (max-width: 820px) {
  /* 820px以下 */
  .intro .txtBox {
    padding: 0 10% 0 10%; }

  #top-page .main .left,
  #top-page .main .right {
    width: 100%;
    height: 50vh; }
    #top-page .main .left::after,
    #top-page .main .right::after {
      width: 100%;
      height: 50%; }
  #top-page .main .left::after {
    background: no-repeat url("../img/top_main_img01_sp.jpg") 50% 50%;
    background-size: cover;
    top: 50%; }
  #top-page .main .right::after {
    background: no-repeat url("../img/top_main_img02_sp.jpg") 50% 50%;
    background-size: cover;
    top: 0%; }
  #top-page .main .txtBox {
    top: 48%;
    width: 80%; }
    #top-page .main .txtBox h1 {
      font-size: 8vw;
      width: 75vw; }
    #top-page .main .txtBox p {
      font-size: 3.6vw; }
  #top-page .main .logoBox {
    right: 5%;
    bottom: 2.5%; }
    #top-page .main .logoBox ul li {
      margin-right: 2vw; }
      #top-page .main .logoBox ul li.tnf {
        width: 9vw; }
      #top-page .main .logoBox ul li.mp {
        width: 12vw; }
      #top-page .main .logoBox ul li.hh {
        width: 7.5vw; }
  #top-page .scene ul li.onScene {
    background-position: 12% 50%; }
  #top-page .scene ul li.offScene {
    background-position: 5% 50%; }
  #top-page .scene ul li.kids {
    background-position: 51% 50%; }

  #on-scene .items .inner .scene,
  #off-scene .items .inner .scene,
  #kids .items .inner .scene {
    margin-bottom: -240px; }
    #on-scene .items .inner .scene .txt .box,
    #off-scene .items .inner .scene .txt .box,
    #kids .items .inner .scene .txt .box {
      padding: 40px 10%; }
      #on-scene .items .inner .scene .txt .box .store a,
      #off-scene .items .inner .scene .txt .box .store a,
      #kids .items .inner .scene .txt .box .store a {
        padding: 0.7em 3em 0.8em; }
  #on-scene .items .inner.rev .scene .txt .box,
  #off-scene .items .inner.rev .scene .txt .box,
  #kids .items .inner.rev .scene .txt .box {
    padding: 40px 10%; }
  #on-scene .items .inner .feature,
  #off-scene .items .inner .feature,
  #kids .items .inner .feature {
    padding-top: 320px; }
  #on-scene .links .backtotop,
  #off-scene .links .backtotop,
  #kids .links .backtotop {
    right: -2.5%; }

  #on-scene .main::after {
    background: no-repeat url("../img/on_main_img_sp.jpg") 0% 50%;
    background-size: cover; }

  #off-scene .main::after {
    background: no-repeat url("../img/off_main_img_sp.jpg") 50% 50%;
    background-size: cover; }

  #kids .main::after {
    background: no-repeat url("../img/kids_main_img_sp.jpg") 50% 50%;
    background-size: cover; }

  .tab-none {
    display: none; } }
@media screen and (max-width: 481px) {
  /* 480px以下 */
  #header {
    padding: 1.6em 0; }
    #header ul.nav {
      display: none; }

  .sp_nav {
    display: block; }

  #top-page .main .txtBox {
    top: 50%; }
    #top-page .main .txtBox h1 {
      font-size: 11.5vw; }
    #top-page .main .txtBox p {
      font-size: 4vw; }
  #top-page .main .logoBox {
    right: 50%;
    bottom: 5%;
    transform: translate(50%, 0%); }
    #top-page .main .logoBox ul li {
      margin-right: 4vw; }
      #top-page .main .logoBox ul li.tnf {
        width: 21.6vw; }
      #top-page .main .logoBox ul li.mp {
        width: 28.8vw; }
      #top-page .main .logoBox ul li.hh {
        width: 18vw; }
  #top-page .scene ul li {
    min-height: 360px; }
    #top-page .scene ul li .titleBox {
      width: 65%; }
    #top-page .scene ul li.onScene {
      background: no-repeat url("../img/top_img01_sp.jpg") 50% 50%;
      background-size: cover; }
    #top-page .scene ul li.offScene {
      background: no-repeat url("../img/top_img02_sp.jpg") 50% 50%;
      background-size: cover; }
      #top-page .scene ul li.offScene .titleBox {
        width: 63%; }
    #top-page .scene ul li.kids {
      background: no-repeat url("../img/top_img03_sp.jpg") 50% 50%;
      background-size: cover; }
      #top-page .scene ul li.kids .titleBox {
        width: 55%; }

  .scrolldown {
    display: none; }

  .intro {
    align-content: center;
    flex-wrap: wrap;
    height: auto;
    padding: 80px 0; }
    .intro .titleBox,
    .intro .txtBox {
      width: 100%; }
    .intro .titleBox {
      text-align: left; }
      .intro .titleBox h2 {
        margin-left: 10%; }
    .intro .txtBox {
      padding: 40px 10% 0; }

  #on-scene .items .inner .scene,
  #off-scene .items .inner .scene,
  #kids .items .inner .scene {
    flex-wrap: wrap;
    margin-bottom: 0px; }
    #on-scene .items .inner .scene .image,
    #on-scene .items .inner .scene .txt,
    #off-scene .items .inner .scene .image,
    #off-scene .items .inner .scene .txt,
    #kids .items .inner .scene .image,
    #kids .items .inner .scene .txt {
      width: 100%; }
    #on-scene .items .inner .scene .image,
    #off-scene .items .inner .scene .image,
    #kids .items .inner .scene .image {
      margin-bottom: -120px;
      padding: 0;
      position: relative; }
      #on-scene .items .inner .scene .image h3,
      #off-scene .items .inner .scene .image h3,
      #kids .items .inner .scene .image h3 {
        margin-left: 7.5%; }
      #on-scene .items .inner .scene .image .imgBox,
      #off-scene .items .inner .scene .image .imgBox,
      #kids .items .inner .scene .image .imgBox {
        padding: 0 7.5%; }
    #on-scene .items .inner .scene .txt,
    #off-scene .items .inner .scene .txt,
    #kids .items .inner .scene .txt {
      padding-top: 120px;
      padding-left: 5%; }
      #on-scene .items .inner .scene .txt .box,
      #off-scene .items .inner .scene .txt .box,
      #kids .items .inner .scene .txt .box {
        padding: 40px 10% 40px 5%; }
        #on-scene .items .inner .scene .txt .box .store a,
        #off-scene .items .inner .scene .txt .box .store a,
        #kids .items .inner .scene .txt .box .store a {
          background: #FFF;
          box-sizing: border-box;
          text-align: center;
          width: 100%; }
  #on-scene .items .inner.rev .scene .image,
  #off-scene .items .inner.rev .scene .image,
  #kids .items .inner.rev .scene .image {
    order: 1;
    padding: 0; }
  #on-scene .items .inner.rev .scene .txt,
  #off-scene .items .inner.rev .scene .txt,
  #kids .items .inner.rev .scene .txt {
    order: 2;
    padding-right: 5%; }
  #on-scene .items .inner .feature,
  #off-scene .items .inner .feature,
  #kids .items .inner .feature {
    padding-top: 40px; }
    #on-scene .items .inner .feature .title,
    #off-scene .items .inner .feature .title,
    #kids .items .inner .feature .title {
      margin-bottom: 40px;
      text-align: center; }
    #on-scene .items .inner .feature ul,
    #off-scene .items .inner .feature ul,
    #kids .items .inner .feature ul {
      flex-wrap: wrap; }
      #on-scene .items .inner .feature ul li,
      #off-scene .items .inner .feature ul li,
      #kids .items .inner .feature ul li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px; }
        #on-scene .items .inner .feature ul li:last-child,
        #off-scene .items .inner .feature ul li:last-child,
        #kids .items .inner .feature ul li:last-child {
          margin-bottom: 0; }
    #on-scene .items .inner .feature.column2 .title,
    #off-scene .items .inner .feature.column2 .title,
    #kids .items .inner .feature.column2 .title {
      margin-left: 0; }
  #on-scene .links,
  #off-scene .links,
  #kids .links {
    padding: 40px 7.5%; }
    #on-scene .links ul,
    #off-scene .links ul,
    #kids .links ul {
      flex-wrap: wrap; }
      #on-scene .links ul li,
      #off-scene .links ul li,
      #kids .links ul li {
        width: 100%;
        margin-bottom: 20px; }
        #on-scene .links ul li:last-child,
        #off-scene .links ul li:last-child,
        #kids .links ul li:last-child {
          margin-bottom: 0; }
    #on-scene .links .backtotop,
    #off-scene .links .backtotop,
    #kids .links .backtotop {
      margin-top: 40px;
      position: relative;
      right: auto;
      top: auto;
      transform: translateY(0%) rotate(0deg);
      text-align: center; }
      #on-scene .links .backtotop::before,
      #off-scene .links .backtotop::before,
      #kids .links .backtotop::before {
        content: '＜';
        font-size: 100%;
        margin-right: 0;
        position: absolute;
        top: -1.2em;
        left: 50%;
        transform: translateX(-50%) rotate(90deg); }

  #on-scene .items .inner.scene01 .scene .txt {
    background: #d3d8cc; }
  #on-scene .items .inner.scene02 .scene .txt {
    background: #f4e4dc; }
  #on-scene .items .inner.scene03 .scene .txt {
    background: #efedd7; }

  #off-scene .items .inner.scene01 .scene .txt {
    background: #efedd7; }
  #off-scene .items .inner.scene02 .scene .txt {
    background: #d8e4ea; }
  #off-scene .items .inner.scene03 .scene .txt {
    background: #dedede; }
  #off-scene .items .inner.scene04 .scene .txt {
    background: #efedd7; }
  #off-scene .items .inner.scene05 .scene .txt {
    background: #d3d8cc; }
  #off-scene .items .inner.scene063 .scene .txt {
    background: #f4e4dc; }

  #kids .items .inner.scene01 .scene .txt {
    background: #efedd7; }
  #kids .items .inner.scene02 .scene .txt {
    background: #f4e4dc; }
  #kids .items .inner.scene03 .scene .txt {
    background: #d3d8cc; }

  .delay1 {
    transition-delay: 0s; }

  .delay2 {
    transition-delay: 0s; }

  .pc {
    display: none !important; }

  .smp {
    display: block !important; } }