body {
  background: #f6f6f6;
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
}

/* 共通ラッパーとコンテナ */
.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  background: none;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px;
}

/* 全セクション上下パディング100px */
.section {
  padding: 100px 0;
}
@media (max-width: 700px) {
  .section { padding: 60px 0; }
}

/* --- HERO画像セクション --- */
.hero-section {
  width: 100vw;
  margin: 0 auto;
  padding: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-img-area {
  width: 100vw;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
}
.hero-img {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
@media (max-width: 700px) {
  .hero-img,
  .hero-img-area {
    width: 100vw;
    max-width: 100vw;
  }
}

/* --- セクション2 カード --- */
.overview-section {
  background: linear-gradient(180deg, #D3E8F2 0%, #78B2D9 60%, #5592C4 100%);
}
.overview-section .card {
  background: rgba(255,255,255,0.75);
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(120,120,120,0.09);
  padding: 80px 28px;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  text-align: center;
  border: 3px solid #5592C4;
}
@media (max-width: 700px) {
  .overview-section .card {
    width: 350px;
    max-width: 95vw;
    padding: 32px 10px;
  }
}

/* --- セクション3 カード --- */
.bg-yellow {
  background: linear-gradient(to bottom, #FEFBD8 0%, #FEFBD8 60%, #F2EA8B 100%);
}
.present-section .present-flex {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: rgba(255,255,255,0.75);
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(120,120,120,0.09);
  padding: 60px 28px;
  display: flex;
  align-items: center;
  gap: 38px;
  justify-content: center;
}
@media (max-width: 700px) {
  .present-section .present-flex {
    flex-direction: column;
    max-width: 350px;
    width: 100%;
    padding: 24px 8px;
    gap: 22px;
  }
}

/* --- セクション4 カード --- */
.bg-blue,
.features-section {
  background: linear-gradient(180deg, #D3E8F2 0%, #78B2D9 60%, #5592C4 100%);
  padding-bottom: 0 !important; /* 下パディング0 */
}
.features-section .feature-list {
  background: transparent;
  max-width: 800px;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 84px; /* ギャップ2倍 */
}
@media (max-width: 700px) {
  .features-section .feature-list {
    max-width: 350px;
    width: 100%;
    padding: 10px;
    gap: 28px;
    margin-bottom: 24px;
  }
}
.features-section .feature-item {
  background: rgba(255,255,255,0.75);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(90,180,240,0.07);
  padding: 40px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
@media (max-width: 700px) {
  .features-section .feature-item {
    flex-direction: column;
    align-items: center;
    padding: 50px 6px;
    gap: 14px;
    text-align: center;
  }
}

/* --- カード画像共通 --- */
.present-img,
.feature-item img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 14px;
  background: #f6f6f6;
  border: 2.5px solid #2291e6;
}
@media (max-width: 700px) {
  .present-img,
  .feature-item img {
    width: 300px;
    height: 300px;
  }
}

/* --- タイトル共通 --- */
.section-title, .main-title {
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 50px;
  text-shadow: 2px 4px 12px rgba(85,85,85,0.2);
}
.overview-section .main-title {
  color: #5592C4;
}

/* --- ボタン --- */
.cta-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 24px;
  margin-bottom: 0;
}
.btn {
  display: inline-block;
  min-width: 180px;
  text-align: center;
  font-weight: 700;
  border-radius: 30px;
  padding: 12px 48px;
  font-size: 1.05rem;
  margin: 0;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(80,140,200,0.08);
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border 0.3s, transform 0.25s cubic-bezier(.4,2,.6,1);
}
.blue-btn {
  background: linear-gradient(to bottom, #64b2f4 0%, #5592c4 100%);
  color: #fff;
}
.blue-btn:hover {
  background: linear-gradient(to bottom, #5592c4 0%, #64b2f4 100%);
  color: #fff;
  border: 2.5px solid #5592c4;
  transform: scale(1.2);
  z-index: 2;
}
@media (max-width: 700px) {
  .btn {
    width: 270px;
    max-width: 90vw;
    min-width: unset;
    padding: 10px 24px;
    font-size: 1rem;
    display: block;
    margin: 0 auto;
  }
}

/* --- 動画セクション --- */
.video-section {
  background: #5592C4;
  padding: 100px 0;
}
.video-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  width: 100%;
}
.video-area iframe {
  width: 320px;
  height: 570px;
  max-width: 98vw;
  max-height: 70vw;
  border-radius: 18px;
  display: block;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}
@media (max-width: 700px) {
  .video-area {
    margin-top: 80px;
  }
  .video-area iframe {
    width: 220px;
    height: 390px;
    max-width: 96vw;
    max-height: 80vw;
  }
}
.video-caption {
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  margin-top: 18px;
}

/* --- 応募方法セクション --- */
.apply-section .container { text-align: center; }
.apply-section .btn {
  display: inline-block;
  margin: 100px auto 0 auto;
}
@media (max-width: 700px) {
  .apply-section .btn {
    margin: 60px auto 0 auto;
  }
}

/* --- ご注意セクション --- */
.notice-section {
  background: #333333;
}
.notice-section .section-title,
.notice-section .main-title {
  color: #fff;
  text-shadow: 2px 4px 12px rgba(85,85,85,0.2);
}
.notice-box {
  background: #fff;
  border-radius: 20px;
  padding: 32px 20px 22px 24px;
  color: #222;
  max-width: 920px;
  margin: 0 auto 28px auto;
  font-size: 1.08rem;
  box-shadow: 0 2px 10px rgba(80,80,80,0.06);
}
.copyright {
  color: #888;
  font-size: 1.01rem;
  text-align: center;
  margin-top: 22px;
}
.section-title,
.main-title {
  text-align: center !important;
  /* その他のスタイルは既存通り */
}
.pink-btn {
  background: linear-gradient(to bottom, #ffb7de 0%, #e05fa6 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(230,100,180,0.09);
  border: none;
}
.pink-btn:hover {
  background: linear-gradient(to bottom, #e05fa6 0%, #ffb7de 100%);
  color: #fff;
  border: 2.5px solid #e05fa6;
  transform: scale(1.2);
  z-index: 2;
}
/* デフォルトはPC用のみ表示、SP用は非表示 */
.h2-pc { display: block; }
.h2-sp { display: none; }

/* スマホ時だけ切り替え */
@media (max-width: 700px) {
  .h2-pc { display: none; }
  .h2-sp { display: block; }
}
.h2-pc { display: block; }
.h2-sp { display: none; }
@media (max-width: 700px) {
  .h2-pc { display: none; }
  .h2-sp { display: block; }
}

.video-yt {
  width: 320px;
  height: 570px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(80,140,200,0.09);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
}

@media (max-width: 700px) {
  .video-yt {
    width: 220px;
    height: 390px;
  }
}
@media (max-width: 700px) {
  .btn {
    width: 98vw;          /* 画面幅いっぱい */
    max-width: 450px;     /* 必要なら最大幅を設定 */
    min-width: unset;     /* 最小幅リセット */
    padding: 26px 0;      /* 上下ゆったり */
    font-size: 1.6rem;    /* 大きめ文字 */
    border-radius: 36px;  /* 丸み強調 */
    margin: 16px auto;    /* ボタン間余白＆中央寄せ */
    box-shadow: 0 6px 18px rgba(0,0,0,0.11);
    display: block;
  }
}
/* 初期状態 */
.section-title,
.main-title,
.feature-item,
.present-img {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.8s cubic-bezier(.77,0,.18,1), transform 1.8s cubic-bezier(.77,0,.18,1);
}
/* 表示状態 */
.section-title.visible,
.main-title.visible,
.feature-item.visible,
.present-img.visible {
  opacity: 1;
  transform: translateY(0);
}
.feature-item img {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}
.feature-item.visible img {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 700px) {
  /* カード（白い箱）全般 */
  .card,
  .present-section .present-flex,
  .features-section .feature-list {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* ←中央寄せ */
    width: 95vw;
    max-width: 350px;
  }
  /* 各.feature-itemも中央寄せを明示 */
  .features-section .feature-item {
    align-items: center;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 700px) {
  .cta-btns {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .btn {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 90vw;
    max-width: 350px;
  }
}
.btn {
  transition: 
    background 0.3s,
    color 0.3s,
    border 0.3s,
    transform 0.2s cubic-bezier(.4,2,.6,1);
}

.btn:hover,
.btn:active {
  transform: scale(1.08);
  z-index: 2;
}
@media (max-width: 700px) {
  /* カードと幅合わせ */
  .card,
  .present-section .present-flex,
  .features-section .feature-list {
    max-width: 350px;
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
  }
  /* 動画サイズをカードと同じ幅にする */
  .video-area iframe,
  .video-yt {
    width: 100%;
    max-width: 350px;
    height: 622px;    /* お好みで高さ調整（16:9なら196pxなど） */
    min-width: unset;
  }
  /* 動画エリアとh2の距離50pxに */
  .video-area {
    margin-top: 50px !important;
  }
  /* h2も中央寄せ（念のため） */
  .section-title, .main-title {
    text-align: center;
  }
}

@media (max-width: 700px) {
  /* feature-itemの中身を縦並び&中央寄せ */
  .features-section .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 14px 4px;
    justify-content: center;
    width: 100%;
  }
  /* 画像も中央 */
  .features-section .feature-item img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  /* テキスト部分も中央 */
  .features-section .feature-item > div {
    text-align: center;
    width: 100%;
  }
}

/* h2のfade-inアニメーション */
.section-title,
.main-title {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(.77,0,.18,1), transform 1.2s cubic-bezier(.77,0,.18,1);
}

.section-title.visible,
.main-title.visible {
  opacity: 1;
  transform: translateY(0);
}