.medium-holyday-bnr {
  display: none;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .medium-holyday-bnr {
    display: block;
  }
  .medium-holyday-bnr .holiday {
    padding: 16rem 2rem 2rem 2rem;
  }
  .medium-holyday-bnr .holiday-icon {
    top: 6%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .medium-holyday-bnr .holiday-main {
    font-size: 3.4rem;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .default-holyday-bnr {
    display: none;
  }
}

@media (max-width: 767px) {
  .default-holyday-bnr .holiday-wrapper {
    padding: 5rem 0 3rem;
  }
}

/* このファイルは静的 CSS。Twig 関数は通らないので、画像 URL は
   このファイル（html/user_data/assets/css/holiday_banner.css）からの相対パスで書く。 */
.holiday {
    max-width: 1180px;
    margin: 0 auto;
    background: url('../img/css_custom/top/set-bnr-bg01.png');
    border: 2px solid #232323;
    border-radius: 7px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 2rem 2rem 25rem;
    font-weight: bold;
    font-family: "Hiragino Sans W8", "Hiragino Kaku Gothic StdN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
}
.holiday-wrapper {
    padding: 3rem 1rem;
    background: url('../img/top/sec01_bg.png');
}
.holiday-icon {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}
.holiday-main {
    line-height: 1.5;
    font-size: 3.5rem;
    color: #f20018;
    font-weight: bold;
}
.holiday-main._small {
    font-size: 2rem;
}
.holiday-text {
    font-size: 1.8rem;
    margin-top: 1rem;
}
.holiday-text .d-sm-none {
    display: none;
}
@media (max-width: 767px) {
    .holiday {
        width: 100%;
        padding: 3rem 1rem 1rem;
    }
    .holiday-icon {
        position: absolute;
        top: -3rem;
        left: 50%;
        transform: translateX(-50%);
        width: 8rem;
    }
    .holiday-main {
        font-size: 1.4rem;
        padding-bottom: 4px;
    }
    .holiday-main._small {
        font-size: 16px;
    }
    .holiday-text {
        font-size: 15px;
        margin: 0;
    }
    .holiday-wrapper._small {
        padding: 2rem 0;
    }
    .holiday-wrapper._small .holiday-icon {
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%);
        width: 6rem;
    }
    .holiday-wrapper._small .holiday-main {
        font-size: 1.4rem;
    }
    .holiday-wrapper._small .holiday-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
}
@media (max-width: 575px) {
    .holiday-text .d-sm-none {
        display: block;
    }
}