.background{
    background-image: url(img/bg4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.logo {
    max-width:60%;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding-top:50px;
    animation: poyopoyo 2s ease-out ;
}




@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.8);
  }
}


.title{
    text-align: center;
    color:red;
    text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff;
    margin-bottom:50px;
}

.title2{
    margin-left:15%;
    color:yellow;
    text-shadow: 1px 1px 0 red, -1px 1px 0 red,-1px -1px 0 red, 1px -1px 0 red;
}


.text{
    text-align: center;
    align-items:center;
    justify-content: center;
    color:black;
    font-weight: bold;
    line-height: 2;
    font-size: 16px;
    margin:0;
}

.bigger{
    font-size: 18px;
    border-bottom: red 2px solid;
}

.place{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    margin-bottom:50px;
}

/* 調整しやすい変数 */
.warning {
  --size: 60px;           /* 全体の基準サイズ（変更可能） */
  --triangle-color: #ffcc00;
  --exclaim-color: #d32f2f;

  width: var(--size);
  height: var(--size);   /* 三角を正方形領域にクリップして作る */
  position: relative;
  display: inline-block;
  /* 三角（上向き）を作る：clip-pathを使うと扱いやすい */
  background: var(--triangle-color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 上に乗る「！」（バッジ風に丸背景＋文字） */
.warning::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: 35%;                      /* 三角の上に乗せる位置（微調整可） */
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* バッジの見た目 */
  background: var(--exclaim-bg);
  color: var(--exclaim-color);
  font-weight: 700;
  font-size: calc(var(--size) * 0.4);
}

/*voice-------------------------------*/
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column wrap; 
  vertical-align: top;
}

.size_normal{
  width: 80px;
  height: 80px;
}

.letter1{
  font-size: 12px;
  line-height: 1em;
  font-weight: bold;
}

.letter2{
  font-size: 10px;
  line-height: 1em;
}
.letter3 {
  font-size: 12px;
  line-height: 1em;
  font-weight: bold;
}


.red {
  color: white;
  border: 6px solid white;
  background: red;
}

.parent{
    text-align: center;
    margin-bottom:50px;
}

.voice{
    display: inline-block;
    border:3px solid #ffffff;
    background-color:#ff5145;
    box-shadow: 0px 0px 4px 4px #ff5145;
    padding: 30px;
    border-radius :40px;
    margin-top:50px;
}

.voice-yoko{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:5px;
}


.voice-yoko2{
    display:flex;
    align-items:center;
    justify-content: center;
}

.voice-text{
    text-align: center;
    align-items:center;
    justify-content: center;
    color:white;
    font-weight: bold;
    float:right;
}

.voice-text-2{
    font-weight: bold;
    color:white;
    text-align: left;
}

.voice-span{
    color:white;
    font-weight: bolder;
}
/*voice-------------------------------*/

.text-rule{
    text-align: center;
    align-items:center;
    justify-content: center;
    color:black;
    font-weight: bold;
    line-height: 2;
    font-size: 16px;
}


.rule-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin:0 auto;
}

.yoko{
    display: flex;
    gap:100px;
    margin-left:18%;
}

.ooguchi_place{
  max-width:40%;
  height:auto;
}



.yoko-2{
    display:flex;
    gap:80px;
    margin-left:12%;
}

.text-rule{
    text-align: left;
    color:black;
    font-weight: bold;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}



.others{
  display:flex;
  align-items:center;
  justify-content: center;
  height:auto;
  width:auto;
  gap:40px;
  margin:0 auto;
  padding:50px 100px;
  max-width:100%;
}

.block {
  display: flex;
  flex-direction: column;    /* 画像→テキストの縦並び */
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 45%;                /* 2カラム用（約半分） */
  min-width: 300px;          /* 狭すぎないように */
}

.tate{
  align-items: center;
  justify-content: center;
  text-align: center;
}


.form{
  text-align: center;
  margin-top:60px;
  margin-bottom:3vw;
}

.form a {
  text-decoration: none;
  color: red; /* 文字色 */
}

.button {
  align-items: center;
  height: 150px; /* 四角の高さ */
  background-color: white; /* ボタン背景色 */
  border:3px solid #ff5145;
  box-shadow: 0px 0px 4px 4px white;
  border-radius: 40px; /* 角丸 */
  font-weight: bold;
  position:relative;
  filter: drop-shadow(5px 5px 5px #6b0a05);
  transition: all 0.3s;
  width: auto;
  padding:1vw 2vw;
  font-size:15px;
}

.button:hover {
    opacity: 0.6;
}

.big-title{
    font-size: 20px;
    color:red;
    font-weight: bold;
    margin-right:0;
}



.big-text{
    font-size: 20px;
    color:white;
    font-weight: bold;
    float:right;
    margin-right:90px;
    margin-top:30px;
}

.text-others{
    color:white;
    font-weight: bold;
    text-align: center;
    align-items:center;
    justify-content: center;
    margin-top:30px;
    font-size: 16px;
}


.ooguchi{
    display: flex;
    padding: 30px;
    justify-self: center;
    align-items: center;
    text-align: center;
    margin:0 auto;
}



.ooguchi_place{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin:0 auto;
    padding-top:10px;
}

 .wchance{
    max-width:200px;
    height:auto;
    justify-content: center;
    align-items: center;
    margin:0 auto;
  }






/* px以上? iPad?*/

@media (min-width:769px) and (max-width: 1024px){
    .others{
  display:flex;
  align-items:center;
  justify-content: center;
  height:auto;
  width:auto;
  gap:40px;
  margin:0 auto;
  padding:10px 0px;
  max-width:100%;
}

.yoko{
    display: flex;
    gap:20px;
    margin-left:12%;
}


.yoko-2{
    display:flex;
    gap:20px;
    margin-left:6%;
}

 .wchance{
    max-width:200px;
    height:auto;
    justify-content: center;
    align-items: center;
    margin:0 auto;
  }

}

/* 769px以下 スマホ*/
@media (max-width: 768px) {

.text{
    line-height: 2;
    font-size: 12px;
}

.text-rule{
    text-align: center;
    align-items:center;
    justify-content: center;
    color:black;
    font-weight: bold;
    line-height: 2;
    font-size: 8px;
}

.title{
    font-size:12px;
    text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff;
    margin-bottom:0px;
}

.ooguchi{
    padding: 10px;
    margin-top:-50px;
}

.bigger{
    font-size: 12px;
    border-bottom: red 2px solid;
}

.warning {
  --size: 40px;
  margin-top:8px;  
}

.place{
    margin-bottom:0px;
}


.rule-img{
    width: 90%;
    margin:0 auto;
}

.yoko{
    display: flex;
    gap:10px;
    margin-left:15px;
}

.voice{
    padding:15px;
}

.voice-text{
    font-size: 10px;
}

.voice-text-2{
    font-size: 12px;
}

.voice_2{
    width:90px;
    height:auto;
}


.yoko-2{
    display:flex;
    gap:4px;
    margin-left:0;
}

.size_normal{
  width: 60px;
  height: 60px;
}

.red {
  color: white;
  border: 3px solid white;
  background: red;
}

.letter1 {
    font-size:10px;
}

.letter3{
    font-size:10px;
}

  .others {
    flex-direction: column;  /* 縦並びに変更！ */
    align-items: center;
    gap:0;
    padding:0 0;
    margin-bottom:-10px;
  }

  .block {
    width: 100%;             /* 全幅に広げる */
    margin-bottom: 40px;     /* 下に余白 */
  }

  .wchance{
    max-width:200px;
    height:auto;
    justify-content: center;
    align-items: center;
    margin:0 auto;
  }

  .bingo{
    width:200px;
    height:auto;
  }

  .form{
  margin-top:30px;
  margin-bottom:30px;
}

.button{
      border:1.5px solid #ff5145;
}

.big-title{
    font-size: 15px;
    color:red;
    font-weight: bold;
    margin-top:30px;
}


.big-text{
    font-size: 15px;
    margin-top:0px;
    float:right;
    margin-right:35px;
}

.text-others{
    font-size:10px;
}



}