どんなウィンドウサイズにも最下部にメニューがフィット！

HTML

              
                <div class="bg--fix" style=""></div>
<div id="container">
  <section id="main">
    <!--スマホ -->
    <div class="menu sp" id="toggle"><i class="fas fa-bars"></i></div>
    <div class="menu__box">
      <div class="menu__inner">
        <div class="close"><i class="fas fa-times"></i></div>
        <div class="logo"><a href="#" target="_blank"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/menu_logo.png" width="82" alt="shinsei"></a></div>
        <ul>
          <li><a href="#a01">商品の特徴</a></li>
          <li><a href="#a02">おすすめ商品</a></li>
          <li><a href="#">商品のご紹介</a></li>
        </ul>
        <div class="menu__btn"><a href="#" target="_blank"><i class="fas fa-shopping-cart"></i>オンラインショップ</a></div>
      </div>
    </div>
    <!--スマホここまで -->
    <!--背景画像３枚-->
    <div class="visual_wrapper">
      <div class="visual__img visual__img01"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img03.png" alt="" width="364" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/pad_img01.png" alt="" class="pad"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_visual_img01.png" alt="" class="sp"></div>
      <div class="visual__img visual__img02"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img04.png" alt="" width="669" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/pad_img02.png" alt="" class="pad"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_visual_img02.png" alt="" class="sp"></div>
      <div class="visual__img visual__img03"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img05.png" alt="" width="678" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/pad_img03.png" alt="" class="pad"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_visual_img03.png" alt="" class="sp"></div>
     <!--ここまで背景画像３枚-->
      <!--ここからPC -->
      <nav id="nav" style="">
        <ul class="clearfix">
          <li class="nav_btn01"><a href="#" target="_blank"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/logo.png" alt="shinsei" width="82"></a></li>
          <li><a href="#a01">商品の特徴</a></li>
          <li><a href="#a02">おすすめ商品</a></li>
          <li><a href="#a03">商品のご紹介</a></li>
          <li class="nav_btn02"><a href="#" target="_blank"><i class="fas fa-shopping-cart"></i>オンラインショップ</a></li>
        </ul>
      </nav>
      <!--ここまでPC -->
      <!--KV -->
      <div><a href="#" target="_blank"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/logo.png" alt="shinsei" width="118"></a></div>
      <h1 class="visual_wrapper__img"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img01.png" alt="クラッシュアーモンドすりごま" width="384"></h1>
      <!--KV -->
    </div><!--visual_wrapper -->
  </section><!--main -->
  <!--ページトップへ -->
  <ul class="page__ul">
    <li class="pc"><a href="#" target="blank"><i class="fas fa-shopping-cart"></i>購入する</a></li>
    <li><a href="#container" class="page__top"><i class="fas fa-chevron-up"></i>PAGE<br>
      TOP</a></li>
  </ul>
  <!--ページトップへ -->
  <!--ここからスマホのみ購入ボタン -->
  <footer id="footer">
    <div class="btn--fix sp"><a href="#" target="blank"><i class="fas fa-shopping-cart"></i>購入する</a></div>
    <p class="copyright">Copyright (c) Studio-０ All Rights Reserved.</p>
  </footer><!--ここまでスマホのみ購入ボタン -->
</div><!--container -->

CSS

              
                @media screen and (min-width: 768px) {
  .sp {
    display: none !important; }

  .pad {
    display: none !important; } }
@media all and (min-width: 768px) and (max-width: 1280px) {
  body {
    font-size: 1.6rem; } }
@media screen and (max-width: 767px) {
  .pc {
    display: none !important; }

  .pad {
    display: none !important; }

  a:hover,
  a:hover img {
    opacity: 1 !important; }

  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto; } }





html {
    font-size: 62.5%;
}


body {
    color: #231815;
    font-size: 2rem;
    line-height: 1.6;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    background-color: #FFF;
}
a, a:link {
    color: #231815;
    text-decoration: none;
}

@media (max-width: 1280px) and (min-width: 768px){
#nav ul li a {
    padding: 15px 4px 15px;
    font-size: 1.4rem;
  }}


#container {
  text-align: left;
  position: relative;
  z-index: 1;
  overflow: hidden; }



* html .clearfix {
  zoom: 1; }

* + html .clearfix {
  zoom: 1; }

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both; }
#container {
  height:5000px;
}

.bg--fix {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(https://studio-0.com/blog/wp-content/uploads/2020/04/visual_bg.jpg) no-repeat top center;
  background-size: cover;
  opacity: 0;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s; }
  .bg--fix.on {
    opacity: 1; }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .bg--fix {
      background-image: url(https://studio-0.com/blog/wp-content/uploads/2020/04/pad_visual_bg.jpg); } }
  @media screen and (max-width: 767px) {
    .bg--fix {
      background-image: url(https://studio-0.com/blog/wp-content/uploads/2020/04/sp_visual_bg.jpg); } }

 /***********
スマホのgnavi 
************/

#nav {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 62px;
  position: absolute;
  z-index: 99;
  background-color: #fff; }
  #nav.fixed {
    position: fixed;
    left: 0;
    top: 0;
    bottom: auto; }
  #nav ul {
    margin: 0 auto;
    max-width: 1200px; }
    #nav ul li {
      width: 20%;
      float: left;
      text-align: center; }
      #nav ul li a {
        padding: 17px 10px;
        display: block;
        font-size: 1.8rem;
        font-weight: 900; }
        #nav ul li a:hover {
          opacity: 1;
          background-color: #EEE4E2; }
        @media all and (min-width: 768px) and (max-width: 1280px) {
          #nav ul li a {
            padding: 15px 4px 15px;
            font-size: 1.4rem; } }
      #nav ul li.nav_btn01 a {
        padding: 14px 10px 12px; }
        #nav ul li.nav_btn01 a:hover {
          background: none;
          opacity: 1; }
        @media all and (min-width: 768px) and (max-width: 1280px) {
          #nav ul li.nav_btn01 a img {
            width: 67px; } }
      #nav ul li.nav_btn02 a {
        color: #00D1CD; }
        #nav ul li.nav_btn02 a i {
          margin-right: 11px;
          font-size: 2rem; }
          @media all and (min-width: 768px) and (max-width: 1280px) {
            #nav ul li.nav_btn02 a i {
              margin-right: 5px;
              font-size: 1.1rem; } }
        #nav ul li.nav_btn02 a:hover {
          color: #fff;
          background-color: #00D1CD; }
    @media screen and (max-width: 767px) {
      #nav ul {
        background-color: #000; } }
  @media screen and (max-width: 767px) {
    #nav {
      display: none; } }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    #nav {
      height: 52px; } }





 /***********
PCのgnavi
************/
.menu__box {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  text-align: center;
  background-color: #00D1CD; }
  .menu__box .menu__inner {
    padding: 30px 0;
    height: 100%;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .menu__box .menu__inner ul {
      margin-bottom: 86px; }
      .menu__box .menu__inner ul li {
        margin-bottom: 28px; }
        .menu__box .menu__inner ul li a {
          font-size: 2rem;
          font-weight: bold;
          color: #fff; }
        .menu__box .menu__inner ul li:last-child {
          margin-bottom: 0; }
    .menu__box .menu__inner .logo {
      margin-bottom: 93px; }
    .menu__box .menu__inner .menu__btn {
      margin-bottom: 50px; }
      .menu__box .menu__inner .menu__btn a {
        width: 262px;
        color: #00D1CD;
        font-size: 1.8rem;
        display: inline-block;
        background-color: #fff;
        border-radius: 30px;
        font-size: 1.8rem;
        padding: 16px 5px 14px;
        font-weight: bold;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        .menu__box .menu__inner .menu__btn a i {
          margin-right: 10px; }
    .menu__box .menu__inner .close {
      position: absolute;
      width: 55px;
      height: 55px;
      color: #00D1CD;
      right: 10px;
      top: 10px;
      font-size: 2.4rem;
      border-radius: 50%;
      padding-top: 7px;
      cursor: pointer;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 100;
      background-color: #fff; }

.menu {
  padding: 17px 12px;
  width: 55px;
  height: 55px;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 30;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
  .menu i {
    font-size: 2.2rem;
    color: #231815; }


 /***********
背景画像３枚
************/
.visual_wrapper {
  margin-bottom: 80px;
  padding: 3.1% 0 3.28%;
  height: 100vh;
  position: relative;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .visual_wrapper h1 {
    margin-bottom: 2.1%;
    height: 7.1%;
    opacity: 0;
    -webkit-transition: all ease 0.3s 0.9s;
    -o-transition: all ease 0.3s 0.9s;
    transition: all ease 0.3s 0.9s;
    position: relative;
    z-index: 2; }
    .visual_wrapper h1 img {
      width: auto;
      height: 100%; }
    .visual_wrapper h1 a:hover {
      opacity: 1; }
    @media all and (min-width: 768px) and (max-width: 1280px) {
      .visual_wrapper h1 {
        margin-bottom: 18.3%;
        height: 4.45%; } }
    @media all and (min-width: 1023px) and (max-width: 1024px) {
      .visual_wrapper h1 {
        height: 7%;
        margin-bottom: 5%; } }
    @media screen and (max-width: 767px) {
      .visual_wrapper h1 {
        margin-bottom: 19%;
        height: 4.4%; } }
    @media all and (min-width: 500px) and (max-width: 767px) {
      .visual_wrapper h1 {
        height: 10%;
        margin-bottom: 5%; } }
  .visual_wrapper .visual_wrapper__img {
    width: auto;
    height: 75.8%;
    opacity: 0;
    -webkit-transition: all ease 0.3s 0.9s;
    -o-transition: all ease 0.3s 0.9s;
    transition: all ease 0.3s 0.9s;
    position: relative;
    z-index: 2; }
    .visual_wrapper .visual_wrapper__img img {
      width: auto;
      height: 100%; }
    @media all and (min-width: 768px) and (max-width: 1280px) {
      .visual_wrapper .visual_wrapper__img {
        margin-left: 3.8%;
        height: 54%; } }
    @media screen and (max-width: 767px) {
      .visual_wrapper .visual_wrapper__img {
        margin-bottom: 0;
        height: 48.3%; } }
  .visual_wrapper .visual__img {
    position: absolute;
    top: 0;
    left: 18.55%;
    height: 31.6%;
    opacity: 0;
    -webkit-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s; }
    .visual_wrapper .visual__img img {
      width: auto;
      height: 100%; }
      .visual_wrapper .visual__img img.pad {
        display: none !important; }
      @media all and (min-width: 768px) and (max-width: 1280px) {
        .visual_wrapper .visual__img img {
          display: block !important; } }
    .visual_wrapper .visual__img.visual__img02 {
      top: auto;
      left: auto;
      right: 5.3%;
      bottom: 63px;
      width: auto;
      height: 89.42%;
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s; }
    .visual_wrapper .visual__img.visual__img03 {
      top: auto;
      left: 0;
      height: 80%;
      bottom: 7.7%;
      -webkit-transition-delay: 0.6s;
      -o-transition-delay: 0.6s;
      transition-delay: 0.6s; }
    @media all and (min-width: 1281px) and (max-width: 1700px) {
      .visual_wrapper .visual__img {
        left: 8%; }
        .visual_wrapper .visual__img.visual__img02 {
          right: -0.3%;
          top: 5%;
          height: 87%; }
        .visual_wrapper .visual__img.visual__img03 {
          left: -2%;
          height: 69%;
          bottom: 8%; } }
    @media all and (min-width: 768px) and (max-width: 1280px) {
      .visual_wrapper .visual__img {
        left: -11.1%;
        width: auto;
        max-height: 606px;
        height: 88.72%;
        top: -6.5%; }
        .visual_wrapper .visual__img img {
          width: auto;
          height: 100%; }
          .visual_wrapper .visual__img img.pc {
            display: none !important; }
          .visual_wrapper .visual__img img.pad {
            display: inline-block !important; }
          .visual_wrapper .visual__img img.sp {
            display: none !important; }
        .visual_wrapper .visual__img.visual__img02 {
          width: auto;
          max-height: 1297px;
          height: 94.94%;
          top: -5%;
          right: -13.8%;
          bottom: auto; }
        .visual_wrapper .visual__img.visual__img03 {
          max-height: 780px;
          width: auto;
          height: 57.1%;
          bottom: 3.8%;
          left: -12.9%; } }
    @media screen and (max-width: 767px) {
      .visual_wrapper .visual__img {
        left: 0;
        width: 31.8%;
        height: auto;
        max-width: inherit; }
        .visual_wrapper .visual__img img {
          width: 100%;
          height: auto; }
        .visual_wrapper .visual__img.visual__img02 {
          max-width: inherit;
          width: 38.8%;
          height: auto;
          top: 0;
          right: 0;
          bottom: auto; }
        .visual_wrapper .visual__img.visual__img03 {
          max-width: inherit;
          bottom: 13.8%;
          height: auto; } }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .visual_wrapper {
      padding: 6.4% 0 3.28%; } }
  @media screen and (max-width: 767px) {
    .visual_wrapper {
      margin-bottom: 64px;
      padding: 8.6% 0 3.28%; } }
  .visual_wrapper.on .visual__img {
    opacity: 1; }
  .visual_wrapper.on h1 {
    opacity: 1; }
  .visual_wrapper.on .visual_wrapper__img {
    opacity: 1; }





 /***********
スマホのみ購入ボタン
************/

#footer {
  padding: 31px 0;
  font-size: 1.8rem;
  color: #00D1CD;
  font-weight: 500;
  text-align: center; }
  #footer .btn--fix {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    z-index: 30;
    padding: 19px 10px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff; }
    #footer .btn--fix a {
      padding: 7px 7px 6px;
      width: 262px;
      color: #fff;
      font-size: 1.8rem;
      display: inline-block;
      background-color: #00D1CD;
      border-radius: 30px;
      font-size: 1.8rem;
      padding: 5px;
      font-weight: bold;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 0 0 20px rgba(0, 209, 205, 0.4);
      box-shadow: 0 0 20px rgba(0, 209, 205, 0.4); }
      #footer .btn--fix a i {
        margin-right: 19px; }
  @media screen and (max-width: 767px) {
    #footer {
      padding: 15px 0 80px;
      font-size: 1.4rem; } }


 /***********
ページトップへ 
************/
.page__ul {
  display: none;
  position: fixed;
  right: 27px;
  bottom: 20px;
  z-index: 35; }
  .page__ul li {
    margin-bottom: 30px;
    width: 100px;
    height: 100px;
    font-size: 1.8rem;
    text-align: center;
    font-weight: bold; }
    @media screen and (max-width: 767px) {
      .page__ul li {
        margin-bottom: 0;
        width: 55px;
        height: 55px; } }
    .page__ul li a {
      padding: 25px 5px;
      color: #fff;
      height: 100%;
      display: block;
      background-color: #00D1CD;
      border-radius: 50%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 0 4px 15px rgba(0, 209, 205, 0.4);
      box-shadow: 0 4px 15px rgba(0, 209, 205, 0.4); }
      .page__ul li a i {
        margin: 0 auto;
        display: block; }
      .page__ul li a.page__top {
        padding-top: 10px;
        font-size: 1.6rem;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        color: #FFC60B;
        font-size: 1.6rem;
        line-height: 1;
        -webkit-box-shadow: 0 4px 10px rgba(255, 198, 11, 0.4);
        box-shadow: 0 4px 10px rgba(255, 198, 11, 0.4);
        background-color: #fff; }
        .page__ul li a.page__top i {
          margin-bottom: 2px; }
        .page__ul li a.page__top:hover {
          color: #fff;
          background-color: #FFC60B; }
        @media screen and (max-width: 767px) {
          .page__ul li a.page__top {
            width: 55px;
            height: 55px;
            font-size: 1.1rem; }
            .page__ul li a.page__top:hover {
              color: #FFC60B;
              background-color: #fff; } }
      .page__ul li a:hover {
        opacity: 1;
        color: #00D1CD;
        background-color: #fff; }
  @media screen and (max-width: 767px) {
    .page__ul {
      right: 10px;
      bottom: 60px; } }

JS

              
                //page-scroller
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});



//KV背景の表示
$(function(){
		$('.bg--fix').addClass('on');
		setTimeout(function(){
			$('.visual_wrapper').addClass('on');
		},300);
  
		$(window).resize(function(){
			$('.visual_wrapper').outerHeight($(window).height());
		}).trigger('resize');
		
	
	});
		
		
//PCのgnavi
  	$(window).scroll(function () {
		var winH = $(window).innerHeight();
		var h;
		if ($(window).width() > 767) {
			h = winH - 70;
		} else {
			h = winH - 49;
		}
		if ($(window).scrollTop() > h) {
			$('#nav').addClass('fixed');
		} else {
			$('#nav').removeClass('fixed');
		}


	}).trigger('scroll');



//スマホのgnavi
	var state = false;
	var scrollpos;
	$('.menu').on('click', function () {
		if (state == false) {
			scrollpos = $(window).scrollTop();
			$('body').addClass('fixed').css({
				'top': -scrollpos
			});
			$('.menu__box').slideToggle();
			$('.menu').toggleClass('on');
			state = true;
		} else {
			$('body').removeClass('fixed').css({
				'top': 0
			});
			window.scrollTo(0, scrollpos);
			$('.menu__box').stop().slideToggle();
			$('.menu').toggleClass('on');
			state = false;
		}
		return false;
	});

	$('.menu__box .menu__inner ul li a,.menu__box .menu__inner .close').click(function () {
		$('body').removeClass('fixed').css({
			'top': 0
		});
		window.scrollTo(0, scrollpos);
		$('.menu__box').stop().slideToggle();
		state = false;
		return false;
	});

//ページトップへ
$(window).scroll(function () {
		if ($(window).scrollTop() > 300) {
			$('.page__ul').fadeIn();
		} else {
			$('.page__ul').fadeOut();
		}
	});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions