.p-page-home {
  opacity: 0;

  /* 今までのトータル */
  .p-page-home-total {
    padding: 30px 0 0 0;

    .p-page-home-total-content {
      display: inline-flex;
      align-items: center;
      background-color: #fff;
      border-radius: 20px;
      padding: 20px 30px;

      .p-page-home-total-content__image {
        width: 21px;
        margin-right: 20px;
      }

      .p-page-home-total-content__text,
      .p-page-home-total-content__count {
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 1px;
        color: var(--color-font-02);
      }

      .p-page-home-total-content__count {
        color: var(--color-font-04);
      }
    }
  }

  /* 今日の気分 */
  .p-page-home-feeling {
    padding: 50px 0 150px 0;

    .l-container {
      display: flex;
      justify-content: center;
    }

    .p-page-home-feeling-box {
      width: 680px;
      border-radius: 20px;
      box-sizing: border-box;
      border: 2px solid var(--color-bg-01);
      background: linear-gradient(180deg, #FFF 0%, #FFF8E8 100%);
      box-shadow: 0px 10px 30px 0px rgba(165, 123, 0, 0.20);
      padding: 50px 100px;

      .p-page-home-feeling-box__inner {
        display: grid;
        gap: 30px;

        .p-page-home-feeling-box__title {
          color: var(--color-font-04);
          text-align: center;
          font-size: 2.0rem;
          font-weight: 700;
          line-height: 150%;
          letter-spacing: 1px;
        }

        .p-page-home-feeling-box__feelings {
          display: flex;
          justify-content: center;

          .p-page-home-feeling-box__list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 15px;
            justify-content: center;

            .p-page-home-feeling-box__list-item {
              display: flex;
              justify-content: center;
              transition: all .3s linear;
            }
          }

          .p-page-home-feeling-box__list.is-selected {
            grid-template-columns: repeat(1, 1fr);

            .p-page-home-feeling-box__list-item.is-selected {
              .c-button-feeling {
                gap: 10px;
                
                .c-button-feeling__icon {
                  width: 130px;
                  height: 130px;

                  .c-button-feeling__image {
                    width: 90px;
                  }

                  .c-button-feeling__label {
                    font-size: 2.2rem;
                  }
                }
              }
            }

            .p-page-home-feeling-box__list-item:not(.is-selected) {
              display: none;
            }
          }
        }

        .p-page-home-feeling-box__button {
          display: flex;
          justify-content: center;
        }
      }
    }
  }

  /* 今日の気分 - 選択済み */
  .p-page-home-feeling.is-active {
    padding: 50px 0;

    .p-page-home-feeling-box {
      padding: 15px 100px;
    }
  }


  /* 今日のテーマのWrap */
  .p-page-home-education-wrap {
    display: none;
    .p-page-home-education {
      display: none;
    }      
  }

  /* 今日のテーマのWrap - 非表示 */
  /* .p-page-home-education-wrap {
    display: block;
    #p-page-home-education-positive {
      display: block;
    }      
  } */
  
  /* 今日のテーマ */
  .p-page-home-today {
    padding: 0 0 217px 0;

    .p-page-home-today__content {
      display: grid;
      grid-template-columns: auto 280px;
      gap: 0 170px;
      align-items: center;

      .p-page-home-today__heading {
        display: flex;
        margin-bottom: 20px;
        gap: 20px;

        .p-page-home-today__heading-title {
          .p-page-home-today__heading-title-text {
            display: inline-block;
            background-color: var(--color-primary-01);
            padding: 15px 30px 15px 20px;
            border-radius: 0px 30px 30px 0px;
            color: var(--color-font-03);
            font-size: 2.0rem;
            font-weight: 700;
            letter-spacing: 1.8px;
          }  
        }

        .p-page-home-today__heading-genre {
          display: inline-flex;
          background-color: var(--color-primary-02);
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          padding: 15px 30px;
          box-sizing: border-box;
          color: var(--color-font-03);
          font-size: 2.0rem;
          font-weight: 700;
        }
      }
      
      .p-page-home-today__title {
        grid-column: 1 / 2;
        font-size: 3.0rem;
        font-weight: 700;
        line-height: 170%;
        color: var(--color-primary-01);
        margin-bottom: 50px;
      }
  
      .p-page-home-today__description {
        grid-column: 1 / 2;
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 200%;
        color: var(--color-font-02);
        letter-spacing: 1px;
      }

      .p-page-home-today__decoration {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
      }
    }
  }

  /* TodoContents */
  .p-page-home-todo {
    background-color: #fff;
    padding: 0 0 170px 0;
    position: relative;

    .p-page-home-todo__decoration {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -100%);
      z-index: 1;
      fill: #fff;
    }

    .p-page-home-todo-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      transform: translateY(-30px);
      position: relative;
      z-index: 2;

      .p-page-home-todo-heading__label {
        font-size: 2.0rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--color-primary-02);
        margin-bottom: 5px;
        font-family: var(--font-ff-roboto);
      }

      .p-page-home-todo-heading__number {
        font-size: 4.8rem;
        font-weight: 700;
        color: var(--color-primary-02);
        font-family: var(--font-ff-roboto);
      }
    }

    .p-page-home-todo__title {
      font-size: 3.6rem;
      font-weight: 700;
      line-height: 170%;
      letter-spacing: 1.8px;
      margin-bottom: 50px;
    }

    .p-page-home-todo__description {
      padding: 30px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
      position: relative;
      cursor: pointer;

      .p-page-home-todo__description-title {
        font-size: 1.8rem;
        font-weight: 700;
      }

      .p-page-home-todo__description-text {
        display: none;
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 200%;
        color: var(--color-font-02);
        letter-spacing: 1px;
        padding-right: 10px;
      }

      .p-page-home-todo__description-trigger {
        display: inline-block;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 30px;
        right: 25px;
        cursor: pointer;

        .p-page-home-todo__description-trigger-inner {
          display: inline-block;
          position: relative;
          width: 100%;
          height: 100%;

          .p-page-home-todo__description-trigger-line {
            display: inline-block;
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            height: 2px;
            background-color: var(--color-primary-01);
            transition: all .1s linear;

            &:last-child {
              transform: rotate(90deg);
            }
          }
        }
      }
    }

    .p-page-home-todo__description.is-active {
      .p-page-home-todo__description-trigger {
        .p-page-home-todo__description-trigger-inner {
          .p-page-home-todo__description-trigger-line {
            &:last-child {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }

  .p-page-home-todo-02 {
    background-color: var(--color-bg-04);

    .p-page-home-todo__decoration {
      fill: var(--color-bg-04);
    }

    .p-page-home-todo-heading {
      .p-page-home-todo-heading__label {
        color: var(--color-primary-03);
      }
  
      .p-page-home-todo-heading__number {
        color: var(--color-primary-03);
      }  
    }
  }

  .p-page-home-todo-03 {
    background-color: var(--color-bg-01);

    .p-page-home-todo-heading {
      .p-page-home-todo-heading__label {
        color: var(--color-primary-01);
      }

      .p-page-home-todo-heading__number {
        color: var(--color-primary-01);
      }
    }

    .p-page-home-todo__decoration {
      fill: var(--color-bg-01);
    }
  }

  /* GOAL */
  .p-page-home-goal {
    background-color: #fff;
    padding: 50px 0 100px 0;

    .p-page-home-goal-dots {
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 50px;

      .p-page-home-goal-dots__dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--color-border-01);
      }
    }

    .p-page-home-goal-content {
      .p-page-home-goal-content__heading {
        text-align: center;

        .p-page-home-goal-content__heading-flag {
          display: inline-block;
          position: relative;

          .p-page-home-goal-content__heading-flag-image {
            height: auto;
          }

          .p-page-home-goal-content__heading-balloon {
            display: inline-block;
            border-radius: 50%;
            position: absolute;
            z-index: 1;
            animation: floatingBalloon 1.8s ease-in-out infinite alternate-reverse;
          }

          .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--green {
            background-color: #39AE36;
            width: 75px;
            height: 75px;
            top: 0;
            left: -65px;
            animation-delay: 0s;
          }

          .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--blue {
            background-color: #438ABB;
            width: 44px;
            height: 44px;
            top: 152px;
            left: calc((44px + 32px) * -1);
            animation-delay: 1.3s;
          }

          .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--purple {
            background-color: #B34393;
            width: 37px;
            height: 37px;
            top: 38px;
            right: 11px;
            animation-delay: 0.3s;
          }

          .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--yellow {
            background-color: #F5BA34;
            width: 81px;
            height: 81px;
            top: 184px;
            right: 48px;
            animation-delay: 0.5s;
          }

          .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--orange {
            background-color: #EC8A3D;
            width: 33px;
            height: 33px;
            top: 184px;
            right: calc((33px + 43px) * -1);
            animation-delay: 0.6s;
          }
        }
      }

      .p-page-home-goal-content-summary {
        background-color: var(--color-bg-01);
        border-radius: 20px;
        padding: 50px 50px 60px 50px;

        .p-page-home-goal-content-summary__title {
          text-align: center;

          .p-page-home-goal-content-summary__title-text {
            display: inline-block;
            font-size: 2.0rem;
            font-weight: 700;
            line-height: 150%;
            letter-spacing: 1px;
            color: var(--color-font-03);
            background-color: var(--color-primary-01);
            border-radius: 30px;
            padding: 15px 30px;
            margin-bottom: 30px;
          }
        }

        .p-page-home-goal-content-summary__description {
          font-size: 2.0rem;
          font-weight: 700;
          line-height: 200%;
          letter-spacing: 1px;
        }
      }
    }
  }

  /* NEWS */
  .p-page-home-news {
    padding: 100px 0;
    background-color: var(--color-bg-04);

    .p-page-home-news__title {
      color: var(--color-font-01);
      font-size: 3.0rem;
      font-weight: 700;
      line-height: 150%;
      letter-spacing: 1.5px;
      margin-bottom: 50px;
    }

    .p-page-home-news__more {
      margin-top: 30px;
      text-align: right;
    }
  }
}

/* SPLASH */
.p-page-home-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;

  .p-page-home-splash__image-wrap {
    animation-name: fadeInSplashImage;
    animation-duration: 0.6s;
  }
}

@keyframes fadeInSplashImage {
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatingBalloon {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(15%);
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .p-page-home {
    /* 今までのトータル */
    .p-page-home-total {
      padding: 30px 60px 0 60px;
    }
  
    /* 今日の気分 */
    .p-page-home-feeling.is-active {
      padding: 30px 60px;
    }

    /* 今日のテーマのWrap */
    /* .p-page-home-education-wrap {
      display: block;
      #p-page-home-education-positive {
        display: block;
      }
    } */
  
    /* 今日のテーマ */
    .p-page-home-today {
      padding: 30px 60px 109px 60px;

      .p-page-home-today__content {
        grid-template-columns: auto 210px;
        gap: 0 40px;
  
        .p-page-home-today__decoration {
          grid-column: 2 / 3;
          grid-row: 1 / 4;
        }
      }
    }
  
    /* TodoContents */
    .p-page-home-todo {
      padding: 0 60px 150px 60px;
    }
  
    /* GOAL */
    .p-page-home-goal {
      padding: 50px 60px 70px 60px;
    }
  
    /* NEWS */
    .p-page-home-news {
      padding: 70px 60px;
    }
  }

}

@media screen and (max-width: 768px) {
  .p-page-home {
    /* 今までのトータル */
    .p-page-home-total {
      padding: 30px 30px 0 30px;
  
      .p-page-home-total-content {
        display: grid;
        gap: 10px 7px;
        grid-template-columns: auto auto;
        justify-content: center;

        .p-page-home-total-content__image {
          margin-right: 0;
        }

        .p-page-home-total-content__text {
          .p-page-home-total-content__text-symbol {
            display: none;
          }
        }

        .p-page-home-total-content__text,
        .p-page-home-total-content__count {
          font-size: 1.6rem;
          letter-spacing: 0.8px;
        }

        .p-page-home-total-content__count {
          grid-column: 1 / 3;
          text-align: center;
        }
      }
    }
  
    /* 今日の気分 */
    .p-page-home-feeling {
      padding: 30px 30px 50px 30px;

      .l-container {
        display: block;
      }
  
      .p-page-home-feeling-box {
        width: auto;
        border-radius: 10px;
        padding: 15px 30px;
  
        .p-page-home-feeling-box__inner {
          display: grid;
          gap: 30px;
  
          .p-page-home-feeling-box__title {
          }
  
          .p-page-home-feeling-box__feelings {
            .p-page-home-feeling-box__list {
              grid-template-columns: repeat(2, 1fr);
              gap: 30px;
  
              .p-page-home-feeling-box__list-item {
              }
            }
  
            .p-page-home-feeling-box__list.is-selected {
              .p-page-home-feeling-box__list-item.is-selected {
                .c-button-feeling {
                  .c-button-feeling__icon {
                    .c-button-feeling__image {
                    }
  
                    .c-button-feeling__label {
                    }
                  }
                }
              }
  
              .p-page-home-feeling-box__list-item:not(.is-selected) {
              }
            }
          }
  
          .p-page-home-feeling-box__button {
          }
        }
      }
    }

    /* 今日の気分 */
    .p-page-home-feeling.is-active {
      padding: 30px 30px 50px 30px;
    }
    
    /* 今日のテーマ */
    .p-page-home-today {
      padding: 30px 30px 109px 30px;
  
      .p-page-home-today__content {
        grid-template-columns: auto;
  
        .p-page-home-today__heading {
          .p-page-home-today__heading-text {
            letter-spacing: 1px;
          }
        }
        
        .p-page-home-today__title {
          grid-column: auto;
          letter-spacing: 1.8px;
        }
    
        .p-page-home-today__description {
          grid-column: auto;
        }
  
        .p-page-home-today__decoration {
          grid-column: auto;
          grid-row: auto;
          margin-top: 70px;
          text-align: center;
          display: none;

          .p-page-home-today__decoration-image {
            max-width: 240px;
          }
        }
      }
    }
  
    /* TodoContents */
    .p-page-home-todo {
      padding: 0 30px 150px 30px;
    
      .p-page-home-todo-heading {
        margin-bottom: 20px;
        transform: translateY(-22px);
      }
  
      .p-page-home-todo__title {
        font-size: 2.4rem;
        letter-spacing: 1px;
        margin-bottom: 40px;
      }
  
      .p-page-home-todo__description {
        padding: 20px;
  
        .p-page-home-todo__description-title {
          font-size: 1.6rem;
          line-height: 200%;
          letter-spacing: 1.6px;
        }
  
        .p-page-home-todo__description-text {
          font-size: 1.6rem;
          letter-spacing: 1.6px;
          padding-right: 20px;
        }
  
        .p-page-home-todo__description-trigger {
          top: 30px;
          right: 25px;
        }
      }
    }

    .p-page-home-todo-03 {
      padding-bottom: 70px;
    }
  
    /* GOAL */
    .p-page-home-goal {
      padding: 50px 30px 70px 30px;
    
      .p-page-home-goal-content {
        .p-page-home-goal-content__heading {  
          .p-page-home-goal-content__heading-flag {
            .p-page-home-goal-content__heading-flag-image {
              width: calc((253 / 330) * 100%);
            }

            .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--green {
              width: calc((37 / 390) * 100vw);
              height: calc((37 / 390) * 100vw);
              top: 0;
              left: calc((5 / 390) * 100vw);
            }
  
            .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--blue {
              width: calc((22 / 390) * 100vw);
              height: calc((22 / 390) * 100vw);
              top: calc((76 / 390) * 100vw);
              left: 0;
            }
  
            .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--purple {
              width: calc((18 / 390) * 100vw);
              height: calc((18 / 390) * 100vw);
              top: calc((19 / 390) * 100vw);
              right: calc((44 / 390) * 100vw);
            }
  
            .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--yellow {
              width: calc((41 / 390) * 100vw);
              height: calc((41 / 390) * 100vw);
              top: calc((93 / 390) * 100vw);
              right: calc((62 / 390) * 100vw);
            }
  
            .p-page-home-goal-content__heading-balloon.p-page-home-goal-content__heading-balloon--orange {
              width: calc((16 / 390) * 100vw);
              height: calc((16 / 390) * 100vw);
              top: calc((93 / 390) * 100vw);
              right: 0;
            }
          }
        }

        .p-page-home-goal-content-summary {
          border-radius: 10px;
          padding: 50px 30px;
  
          .p-page-home-goal-content-summary__title {  
            .p-page-home-goal-content-summary__title-text {
              line-height: 100%;
            }
          }
  
          .p-page-home-goal-content-summary__description {
            font-size: 1.6rem;
            letter-spacing: 1.6px;
          }
        }
      }
    }
  
    /* NEWS */
    .p-page-home-news {
      padding: 70px 30px;
  
      .p-page-home-news__title {
        line-height: 170%;
        letter-spacing: 1px;
      }
  
      .p-page-home-news__more {
        margin-top: 50px;
      }
    }
  }
}