@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@400;700&display=swap");
:root {
  --color-blue: #1FA7C6;
  --color-deepblue: #21697A;
  --color-lightblue: #EAFCFF;
  --color-yellow: #FDFFAA;
  --font-noto-sans: "Noto Sans JP", sans-serif;
  --font-zen-maru: "Zen Maru Gothic", sans-serif;
  --font-bold: bold;
}

.page-cool {
  font-family: var(--font-noto-sans);
}
.page-cool .font-zenmaru {
  font-family: var(--font-zen-maru);
}
.page-cool .font-bold {
  font-weight: var(--font-bold);
}
.page-cool .remark {
  text-align: right;
}
.page-cool br.sp {
  display: none;
}
@media screen and (width <= 750px) {
  .page-cool br.sp {
    display: block;
  }
}

.circle-bg {
  position: relative;
}
.circle-bg img {
  width: 100%;
}
.circle-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  top: -46px;
  bottom: 0;
  margin: auto;
}
@media screen and (width <= 750px) {
  .circle-bg::before {
    top: -20px;
  }
}
.circle-bg.index-bottom::before {
  background: #DEF0F3;
}
.circle-bg.white::before {
  background: #fff;
}
.circle-bg.blue::before {
  background: var(--color-lightblue);
}

.mv {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3AC3E2), to(#A1E0EF));
  background-image: linear-gradient(180deg, #3AC3E2 0%, #A1E0EF 100%);
  position: relative;
  height: 750px;
}
@media screen and (width <= 750px) {
  .mv {
    height: 430px;
  }
}
.mv .mv_subttl {
  position: absolute;
  width: 500px;
  top: 10px;
  left: 30px;
}
@media screen and (width <= 750px) {
  .mv .mv_subttl {
    width: 250px;
    left: 10px;
  }
}
.mv .mv_animal {
  position: absolute;
  width: 200px;
  top: 30px;
  right: 30px;
}
@media screen and (width <= 750px) {
  .mv .mv_animal {
    width: 100px;
    top: 20px;
  }
}
.mv .mv_animal img {
  -webkit-animation-name: mvAnimal;
          animation-name: mvAnimal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.mv .mv_img01 {
  position: absolute;
  width: 380px;
  top: 180px;
  -webkit-animation-name: slide-up;
          animation-name: slide-up;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@media screen and (width <= 750px) {
  .mv .mv_img01 {
    width: 50%;
    top: 100px;
  }
}
.mv .mv_img01 img {
  -webkit-animation-name: mvFuwafuwa;
          animation-name: mvFuwafuwa;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform-origin: left;
          transform-origin: left;
}
.mv .mv_img02 {
  position: absolute;
  width: 350px;
  top: 140px;
  right: 0;
  -webkit-animation-name: slide-up;
          animation-name: slide-up;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@media screen and (width <= 750px) {
  .mv .mv_img02 {
    width: 50%;
    top: 70px;
  }
}
.mv .mv_img02 img {
  -webkit-animation-name: mvFuwafuwa;
          animation-name: mvFuwafuwa;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform-origin: right;
          transform-origin: right;
}
.mv .mv_ttl {
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  -webkit-animation-name: slide-up;
          animation-name: slide-up;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}

.index {
  background-color: #DEF0F3;
  padding: 40px 0px;
  background-image: url(/special/cool/images/index-bg-circle02.png), url(/special/cool/images/index-bg-circle03.png), url(/special/cool/images/index-bg-circle01.png);
  background-repeat: no-repeat;
  background-position: left top 0px, right top 0px, right top 400px;
  background-size: 20%;
}
.index .ttl {
  color: var(--color-blue);
  text-align: center;
}
.index .ttl span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #FDFFAA));
  background: linear-gradient(transparent 60%, #FDFFAA 60%);
}
.index .index-contents.intro .text {
  padding: 20px 20px 0px 20px;
  color: var(--color-deepblue);
}
.index .index-contents.list {
  padding-top: 50px;
}
.index .index-contents.list .ttl {
  padding-bottom: 20px;
}
.index .index-contents.list .swiper {
  padding: 0px 100px;
}
@media screen and (width <= 750px) {
  .index .index-contents.list .swiper {
    padding: 0px 20px;
  }
}
.index .index-contents.list .swiper-wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.index .index-contents.list .swiper-pagination {
  position: relative;
  padding-top: 20px;
}
.index .index-contents.list .swiper-pagination span {
  width: 20px;
  height: 20px;
  background-color: #7FC6D6;
  margin: 0px 10px;
}
.index .index-contents.list .swiper-pagination span.swiper-pagination-bullet-active {
  background-color: var(--color-deepblue);
}
.index .index-contents.list .swiper-slide {
  background-color: #fff;
  padding: 4px;
  color: var(--color-blue);
  -webkit-box-shadow: 0 0 10px 0 #21697A;
          box-shadow: 0 0 10px 0 #21697A;
  height: auto;
}
.index .index-contents.list .swiper-slide .slide-border {
  border: 1px solid var(--color-blue);
  padding-bottom: 20px;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}
.index .index-contents.list .swiper-slide .slide-border .slide-ttl {
  background-color: var(--color-lightblue);
  text-align: center;
  padding: 10px 0;
  background-image: url(/special/cool/images/index-swip-decoration-snow.png), url(/special/cool/images/index-swip-decoration-snow.png);
  background-repeat: no-repeat;
  background-position: left 10px top 10px, right 10px bottom 10px;
  background-size: 6%;
}
.index .index-contents.list .swiper-slide .slide-border .slide-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 10px;
  background-image: url(/special/cool/images/index-swip-decoration-star.png);
  background-repeat: no-repeat;
  background-position: right 20px top 40px;
  background-size: 6%;
}
@media screen and (width <= 750px) {
  .index .index-contents.list .swiper-slide .slide-border .slide-name {
    gap: 20px;
    background-position: right 20px top 20px;
  }
}
.index .index-contents.list .swiper-slide .slide-border .slide-name .slide-name-img {
  width: 40%;
}
.index .index-contents.list .swiper-slide .slide-border .slide-name .slide-name-img img {
  width: 100%;
}
.index .index-contents.list .swiper-slide .slide-border .slide-point {
  padding: 20px 20px;
  text-align: center;
}
.index .index-contents.list .swiper-slide .slide-border .slide-point .slide-point-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 10px;
}
.index .index-contents.list .swiper-slide .slide-border .slide-point .slide-point-top .slide-point-contents {
  width: 48%;
}
.index .index-contents.list .swiper-slide .slide-border .slide-point .slide-point-bottom .text p {
  text-align: left;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.index .index-contents.list .swiper-slide .slide-border .slide-point .slide-point-contents .tag {
  background-color: var(--color-yellow);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0px 20px;
  border-radius: 100px;
  margin-bottom: 4px;
}
.index .index-contents.list .swiper-slide .slide-border .slide-button-wrap {
  background-image: url(/special/cool/images/index-swip-decoration-star02.png), url(/special/cool/images/index-swip-decoration-star.png);
  background-repeat: no-repeat;
  background-position: left 120px center, right 120px center;
  background-size: 6%;
}
@media screen and (width <= 750px) {
  .index .index-contents.list .swiper-slide .slide-border .slide-button-wrap {
    background-position: left 60px center, right 60px center;
  }
}
.index .index-contents.list .swiper-slide .slide-border .slide-button {
  background-color: var(--color-deepblue);
  padding: 4px 40px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  border-radius: 100px;
  position: relative;
}
.index .index-contents.list .swiper-slide .slide-border .slide-button::after {
  content: "";
  position: absolute;
  top: 60%; /* 縦軸をセンタリングする */
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 縦軸をセンタリングする */
  border: 5px solid transparent;
  border-top: 8px solid #fff; /* 好みで色を変えてください */
}
.index .index-contents.list .swiper-slide .slide-border .slide-button a {
  color: #fff;
}
.index .index-contents.list .swiper-slide .slide-border .slide-button a p {
  position: relative;
}

.contents {
  color: var(--color-blue);
  padding: 80px 0px;
  position: relative;
}
@media screen and (width <= 750px) {
  .contents {
    padding: 40px 0px;
  }
}
.contents .contents_title {
  padding-bottom: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media screen and (width <= 750px) {
  .contents .contents_title {
    padding-bottom: 20px;
  }
}
.contents .contents_title .contents_title_tag {
  background-color: var(--color-yellow);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  border-radius: 100px;
  padding: 0px 20px;
}
.contents .contents_img {
  position: relative;
  z-index: 1;
}
.contents .contents_text {
  padding: 40px 80px;
  z-index: 1;
  position: relative;
}
@media screen and (width <= 750px) {
  .contents .contents_text {
    padding: 40px 20px;
  }
}
.contents .contents_text .contents_text_name {
  text-align: center;
  padding-bottom: 10px;
}
.contents .uservoice {
  background-color: var(--color-lightblue);
  padding: 10px 10px 30px;
  margin: 0px 120px;
  position: relative;
  z-index: 1;
}
@media screen and (width <= 750px) {
  .contents .uservoice {
    margin: 0px 20px;
  }
}
.contents .uservoice .uservoice-title {
  text-align: center;
  padding-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
.contents .uservoice .uservoice-title img {
  width: 80px;
  height: auto;
}
@media screen and (width <= 750px) {
  .contents .uservoice .uservoice-title img {
    width: 60px;
  }
}
.contents .uservoice .uservoice-title img.animal1 {
  -webkit-animation-name: uservoicePengin1;
          animation-name: uservoicePengin1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.contents .uservoice .uservoice-title img.animal2 {
  -webkit-animation-name: uservoicePengin2;
          animation-name: uservoicePengin2;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.contents .uservoice .uservoice-title .border {
  background-color: var(--color-blue);
  height: 1px;
  width: 50px;
}
@media screen and (width <= 750px) {
  .contents .uservoice .uservoice-title .border {
    width: 30px;
  }
}
.contents .uservoice .uservoice-wrap {
  background-color: #fff;
  padding: 20px;
}
.contents .uservoice .uservoice-wrap .uservoice-wrap-lines {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid var(--color-blue);
  gap: 20px;
  padding-bottom: 10px;
}
.contents .uservoice .uservoice-wrap .uservoice-wrap-lines .uservoice-wrap-lines-star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.contents .uservoice .uservoice-wrap .uservoice-wrap-lines .uservoice-wrap-lines-star img {
  height: 100%;
  width: 14%;
}
.contents .uservoice .uservoice-wrap .uservoice-wrap-text {
  padding-top: 10px;
}
.contents .uservoice .uservoice-wrap .uservoice-wrap-text .username {
  text-align: right;
}
.contents .uservoice .uservoice-pengin {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 90px;
}
.contents .contents_button-wrap {
  padding-top: 40px;
  position: relative;
  z-index: 1;
}
.contents .contents_button-wrap .contents_button {
  background-color: var(--color-deepblue);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  border-radius: 100px;
  position: relative;
}
.contents .contents_button-wrap .contents_button::before {
  content: "";
  display: inline-table;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-size: contain;
}
.contents .contents_button-wrap .contents_button .contents_button_text {
  padding: 4px 80px 8px 80px;
  text-align: center;
  color: #fff;
  position: relative;
}
.contents .contents_button-wrap .contents_button .contents_button_text::after {
  content: "";
  position: absolute;
  top: 50%; /* 縦軸をセンタリングする */
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 縦軸をセンタリングする */
  border: 5px solid transparent;
  border-left: 8px solid #fff; /* 好みで色を変えてください */
}
.contents .bg {
  position: absolute;
}
.contents .bg img {
  width: 100%;
  -webkit-animation-name: awa;
          animation-name: awa;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.contents .bg.circle01 {
  top: 10px;
  width: 200px;
  left: 20px;
}
.contents .bg.circle01 img {
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
@media screen and (width <= 750px) {
  .contents .bg.circle01 {
    width: 140px;
  }
}
.contents .bg.circle02 {
  right: 0px;
  top: 800px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.contents .bg.circle02 img {
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@media screen and (width <= 750px) {
  .contents .bg.circle02 {
    top: 520px;
  }
}
.contents .bg.circle03 {
  top: 1000px;
  -webkit-transform: rotate(215deg);
          transform: rotate(215deg);
  width: 200px;
  left: 0px;
}
.contents .bg.circle03 img {
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
@media screen and (width <= 750px) {
  .contents .bg.circle03 {
    top: 750px;
    width: 100px;
  }
}
.contents .bg.circle04 {
  bottom: 20px;
  right: 20px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.contents .bg.circle04 img {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.contents.blue {
  background-color: var(--color-lightblue);
}
.contents.blue .uservoice {
  background-color: #fff;
}
.contents.blue .uservoice .uservoice-wrap {
  background-color: var(--color-lightblue);
}
.contents.cotton .contents_button-wrap .contents_button::before {
  width: 44px;
  height: 100px;
  background-image: url(/special/cool/images/cnt01-button.png);
}
.contents.jel .contents_button-wrap .contents_button::before {
  width: 60px;
  height: 100px;
  background-image: url(/special/cool/images/cnt02-button.png);
}
.contents.headspa .contents_button-wrap {
  padding-top: 0px;
}
.contents.headspa .contents_button-wrap .contents_button::before {
  width: 70px;
  height: 100px;
  background-image: url(/special/cool/images/cnt03-button.png);
}
.contents.anmin .contents_button-wrap {
  padding-top: 0px;
}
.contents.anmin .contents_button-wrap .contents_button::before {
  width: 70px;
  height: 100px;
  background-image: url(/special/cool/images/cnt04-button.png);
  left: -20px;
}
@media screen and (width <= 750px) {
  .contents.anmin .contents_button-wrap .contents_button::before {
    left: -10px;
  }
}

@-webkit-keyframes slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(180px);
    transform: translateY(180px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20%, 100% {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(180px);
    transform: translateY(180px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes mvAnimal {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes mvAnimal {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes uservoicePengin1 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes uservoicePengin1 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes uservoicePengin2 {
  0% {
    -webkit-transform: rotate(0deg) scaleX(-1);
            transform: rotate(0deg) scaleX(-1);
  }
  50% {
    -webkit-transform: rotate(20deg) scaleX(-1);
            transform: rotate(20deg) scaleX(-1);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleX(-1);
            transform: rotate(0deg) scaleX(-1);
  }
}
@keyframes uservoicePengin2 {
  0% {
    -webkit-transform: rotate(0deg) scaleX(-1);
            transform: rotate(0deg) scaleX(-1);
  }
  50% {
    -webkit-transform: rotate(20deg) scaleX(-1);
            transform: rotate(20deg) scaleX(-1);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleX(-1);
            transform: rotate(0deg) scaleX(-1);
  }
}
@-webkit-keyframes mvFuwafuwa {
  0% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  50% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
}
@keyframes mvFuwafuwa {
  0% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  50% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
}
@-webkit-keyframes awa {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes awa {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */