@charset "UTF-8";
/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */
/* SP用CSSの記述 */
/* PC、Tablet用CSSの記述 */
/*====================================
basic
====================================*/
img {
  display: block;
}

@media (any-hover: hover) {
  .hover:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }
}

#top {
  position: relative;
  padding-top: 50px;
}

.credit {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.bnr_fix {
  position: fixed;
  top: 35px;
  left: 0;
  z-index: 9999;
}

.bnr_fix a.--comming {
  pointer-events: none;
}

.block01 {
  position: relative;
  z-index: 2;
  padding-bottom: 23px;
}

.block01::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: calc(100% - 30px);
  background: rgba(244, 244, 227, 0.6);
  z-index: 0;
}

.block01 .ttl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  z-index: 3;
}

.block01 .ttl_wrap {
  position: relative;
}

.block01 .ttl_wrap .part {
  z-index: 2;
  position: absolute;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.block01 .ttl_wrap .bone {
  position: absolute;
  left: 126px;
  top: 0;
  animation: pikopiko 1s steps(2, start) infinite;
}

.block01 .ttl_wrap .part01 {
  left: 18px;
  top: 71px;
}

.block01 .ttl_wrap .part02 {
  left: 102px;
  top: 86px;
}

.block01 .ttl_wrap .part03 {
  left: 178px;
  top: 101px;
}

.block01 .ttl_wrap .part04 {
  left: 223px;
  top: 72px;
}

.block01 .ttl_wrap .part05 {
  left: 328px;
  top: 89px;
}

.block01 .ttl_wrap .part06 {
  left: 389px;
  top: 87px;
}

.block01 .ttl_wrap .part01 {
  animation-delay: 0s;
}

.block01 .ttl_wrap .part02 {
  animation-delay: 0.1s;
}

.block01 .ttl_wrap .part03 {
  animation-delay: 0.2s;
}

.block01 .ttl_wrap .part04 {
  animation-delay: 0.3s;
}

.block01 .ttl_wrap .part05 {
  animation-delay: 0.4s;
}

.block01 .ttl_wrap .part06 {
  animation-delay: 0.5s;
}

.block01 .wave01 {
  position: absolute;
  left: 0;
  top: 180px;
  aspect-ratio: 1302 / 200;
  background: url(../images/wave01.svg) left top no-repeat;
  background-size: 100%;
  width: 110vw;
  z-index: 1;
  min-width: 1300px;
}

.block01 .wave02 {
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/wave02.svg) center top no-repeat;
  background-size: 100%;
  width: 100%;
  height: 420px;
  z-index: 1;
  min-width: 1210px;
}

.block01 .flow_images {
  --flow-item-width: 309px;
  --flow-gap: 15px;
  --flow-loop-gap: 15px;
  --flow-item-count: 9;
  --flow-group-width: calc( (var(--flow-item-width) * var(--flow-item-count)) + (var(--flow-gap) * (var(--flow-item-count) - 1)));
  --flow-cycle-width: calc((var(--flow-group-width) * 2) + (var(--flow-loop-gap) * 2));
  position: absolute;
  top: 30px;
  left: 0;
  overflow: hidden;
  z-index: 3;
  width: 100%;
  background: #fff;
  padding: 26px 0 13px;
}

.block01 .flow_images .flow_track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: flow-slide 60s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.block01 .flow_images .flow_group {
  display: flex;
  align-items: flex-start;
  width: var(--flow-group-width);
  flex-shrink: 0;
}

.block01 .flow_images .flow_group + .flow_group {
  margin-left: var(--flow-loop-gap);
}

.block01 .flow_images .flow_group.--alt .item:nth-child(odd) {
  margin-top: 30px;
}

.block01 .flow_images .flow_group.--alt .item:nth-child(even) {
  margin-top: 0;
}

.block01 .flow_images .item {
  width: var(--flow-item-width);
  position: relative;
  display: flex;
  align-items: flex-start;
}

.block01 .flow_images .item .txt {
  position: absolute;
  bottom: 10px;
  left: 20px;
  z-index: 2;
}

.block01 .flow_images .item:nth-child(even) {
  margin-top: 30px;
}

.block01 .flow_images .item + .item {
  margin-left: var(--flow-gap);
}

.block01 .inner {
  width: 1086px;
  margin: 0 auto;
  position: relative;
  margin-left: -31px;
  margin-right: -31px;
  max-width: 1086px;
}

@media screen and (min-width: 991px) {
  .block01 .inner {
    margin: 0 auto;
  }
}

.block01 .images {
  position: relative;
  padding-top: 30px;
}

.block01 .images a {
  z-index: 4;
  position: absolute;
}

.block01 .images a.link01 {
  right: 25px;
  top: 652px;
}

.block01 .images a.link02 {
  left: 452px;
  top: 693px;
  pointer-events: none;
}

.block01 .images a.link03 {
  left: 57px;
  bottom: 10px;
}

.block01 .images .osusume {
  position: absolute;
  top: 572px;
  right: 53px;
  z-index: 3;
  animation: pikopiko 1s steps(2, start) infinite;
}

.block01 .images .txt {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.block01 .images .img {
  position: relative;
  z-index: 1;
}

.block01 .images .bg {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

.block01 .images .foot {
  z-index: 10;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

/* --- アニメーションの定義 --- */
@keyframes fadeUp {
  0% {
    opacity: 0;
    /* 15px下からスタート（数値を大きくすると移動距離が伸びます） */
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.block02 {
  background: url(../images/bg_dot01.svg) left top repeat-x;
  background-size: auto 40px;
  background-color: #a9d6bf;
}

.block02 .images {
  position: relative;
}

.block02 .images .osusume {
  position: absolute;
  top: 90px;
  left: 95px;
  z-index: 3;
  animation: pikopiko 1s steps(2, start) infinite;
}

.block02 .images .img {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

.block02 .images .bg {
  position: relative;
  z-index: 1;
}

.block03 {
  background: url(../images/bg_dot02.svg) left top repeat-x;
  background-size: auto 40px;
  background-color: rgba(244, 244, 227, 0.6);
}

.block03 .images {
  position: relative;
}

.block03 .images .osusume {
  position: absolute;
  top: 78px;
  left: 87px;
  z-index: 3;
  animation: pikopiko 1s steps(2, start) infinite;
}

.block03 .images a {
  z-index: 4;
  position: absolute;
}

.block03 .images a.link01 {
  left: 68px;
  bottom: 54px;
}

.block03 .images a.link02 {
  right: 134px;
  bottom: 54px;
}

.block03 .images .img {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

.block03 .images .bg {
  position: relative;
  z-index: 1;
}

.block04 {
  background: url(../images/bg_dot03.svg) left top repeat-x;
  background-size: auto 40px;
  background-color: #fd9788;
}

.block04 .images {
  position: relative;
}

.block04 .images .foods {
  position: absolute;
  top: 118px;
  left: 129px;
  animation: pikopiko 1s steps(2, start) infinite;
}

.block04 .images .img {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

.block04 .images .bg {
  position: relative;
  z-index: 1;
}

@keyframes pikopiko {
  0% {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

.images {
  position: relative;
}

.images a {
  position: absolute;
  z-index: 3;
}

.images .img,
.images .txt {
  position: absolute;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bnr_area {
  padding: 90px 0 38px;
  background: url(../images/bg_dot04.svg) left top repeat-x;
  background-size: auto 40px;
  background-color: rgba(244, 244, 227, 0.6);
}

.bnr_area_ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.bnr_area_items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.bnr_area_items li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bnr_area_items li .caution {
  margin-top: 8px;
}

.bnr_area_items li .--comming {
  position: relative;
  pointer-events: none;
}

.bnr_area_items li .--comming::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.bnr_area_items li .--comming::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
  aspect-ratio: 265 / 31;
  width: 265px;
  background: url(../images/comming_soon.svg) center center no-repeat;
  background-size: contain;
  z-index: 2;
}

.bnr_area_items li.bnr04 {
  margin-top: -15px;
}

@keyframes flow-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(var(--flow-cycle-width) * -1), 0, 0);
  }
}

.pagetop {
  position: fixed;
  bottom: 40px;
  right: -50px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.pagetop.active {
  right: 0;
}