@charset "UTF-8";
@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: 768px) 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: 768px) {
  .only_pc {
    display: block; }

  .only_tb {
    display: block; }

  .only_pctb {
    display: block; }

  .only_sp {
    display: none; } }
@media screen and (max-width: 767px) {
  .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 {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  background-image: linear-gradient(#cde5f8, #cde5f8), url("./../../img/mv01.webp"), url("./../../../img/bg.webp");
  background-size: 1200px 17500px, 1200px 650px, 100% auto;
  background-position: center top 720px, center top, center bottom;
  background-repeat: no-repeat, no-repeat, repeat-y; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    body {
      background-image: none;
      background-color: #cde5f8;
      background-image: linear-gradient(#cde5f8, #cde5f8), url("./../../img/mv01.webp");
      background-size: 100vw 1458.3vw, 100vw 54.2vw;
      background-position: center top 60vw, center top; } }
  @media screen and (max-width: 767px) {
    body {
      background-image: linear-gradient(#cde5f8, #cde5f8), url("./../../img/mv01.webp");
      background-size: 100% 17500px, 100% 66vw, 100% auto;
      background-position: center top 65vw, center top, center bottom;
      width: 100vw; } }

header {
  position: absolute;
  z-index: 100;
  top: 0;
  max-width: 1200px;
  width: 100%;
  height: 125px;
  margin: 0 auto;
  background-image: url("../../../img/header.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    header {
      max-width: 100vw;
      height: 10.4vw; } }
  @media screen and (max-width: 767px) {
    header {
      height: 22.4vw;
      background-image: url("../../../img/header_sp.webp"); } }
  header .vis {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 920px;
    overflow: hidden; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      header .vis {
        max-width: 100vw;
        height: 76.7vw; } }
    @media screen and (max-width: 767px) {
      header .vis {
        height: 88.9vw; } }
    header .vis h1 {
      position: relative;
      display: block;
      z-index: 40;
      top: 227px;
      width: 100%;
      height: 400px;
      text-align: center; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis h1 {
          top: 18.9vw;
          height: 33.3vw; } }
      @media screen and (max-width: 767px) {
        header .vis h1 {
          top: 19.6vw;
          height: 42.5vw; } }
      header .vis h1 img {
        width: 800px;
        height: 400px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          header .vis h1 img {
            width: 66.7vw;
            height: 33.3vw; } }
        @media screen and (max-width: 767px) {
          header .vis h1 img {
            width: 85vw;
            height: 42.5vw; } }
    header .vis .mv02 {
      position: absolute;
      z-index: 30;
      top: 370px;
      width: 1200px;
      height: 310px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis .mv02 {
          top: 30.8vw;
          width: 100vw;
          height: 25.8vw; } }
      @media screen and (max-width: 767px) {
        header .vis .mv02 {
          top: 41.1vw;
          left: 2.3vw;
          width: 100vw;
          height: 29.6vw; } }
    header .vis .mv03 {
      position: absolute;
      z-index: 50;
      bottom: 0px;
      width: 1200px;
      height: 386px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis .mv03 {
          width: 100vw;
          height: 32.2vw; } }
      @media screen and (max-width: 767px) {
        header .vis .mv03 {
          width: 100vw;
          height: auto; } }
    header .vis .cloud-tower {
      position: absolute;
      z-index: 10;
      left: 11px;
      top: 154px;
      width: 513px;
      height: 588px;
      animation: heartbeat 5s ease-out infinite; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis .cloud-tower {
          left: 0.9vw;
          top: 12.8vw;
          width: 42.8vw;
          height: 49vw; } }
      @media screen and (max-width: 767px) {
        header .vis .cloud-tower {
          left: -1.7vw;
          top: 18.6vw;
          width: 47.8vw;
          height: 54.8vw; } }
    header .vis .cloud01 {
      position: absolute;
      z-index: 20;
      left: 884px;
      top: 246px;
      width: 151px;
      height: 76px;
      animation: heartbeat 5s ease-out infinite;
      animation-delay: 1s; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis .cloud01 {
          left: 73.7vw;
          top: 20.5vw;
          width: 12.6vw;
          height: 6.3vw; } }
      @media screen and (max-width: 767px) {
        header .vis .cloud01 {
          left: 37.8vw;
          top: 26.3vw;
          width: 19.6vw;
          height: 9.9vw; } }
    header .vis .cloud02 {
      position: absolute;
      z-index: 30;
      left: 1100px;
      top: 170px;
      width: 130px;
      height: 66px;
      animation: heartbeat 5s ease-out 1s infinite;
      animation-delay: 3s; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        header .vis .cloud02 {
          left: 91.7vw;
          top: 14.2vw;
          width: 10.8vw;
          height: 5.5vw; } }
      @media screen and (max-width: 767px) {
        header .vis .cloud02 {
          left: 87.9vw;
          top: 30.4vw;
          width: 17.1vw;
          height: 8.6vw; } }

main {
  display: block;
  position: relative;
  top: 920px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    main {
      top: 76.7vw;
      max-width: 100vw; } }
  @media screen and (max-width: 767px) {
    main {
      top: 88.9vw;
      max-width: 100vw;
      width: 100%; } }

.side-wrapper {
  position: absolute;
  z-index: 1000;
  top: 0px;
  max-width: 1200px;
  width: 100%;
  background-image: url("./../../../img/side_stampL.webp"), url("./../../../img/side_stampR.webp");
  background-repeat: repeat-y, repeat-y;
  background-size: 225px auto, 225px 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 (min-width: 768px) and (max-width: 1200px) {
    .side-wrapper {
      background-size: 18.8vw auto, 18.8vw auto; } }
  @media screen and (max-width: 767px) {
    .side-wrapper {
      width: 100%;
      top: 0vw;
      background-size: 22.8vw auto, 22.8vw auto;
      background-position: left -5.2vw top, right -5.2vw top; } }

.mm {
  height: 4350px; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .mm {
      height: 362.5vw; } }
  @media screen and (max-width: 767px) {
    .mm {
      height: 962.5vw; } }

.pt {
  height: 4900px; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .pt {
      height: 408.3vw; } }
  @media screen and (max-width: 767px) {
    .pt {
      height: 1002vw; } }

.vs {
  height: 3570px; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .vs {
      height: 297.5vw; } }
  @media screen and (max-width: 767px) {
    .vs {
      height: 915vw; } }

.containts {
  display: block;
  width: 100%;
  text-align: center; }
  .containts .lead {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.33;
    color: #c73534;
    margin-bottom: 60px; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts .lead {
        font-size: 4.3vw;
        margin-bottom: 5vw; } }
    @media screen and (max-width: 767px) {
      .containts .lead {
        font-size: 6.5vw;
        letter-spacing: -0.3vw; } }
  .containts .content-text {
    display: inline-block;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
    color: #0a0000;
    margin-bottom: 60px; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts .content-text {
        font-size: 2.2vw;
        margin-bottom: 5vw; } }
    @media screen and (max-width: 767px) {
      .containts .content-text {
        width: 66vw;
        font-size: 6vw;
        text-align: left; } }
  .containts .title-result {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 458px;
    height: 263px;
    margin: 0 auto;
    margin-bottom: 60px; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts .title-result {
        width: 38.2vw;
        height: 21.9vw;
        margin-bottom: 5vw; } }
    @media screen and (max-width: 767px) {
      .containts .title-result {
        width: 68.8vw;
        height: 33.2vw;
        background-size: 68.8vw auto;
        transform: translateX(-5vw);
        margin-bottom: 11.1vw; } }
    .containts .title-result img {
      width: 210px;
      transform: translate(24px, 12px); }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts .title-result img {
          width: 17.5vw;
          transform: translate(2vw, 1vw); } }
      @media screen and (max-width: 767px) {
        .containts .title-result img {
          width: 42vw;
          transform: translate(4.7vw, 4vw); } }
  .containts .red {
    background-image: url("./../../../img/board_red.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top; }
  .containts .green {
    background-image: url("./../../../img/board_green.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top; }
  .containts .brown {
    background-image: url("./../../../img/board_brown.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top; }
  .containts ul.memory {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 652px;
    gap: 100px 0px;
    margin: 0 auto; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts ul.memory {
        width: 54.3vw;
        gap: 8.3vw 0vw; } }
    @media screen and (max-width: 767px) {
      .containts ul.memory {
        width: 81.5vw;
        gap: 10.4vw 0vw;
        margin: 0 auto 26.1vw; } }
    .containts ul.memory .note {
      position: relative;
      width: 656px;
      height: 1028px;
      padding: 112px 102px;
      background-image: url("../../img/note.png");
      background-size: contain;
      background-position: top left;
      background-repeat: no-repeat;
      border-radius: 12px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.memory .note {
          width: 54.7vw;
          height: 85.7vw;
          padding: 9.3vw 8.5vw;
          border-radius: 1vw; } }
      @media screen and (max-width: 767px) {
        .containts ul.memory .note {
          width: 81.5vw;
          height: 221vw;
          padding: 12.3vw 10vw;
          background-image: url("../../img/note_sp.png");
          background-size: cover; } }
      .containts ul.memory .note .illust {
        width: 420px;
        height: 420px;
        margin-bottom: 35px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.memory .note .illust {
            width: 35vw;
            height: 35vw;
            margin-bottom: 2.9vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.memory .note .illust {
            width: 100%;
            height: auto;
            margin-bottom: 5.9vw; } }
      .containts ul.memory .note .body,
      .containts ul.memory .note .name {
        display: inline-block; }
      .containts ul.memory .note .name {
        width: 420px;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.115;
        text-align: center;
        margin-bottom: 35px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.memory .note .name {
            width: 35vw;
            font-size: 3vw;
            margin-bottom: 2.9vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.memory .note .name {
            width: 100%;
            font-size: 7.8vw;
            margin-bottom: 5.9vw; } }
      .containts ul.memory .note .body {
        width: 420px;
        height: 325px;
        text-align: left;
        font-size: 26px;
        line-height: 1.115;
        line-break: normal;
        background-image: url("../../img/line.png");
        background-size: 324px auto;
        background-position: top center;
        background-repeat: repeat; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.memory .note .body {
            width: 35.2vw;
            height: 27.1vw;
            font-size: 2.2vw;
            background-size: 27vw auto; } }
        @media screen and (max-width: 767px) {
          .containts ul.memory .note .body {
            width: 100%;
            height: 115vw;
            font-size: 6vw;
            background-size: 74.5vw auto; } }
  .containts ul.photo {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 80px 0px;
    width: 568px;
    margin: 0 auto; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts ul.photo {
        gap: 6.7vw 0vw;
        width: 47.3vw; } }
    @media screen and (max-width: 767px) {
      .containts ul.photo {
        gap: 13vw 0vw;
        width: 81.5vw; } }
    .containts ul.photo h3 {
      display: inline-block;
      font-size: 52px;
      color: #48a248;
      font-weight: 900;
      background: linear-gradient(transparent 70%, #ffff00 70%);
      margin: 0 auto; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.photo h3 {
          font-size: 4.3vw; } }
      @media screen and (max-width: 767px) {
        .containts ul.photo h3 {
          font-size: 7.6vw; } }
    .containts ul.photo li.cont {
      width: 100%;
      height: auto; }
      @media screen and (max-width: 767px) {
        .containts ul.photo li.cont {
          margin: 0 auto 27.4vw; } }
      .containts ul.photo li.cont .tape {
        position: relative;
        padding: 15px;
        width: 480px;
        margin: 0 auto 15px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.photo li.cont .tape {
            padding: 1.3vw;
            width: 40vw;
            margin: 0 auto 1.3vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.photo li.cont .tape {
            width: 81.5vw;
            margin: 0 auto 3.9vw; } }
        .containts ul.photo li.cont .tape .pht {
          width: 420px;
          height: auto;
          border: 10px solid #ffffff; }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .tape .pht {
              width: 35vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .tape .pht {
              width: 90%; } }
        .containts ul.photo li.cont .tape .tpLT {
          position: absolute;
          top: 0;
          left: 0;
          width: 145px;
          transform: rotate(-15deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .tape .tpLT {
              width: 12.1vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .tape .tpLT {
              width: 19.9vw; } }
        .containts ul.photo li.cont .tape .tpRT {
          position: absolute;
          top: 0;
          right: 0;
          width: 145px;
          transform: rotate(30deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .tape .tpRT {
              width: 12.1vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .tape .tpRT {
              width: 19.9vw; } }
        .containts ul.photo li.cont .tape .tpRB {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 145px;
          transform: rotate(-30deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .tape .tpRB {
              width: 12.1vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .tape .tpRB {
              width: 19.9vw; } }
        .containts ul.photo li.cont .tape .tpLB {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 145px;
          transform: rotate(15deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .tape .tpLB {
              width: 12.1vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .tape .tpLB {
              width: 19.9vw; } }
      .containts ul.photo li.cont .name {
        display: inline-block;
        width: 420px;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.115;
        text-align: center;
        margin-bottom: 30px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.photo li.cont .name {
            width: 35vw;
            font-size: 3vw;
            margin-bottom: 2.5vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.photo li.cont .name {
            font-size: 6vw;
            margin-bottom: 7.8vw; } }
        .containts ul.photo li.cont .name .small {
          font-size: 26px;
          font-weight: 700; }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .name .small {
              font-size: 2.2vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .name .small {
              font-size: 3.6vw; } }
      .containts ul.photo li.cont .body {
        width: 600px;
        height: 252px;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        flex-wrap: nowrap; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.photo li.cont .body {
            width: 50vw;
            height: 21vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.photo li.cont .body {
            width: 81.5vw;
            height: 55.1vw;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-flex-direction: column;
            flex-direction: column;
            flex-wrap: wrap;
            margin: 0 auto; } }
        .containts ul.photo li.cont .body .char {
          position: relative;
          width: 188px;
          height: auto; }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .body .char {
              width: 15.7vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .body .char {
              z-index: 500;
              width: 60vw;
              margin: 0 auto; } }
          .containts ul.photo li.cont .body .char img {
            position: absolute;
            bottom: 0; }
          .containts ul.photo li.cont .body .char .k01 {
            width: 180px;
            right: 0; }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .char .k01 {
                width: 15vw; } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .char .k01 {
                width: 23.5vw;
                top: -20.6vw;
                right: 0; } }
          .containts ul.photo li.cont .body .char .k02 {
            width: 153px;
            left: 20px; }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .char .k02 {
                width: 12.8vw;
                left: 1.7vw; } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .char .k02 {
                width: 21.4vw;
                top: 42.4vw; } }
          .containts ul.photo li.cont .body .char .k03 {
            width: 230px;
            left: -60px; }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .char .k03 {
                width: 19.2vw;
                left: -5vw; } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .char .k03 {
                width: 30vw;
                left: auto;
                top: -23.2vw;
                right: 0; } }
          .containts ul.photo li.cont .body .char .k04 {
            width: 145px;
            left: 20px; }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .char .k04 {
                width: 12.1vw;
                left: 1.7vw; } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .char .k04 {
                width: 18.5vw;
                left: 7.5vw;
                top: 34.7vw; } }
        .containts ul.photo li.cont .body .baloon {
          position: relative;
          width: 412px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-image: url("../../img/baloon.png"), url("../../img/baloon_tip.png");
          background-size: 388px auto, 113px auto;
          background-position: right top, left 0px bottom 30px;
          background-repeat: no-repeat; }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .containts ul.photo li.cont .body .baloon {
              width: 34.3vw;
              background-size: 32.3vw auto, 9.4vw auto;
              background-position: right top, left 0vw bottom 2.5vw; } }
          @media screen and (max-width: 767px) {
            .containts ul.photo li.cont .body .baloon {
              width: 81.5vw;
              height: 55.1vw;
              background-size: 81.2vw auto, 11vw 6.3vw;
              background-position: right top, left 40.2vw bottom; } }
          .containts ul.photo li.cont .body .baloon img {
            position: absolute;
            transform: translateX(10px);
            width: 70%;
            height: auto; }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .baloon img {
                transform: translateX(0.8vw); } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .baloon img {
                transform: translate(0.8vw, -1.5vw); } }
        .containts ul.photo li.cont .body .reverse {
          transform: scaleX(-1); }
          .containts ul.photo li.cont .body .reverse img {
            transform: scaleX(-1) translateX(-5px); }
            @media screen and (min-width: 768px) and (max-width: 1200px) {
              .containts ul.photo li.cont .body .reverse img {
                transform: scaleX(-1) translateX(-0.4vw); } }
            @media screen and (max-width: 767px) {
              .containts ul.photo li.cont .body .reverse img {
                transform: scaleX(-1) translate(-0.4vw, -1vw); } }
  .containts ul.result {
    width: 750px;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px 0;
    margin: 0 auto; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .containts ul.result {
        width: 62.5vw;
        gap: 5vw 0; } }
    @media screen and (max-width: 767px) {
      .containts ul.result {
        position: relative;
        flex-direction: column;
        width: 81.5vw;
        gap: 0;
        padding: 0; } }
    .containts ul.result .char {
      width: 205px;
      bottom: 0;
      margin-top: auto; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.result .char {
          width: 17.1vw; } }
      @media screen and (max-width: 767px) {
        .containts ul.result .char {
          position: relative;
          width: 100%;
          height: 100%;
          bottom: auto; } }
      .containts ul.result .char .kaba {
        width: 190px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .containts ul.result .char .kaba {
            width: 15.8vw; } }
        @media screen and (max-width: 767px) {
          .containts ul.result .char .kaba {
            position: absolute;
            width: 23.8vw;
            height: 29vw;
            left: -2.5vw;
            top: 36.1vw; } }
      .containts ul.result .char .melo {
        width: 100%; }
        @media screen and (max-width: 767px) {
          .containts ul.result .char .melo {
            position: absolute;
            width: 25.8vw;
            height: 28vw;
            right: -2.5vw;
            bottom: -10.1vw; } }
    .containts ul.result .baloon_kaba {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 545px;
      height: 333px;
      background-image: url("../../img/baloon.png"), url("../../img/baloon_tip.png");
      background-size: 514px 333px, 118px 54px;
      background-position: right top, left bottom 120px;
      background-repeat: no-repeat; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.result .baloon_kaba {
          width: 45.4vw;
          height: 27.8vw;
          background-size: 42.8vw 27.8vw, 9.8vw 4.5vw;
          background-position: right top, left bottom 10vw; } }
      @media screen and (max-width: 767px) {
        .containts ul.result .baloon_kaba {
          width: 81.5vw;
          height: 55.6vw;
          margin-bottom: 10.4vw;
          background-size: contain, 12.9vw 9.3vw;
          background-position: center top, left 22vw bottom 0; } }
    .containts ul.result .baloon_melo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 545px;
      height: 333px;
      background-image: url("../../img/baloon_melo.png"), url("../../img/baloon_melo_tip.png");
      background-size: 514px 333px, 118px 54px;
      transform: scaleX(-1);
      background-position: right top, left bottom 120px;
      background-repeat: no-repeat; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.result .baloon_melo {
          width: 45.4vw;
          height: 27.8vw;
          background-size: 42.8vw 27.8vw, 9.8vw 4.5vw;
          background-position: right top, left bottom 10vw; } }
      @media screen and (max-width: 767px) {
        .containts ul.result .baloon_melo {
          width: 81.5vw;
          height: 55.6vw;
          background-size: contain, 12.9vw 9.3vw;
          background-position: center top, right 22vw bottom 0;
          transform: scaleX(1); } }
    .containts ul.result .result_kaba {
      width: 450px;
      transform: translateX(15px); }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.result .result_kaba {
          width: 37.5vw;
          transform: translateX(1.3vw); } }
      @media screen and (max-width: 767px) {
        .containts ul.result .result_kaba {
          width: 80%;
          transform: translate(1.3vw, -2vw); } }
    .containts ul.result .result_melo {
      width: 383px;
      transform: translateX(10px) scaleX(-1); }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .containts ul.result .result_melo {
          width: 31.9vw;
          transform: translateX(0.8vw) scaleX(-1); } }
      @media screen and (max-width: 767px) {
        .containts ul.result .result_melo {
          width: 70%;
          transform: translate(1.3vw, -2vw) scaleX(1); } }

.separate {
  background-image: url("../../../img/bg_products.png");
  background-size: 1200px 1095px;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 583px; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .separate {
      background-size: 100vw 91.3vw;
      padding-bottom: 48.6vw; } }
  @media screen and (max-width: 767px) {
    .separate {
      background-size: 100vw auto;
      padding-bottom: 53vw; } }

.result03_message {
  display: block;
  width: 750px;
  text-align: center;
  margin: 0 auto;
  margin-top: -250px; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .result03_message {
      width: 62.5vw;
      margin-top: -20.8vw; } }
  @media screen and (max-width: 767px) {
    .result03_message {
      width: 100vw;
      margin: -21.4vw 0 50vw; } }
  .result03_message h2 {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 80px; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .result03_message h2 {
        margin-bottom: 6.7vw; } }
    @media screen and (max-width: 767px) {
      .result03_message h2 {
        width: 81.5vw;
        margin: 0 auto 13vw; } }
    .result03_message h2 img.title {
      width: 645px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .result03_message h2 img.title {
          width: 53.8vw; } }
      @media screen and (max-width: 767px) {
        .result03_message h2 img.title {
          width: 85%;
          margin: 0 auto; } }
  .result03_message .inner {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 750px;
    gap: 20px; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .result03_message .inner {
        width: 62.5vw;
        gap: 1.7vw; } }
    @media screen and (max-width: 767px) {
      .result03_message .inner {
        flex-direction: column;
        width: 81.5vw;
        margin: 0 auto;
        gap: 10.4vw 0; } }
    .result03_message .inner .one,
    .result03_message .inner .half {
      position: relative;
      width: 365px;
      height: 365px;
      padding: 50px;
      background-image: url("../../img/line.png");
      background-size: 258px 290px;
      background-position: top 50px left 50px;
      background-repeat: no-repeat;
      background-color: #ffffff;
      border-radius: 12px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .result03_message .inner .one,
        .result03_message .inner .half {
          width: 30.4vw;
          height: 30.4vw;
          padding: 4.2vw;
          background-size: 21.5vw 24.2vw;
          background-position: top 4.2vw left 4.2vw;
          border-radius: 1vw; } }
      @media screen and (max-width: 767px) {
        .result03_message .inner .one,
        .result03_message .inner .half {
          width: 100%;
          height: 80vw;
          padding: 12.3vw 10vw;
          background-image: url("../../img/line_sp.png");
          background-position: center top 8.4vw;
          background-size: 60.8vw 67.8vw; } }
      .result03_message .inner .one .body,
      .result03_message .inner .one .name,
      .result03_message .inner .half .body,
      .result03_message .inner .half .name {
        display: inline-block;
        font-size: 26px;
        line-height: 1.115; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .result03_message .inner .one .body,
          .result03_message .inner .one .name,
          .result03_message .inner .half .body,
          .result03_message .inner .half .name {
            font-size: 2.2vw; } }
        @media screen and (max-width: 767px) {
          .result03_message .inner .one .body,
          .result03_message .inner .one .name,
          .result03_message .inner .half .body,
          .result03_message .inner .half .name {
            font-size: 6vw; } }
      .result03_message .inner .one .body,
      .result03_message .inner .half .body {
        text-align: left; }
      .result03_message .inner .one .name,
      .result03_message .inner .half .name {
        position: absolute;
        bottom: 54px;
        right: 50px;
        width: 265px;
        text-align: right; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .result03_message .inner .one .name,
          .result03_message .inner .half .name {
            bottom: 4.5vw;
            right: 4.2vw;
            width: 22.1vw; } }
        @media screen and (max-width: 767px) {
          .result03_message .inner .one .name,
          .result03_message .inner .half .name {
            bottom: 14vw;
            right: 10vw;
            width: 61vw; } }
      @media screen and (max-width: 767px) {
        .result03_message .inner .one .small,
        .result03_message .inner .half .small {
          font-size: 3.6vw; } }
      .result03_message .inner .one img,
      .result03_message .inner .half img {
        position: absolute;
        width: 50px;
        height: auto;
        top: -15px; }
        @media screen and (min-width: 768px) and (max-width: 1200px) {
          .result03_message .inner .one img,
          .result03_message .inner .half img {
            width: 4.2vw;
            height: auto;
            top: -2vw; } }
        @media screen and (max-width: 767px) {
          .result03_message .inner .one img,
          .result03_message .inner .half img {
            width: 12.5vw;
            top: -3.2vw; } }
        .result03_message .inner .one img.suika01,
        .result03_message .inner .half img.suika01 {
          left: 50px;
          transform: rotate(-10deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.suika01,
            .result03_message .inner .half img.suika01 {
              left: 4.2vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.suika01,
            .result03_message .inner .half img.suika01 {
              left: 11vw; } }
        .result03_message .inner .one img.suika02,
        .result03_message .inner .half img.suika02 {
          left: 55px;
          transform: rotate(5deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.suika02,
            .result03_message .inner .half img.suika02 {
              left: 4.6vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.suika02,
            .result03_message .inner .half img.suika02 {
              left: 12vw; } }
        .result03_message .inner .one img.suika03,
        .result03_message .inner .half img.suika03 {
          left: 55px;
          transform: rotate(-5deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.suika03,
            .result03_message .inner .half img.suika03 {
              left: 4.6vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.suika03,
            .result03_message .inner .half img.suika03 {
              left: 12vw; } }
        .result03_message .inner .one img.melon01,
        .result03_message .inner .half img.melon01 {
          left: 50px;
          transform: rotate(-10deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.melon01,
            .result03_message .inner .half img.melon01 {
              left: 4.2vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.melon01,
            .result03_message .inner .half img.melon01 {
              top: -1vw;
              left: 14vw; } }
        .result03_message .inner .one img.melon02,
        .result03_message .inner .half img.melon02 {
          left: 55px;
          transform: rotate(5deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.melon02,
            .result03_message .inner .half img.melon02 {
              left: 4.6vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.melon02,
            .result03_message .inner .half img.melon02 {
              left: 12vw; } }
        .result03_message .inner .one img.melon03,
        .result03_message .inner .half img.melon03 {
          left: -30px;
          transform: rotate(-6deg); }
          @media screen and (min-width: 768px) and (max-width: 1200px) {
            .result03_message .inner .one img.melon03,
            .result03_message .inner .half img.melon03 {
              left: -2.5vw; } }
          @media screen and (max-width: 767px) {
            .result03_message .inner .one img.melon03,
            .result03_message .inner .half img.melon03 {
              left: -6.5vw; } }
    .result03_message .inner .one {
      width: 750px;
      height: 365px;
      background-size: 643px 290px; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .result03_message .inner .one {
          width: 62.5vw;
          height: 30.4vw;
          background-size: 53.6vw 24.2vw; } }
      @media screen and (max-width: 767px) {
        .result03_message .inner .one {
          width: 100%;
          height: 115vw;
          padding: 12.3vw 10vw;
          background-image: url("../../img/line_one_sp.png");
          background-position: center top 11.8vw;
          background-size: 60.8vw 89.2vw; } }
      @media screen and (max-width: 767px) {
        .result03_message .inner .one .name {
          bottom: 15vw; } }

.thoughts {
  width: 735px;
  height: 385px;
  margin: 120px 0 -200px 140px;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  flex-wrap: nowrap; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .thoughts {
      width: 61.3vw;
      height: 32.1vw;
      margin: 10vw 0 -16.7vw 11.7vw; } }
  @media screen and (max-width: 767px) {
    .thoughts {
      width: 85vw;
      height: auto;
      margin: 0 auto;
      flex-direction: column-reverse;
      flex-wrap: wrap; } }
  .thoughts .char {
    position: relative;
    width: 188px;
    height: auto; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .thoughts .char {
        width: 15.7vw; } }
    @media screen and (max-width: 767px) {
      .thoughts .char {
        top: -11.7vw;
        width: 29.6vw;
        height: 36.2vw; } }
    .thoughts .char img {
      position: absolute;
      left: 0;
      bottom: 0; }
  .thoughts .baloon {
    position: relative;
    width: 617px;
    background-image: url("../../img/baloon.png"), url("../../img/baloon_tip.png");
    background-size: 520px auto, 113px auto;
    background-position: right top, left 10px bottom 100px;
    background-repeat: no-repeat; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .thoughts .baloon {
        width: 51.4vw;
        background-size: 43.3vw auto, 9.4vw auto;
        background-position: right top, left 0.8vw bottom 8.3vw; } }
    @media screen and (max-width: 767px) {
      .thoughts .baloon {
        position: static;
        width: 85vw;
        height: 60.6vw;
        text-align: center;
        background-size: 85vw auto, 15.1vw auto;
        background-position: right top, left 32vw bottom 0px; } }
    .thoughts .baloon img {
      position: absolute;
      left: 120px;
      top: 70px;
      width: 362px;
      height: auto; }
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .thoughts .baloon img {
          left: 10vw;
          top: 5.8vw;
          width: 30.2vw; } }
      @media screen and (max-width: 767px) {
        .thoughts .baloon img {
          position: static;
          left: auto;
          margin-top: 11vw;
          width: 75%;
          height: auto; } }

footer {
  position: absolute;
  z-index: -5;
  max-width: 1200px;
  width: 100%;
  height: 460px;
  bottom: -1400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  background-image: url("./../../../img/bg_recipe.png");
  background-size: 1200px 836px;
  background-position: center top;
  background-repeat: no-repeat; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    footer {
      max-width: 100vw;
      width: 100%;
      height: 38.3vw;
      bottom: -116.7vw;
      background-size: 100vw 69.7vw; } }
  @media screen and (max-width: 767px) {
    footer {
      position: static;
      z-index: -500;
      max-width: 100vw;
      bottom: auto;
      margin: 61vw 0 0;
      height: 43.9vw;
      -webkit-flex-direction: column;
      flex-direction: column;
      background-size: 100vw auto; } }
  footer p {
    position: absolute;
    bottom: 135px;
    width: 100%;
    font-size: 15px;
    text-align: center;
    margin: 0 auto; }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      footer p {
        bottom: 11.3vw;
        font-size: 1.3vw; } }
    @media screen and (max-width: 767px) {
      footer p {
        position: static;
        width: 100vw;
        font-size: 2.5vw;
        margin-top: 8.9vw; } }

footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 692px;
  background-image: url("./../../../img/cloud02.png");
  background-size: 290px auto;
  background-position: left 772px top;
  background-repeat: no-repeat; }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    footer::after {
      height: 57.7vw;
      background-size: 24.2vw auto;
      background-position: left 64.3vw top; } }
  @media screen and (max-width: 767px) {
    footer::after {
      height: 68.8vw;
      background-size: 28.4vw auto;
      background-position: left 49.8vw top; } }

footer::before {
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 125px;
  background-image: url("./../../../img/header.webp");
  background-size: 1200px 125px;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scaleY(-1); }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    footer::before {
      height: 10.4vw;
      background-size: 100vw 10.4vw; } }
  @media screen and (max-width: 767px) {
    footer::before {
      position: absolute;
      bottom: 0;
      height: 14.3vw;
      background-image: url("./../../../img/header_sp.webp");
      background-size: 100vw auto;
      background-position: center bottom; } }