#wrapper {
    padding-top: 0 !important;
    font-size: 15px;
}
#top {
    background: url("../images/30th_anniversary/topbg.webp") no-repeat top center;
    background-size: 100% 800px; /* 横幅に合わせて高さは自動 */
}
.image-stack {
    position: relative;
    display: block;
    text-align: center;
}
.image-stack img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
/* 背景画像 */
.image-stack .bg {
    position: relative; /* デフォルト */
    z-index: 0;
}
/* 重ねる画像 */
.image-stack .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.image-stack p {
    text-align: center;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 170px;
    letter-spacing: 0.05em;
}
.ribbons {
    position: relative; /* ← これでz-indexが有効になる */
    z-index: 10; /* overlay(1) より十分大きく */
    justify-content: center;
    margin: 0 auto; /* 中央寄せ（PCでも） */
}
.benefit_title {
       margin-top: 60px;
    height: 56px;
    width: auto;
    max-width: 100%;
}
.benefit_text {
    margin: 20px 20px;
    font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
    letter-spacing: 0em;
}
.benefit_text2 {
    font-size: 14px;
    margin: 20px 20px 40px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    letter-spacing: 0em;
    text-align: center;
    font-weight: 500;
}
.note {
    font-size: 13px; /* 注記用に小さめ */
    color: #666;
    line-height: 1.5;
    margin: 40px !important;
    text-align: center;
}
.green_lage {
    font-size: 1.3em;
    color: #0B4E39;
}
/* 追従CTAボタン */
.cta-fixed {
    position: fixed;
    bottom: 90px;
    width: 100%;
    z-index: 10;
    display: block;
    text-align: center;
}
.cta-fixed img {
    width: 100%;
    height: auto;
    display: block;
}
/* 追従CTAボタンの hover 時に透過しないようにする */
.cta-fixed:hover, .cta-fixed img:hover {
    opacity: 1 !important;
}
.cta-fixed {
  transition: opacity 0.5s ease; /* ふわっと効果 */
}
.cta-fixed.hidden {
  opacity: 0;
  pointer-events: none; /* クリック無効にする */
}

/*PC*/
@media (min-width: 1200px) {
    #top {
        background-image: url("../images/30th_anniversary/topbg_pc.webp");
        background-size: 1000px auto;
    }
    .image-stack {
        width: 1000px;
        margin: 0 auto;
    }
    .image-stack p {
        font-size: 20px;
        margin-top: 50px;
        margin-bottom: 90px;
    }
    .ribbons {
        display: flex;
        width: 90%;
        margin-top: -40px;
    }
    #benefit1, #benefit2, #benefit3 {
        width: 1000px;
        margin: 100px auto; /* 左右中央 */
    }
    .benefit_title {
        margin-left: 30px;
        margin-top: 20px;
        height: 80px;
    }
    .benefit_text {
        margin-left: 60px;
        font-size: 20px;
    }
    .benefit1_AtoE {
        width: 100%;
        margin-top: 60px;
    }
    .benefit_box {
        width: 90%;
        margin: 60px auto 0;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap; /* 折り返し許可 */
    }
    .benefit_box > div {
        flex: 0 1 280px; /* 基本幅300pxで縮む・折り返す */
        min-width: 0; /* ← 画像の実寸で広がらないように重要 */
        text-align: center;
    }
    .benefit_box picture, .benefit_box img {
        display: block; /* 余白/はみ出し防止 */
        max-width: 100%; /* 親幅に収める */
        height: auto;
    }
    .benefit_text2 {
        font-size: 16px;
    }
    .benefit3_img {
        width: 100%;
        margin-top: 60px;
    }
    .note {
        font-size: 15px;
        margin: 50px auto 70px !important;
    }
.cta-fixed {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* ← 画面中央に固定 */
    width: auto;                /* ← 固定幅にしたいなら auto に */
    background: none;
    text-align: center;
  }
  .cta-fixed img {
    width: 460px;   /* PCサイズ */
    height: auto;
  }

}

/* Tablet: 768–1199px */
@media (min-width: 768px) and (max-width: 1199px) {
  #top {
    background-image: url("../images/30th_anniversary/topbg_pc.webp");
    background-size: 100% auto;
  }

  .image-stack {
    width: min(92vw, 900px);
    margin: 0 auto;
  }

  .image-stack p {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 72px;
  }

  .ribbons {
    display: flex;
    justify-content: center;
    width: min(92vw, 900px);
    margin: -24px auto 0;
    gap: 16px;
  }

  #benefit1, #benefit2, #benefit3 {
    width: min(92vw, 900px);
    margin: 80px auto;
  }

  .benefit_title {
    margin-left: 16px;
    margin-top: 16px;
    height: 72px;
  }

  .benefit_text { margin-left: 32px; font-size: 18px; }
  .benefit_text2 { font-size: 15px; }

  .benefit_box {
    width: 80%;
    margin: 48px auto 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .benefit_box > div {
    flex: 0 1 calc(50% - 10px); /* 2列 */
    min-width: 0;
    text-align: center;
  }
  .benefit_box picture, .benefit_box img {
    display: block;
    max-width: 100%;
    height: auto;
  }
    .benefit1_AtoE {
        width: 100%;
    }
    .benefit3_img {
        width: 100%;
    }

  .note { font-size: 14.5px; margin: 40px auto 60px !important; }

  /* CTA：中央固定・やや小さめ */
  .cta-fixed {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    background: none;
    text-align: center;
  }
  .cta-fixed img {
    width: 450px;
    height: auto;
  }
}


/* ふわっと表示：下から上 */
.inview.fadeup {
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
.inview.fadeup.active {
    opacity: 1;
    transform: translateY(0px);
}
/* ふわっと表示：上から下 */
.inview.fadedown {
    opacity: 0;
    transform: translateY(-40px);
    transition-property: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
.inview.fadedown.active {
    opacity: 1;
    transform: translateY(0px);
}
/* 共通オプション */
.fadeup-fast, .fadedown-fast {
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
}
/* ディレイ（既存をそのまま流用） */
.delay01 {
    transition-delay: 0.3s;
}
.delay02 {
    transition-delay: 0.6s;
}
.delay03 {
    transition-delay: 0.9s;
}
.delay04 {
    transition-delay: 1.2s;
}
.delay05 {
    transition-delay: 1.5s;
}
.delay06 {
    transition-delay: 1.8s;
}
.delay07 {
    transition-delay: 2.1s;
}
.delay08 {
    transition-delay: 2.4s;
}
.delay09 {
    transition-delay: 2.7s;
}
.delay10 {
    transition-delay: 3.0s;
}
.delay_featureImg1 {
    transition-delay: 1.0s;
}
.delay_featureImg2 {
    transition-delay: 1.6s;
}
.delay_featureImg3 {
    transition-delay: 2.2s;
}
.delay_featureImg4 {
    transition-delay: 1.3s;
}
.delay_featureImg5 {
    transition-delay: 1.9s;
}
.delay_featureImg6 {
    transition-delay: 2.5s;
}