/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP';
  line-height: 1.6; color: #333;
  overflow-x: hidden;
  position: relative;
  background-color: #fcfcfc;
} 
/* 共通：背景固定 */ 
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/img/top.png') no-repeat center top;
  background-size: auto 100%; /* PCデフォルトは縦100% */ 
  z-index: -1;
} 
/* スマホ：背景をcover、ロゴは横幅基準で縮小 */ 
@media screen and (max-width: 768px) {
  body::before {
    background-size: cover; /* 余白なし */
    background-position: center center;
  }
  .logo-overlay {
    bottom: auto;
    top: 75%;
  }
  .logo-image {
    max-width: 95%; /* 横幅いっぱい */
  }
}

/* 左上固定アイコン */
.corner-icon {
  position: fixed;
  top: 30px;
  left: 30%;
  width: 120px;
  height: auto;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.corner-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホではサイズ調整 */
@media (max-width: 768px) {
  .corner-icon {
    top: 20px;
    left: 10px;
    width: 100px;
  }
}

/* セクション */
section {
  margin-bottom: 60px;
}

header, main, footer {
  max-width: 400px;
  margin: 0 auto;
}

main {
  margin-top: 400px;
}

main, footer {
  padding: 20px;
}

/* トップセクションは高さ100vh確保 */
.top-section {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ロゴ中央寄せ */
.logo-overlay {
  position: absolute;
  top: 75%;   /* 縦中央 */
  left: 50%;  /* 横中央 */
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  transition: opacity 0.5s ease;
}

.logo-image {
  max-width: 560px;
  width: 100vw;   /* 画面幅に応じて可変 */
  height: auto;
}

/* 半透明背景で表示 */
main section {
  background: rgba(255, 255, 255, 0.90);
  padding: 25px;
  border-radius: 10px;
}

h1, h2 {
  margin-bottom: 25px;
  color: #222;
  font-size: 1.5rem;
  text-align-last: center;
}

p {
  color: #484848;
}

p, li {
  font-size: 1rem;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  column-count: 2;
  column-gap: 3px;
}

ol {
  list-style: none;
}

li {
  text-align-last: center;
}

a {
  color: #74aefa;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  text-align: center;
  font-size: 0.9rem;
  color: #999;
}

/* フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ロゴ用フェードインアニメーション */
.fade-in-center {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 1.0s ease, transform 1.0s ease;
}

.fade-in-center.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}