固定ヘッダ追加

achievement-official.conohawing.com/assets/css/style.css

@@ -247,6 +247,79 @@ for develop
 breadcrumb
 breadcrumb
 
 
 ------------------------------------------------------------*/
 ------------------------------------------------------------*/
+.c-breadcrumb {
+  background: transparent;
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  top: 114px;
+  left: 0;
+}
+@media screen and (max-width: 767px) {
+  .c-breadcrumb {
+    top: 1px;
+  }
+}
+.c-breadcrumb__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.c-breadcrumb__item {
+  position: relative;
+  margin: 0 2px 0 0;
+}
+@media screen and (max-width: 767px) {
+  .c-breadcrumb__item {
+    margin: 0 3px 0 0;
+  }
+}
+.c-breadcrumb__item:first-child {
+  margin: 0 3px 0 -6px;
+}
+@media screen and (max-width: 767px) {
+  .c-breadcrumb__item:first-child {
+    margin: 0 3px 0 -4px;
+  }
+}
+.c-breadcrumb__item::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  background: rgba(190, 172, 86, 0.6);
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transform: skew(-20deg);
+  transform: skew(-20deg);
+}
+.c-breadcrumb a, .c-breadcrumb span {
+  font-size: 1.2rem;
+  line-height: 1.5;
+  color: #fff;
+  position: relative;
+  z-index: 2;
+  display: block;
+}
+@media screen and (max-width: 767px) {
+  .c-breadcrumb a, .c-breadcrumb span {
+    font-size: 1rem;
+  }
+}
+.c-breadcrumb span {
+  padding: 6px 16px;
+}
+@media screen and (max-width: 767px) {
+  .c-breadcrumb span {
+    padding: 3px 10px;
+  }
+}
+
 /*
 /*
 
 
 ------------------------------------------------------------*/
 ------------------------------------------------------------*/
@@ -926,6 +999,104 @@ header
  height: 26px;
  height: 26px;
 }
 }
 
 
+
+
+
+
+
+.fixed-nav.is-show {
+  background-color: #fff;
+}
+
+.fixed-nav.is-show .c-header1-logo {
+  padding: 0 0 0 12px;
+}
+
+.fixed-nav.is-show .c-header1-logoLink {
+  max-width: 220px;
+  display: inline-block;
+}
+
+.fixed-nav.is-show .c-header1-logoLink img {
+  width: 100%;
+}
+
+.fixed-nav.is-show .c-header1-btn1 {
+  width: 138px;
+  height: 50px;
+}
+.fixed-nav.is-show .c-header1-btn1--red {
+  width: 108px;
+}
+.fixed-nav.is-show .c-header1-btn1--red .c-header1-btn1-text {
+  padding: 0;
+  padding-left: 11px;
+}
+.fixed-nav.is-show .c-header1-btn1 .c-header1-btn1-text {
+  padding-left: 6px;
+}
+.fixed-nav.is-show .c-header1-link {
+  padding-right: 10px;
+}
+.fixed-nav.is-show .c-header1-link1 {
+  padding: 10px 13px;
+  margin-left: 12px;
+}
+.fixed-nav.is-show .c-nav {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-470px);
+  margin-top: 10px;
+  background: #fcc;
+}
+
+.fixed-nav.is-show .c-nav-link1 {
+  padding: 5px 20px;
+  width: auto;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 @media screen and (max-width: 767px) {
 @media screen and (max-width: 767px) {
  .c-header2 {
  .c-header2 {
   padding: 0 14px;
   padding: 0 14px;
@@ -9191,76 +9362,4 @@ body {
  height: auto;
  height: auto;
 }
 }
 
 
-.c-breadcrumb {
-  background: transparent;
-  position: absolute;
-  z-index: 10;
-  width: 100%;
-  top: 114px;
-  left: 0;
-}
-@media screen and (max-width: 767px) {
-  .c-breadcrumb {
-    top: 1px;
-  }
-}
-.c-breadcrumb__inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-.c-breadcrumb__item {
-  position: relative;
-  margin: 0 2px 0 0;
-}
-@media screen and (max-width: 767px) {
-  .c-breadcrumb__item {
-    margin: 0 3px 0 0;
-  }
-}
-.c-breadcrumb__item:first-child {
-  margin: 0 3px 0 -6px;
-}
-@media screen and (max-width: 767px) {
-  .c-breadcrumb__item:first-child {
-    margin: 0 3px 0 -4px;
-  }
-}
-.c-breadcrumb__item::after {
-  content: '';
-  width: 100%;
-  height: 100%;
-  background: rgba(190, 172, 86, 0.6);
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-transform: skew(-20deg);
-  transform: skew(-20deg);
-}
-.c-breadcrumb a, .c-breadcrumb span {
-  font-size: 1.2rem;
-  line-height: 1.5;
-  color: #fff;
-  position: relative;
-  z-index: 2;
-  display: block;
-}
-@media screen and (max-width: 767px) {
-  .c-breadcrumb a, .c-breadcrumb span {
-    font-size: 1rem;
-  }
-}
-.c-breadcrumb span {
-  padding: 6px 16px;
-}
-@media screen and (max-width: 767px) {
-  .c-breadcrumb span {
-    padding: 3px 10px;
-  }
-}
 
 

achievement-official.conohawing.com/assets/include/header.php

@@ -143,6 +143,7 @@
  <link rel="stylesheet" href="/common_previous/css/other.css">
  <link rel="stylesheet" href="/common_previous/css/other.css">
  <link rel="stylesheet" href="/common_previous/css/contact.css">
  <link rel="stylesheet" href="/common_previous/css/contact.css">
  <?php } ?>
  <?php } ?>
+
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3405083-1"></script>
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3405083-1"></script>
 <script>
 <script>
@@ -152,6 +153,37 @@
 
 
   gtag('config', 'UA-3405083-1');
   gtag('config', 'UA-3405083-1');
 </script>
 </script>
+<style>
+  /* demo style */
+  .fixed-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    transition: .3s;
+    transform: translateY(-100%);
+  }
+  .is-show {
+    transform: translateY(0);
+  }
+</style>
+<script>
+  $(function() {
+    var $win = $(window),
+        $cloneNav = $('header').clone().addClass('fixed-nav').appendTo('body'),
+        showClass = 'is-show';
+
+    $win.on('load scroll', function() {
+      var value = $(this).scrollTop();
+      if ( value > 300 ) {
+        $cloneNav.addClass(showClass);
+      } else {
+        $cloneNav.removeClass(showClass);
+      }
+    });
+  });
+</script>
 </head>
 </head>
 
 
 <body class="page-<?php echo $pageid; ?>">
 <body class="page-<?php echo $pageid; ?>">