可変する要素に重なってしまう

picutreとsourceを使ってトップ画像がデバイスサイズによって切り替わるサイトを作っています。
そのトップ画像が下の要素と重なってしまい困っています。
トップ画像のdivにはposition:relativeが設定されているのでabsoluteを使ってみたものの、固定なのでトップ画像の可変に対応できません。
スマホサイズでは重なりがないのでどうにかPCサイズでもくっつかないようにしたいのです。

お手数ですがわかる方ご協力いただけますと幸いです。

該当のソースコード

<div id="header_p" class="header_image"> <figure class="bg_haikei"> <p class="fade right"><タイトル</p> <picture> <source media="(min-width:1000px)" sizes="100vw" srcset="img/main_pc_1920.jpg 1920w, img/main_pc.jpg 3840w"> <source media="(min-width:428px)" sizes="100vw" srcset="img/main_tb_high.jpg 2048w"> <img sizes="(max-width:427px) 100wv" srcset="img/main_sp_low.jpg 720w, img/main_sp_normal.jpg 1080w, img/main_sp_high.jpg 1284w" alt=""> </picture> </figure> <picture class="fade header_yama"> <source media="(min-width:1000px)" sizes="100vw" srcset="img/bg_head_bg_small.svg 1920w"> <source media="(min-width:428px)" sizes="100vw" srcset="img/bg_head_bg.svg 1920w"> <img sizes="(max-width:427px) 100wv" srcset="img/bg_head_bg_small_2.svg 1080w" alt=""> </picture> <h1 class="logo_box"> <img src="img/begi_banner.png" alt="" class="fade begi_logo"> </h1> </div> <main class="bg_kiso"> <section id="box1" class="box color_bg1" data-section-name="kikkake"> <div class="kikkake"> <h2 class="fade k_midashi">文字</h2> <p class="fade left">文字</p> </div> </section><!--box--> </main>

body{ font-size:16px; } section{ display: block; margin: 0 auto; } p { line-height:1.7rem; } a:visited{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } a:hover { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; text-decoration:none; } img { display: block; } .header_image { width:100vw; position:relative; height:100vh; } .bg_haikei { height:100vh; z-index:0; } .header_yama { width:100vw; z-index:2; position: absolute; top:0; left:0; } p,h2 { z-index:4; color:#6D5C51; } .right { text-align:right; position: absolute; top:26px; right:20px; font-size:1.2rem; font-weight:bold; letter-spacing: 0.15rem; } img.begi_logo { position:absolute; display: block; top:40%; width:min(80vw,1133px); margin:0 auto; z-index:6; } main.bg_kiso { width:80vw; margin:0 auto; } .kikkake,.syoukai_n { display:block; width:86vw; margin:0 auto; } section.color_bg1 { background-color:#BFD5A0; padding-top:148px; padding-bottom:257px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .k_midashi { font-size:2.5rem; letter-spacing: 0.15rem; margin-bottom:24px; } .left2 { margin-bottom:88px; } .openbtn>p{ font-size:0.8rem; letter-spacing: 0.1rem; } .syoukai { padding-top:120px; padding-bottom:180px; background:#F5F5F5; } section.color_bg2 { background-color:#F5F5F5; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } figure.zure1 img{ width:100vw; } figure.zure2 img{ width:53.6vw; margin-left:6.4vw; margin-top:-56px; margin-bottom:56px; } figure.zure3 img{ width:85.9vw; margin-left:14.1vw; } /*****3*****/ .sub_box { display: flex; flex-direction: column; width:85vw; margin:0 auto; } .left_title { display: flex; justify-content: flex-start; flex-direction: column; } .sub3_box { display:flex; flex-direction: column; justify-content: center; }