@charset "utf-8";

.bg{
  background-image: url("/images/newyear/2025/bg.webp");
  background-size: 100% auto;   /* 横幅に合わせる */
  background-position: top center; /* 上中央基準 */
  background-repeat: repeat-y;  /* 縦に繰り返す */
}

.tokuten-wrapper {
  position: relative; /* 子要素を絶対位置で重ねるための親 */
  display: inline-block; /* サイズを画像に合わせる */
}

.tokuten-wrapper .tokuten {
  display: block;
  padding: 10px 20px;
}

.tokuten-wrapper .tokuten.tokuten1 {
  padding-top: 30px;
}

.tokuten-wrapper a:hover .btn {
  opacity: 0.7;
}

.tokuten-wrapper .btn {
  position: absolute;
  width: 65%;
  height: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* ← これは残してOK */
  transition: opacity 0.2s ease;
}

.btn1 { top: 81%; }
.btn2 { top: 83%; }
.btn3 { top: 81%; }

.notice-wrapper {
  padding:20px;
}


.notice-text {
    font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.text1 {padding: 30px 10px 10px;}
.text2 {padding: 30px 10px;}

.notice-box{
  background-color: white;
  padding: 20px;
  margin: 0 10px;
  border-radius: 15px;
  font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;
  font-size: 14px;
  color: #532908;
}

.notice-box span{
  text-align: center;
  font-weight: bold;
  display: block;
}


.flow-wrapper {
  padding:20px;
}

.flow-image {
  display: flex;
  align-items: stretch; /* 高さを揃える */
}

.flow-image a {
  width: 25%;
  display: flex;
  align-items: center;   /* 中央寄せ */
  justify-content: center;
}

.flow-image img {
  width: 100%;
  height: auto;
  display: block;
}

.flow-image a:hover img {
  opacity: 0.7;
}


.msg1{
  padding: 20px;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color:#532908;
}

.msg2{
  padding: 40px 20px 0;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: #532908;
}

.bonus-image {
  display: flex;
  padding: 20px 15px 15px 20px;
}

.bonus-image a {
  width: 50%;
  display: block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.bonus-image img {
  width: 100%;
  height: auto;
  display: block;
}


.bonus-image a:hover {
  opacity: 0.7;
}

.bonus-image a:active {
  transform: scale(0.95);
}

.subtext2{
  padding: 10px 40px;
}

.btn-wrapper{
  padding: 0 20px 60px;
}