@charset "utf-8";
/* reset */
/* .bcon html,article,aside,audio,b,body,caption,dd,dialog,div,dl,dt,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,label,li,mark,menu,nav,object,ol,p,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;line-height:1.7;box-sizing:border-box} */

/*全体*/
#contents {
    margin: 50px auto 0;
    max-width: 750px;
    width: 100%
}

#contents img {
    max-width: 100%;
    height: auto;
}


/* h1 > img,
p > img,
div > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
} */
/* position */
.posi-rela {
    position: relative;
}
.ab-center {
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto;
}

.offer {
    position: relative;
    }

.jump-wrap {
    width: 90%;
    display: flex;
    justify-content: center;
    gap: 20px;
    top: 47%;
    flex-wrap: wrap;
}


.jump-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.jump-row.center {
  justify-content: center;
}

/* FVのブラックアウト用 */
.fv {
      position: absolute;
      width: 750px;
      height: 15vh;
      background-image: url('your-fv-image.jpg'); /* ← 背景画像のみ画像 */
      background-size: cover;
      background-position: center;
    }

.fv-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black; /* ← ここがベタ黒 */
      mix-blend-mode: multiply; /* ← 背景と乗算される */
      opacity: 0.7; /* ← 濃さを調整 */
      pointer-events: none;
    }

.text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2.5rem;
      font-weight: bold;
      text-align: center;
      z-index: 1;
        width: 100%;         /* テキストボックスの幅（%でもpxでもOK） */
    }

/* オファーボタンのブラックアウト用 */
.offer-wrapper {
  position: relative;
  width: 100%;
}

.offer-link1,
.offer-link2,
.offer-link3 {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  z-index: 10;
}

/* ボタンの縦位置調整 */
.offer-link1 {
  top: 79%;
}

.offer-link2 {
  top: 80%;
}

.offer-link3 {
  top: 80%;
}

.button1 {
  display: block;
  width: 100%;
  position: relative;
  z-index: 11;
}

.button1 img {
  display: block;
  width: 100%;
  height: auto;
}

.blackout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 12;
  pointer-events: none;
  display: none;
}

.offer-wrapper.inactive .blackout {
  display: block;
}

/* ここがポイント */
.offer-wrapper.inactive .offer-link1,
.offer-wrapper.inactive .offer-link2,
.offer-wrapper.inactive .offer-link3 {
  pointer-events: none;
  cursor: not-allowed;
}



@media screen and (max-width:750px) {
/* --------------- SP --------------- */
#contents {margin: 0px auto 0;}
.jump-wrap {width: 90%;}
.text {font-size: 1.5rem;}
.fv {width: 390px;}
}