@charset "UTF-8";
/* ---------------------------------------------------------
メディアクエリ用
--------------------------------------------------------- */
/* CSS Document */
.colorB span {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: #FFF 1px solid;
  text-align: center; }
.colorB > span:nth-of-type(1) {
  background: #3abcef; }
.colorB > span:nth-of-type(2) {
  background: #a39df2; }
.colorB > span:nth-of-type(3) {
  background: #f29de5; }
.colorB > span:nth-of-type(4) {
  background: #f2a39d; }
.colorB > span:nth-of-type(5) {
  background: #f2d49d; }
.colorB > span:nth-of-type(6) {
  background: #bcf29d; }
.colorB > span:nth-of-type(7) {
  background: #9df2c2; }
.colorB > span:nth-of-type(8) {
  background: #9de0f2; }
.colorB > span:nth-of-type(9) {
  background: #b3b3b3; }

.colorA span {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: #FFF 1px solid;
  text-align: center; }
.colorA > span:nth-of-type(1) {
  background: #0096e6; }
.colorA > span:nth-of-type(2) {
  background: #5345f0; }
.colorA > span:nth-of-type(3) {
  background: #e640cc; }
.colorA > span:nth-of-type(4) {
  background: #f05648; }
.colorA > span:nth-of-type(5) {
  background: #f0b448; }
.colorA > span:nth-of-type(6) {
  background: #86e645; }
.colorA > span:nth-of-type(7) {
  background: #40e691; }
.colorA > span:nth-of-type(8) {
  background: #40cce6; }
.colorA > span:nth-of-type(9) {
  background: #555555; }

.bold {
  font-family: vdl-v7marugothic, sans-serif;
  font-weight: 700;
  font-style: normal; }

.medium {
  font-family: vdl-v7marugothic, sans-serif;
  font-weight: 500;
  font-style: normal; }

/* === レイアウト基本設定 === */
html {
  padding-top: 0 !important; }

body {
  background: #9de0f2; }

.site-content > div:nth-of-type(1) {
  width: 100%;
  padding-top: 8em; }
  @media screen and (max-width: 768px) {
    .site-content > div:nth-of-type(1) {
      padding-top: 2em; } }

.kv-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
  /* デフォルト：縦長～2:1の時。横幅に対して高さを半分に固定 */
  aspect-ratio: 2 / 1; }
  @media screen and (max-width: 768px) {
    .kv-container {
      aspect-ratio: 1; } }

/* 画面が2:1より横長（PCなど）の場合は全画面(100vh)にする */
@media (min-aspect-ratio: 2 / 1) {
  .kv-container {
    height: 100vh;
    aspect-ratio: auto; } }
.slider, .slide {
  width: 100%;
  height: 100%; }

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  /* フェード速度 */
  z-index: 1;
  display: block; }

.slide.active {
  opacity: 1;
  z-index: 2; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 15px; }

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer; }

.dot.active {
  background: #fff; }

/* テキストエリアの装飾 */
.indexArea01W > div[class*="deco"]:nth-child(odd) {
  background-color: #fff0f5;
  /* ベースカラー */
  /* ここから模様の指定 */
  background-image: linear-gradient(45deg, #ffb7c5 25%, transparent 25%, transparent 75%, #ffb7c5 75%, #ffb7c5), linear-gradient(-45deg, #ffb7c5 25%, transparent 25%, transparent 75%, #ffb7c5 75%, #ffb7c5), linear-gradient(45deg, transparent 25%, #dcd0ff 25%, #dcd0ff 75%, transparent 75%, transparent), linear-gradient(-45deg, transparent 25%, #dcd0ff 25%, #dcd0ff 75%, transparent 75%, transparent);
  background-size: 100px 100px;
  /* パターンの基本単位サイズ */
  background-position: 0 0, 0 0, 50px 50px, 50px 50px;
  /* 位置をずらして重ねる */
  /* ここまで模様の指定 */ }
.indexArea01W > div[class*="deco"]:nth-child(even) {
  background-color: #fffadd;
  /* ベースの薄いクリーム色 */
  background-image: radial-gradient(circle, #ffb3ba 20%, transparent 21%), radial-gradient(circle, #bae1ff 20%, transparent 21%), radial-gradient(circle, #ffffba 20%, transparent 21%), radial-gradient(circle, #baffc9 20%, transparent 21%);
  background-size: 80px 80px, 120px 120px, 150px 150px, 200px 200px;
  background-position: 0 0, 40px 60px, 80px 10px, 120px 90px; }

@media screen and (min-width: 769px) {
  .indexArea01W > div[class*="deco"] {
    padding-top: 5rem;
    position: relative;
    overflow: hidden; }
    .indexArea01W > div[class*="deco"] .dContainer {
      position: relative; }
      .indexArea01W > div[class*="deco"] .dContainer > div {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 8rem; }
        .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(1) {
          position: relative;
          z-index: 1; }
          .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(1) img {
            width: 750px; }
        .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(2) {
          position: absolute;
          z-index: 3;
          top: 220px; }
          .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(2) h2 {
            background: #3abcef;
            padding: .6rem 2.0rem;
            font-size: 2.2rem;
            color: white;
            font-family: "vdl-v7marugothic", sans-serif;
            font-weight: 700;
            font-style: normal;
            border-radius: 0 .8rem .8rem 0; }
        .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) {
          position: absolute;
          z-index: 2;
          background: rgba(255, 255, 255, 0.8);
          top: 180px;
          width: 100%;
          border-radius: 1.5rem;
          padding: 2.5rem 0 1.5rem 1.5rem; }
          .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div {
            width: 40vw;
            max-width: 600px;
            position: relative;
            padding-top: 4.5rem; } }
          @media screen and (min-width: 769px) and (max-width: 1023px) {
            .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div {
              width: 400px; } }
@media screen and (min-width: 769px) {
            .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div p {
              line-height: 2.0;
              font-size: 1.2rem;
              padding: 1.5rem .5rem; }
            .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div a {
              display: block;
              background: #40e691;
              width: 10em;
              margin: 0 auto;
              text-align: center;
              color: #FFF;
              font-weight: 500;
              font-size: 1.5rem;
              border-radius: .3em;
              padding: .5rem; }
  .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(1) {
    text-align: left; }
  .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(2) {
    left: 43%; } }
  @media screen and (min-width: 769px) and (max-width: 1023px) {
    .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(2) {
      left: calc(100vw - 470px); } }
@media screen and (min-width: 769px) {
  .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(3) {
    left: 45%; } }
  @media screen and (min-width: 769px) and (max-width: 1023px) {
    .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(3) {
      left: calc(100vw - 450px); } }
@media screen and (min-width: 769px) {
    .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(3) > div {
      margin: 0 auto 0 0; }
      .indexArea01W > div[class*="deco"]:nth-child(odd) .dContainer > div > div:nth-of-type(3) > div h2 {
        margin-left: -3rem; }
  .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(1) {
    text-align: right; }
  .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(2) {
    right: 43%; } }
  @media screen and (min-width: 769px) and (max-width: 1023px) {
    .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(2) {
      right: calc(100vw - 470px); } }
@media screen and (min-width: 769px) {
  .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(3) {
    right: 45%; } }
  @media screen and (min-width: 769px) and (max-width: 1023px) {
    .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(3) {
      right: calc(100vw - 450px); } }
@media screen and (min-width: 769px) {
    .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(3) > div {
      margin: 0 0 0 auto; }
      .indexArea01W > div[class*="deco"]:nth-child(even) .dContainer > div > div:nth-of-type(3) > div h2 {
        margin-right: -3rem; } }
@media screen and (max-width: 768px) {
  .indexArea01W > div[class*="deco"] .dContainer > div {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 4rem; }
    .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(1) {
      position: relative;
      z-index: 1;
      padding-top: 2.5rem;
      width: 96%;
      margin: 0 auto 0 0; }
      .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(1) img {
        width: 100%;
        border-radius: .5rem; }
    .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(2) {
      position: absolute;
      z-index: 3;
      top: 0; }
      .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(2) h2 {
        background: #3abcef;
        padding: .4rem 1.5rem;
        font-size: 1.8rem;
        color: white;
        border-radius: 0 .6rem .6rem 0;
        font-family: "vdl-v7marugothic", sans-serif;
        font-weight: 500;
        font-style: normal; }
    .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) {
      position: relative;
      z-index: 2;
      background: rgba(255, 255, 255, 0.8);
      width: 96%;
      margin: -2rem 0 0 auto;
      border-radius: 1.5rem 0 0 1.5rem;
      padding: 1rem 0 1.5rem 1.5rem; }
      .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div {
        width: 100%; }
        .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div p {
          line-height: 2.0;
          font-size: 1.0rem;
          padding: 1rem .5rem; }
        .indexArea01W > div[class*="deco"] .dContainer > div > div:nth-of-type(3) > div a {
          display: block;
          background: #40e691;
          width: 10em;
          text-align: center;
          color: #FFF;
          font-weight: 600;
          font-size: 1.2rem;
          border-radius: .3em;
          padding: .5rem;
          margin: 0 auto; } }