@charset "UTF-8";

/*
Base Styles
*/
.body-2{
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 10px 100px 10px 100px;
    font-size: 15px;  
    line-height: 1.5;
    color: #615f68;
    background-color: #000;
}

.section_2{
    position: relative; /* 基準を作る */
}



.section-hedline2{
    position: absolute;
    /*top: 7px;
    left: 22px;
    color: #000007ed;
    font-size: 1.7em;  
    font-weight: bold; */

    text-align: center;
    margin: 5px 5px 20px 5px;
    color: #333;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 5px 5px 5px rgba(68, 12, 200, 0.5);



}


.section-hedline3{
    position: absolute;
    top: 5px;
    left: 20px;
    color: #1915cd;
    font-size: 1.7em;   
    font-weight: bold; 
}


.about{
    outline: none;
    margin: 0;
    display: flex;
}
/*.about-image{}*/

/*
.about-caption{

    gap: 20px;
    padding-left: 15px;
    color: #e0d7d7;
}
*/


.about-headline{
    margin: 0 0 20px ;
    font-size: 30px;
    color: #f1f90d;
}

.about-text {
  color: #ffff00;   /* 黄色 */
  margin: 15px 0 5px 0;
  font-weight: bold;
}

.about-desription {
  color: #fff;      /* ← 文字色を白にする */
  display: block;
  margin: 10px 0;
  line-height: 1.8;
}







.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.btn-row {
    display: flex;
   /*
    gap: 20px;  ボタンの間隔 */
    margin-top: 20px;
  
}

.btn:hover {
  background-color: #0056b3;
}



.btn-return {
  display: inline-block;      /* ← 箱型にする */
  padding: 12px 24px;         /* ← ボタンの大きさ */
  background-color: #007bff;  /* ← ボタン色 */
  color: #fff;                /* ← 文字色 */
  text-decoration: none;      /* ← 下線を消す */
  border-radius: 6px;         /* ← 角丸 */
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.btn-return:hover {
  background-color: #0056b3;  /* ← ホバー時の色 */
}

/*  後から追加　*/

/*　CSS はこれだけで十分（段落が縦に並　*/
.about-desription,
.about-text {
color: #c3ee06;
  display: block;
  margin: 10px 0;
  line-height: 1.8;
}


.class-moge{
    color: #ffffff;

}

/* ① body の左右余白をスマホ用に調整 */
@media screen and (max-width: 600px) {
  .body-2 {
    padding: 10px 15px;
    flex-direction: column;
  }
}

/* ② 動画をスマホ幅にフィットさせる */
.about video {
  width: 100%;
  height: auto;
  max-width: 600px;
}

/* ③ 見出し（h1, h2, h3）をスマホ向けに調整 */
@media screen and (max-width: 600px) {
  .section-hedline2,
  .section-hedline3 {
    font-size: 22px;
  }

  .about-headline {
    font-size: 20px;
  }

  .about-text {
    font-size: 18px;
  }
}

/* ④ 説明文（about-desription）を読みやすく */
@media screen and (max-width: 600px) {
  .about-desription {
    line-height: 1.9;
    font-size: 16px;
  }
}

/* ⑤ ボタン（開催日リンク）をスマホ向けに大きく */
@media screen and (max-width: 600px) {
  .btn-return {
    width: 90%;
    max-width: 300px;
    padding: 14px;
    font-size: 18px;
  }
}

/* スマホ最適化 */
@media screen and (max-width: 600px) {

  .body-2 {
    padding: 10px 15px;
    flex-direction: column;
  }

  .about video {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  .section-hedline2,
  .section-hedline3 {
    font-size: 22px;
  }

  .about-headline {
    font-size: 20px;
  }

  .about-text {
    font-size: 18px;
  }

  .about-desription {
    line-height: 1.9;
    font-size: 16px;
  }

  .btn-return {
    margin: 10px;
    width: 90%;
    max-width: 300px;
    padding: 14px;
    font-size: 18px;
  }
}