@charset "UTF-8";

/* 全体 */
html {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.1em;
  color: #b2c8d4;
  font-size: 12px;
  text-align: justify;
  scroll-behavior: smooth;
}

body {
  background-image: url(../img/bgImg.png);
  background-repeat: repeat;
  text-align: center;
}


header {
  position: relative;
  z-index: 1000;
}

/* h1 */
h1 {
  color: #6db3d4;
  font-size: 20px;
  margin-bottom: 40px;
}

/* 段落の三ツ星 */
.stars > p > img {
  width: 20px;
  height: 20px;
  margin: 40px auto;
}


/* ハンバーガーボタン */
.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6abdc1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1100;
}

.hamburger span {
  position: absolute;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: 0.4s;
}
.hamburger span:nth-child(1) { transform: translateY(-6px); }
.hamburger span:nth-child(2) { transform: translateY(0); }
.hamburger span:nth-child(3) { transform: translateY(6px); }

.hamburger.active span:nth-child(1) { transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); }

/* 円背景 */
.menuWrapper {
  position: fixed;

  /* ハンバーガー中心を起点にする */
  top: 40px;   /* 20px + 高さ(40px)/2 */
  left: 40px;  /* 20px + 幅(40px)/2 */

  width: 500px;   /* 固定サイズに変更 */
  height: 500px;  /* 固定サイズに変更 */
  margin-top: -250px;  /* 半径分下にずらす */
  margin-left: -250px; /* 半径分左にずらす */

  border-radius: 50%;
  background: #6abdc1;

  transform: scale(0);
  transform-origin: center center; /* 円の中心を基準に拡大縮小 */
  transition: transform 0.6s ease;
  z-index: 1000;
  overflow: hidden;

  /* メニューを相対基準に置けるように */
  display: flex;
  align-items: flex-start; /* 上寄せ */
  justify-content: flex-start; /* 左寄せ */
  padding: 250px; /* ハンバーガーからの距離を確保 */


}

/* 開いたとき */
.menuWrapper.active {
  transform: scale(1);
}


/* メニュー */
.circleMenu ul {
  list-style: none;
  text-align: left;            /* テキスト左揃え */
  margin-top: 40px;
}
.circleMenu li {
  margin: 12px 0;
}
.circleMenu a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}
.circleMenu a:hover {
  opacity: 0.7;
}



/* TOP */
.top {
  margin-top: 200px;
  margin-bottom: 200px;
}

.top img {
  width: 200px;
  margin-bottom: 40px;
}

/*STORY*/
.story p {
  line-height: 1.8;
}

@media (max-width:768px){
  .story {
    width: 310px;
    margin: 0 auto;
  }

  
  .story p {
    line-height: 1.6;
    padding: 10px;
  }
}

/* CHARA */
.charaA img {
  width: 400px;
  margin-bottom: 60px;
}

.charaB img {
  width: 600px;
  margin-bottom: 40px;
}

@media (max-width:768px){
  .charaA img {
    width: 300px;
    margin-bottom: 60px;
  }
  .charaB img {
    width: 300px;
    margin-bottom: 40px;
  }
}

/* SS */
.carouselWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;     /* ボタンとのスペース */
}

.carousel {
  width: 500px;       /* 画像幅 */
  overflow: hidden;
}

.carouselTrack {
  display: flex;
  transition: transform 0.5s ease;
}

.carouselTrack img {
  width: 500px;
  height: auto;
  flex-shrink: 0;
  border: 1px solid #ffffff; /* 白い実線 */
  box-sizing: border-box;
}

/* 矢印は画像の外側 */
.prev, .next {
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 10px;
  transform: scale(1, 3);
  border-radius: 50%;
}

/* ■インジケータ（四角） */
.indicators{
  text-align:center;
  margin-top:10px;
  margin-bottom: 60px;
}

.dot{
  display:inline-block;
  width:12px; height:12px;
  margin:0 4px;
  background:#ccc; /* 四角なので border-radius なし */
  cursor:pointer;
}

.dot.active{
  background:#333;
}


@media (max-width:768px){
  .carousel {
    width: 300px;       /* 画像幅 */
    overflow: hidden;
  }
  .carouselTrack img {
    width: 300px;
    height: auto;
    flex-shrink: 0;
    border: 1px solid #ffffff; /* 白い実線 */
    box-sizing: border-box;
  }

  /* SSモバイルは矢印非表示＆タップ/スワイプ操作 */
  .prev,.next{ display:none; }
}

/* ユーザーが動きを減らす設定ならアニメ短縮 */
@media (prefers-reduced-motion: reduce){
  .carouselTrack{ transition: none; }
}

/* デモ */
.demo p {
  margin-bottom: 60px;
}
.demo a img {
  width: 300px;
  border: 1px solid #ffffff;
  border-radius: 16px;
  margin-bottom: 120px;
}

@media (max-width:768px){
  .demo {
    width: 310px;
    margin: 0 auto;
  }
  .demo a img {
    margin-bottom: 180px;
  }
}

/* TOPへ戻るボタン */
.fixedImage {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 193px;   /* 背景画像サイズ */
  height: 64px;
  z-index: 1;     /* 背景なので低め */
}

.toTopBtn {
  position: fixed;
  right: 20px;   /* 画面右から20px */
  bottom: 40px;  /* 画面下から40px */
  width: 78px;   /* TOPボタン画像サイズ調整 */
  height: auto;
  cursor: pointer;
  z-index: 2;     /* 背景より上 */
}

/* ホバーで跳ねるアニメーション */
.toTopBtn:hover {
  animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px); /* 上に少し跳ねる */
  }
}



/* フッター */
footer {
  background: #1e4b69;
  padding: 10px auto;
}



/* 背景流れ星
.shooting-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  pointer-events: none;  星にマウスを当てない 
  z-index: 0;
}

.shooting-star {
  position: absolute;
  width: 1px;
  height: 80px;  尾の長さ 
  background: linear-gradient(-45deg, white, rgba(255,255,255,0));
  transform: rotate(-45deg);  右上→左下の角度
  opacity: 0.8;
  animation: shoot linear forwards;
}

@keyframes shoot {
  0% {
    transform: translate(0,0) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: translate(120vw, 120vh) rotate(-45deg);  左下方向に移動 
    opacity: 0;
  }
}*/