@charset "utf-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}

/* 背景画像が画面いっぱいになるように */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
  overscroll-behavior: none; /* スクロールによるズレ防止 */
}
body {
  background-color: #C7BFCC;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


.pc-bg-wrap {
  display: none;
}
/* ▼ PC（幅769px以上）では .pc-wrap を表示 */
@media screen and (min-width: 769px) {
  .pc-wrap {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #DE4CC8;
    background-image: url(../images/bg_meshgrid.png);
    background-repeat: repeat;
    background-size: auto;
    z-index: -1; /* 背景に回す */
  }
}

/*ローディング----------*/

/*background----------*/
.pc-wrap {
  background-color: #DE4CC8;
  background-image: url(../images/bg_meshgrid.png);
  background-size: auto;
  background-repeat: repeat;
}
.logo-cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックを邪魔しない */
  z-index: 0;
}

.logo-item {
  position: absolute;
  width: 130px; /* 好きな大きさに調整 */
  opacity: 0.4;
  animation: floatLogo 6s ease-in-out infinite;
}

/* ランダムな位置指定 */
.logo-item:nth-child(1) { top: 85%; left: 67%; animation-delay: 0s; }
.logo-item:nth-child(2) { top: 50%; left: 70%; animation-delay: 2s; }
.logo-item:nth-child(3) { top: 40%; left: 5%; animation-delay: 1s; }
.logo-item:nth-child(4) { top: 20%; left: 80%; animation-delay: 3s; }
.logo-item:nth-child(5) { top: 70%; left: 10%; animation-delay: 1.5s; }
.logo-item:nth-child(6)  { top: 70%; left: 85%; animation-delay: 0.8s; }
.logo-item:nth-child(7)  { top: 10%; left: 3%; animation-delay: 2.2s; }
.logo-item:nth-child(8)  { top: 40%; left: 85%; animation-delay: 1.7s; }
.logo-item:nth-child(9)  { top: 75%; left: 25%; animation-delay: 3.5s; }
.logo-item:nth-child(10) { top: 22%; left: 20%; animation-delay: 0.5s; }

/* 必要に応じて追加 */

@keyframes floatLogo {
  0%   { transform: translateY(0px) scale(1); opacity: 0.4; }
  50%  { transform: translateY(-20px) scale(1.1); opacity: 0.6; }
  100% { transform: translateY(0px) scale(1); opacity: 0.4; }
}
@media screen and (max-width: 768px) {
  .pc-wrap {
    display: none;
  }
}

.mobile-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  height: 100vh;
  background-image: url(../images/lum_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1rem;
  box-sizing: border-box;
  background-color: #C7BFCC;
}

@media screen and (min-width: 769px) {
  .mobile-wrap {
    position: relative;
    margin: 0 auto;
  }
}

/*header----------*/

.sub-title {
  -webkit-text-stroke: 1px black;
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3.6rem;
  color: #ffffff;
  text-align: center;
  /* padding-top: 2rem; */
}

h1 {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

h1 img{
  width: 215px;
}

/*main----------*/
.gif {
  text-align: center;
  display: flex;
  justify-content: center;
}
.gif img {
  width: 380px;
}

/*footer----------*/
/* footer {
  margin-bottom: 10rem;
} */

.box {
  width: 360px;
  background-color: rgb(79 41 136 / 0.2);
  margin: 0 auto;
  display: flex;
  color: #645E69;
}

.icon {
  padding: 1rem;
  margin: auto 0.7rem;
}

.icon img {
  width: 71px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(2289%) hue-rotate(299deg) brightness(108%) contrast(74%);
  transition: transform 0.4s ease;
}
.icon img:hover {
  transform: rotate(10deg) scale(1.1);
}

.info {
  padding: 1rem;
}

a {
  text-decoration: none;
}

h3 {
  font-family: "Luckiest Guy", cursive;
  font-size: 1.4rem;
  letter-spacing: 0.07em;
}

p {
  font-family: "ads-type7", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 600;
  color: #dfdfdf;
  padding-top: 0.5em;
  letter-spacing: 0.01em;
  line-height: 1.2;
}