@charset "UTF-8";
/*
  @mixin mq($breakpoint: pc) {
    @if $breakpoint ==sp {
      @media screen and (max-width: 768px) {
        @content;
      }
    }
//    @else if $breakpoint ==tb {
//      @media screen and (min-width:769px) and (max-width: 1024px) {
//        @content;
//      }
//    }
    @else if $breakpoint ==pc {
      @media screen and (min-width:769px) {
        @content;
      }
    }
  }

.only_pc { display: block; }
.only_sp { display: none; }
@include mq(sp) {
    .only_pc { display: none; }
    .only_sp { display: block; }
}
*/
@media screen and (min-width: 1201px) {
  .only_pc {
    display: block; }

  .only_tb {
    display: none; }

  .only_pctb {
    display: none; }

  .only_sp {
    display: none; } }
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .only_pc {
    display: none; }

  .only_tb {
    display: block; }

  .only_pctb {
    display: none; }

  .only_sp {
    display: none; } }
@media screen and (min-width: 769px) {
  .only_pc {
    display: block; }

  .only_tb {
    display: block; }

  .only_pctb {
    display: block; }

  .only_sp {
    display: none; } }
@media screen and (max-width: 768px) {
  .only_pc {
    display: none; }

  .only_tb {
    display: none; }

  .only_pctb {
    display: none; }

  .only_sp {
    display: block; } }
* {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #0a0000;
  scrollbar-width: none; }

*,
*:before,
*:after {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

body,
html {
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }

img {
  vertical-align: top;
  width: 100%; }

li {
  list-style: none; }

a {
  text-decoration: none; }

a:not(.noOp) {
  opacity: 1;
  transition: opacity 0.3s; }
  a:not(.noOp):hover {
    opacity: 0.7; }

.nowrap {
  white-space: nowrap; }

body {
  width: 100%;
  position: relative;
  background-color: #cde5f8;
  overflow-x: hidden; }
  @media screen and (max-width: 768px) {
    body {
      width: 100vw;
      overflow-x: hidden; } }
  body header {
    position: absolute;
    z-index: 25;
    top: 0;
    width: 100vw;
    height: 14.9vw;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      body header {
        height: 14.3vw; } }
    body header .inner {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: end;
      bottom: 0; }
      body header .inner h1 {
        position: relative;
        bottom: 2.3vw;
        left: 6.6vw;
        width: 11.7vw;
        margin: 0px;
        padding: 0px;
        box-sizing: border-box; }
        @media screen and (max-width: 768px) {
          body header .inner h1 {
            left: 7.8vw;
            top: 11.7vw;
            width: 22.8vw;
            height: 7.8vw; } }
      body header .inner ul {
        position: relative;
        bottom: 0;
        right: 3.6vw;
        width: 15.6vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.6vw; }
        @media screen and (max-width: 768px) {
          body header .inner ul {
            top: 18vw;
            right: 7.8vw;
            width: 30vw;
            gap: 2.1vw; } }
      body header .inner li {
        width: 4.4vw; }
        @media screen and (max-width: 768px) {
          body header .inner li {
            width: 8.5vw; } }
      body header .inner p {
        width: 15.6vw;
        font-size: 1.4vw;
        color: #0a0000;
        text-align: center;
        line-height: 1; }
        @media screen and (max-width: 768px) {
          body header .inner p {
            width: 30vw;
            font-size: 2.6vw; } }
  body main {
    width: 100%; }
  body .vis {
    position: absolute;
    z-index: 20;
    top: 0;
    width: 100%;
    height: 84.7vw;
    background-image: url("./../../img/header.png"), url("./../../img/mv01.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: hidden; }
    @media screen and (max-width: 768px) {
      body .vis {
        background-image: url("./../../img/header_sp.png"), url("./../../img/mv01_sp.png");
        height: 153.1vw; } }
    body .vis h2 {
      opacity: 0;
      position: absolute;
      z-index: 50;
      left: 59.7vw;
      top: 7vw;
      width: 19.5vw;
      height: 40.3vw;
      animation: slideInT 1s cubic-bezier(0.25, 1, 0.5, 1) 3.66s forwards; }
      @media screen and (max-width: 768px) {
        body .vis h2 {
          left: 60.4vw;
          top: 36.1vw;
          width: 23.5vw;
          height: 48.2vw;
          animation: slideInT 1s cubic-bezier(0.25, 1, 0.5, 1) 3.66s forwards; } }
    body .vis .char_kaba {
      opacity: 0;
      position: absolute;
      z-index: 45;
      left: 13.9vw;
      top: 13.9vw;
      width: 16.7vw;
      height: 15.4vw;
      animation: slideInL 1s cubic-bezier(0.25, 1, 0.5, 1) 3.66s forwards; }
      @media screen and (max-width: 768px) {
        body .vis .char_kaba {
          left: 0vw;
          top: 75.5vw;
          width: 22vw;
          height: auto;
          animation: slideInL 1s cubic-bezier(0.25, 1, 0.5, 1) 3.66s forwards; } }
    body .vis .char_melo {
      opacity: 0;
      position: absolute;
      z-index: 25;
      left: 53.4vw;
      top: 47.7vw;
      width: 14.1vw;
      height: auto;
      animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 3.75s forwards; }
      @media screen and (max-width: 768px) {
        body .vis .char_melo {
          left: 66vw;
          top: 96.5vw;
          width: 18.6vw;
          height: auto;
          animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 3.75s forwards; } }
    body .vis .mv_suikabar {
      opacity: 0;
      position: absolute;
      z-index: 5;
      left: 31.8vw;
      top: 6.9vw;
      width: 26.1vw;
      height: 50.2vw;
      animation-name: slideInBound, fluffy;
      animation-duration: 1.5s, 3s;
      animation-iteration-count: 1, infinite;
      animation-delay: 2s, 3.5s;
      animation-timing-function: ease, ease-in-out;
      animation-direction: normal, alternate; }
      @media screen and (max-width: 768px) {
        body .vis .mv_suikabar {
          left: 18.9vw;
          top: 29.6vw;
          width: 49.5vw;
          height: 95.2vw;
          animation-name: slideInBound, fluffy;
          animation-duration: 1.5s, 3s;
          animation-iteration-count: 1, infinite;
          animation-delay: 2s, 3.5s;
          animation-timing-function: ease, ease-in-out;
          animation-direction: normal, alternate; } }
    body .vis .cloud-tower {
      position: absolute;
      z-index: -5;
      left: 9.7vw;
      top: 10.6vw;
      width: 29.9vw;
      height: 34.3vw; }
      @media screen and (max-width: 768px) {
        body .vis .cloud-tower {
          left: 0vw;
          top: 52.7vw;
          width: 59.7vw;
          height: 68.3vw; } }
    body .vis .cloud01 {
      position: absolute;
      z-index: -5;
      left: 44.8vw;
      top: 10.3vw;
      width: 12.6vw;
      height: 6.4vw; }
      @media screen and (max-width: 768px) {
        body .vis .cloud01 {
          left: 37.8vw;
          top: 26.3vw;
          width: 19.6vw;
          height: 9.9vw; } }
    body .vis .cloud02 {
      position: absolute;
      z-index: -5;
      left: 91.7vw;
      top: 11.7vw;
      width: 10.8vw;
      height: 5.5vw; }
      @media screen and (max-width: 768px) {
        body .vis .cloud02 {
          left: 87.9vw;
          top: 78.7vw;
          width: 16.9vw;
          height: 8.6vw; } }
    body .vis .mv02 {
      position: absolute;
      z-index: 0;
      left: 0vw;
      top: 17.3vw;
      width: 100vw;
      height: 45.9vw; }
      @media screen and (max-width: 768px) {
        body .vis .mv02 {
          left: 0vw;
          top: 88.9vw;
          width: 100vw;
          height: 45.9vw; } }
    body .vis .mv03 {
      position: absolute;
      z-index: 15;
      left: 0vw;
      bottom: 0vw;
      width: 100vw;
      height: 42.9vw; }
      @media screen and (max-width: 768px) {
        body .vis .mv03 {
          bottom: -0.5vw;
          width: 130.1vw;
          height: 39.6vw; } }
    body .vis .mv06_hut {
      position: absolute;
      z-index: 25;
      left: 22.1vw;
      top: 61.8vw;
      width: 19.7vw;
      height: 14.6vw; }
    body .vis .mv06_suika {
      position: absolute;
      z-index: 30;
      right: 0;
      top: 37.7vw;
      width: 33.6vw;
      height: 33.2vw; }
      @media screen and (max-width: 768px) {
        body .vis .mv06_suika {
          right: 0;
          top: 110.2vw;
          width: 35.7vw;
          height: 35.2vw; } }
  body .side-wrapper {
    position: absolute;
    z-index: 1000;
    top: 60vw;
    height: 331vw;
    width: 100%;
    background-image: url("./../../img/side_stampL.png"), url("./../../img/side_stampR.png");
    background-repeat: repeat-y, repeat-y;
    background-size: 18.8vw auto, 18.8vw auto;
    background-position: left top, right top;
    pointer-events: none;
    /* 上部の写真にだけマスクをかける（上部が表示、下部が透過＝下の写真が透ける） */
    mask-image: linear-gradient(to bottom, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 96%, transparent 100%); }
    @media screen and (max-width: 768px) {
      body .side-wrapper {
        top: 125.8vw;
        height: 902.2vw;
        background-size: 22.8vw auto, 22.8vw auto;
        background-position: left -5.2vw top, right -5.2vw top; } }
  body .whats {
    position: absolute;
    z-index: 1000;
    top: 83.8vw;
    width: 100%;
    height: 77.9vw;
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 768px) {
      body .whats {
        top: 154vw;
        height: 154.5vw; } }
    body .whats h2 {
      position: absolute;
      top: 0;
      text-align: center;
      margin-bottom: 4.1vw; }
      @media screen and (max-width: 768px) {
        body .whats h2 {
          margin-bottom: 12.1vw; } }
    body .whats .title {
      width: 60.4vw;
      height: auto; }
      @media screen and (max-width: 768px) {
        body .whats .title {
          width: 57.5vw; } }
    body .whats .suikabar {
      position: absolute;
      top: 8.9vw;
      width: 26.1vw;
      height: 50.2vw; }
      @media screen and (max-width: 768px) {
        body .whats .suikabar {
          left: 10.6vw;
          top: 31.9vw;
          width: 49.5vw;
          height: 95vw; } }
    body .whats .explanation {
      position: absolute;
      top: 2vw;
      width: 63.1vw;
      height: 50.2vw; }
      @media screen and (max-width: 768px) {
        body .whats .explanation {
          left: 26.5vw;
          top: 33.1vw;
          width: 63.2vw;
          height: 82.7vw; } }
    body .whats .text {
      display: block;
      position: absolute;
      bottom: 0;
      font-size: 4.3vw;
      font-weight: 900;
      line-height: 1.33;
      color: #0a0000; }
      @media screen and (max-width: 768px) {
        body .whats .text {
          top: 130.4vw;
          font-size: 6.5vw;
          letter-spacing: -0.3vw;
          margin: 0 auto;
          text-align: center; } }
  body .products {
    position: absolute;
    z-index: 900;
    top: 120.7vw;
    width: 100vw;
    background-image: url("./../../img/bg_products.png");
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-position: center top; }
    @media screen and (max-width: 768px) {
      body .products {
        top: 273vw; } }
    body .products h2 {
      width: 47.8vw;
      height: 91.3vw;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        body .products h2 {
          width: 100vw;
          height: 91.3vw; } }
    body .products .title_products {
      position: absolute;
      top: 70.7vw;
      width: 47.8vw;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        body .products .title_products {
          left: 18.5vw;
          top: 72.1vw;
          width: 67.8vw;
          height: 8.9vw; } }
    body .products .prd-wrapper {
      width: 68.7vw;
      height: auto;
      margin: 0 auto 3.4vw; }
      @media screen and (max-width: 768px) {
        body .products .prd-wrapper {
          margin: 0 auto; } }
      body .products .prd-wrapper .prd-inner {
        position: relative;
        display: grid;
        grid-template-areas: "item title" ". body" ". button";
        grid-template-rows: 21.9vw auto 6.3vw;
        grid-template-columns: 1fr auto;
        gap: 1vw; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-inner {
            grid-template-areas: "title" "item" "body" "button";
            grid-template-rows: 33.2vw auto auto 13.8vw;
            grid-template-columns: 1fr;
            gap: 10.4vw;
            text-align: center;
            margin-bottom: 19.6vw; } }
      body .products .prd-wrapper .prd-inner:nth-of-type(2n) {
        grid-template-areas: "title item" "body ." "button .";
        grid-template-rows: 21.9vw auto 6.3vw;
        grid-template-columns: auto 1fr;
        margin-bottom: 4vw; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-inner:nth-of-type(2n) {
            grid-template-areas: "title" "item" "body" "button";
            grid-template-rows: 33.2vw auto auto 13.8vw;
            grid-template-columns: 1fr;
            gap: 10.4vw;
            text-align: center;
            margin-bottom: 19.6vw; } }
        body .products .prd-wrapper .prd-inner:nth-of-type(2n) .prd-item {
          position: absolute;
          height: 100%;
          right: 0; }
          @media screen and (max-width: 768px) {
            body .products .prd-wrapper .prd-inner:nth-of-type(2n) .prd-item {
              position: static;
              right: auto;
              width: 75%;
              grid-row: unset;
              margin: 0 auto; } }
      body .products .prd-wrapper .prd-item {
        grid-area: item;
        width: 28.6vw;
        grid-row: span 3;
        display: flex;
        justify-content: center;
        align-items: center; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-item {
            width: 75%;
            grid-row: unset;
            margin: 0 auto; } }
        body .products .prd-wrapper .prd-item img {
          width: 85%;
          filter: drop-shadow(0.3vw 0.3vw 0.8vw #789); }
          @media screen and (max-width: 768px) {
            body .products .prd-wrapper .prd-item img {
              width: 100%; } }
      body .products .prd-wrapper .prd-title {
        grid-area: title;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38.1vw;
        height: 21.9vw; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-title {
            width: 68.8vw;
            height: 33.2vw;
            background-size: 68.8vw auto;
            transform: translateX(-5vw); } }
        body .products .prd-wrapper .prd-title img {
          width: 27.8vw;
          transform: translate(2vw, 1vw); }
          @media screen and (max-width: 768px) {
            body .products .prd-wrapper .prd-title img {
              width: 80%;
              transform: translate(4.7vw, 4vw); } }
      body .products .prd-wrapper .red {
        background-image: url("./../../img/board_red.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left top; }
      body .products .prd-wrapper .green {
        background-image: url("./../../img/board_green.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left top; }
      body .products .prd-wrapper .brown {
        background-image: url("./../../img/board_brown.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left top; }
      body .products .prd-wrapper .prd-body {
        grid-area: body;
        width: 38.1vw;
        padding-bottom: 1.8vw;
        font-size: 2.6vw;
        color: #ab582d;
        text-align: left; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-body {
            width: 68.8vw;
            font-size: 6vw;
            margin: 0 auto;
            padding-bottom: 0; } }
      body .products .prd-wrapper .prd-button {
        grid-area: button;
        width: 38.1vw;
        height: 6.3vw;
        text-align: center; }
        @media screen and (max-width: 768px) {
          body .products .prd-wrapper .prd-button {
            width: 68.8vw;
            height: 13.8vw; } }
        body .products .prd-wrapper .prd-button a, body .products .prd-wrapper .prd-button p {
          width: 95%;
          height: 100%;
          margin: 0 auto;
          border-radius: 3.15vw;
          background-color: #eb6651;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2.2vw;
          color: #ffffff; }
          @media screen and (max-width: 768px) {
            body .products .prd-wrapper .prd-button a, body .products .prd-wrapper .prd-button p {
              font-size: 5vw;
              letter-spacing: -0.05em;
              width: 100%;
              border-radius: 6.9vw;
              text-align: center; } }
          body .products .prd-wrapper .prd-button a img, body .products .prd-wrapper .prd-button p img {
            width: 3.9vw; }
            @media screen and (max-width: 768px) {
              body .products .prd-wrapper .prd-button a img, body .products .prd-wrapper .prd-button p img {
                width: 8.9vw;
                height: auto;
                margin-left: 2vw; } }
        body .products .prd-wrapper .prd-button p {
          opacity: 0.5; }
  body .character {
    position: absolute;
    z-index: 800;
    top: 321.1vw;
    width: 100vw; }
    @media screen and (max-width: 768px) {
      body .character {
        top: 972.2vw; } }
    @media screen and (max-width: 768px) {
      body .character .char_kaba02 {
        position: absolute;
        left: 7.8vw;
        top: 36.5vw;
        width: 42.2vw; } }
    body .character h2 {
      width: 49.4vw;
      height: auto;
      margin: 0 auto 4.4vw; }
      @media screen and (max-width: 768px) {
        body .character h2 {
          padding: 49.5vw 0 8.9vw;
          width: 74.3vw; } }
    body .character .title_character {
      margin-top: 2vw; }
    body .character .character-header {
      width: 100vw;
      height: 73.5vw;
      background-image: url("./../../img/bg_character_header.png");
      background-repeat: no-repeat;
      background-size: 100vw auto;
      background-position: center top;
      text-align: center; }
      @media screen and (max-width: 768px) {
        body .character .character-header {
          height: 73.5vw; } }
    body .character .character-footer {
      width: 100vw;
      height: 10.4vw;
      background-image: url("./../../img/bg_character_footer.png");
      background-repeat: no-repeat;
      background-size: 100vw auto;
      background-position: center top;
      transform: translateY(-0.3vw); }
    body .character .link-wrapper {
      width: 100vw;
      height: 133.6vw;
      background-image: url("./../../img/bg_character_body.png");
      background-repeat: repeat-x;
      background-size: 100vw auto;
      background-color: #eb6651;
      overflow-x: hidden;
      /* メインコンテンツエリア（5つのリンク） */
      /* コンテンツ層（デフォルト非表示） */
      /* コンテンツ画像 */
      /* 閉じるボタン */
      /* 表示された時のクラス */
      /* リンクが消えるクラス */ }
      @media screen and (max-width: 768px) {
        body .character .link-wrapper {
          height: auto; } }
      body .character .link-wrapper .link-inner {
        width: 81.1vw;
        height: 84.4vw;
        margin: 0 auto 5.2vw;
        background-image: url("./../../img/planet.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        display: flex;
        justify-content: center;
        align-items: center;
        filter: drop-shadow(0.3vw 0.3vw 0.8vw #C33); }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-inner {
            position: relative;
            width: 126.1vw;
            height: 130vw;
            background-image: url("./../../img/planet_sp.png");
            background-position: left -13vw center;
            margin: 0 auto 13vw; } }
      body .character .link-wrapper .link-container {
        display: flex;
        align-items: center;
        width: 81.1vw;
        height: 84.4vw;
        position: relative;
        z-index: 5;
        text-align: center; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-container {
            position: absolute;
            left: 0vw;
            width: 100vw;
            height: 126.1vw;
            margin: 0 auto; } }
      body .character .link-wrapper a.scale:not(.noOp):hover {
        transform: scale(1.2);
        opacity: 1;
        z-index: 50; }
      body .character .link-wrapper .link-item {
        position: absolute;
        cursor: pointer;
        text-decoration: none; }
      body .character .link-wrapper .link-item:nth-child(1) {
        left: 24.9vw;
        top: 14.6vw;
        width: 8.9vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-item:nth-child(1) {
            left: 26.1vw;
            top: 18.8vw;
            width: 12.5vw;
            height: 15.1vw; } }
      body .character .link-wrapper .link-item:nth-child(2) {
        left: 67.5vw;
        top: 5.2vw;
        width: 8.9vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-item:nth-child(2) {
            left: 79.5vw;
            top: -3.5vw;
            width: 12.5vw;
            height: 15.1vw; } }
      body .character .link-wrapper .link-item:nth-child(3) {
        left: 67.5vw;
        top: 40vw;
        width: 8.9vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-item:nth-child(3) {
            left: 83.9vw;
            top: 82.3vw;
            width: 12.5vw;
            height: 15.1vw; } }
      body .character .link-wrapper .link-item:nth-child(4) {
        left: 38.8vw;
        top: 67.8vw;
        width: 8.9vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-item:nth-child(4) {
            left: 52.8vw;
            top: 104.6vw;
            width: 12.5vw;
            height: 15.1vw; } }
      body .character .link-wrapper .link-item:nth-child(5) {
        left: 1vw;
        top: 50.9vw;
        width: 8.9vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .link-item:nth-child(5) {
            left: 4vw;
            top: 74.5vw;
            width: 12.5vw;
            height: 15.1vw; } }
      body .character .link-wrapper .content-layer {
        /* 初期は非表示 */
        display: none;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: 0.5s;
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 81.1vw;
        height: 55.1vw;
        /* スライドアニメーションの設定 */
        animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .content-layer {
            width: 100%;
            height: 80.1vw; } }
      body .character .link-wrapper .content-layer.active {
        display: block;
        opacity: 1;
        visibility: visible; }
      @media screen and (max-width: 768px) {
        body .character .link-wrapper .content-image {
          position: absolute;
          left: -20.9vw; } }
      body .character .link-wrapper .close-btn {
        position: absolute;
        z-index: 10;
        top: 1.6vw;
        right: 3vw;
        width: 8.9vw;
        height: 8.9vw;
        background-color: #e74c3c;
        color: #ffffff;
        border-radius: 50%;
        border: none;
        /* 文字を真ん中に寄せる設定 */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.9vw;
        text-align: center;
        cursor: pointer; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper .close-btn {
            font-size: 3vw;
            top: 7.5vw;
            right: 30vw;
            width: 13vw;
            height: 13vw; } }
      body .character .link-wrapper .is-active {
        display: block; }
      body .character .link-wrapper .is-hidden {
        opacity: 0;
        pointer-events: none; }
      body .character .link-wrapper P {
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        height: 23.2vw;
        justify-content: center;
        align-items: center;
        gap: 0 1.2vw; }
        @media screen and (max-width: 768px) {
          body .character .link-wrapper P {
            height: auto;
            flex-wrap: nowrap;
            -webkit-flex-direction: column-reverse;
            flex-direction: column-reverse;
            background-image: url("./../../img/bg_character_body.png");
            background-repeat: repeat-x;
            background-size: 100vw auto;
            background-position: center bottom; } }
        body .character .link-wrapper P .loupe {
          width: 18vw;
          padding-bottom: 1vw; }
          @media screen and (max-width: 768px) {
            body .character .link-wrapper P .loupe {
              width: 18.5vw;
              height: auto; } }
        body .character .link-wrapper P .arrow {
          width: 3.9vw;
          height: 3.3vw; }
          @media screen and (max-width: 768px) {
            body .character .link-wrapper P .arrow {
              width: 8.2vw;
              height: auto;
              transform: rotate(-90deg);
              margin: 5.2vw auto 3.9vw; } }
        body .character .link-wrapper P .text {
          width: 45.8vw;
          height: 14.8vw; }
          @media screen and (max-width: 768px) {
            body .character .link-wrapper P .text {
              width: 81.4vw;
              height: auto; } }
  body .subcontents {
    position: absolute;
    z-index: 700;
    top: 532.9vw;
    width: 100vw;
    height: 123.3vw;
    overflow-x: hidden;
    /* 表示状態のスタイル */
    /* フェードアウト用クラス：これをJSで「add」する */
    /* ボタンエリアも同様 */
    /* パラパラアニメ表示用 */ }
    @media screen and (max-width: 768px) {
      body .subcontents {
        top: 1340.9vw;
        height: 227vw; } }
    body .subcontents h2 {
      position: absolute;
      z-index: 500;
      width: 59.7vw;
      height: 40.4vw;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media screen and (max-width: 768px) {
        body .subcontents h2 {
          left: 0vw;
          top: 0vw;
          width: 95.2vw;
          height: 76.1vw; } }
    body .subcontents .title {
      position: absolute;
      width: 32.3vw;
      height: 14vw; }
      @media screen and (max-width: 768px) {
        body .subcontents .title {
          left: 7.8vw;
          top: 24.9vw;
          width: 50.8vw;
          height: auto; } }
    body .subcontents img.cloud {
      position: absolute;
      z-index: 450;
      width: 59.7vw;
      height: 40.4vw; }
      @media screen and (max-width: 768px) {
        body .subcontents img.cloud {
          left: -17.3vw;
          top: 4vw;
          width: 108.7vw;
          height: 76.1vw; } }
    body .subcontents img.cloud02 {
      position: absolute;
      left: 62.2vw;
      top: 49.7vw;
      width: 59.7vw;
      height: 40.4vw; }
      @media screen and (max-width: 768px) {
        body .subcontents img.cloud02 {
          top: 73.7vw; } }
    body .subcontents .tweetInner {
      position: absolute;
      left: 8.1vw;
      bottom: 0;
      width: 67.5vw;
      height: 34vw;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between; }
      @media screen and (max-width: 768px) {
        body .subcontents .tweetInner {
          left: 0vw;
          top: 122.2vw;
          width: 100vw;
          height: 74.8vw; } }
      body .subcontents .tweetInner .kaba {
        position: relative;
        z-index: 30;
        width: 18.2vw;
        height: 33.8vw; }
        @media screen and (max-width: 768px) {
          body .subcontents .tweetInner .kaba {
            left: 2.9vw;
            top: 31vw;
            width: 26.5vw;
            height: 49.2vw; } }
        body .subcontents .tweetInner .kaba .twinkle {
          position: absolute;
          top: 0;
          right: -1vw;
          width: 7.6vw;
          height: 10.1vw; }
          @media screen and (max-width: 768px) {
            body .subcontents .tweetInner .kaba .twinkle {
              left: 18vw;
              bottom: 45.6vw;
              width: 7.7vw;
              height: 11vw; } }
      body .subcontents .tweetInner .tweet {
        position: relative;
        width: 46.8vw;
        height: 28.1vw; }
        @media screen and (max-width: 768px) {
          body .subcontents .tweetInner .tweet {
            top: 10vw;
            right: 4.5vw;
            width: 81.6vw;
            height: 52.8vw; } }
        body .subcontents .tweetInner .tweet img.word {
          position: absolute;
          z-index: 10;
          width: 46.8vw;
          height: 28.1vw; }
          @media screen and (max-width: 768px) {
            body .subcontents .tweetInner .tweet img.word {
              width: 81.6vw;
              height: auto; } }
        body .subcontents .tweetInner .tweet img.baloon {
          position: absolute;
          z-index: 5;
          width: 46.8vw;
          height: 28.1vw; }
          @media screen and (max-width: 768px) {
            body .subcontents .tweetInner .tweet img.baloon {
              width: 81.6vw;
              height: auto; } }
        body .subcontents .tweetInner .tweet img.baloon_tip {
          position: absolute;
          z-index: 20;
          left: 1.75vw;
          bottom: 3.1vw;
          width: 10vw;
          height: 4.6vw; }
          @media screen and (max-width: 768px) {
            body .subcontents .tweetInner .tweet img.baloon_tip {
              left: 6vw;
              bottom: 14.1vw;
              width: 9.3vw;
              height: 4.2vw; } }
    body .subcontents .subcontainer {
      transform: rotate(-5deg);
      position: relative;
      z-index: 800;
      width: 75vw;
      height: 75vw;
      top: 4.5vw;
      margin: 0 auto;
      text-align: center;
      background-image: url("./../../img/book.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center bottom; }
      @media screen and (max-width: 768px) {
        body .subcontents .subcontainer {
          left: -1.4vw;
          top: 46vw;
          width: 103vw;
          height: 76.9vw; } }
@keyframes popup_deg {
  0% {
    transform: rotate(-5deg) scale(0.8);
    opacity: 0.5; }
  80% {
    transform: rotate(-5deg) scale(1.1);
    opacity: 1; }
  100% {
    transform: rotate(-5deg) scale(1);
    opacity: 1; } }
@keyframes fluffy_deg {
  0% {
    transform: rotate(-5deg) translateY(0);
    opacity: 1;
    /* 元の位置 */ }
  100% {
    transform: rotate(-5deg) translateY(-20px);
    opacity: 1;
    /* 上に20px移動 */ } }
    body .subcontents #list-container {
      width: 100%;
      height: 100%;
      display: flex; }
    body .subcontents #prevBtn, body .subcontents #nextBtn {
      border: none;
      /* 通常時の枠線消去 */
      outline: none;
      /* クリック・選択時の枠線消去 */
      background: none;
      /* 背景色透明 */
      cursor: pointer;
      /* マウスを乗せた時に指マークにする */
      padding: 0;
      /* 反応範囲を広げるための余白（必要に応じて調整） */ }
    body .subcontents .list-item,
    body .subcontents .controls {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease, visibility 0s linear 0s;
      /* 0.5秒かけてフェード */ }
    body .subcontents .list-item.active,
    body .subcontents .controls.active {
      opacity: 1;
      visibility: visible; }
    body .subcontents .list-item.is-fading-out {
      opacity: 0;
      visibility: hidden;
      /* opacityは0.5秒で変化、visibilityは0.5秒待ってからhiddenにする */
      transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
    body .subcontents .controls.is-fading-out {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0s linear 0.2s;
      pointer-events: none;
      /* クリック不可にする */ }
    body .subcontents .list-item {
      position: absolute;
      width: 100%;
      margin-top: auto;
      bottom: 0px;
      left: 0; }
    body .subcontents #animation-container {
      display: none;
      position: absolute;
      width: 100%;
      height: auto;
      top: -2.7vw;
      transition-delay: 0.25s; }
      @media screen and (max-width: 768px) {
        body .subcontents #animation-container {
          top: -29.8vw; } }
    body .subcontents #anime-frame {
      width: 100%;
      height: auto; }
    body .subcontents .controls {
      position: absolute;
      width: 100%;
      height: 100%;
      bottom: 0;
      left: 0; }
      @media screen and (max-width: 768px) {
        body .subcontents .controls {
          height: 106vw; } }
    body .subcontents .controls button {
      position: absolute;
      bottom: 0;
      right: 0;
      cursor: pointer;
      width: 45%;
      height: 65%;
      background-color: transparent;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      align-items: center; }
    body .subcontents .controls button:nth-child(odd) {
      transform: scaleX(-1);
      left: 0; }
    body .subcontents .controls button img {
      position: absolute;
      right: -3.1vw;
      width: 50%;
      filter: drop-shadow(0 0px 0.4vw rgba(102, 102, 0, 0.75));
      animation: idle 1s forwards;
      animation-iteration-count: infinite; }
    body .subcontents .controls button:disabled {
      opacity: 0;
      cursor: not-allowed; }
  body .recipe {
    position: absolute;
    z-index: 600;
    top: 640vw;
    width: 100vw;
    height: 121.6vw;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    background-image: url("./../../img/bg_recipe.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top; }
    @media screen and (max-width: 768px) {
      body .recipe {
        top: 1520.8vw;
        height: 159.1vw; } }
    body .recipe h2 {
      position: absolute;
      z-index: 100;
      top: 25.8vw;
      width: 100vw;
      text-align: center; }
      @media screen and (max-width: 768px) {
        body .recipe h2 {
          top: 29.7vw; } }
      body .recipe h2 img.title {
        width: 40.3vw;
        height: auto; }
        @media screen and (max-width: 768px) {
          body .recipe h2 img.title {
            width: 75.9vw;
            height: 10.4vw; } }
    body .recipe .recipe01 {
      position: absolute;
      z-index: 90;
      top: 35.3vw;
      width: 67.7vw;
      height: 74.3vw; }
      @media screen and (max-width: 768px) {
        body .recipe .recipe01 {
          top: 49.5vw;
          width: 90%;
          height: auto; } }
    body .recipe .seagull01 {
      position: absolute;
      z-index: 80;
      width: 13.2vw;
      height: 7.4vw;
      left: 83.3vw;
      top: 66vw; }
      @media screen and (max-width: 768px) {
        body .recipe .seagull01 {
          top: 47vw; } }
    body .recipe .seagull02 {
      position: absolute;
      z-index: 80;
      width: 11vw;
      height: 4.9vw;
      left: 3.3vw;
      top: 92.9vw; }
      @media screen and (max-width: 768px) {
        body .recipe .seagull02 {
          top: auto;
          bottom: 5vw; } }
    body .recipe .cloud {
      position: absolute;
      z-index: 80;
      width: 54vw;
      height: 36.5vw;
      left: 46.7vw;
      top: 75.2vw; }
      @media screen and (max-width: 768px) {
        body .recipe .cloud {
          left: 50.7vw;
          top: 95.2vw; } }
  body .information {
    position: absolute;
    z-index: 500;
    width: 100vw;
    height: 98.8vw;
    height: 51.8vw;
    top: 745vw;
    background-image: url("./../../img/bg_information.png"), url("./../../img/sun.png");
    background-repeat: no-repeat;
    background-size: 100vw auto, 54.3vw 38.2vw;
    background-position: center 3vw, left top;
    overflow-x: hidden; }
    @media screen and (max-width: 768px) {
      body .information {
        top: 1670.4vw;
        height: 226vw;
        background-size: 120vw auto, 74.8vw auto;
        background-position: center top 9vw, left -14.3vw top; } }
    body .information h2 {
      position: relative;
      display: flex;
      justify-content: center;
      width: 62.5vw;
      height: 5.5vw;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        body .information h2 {
          width: 100%;
          height: 55.8vw; } }
      body .information h2 .title {
        position: absolute;
        top: 35.5vw;
        height: 6vw;
        width: 62.5vw; }
        @media screen and (max-width: 768px) {
          body .information h2 .title {
            top: auto;
            left: auto;
            width: 86vw;
            height: auto;
            bottom: 0;
            margin: auto auto; } }
    body .information .kaba04 {
      position: absolute;
      left: 77.5vw;
      top: 12.2vw;
      width: 16.4vw;
      height: 19.5vw; }
      @media screen and (max-width: 768px) {
        body .information .kaba04 {
          left: 73.3vw;
          top: 13vw;
          width: 24.1vw;
          height: 29.1vw; } }
    body .information .bnr_wrapper {
      position: absolute;
      top: 50.1vw;
      width: 100vw;
      height: 46.7vw;
      padding-bottom: 10vw;
      background-color: #f8c283; }
      @media screen and (max-width: 768px) {
        body .information .bnr_wrapper {
          top: 65.5vw;
          height: auto; } }
      body .information .bnr_wrapper .bnr_inner {
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 71.2vw;
        gap: 2.1vw 2.3vw;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          body .information .bnr_wrapper .bnr_inner {
            -webkit-flex-direction: column;
            flex-direction: column;
            width: 61.8vw;
            gap: 8.6vw 0; } }
        body .information .bnr_wrapper .bnr_inner li {
          width: 34.4vw;
          height: 17.3vw; }
          @media screen and (max-width: 768px) {
            body .information .bnr_wrapper .bnr_inner li {
              width: 61.8vw;
              height: auto; } }
  body footer {
    position: absolute;
    z-index: 1000;
    background-color: #cde5f8;
    top: 761.8vw;
    width: 100vw;
    height: 28.3vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    @media screen and (max-width: 768px) {
      body footer {
        z-index: 500;
        top: 1680.4vw;
        height: 84vw;
        -webkit-flex-direction: column;
        flex-direction: column; } }
    body footer img.footer_img {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: auto;
      transform: scaleY(-1); }
    body footer .sns_inner {
      position: absolute;
      width: 15.6vw;
      height: 6.8vw;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 auto;
      top: 0; }
      @media screen and (max-width: 768px) {
        body footer .sns_inner {
          position: static;
          width: 30vw;
          height: auto;
          margin-bottom: 4.4vw; } }
      body footer .sns_inner ul {
        right: 3.6vw;
        width: 15.6vw;
        height: 4.3vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 2.5vw 1.1vw; }
        @media screen and (max-width: 768px) {
          body footer .sns_inner ul {
            width: 30vw;
            height: auto; } }
      body footer .sns_inner li {
        width: 4.4vw; }
        @media screen and (max-width: 768px) {
          body footer .sns_inner li {
            width: 8.5vw; } }
      body footer .sns_inner p {
        display: block;
        width: auto;
        height: 2.3vw;
        font-size: 1.4vw;
        font-weight: bold;
        color: #0a0000;
        text-align: center;
        line-height: 1; }
        @media screen and (max-width: 768px) {
          body footer .sns_inner p {
            font-size: 2.6vw;
            margin-bottom: 2vw; } }
    body footer .infos {
      position: absolute;
      top: 9.8vw;
      width: 68vw;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        body footer .infos {
          position: static; } }
      body footer .infos ul {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.8vw 1.3vw; }
        @media screen and (max-width: 768px) {
          body footer .infos ul {
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            -webkit-flex-direction: column;
            flex-direction: column;
            top: 5.8vw;
            width: auto;
            gap: 2vw 2.6vw; } }
      body footer .infos li a {
        text-decoration: none;
        color: #0a0000;
        font-size: 1.3vw;
        line-height: 1; }
        @media screen and (max-width: 768px) {
          body footer .infos li a {
            font-size: 3.2vw;
            line-height: 6vw; } }
      body footer .infos li a::before {
        content: "▶";
        font-size: 1.1vw;
        margin-right: 0.1vw; }
        @media screen and (max-width: 768px) {
          body footer .infos li a::before {
            font-size: 3.2vw;
            margin-right: 0.2vw; } }
      body footer .infos .copyright {
        top: 5.8vw;
        display: block;
        text-align: center;
        font-size: 1.3vw;
        color: #0a0000;
        white-space: nowrap;
        padding: 1.3vw 0 5.2vw; }
        @media screen and (max-width: 768px) {
          body footer .infos .copyright {
            position: static;
            font-size: 2.4vw;
            padding: 3.2vw 0 9.2vw; } }