@charset "UTF-8";

/* ==============================================
   資料ダウンロード（TM5N）
   waterproof/ と technical/ の2ページで共有

   ヒーローと見出し・本文の値は products-compliance/css/style.css に揃えている。
   同じクラス名の共通ファイルは無いので、変えるときは両方見ること。
   ============================================== */

/* -----------------------------------------------
   Layout
----------------------------------------------- */
.bm_download .ly_main { margin-top: 147px; }

/* -----------------------------------------------
   Hero
----------------------------------------------- */
.bm_download .un_bm_st_hero {
    position: relative;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    text-align: center;
}

.bm_download .un_bm_st_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(128, 128, 128, 1);
}

.bm_download .un_bm_st_hero_title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
}

/* -----------------------------------------------
   Form
----------------------------------------------- */
.bm_download_form {
    background-color: #fff;
    padding-bottom: 100px;
}

.bm_download_form_inner {
    max-width: 878px;
    margin: 0 auto;
    padding: 0 24px;
}

/* text-align のみ参照先と異なる（このページは左寄せ、参照先は中央寄せ） */
.bm_download .un_bm_st_intro_heading {
    font-family: "Noto Sans CJK JP", sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #000000;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin: 0;
    padding-top: 80px;
    text-align: left;
}

/* 素の iframe セレクタにするとページ内の他の iframe も巻き込むので必ず限定する */
.bm_download .bm_download_form_inner iframe {
    display: block;
    width: 100%;
    height: 1000px;
    border: none;
    margin: 0 auto;
    overflow: hidden;
}

/* -----------------------------------------------
   Responsive — 1200px
----------------------------------------------- */
@media screen and (max-width: 1200px) {
    .bm_download .ly_main { margin-top: 100px; }
}

/* -----------------------------------------------
   Responsive — 1024px
----------------------------------------------- */
@media screen and (max-width: 1024px) {
    .bm_download .un_bm_st_hero_title {
        font-size: 26px;
    }

    .bm_download .un_bm_st_intro_heading {
        font-size: 34px;
    }
}

/* -----------------------------------------------
   Responsive — 768px (SP)
----------------------------------------------- */
@media screen and (max-width: 768px) {
    .bm_download .ly_main { margin-top: 72px; }

    .bm_download .un_bm_st_hero {
        min-height: 105px;
        padding: 0 20px; /* H1 が2行になるため。参照先には無い */
    }

    .bm_download .un_bm_st_hero_title {
        font-size: 24px;
    }

    .bm_download_form {
        padding-bottom: 60px;
    }

    .bm_download_form_inner {
        padding: 0 20px;
    }

    .bm_download .un_bm_st_intro_heading {
        font-size: 22px;
        letter-spacing: -0.04em;
        padding-top: 40px;
    }

    .bm_download .bm_download_form_inner iframe {
        height: 1200px;
    }
}

/* -----------------------------------------------
   Responsive — 470px
----------------------------------------------- */
@media screen and (max-width: 470px) {
    .bm_download .bm_download_form_inner iframe {
        height: 1400px;
    }
}