header rhd https://codepen.io/may88/pen/OmrVQg
/* ----------------------------
* base
* -------------------------- */
html {
//font-size: 62.5%;
font-size: 10px;
}
$font_default: 'Roboto',"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,sans-serif;
body {
margin: auto;
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
font-family: $font_default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
// font-family: 'sans-serif'; //support IE10 & 11
}
}
iframe {
width: 100%;
}
img {
font-size: 0;
}
a {
outline: none;
&:link,
&:visited,
&:active {
text-decoration: none;
outline: none;
}
&:hover {
outline: none;
}
}
input, select, textarea {
border: none;
outline: none;
}
input[type="text"],
input[type="tel"],
input[type="email"],
select {
}
select {
//appearance: none;
}
select::-ms-expand {
display: none;
}
textarea {
max-width: 100%;
}
button {
border: none;
background: none;
outline: none;
cursor: pointer;
}
.hr{
border-top: 1px solid #858585;
}
.sp-visible{
display: none ;
}
.pc-visible{
display: block;
}
/* ----------------------------
* reset
* -------------------------- */
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
p, figure, dl, dd, ol, ul, li, figure {
margin: 0;
}
ol, ul, li {
list-style:none;
padding: 0;
}
dl {
padding: 0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select {
vertical-align:middle;
border-radius: 0;
}
img {
vertical-align: top;
}
address {
font-style: normal;
}
/* ----------------------------
* @media
* -------------------------- */
$BREAK_POINT_MOBILE: 768px;
@mixin mobile($break-point: $BREAK_POINT_MOBILE) {
@media screen and (max-width: $break-point) {
@content;
}
}
/* ----------------------------
* visible
* -------------------------- */
@include mobile {
body {
min-width: 320px;
}
.sp-visible{
display: block;
}
.pc-visible{
display: none;
}
}
/* ----------------------------
* calc-vw
* -------------------------- */
@function calc-vw($size, $viewport:320){
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}
/* ----------------------------
* color
* -------------------------- */
$c_w1: #fff;
$c_w2: #f0f0f0;
$c_w3: #c5c5c5;
$c_b1: #000;
$c_b2: #1a1a1a;
$c_b3: #333;
$c_b4: #4d4d4d;
$c_b5: #666;
$c_b6: #262626;
/* ----------------------------
* flex
* -------------------------- */
@mixin space-between {
display: flex;
justify-content: space-between;
}
/* ----------------------------
* opacity
* -------------------------- */
$opacity-link-hover: .6;
/* ----------------------------
* header
* -------------------------- */
.l-header{
position: relative;
position: fixed;
z-index: 1000;
height: 60px;
background-color: $c_w1;
width: 100%;
top: 0;
min-width: 1280px;
box-shadow: 0 1px rgba(0,0,0,0.15);
font-weight: 400;
a{
color: $c_b2;
}
@include mobile {
min-width: inherit;
height: 50px;
.header-gnavi{
display: none;
}
}
}
.logo-header01{
margin: 19px 0 0 18px;
width: 182px;
}
.logo-header02{
margin: 10px 0 0 12px;
width: 84px;
}
/* mobile */
@include mobile {
.sp-logo-header01{
width: 150px;
margin: 17px 0 0 10px;
}
.sp-logo-header02{
width: 70px;
margin: 12px 0 0 12px;
}
}
.header-sns{
@include space-between;
margin: 22px 4px 0 0;
li{
margin-right: 16px;
&:hover{
opacity: $opacity-link-hover;
}
}
@include mobile {
display: none;
}
}
.left{
float: left;
}
.center{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
width: 600px;
}
.right{
float: right;
display: flex;
}
.l-wrap-right{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
a{
transition: .15s;
}
}
@include mobile {
.sp-menu{
}
.menu-trigger{
position: relative;
width: 50px;
height: 50px;
background-color: $c_b2;
display: inline-block;
float: right;
span{
position: absolute;
left: 0;
right: 0;
top: 10px;
margin: 0 auto;
width: 28px;
height: 1px;
background-color:$c_w1 ;
&:nth-of-type(1) {
top: 10px;
}
&:nth-of-type(2) {
top: 18px;
}
&:nth-of-type(3) {
top: 26px;
}
//menu
&:nth-of-type(4) {
top: 34px;
height: 10px;
width: 32px;
color: $c_w1;
background-color: $c_b2;
text-align: center;
font-size: 10px
}
//close
&:nth-of-type(5) {
top: 34px;
width: 35px;
height: 10px;
color: $c_w1;
background-color: $c_b2;
text-align: center;
}
}
.menu-trigger span:nth-of-type(2) {
top: 7px;
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
}
}
.header-entry{
background-color: $c_b2;
font-size: 16px;
transition: 0.4s;
height: 60px;
width: 160px;
&:hover{
opacity: $opacity-link-hover;
}
a{
color: $c_w1;
padding: 22px 56px;
display: inline-block;
}
}
.header-gnavi-ul{
margin-top: 24px;
font-size: 12px;
a {
position: relative;
display: inline-block;
text-decoration: none;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
transform: scaleX(0);
background-color: $c_b2;
transition: all .3s ease;
}
&:hover {
&::after {
transform: scaleX(1);
}
}
}
}
.gnavi-current{
text-decoration: underline !important;
}
.header-gnavi-li{
display: inline;
&:not(:last-child){
margin-right: 25px;
}
}
/* mobile */
@include mobile {
.sp-header-gnavi{
position: relative;
margin-top: 50px;
width: 100vw;
height: 100vh;
background-color: $c_b2;
a{
color: $c_w1;
}
}
.sp-gnavi-content{
position: absolute;
top: calc(50% - 26px);
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
font-size: 20px;
text-align: center;
}
.sp-header-gnavi-li {
&:not(:last-of-type){
margin-bottom: 20px;
}
}
.sp-header-sns {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30px auto;
width: 125px;
img{
width: 50%;
}
.sp-tw-li,
.sp-line-li{
text-align:end;
}
}
.sp-header-entry{
background-color: $c_w1;
a{
color:$c_b2;
display: inline-block;
padding: 15px 90px;
font-style: italic;
}
}
}
.is-close{
display: none;
}
/* ----------------------------
* sp-header-gnavi
* -------------------------- */
@include mobile {
label{
position: relative;
z-index: 20;
}
.sp-header-gnavi {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
list-style: none;
}
input[type="checkbox"].on-off ~ .sp-header-gnavi{
display: none;
opacity: 0;
}
input[type="checkbox"].on-off:checked ~ .sp-header-gnavi{
display: block;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}
@keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
// 開閉アニメーション
.close{
display: none;
}
input[type="checkbox"].on-off:checked ~ label .close{
display: block;
}
.top,
.middle,
.bottom{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu{
display: block;
}
input[type="checkbox"].on-off:checked ~ label .menu{
display: none;
}
input[type="checkbox"].on-off:checked ~ label .top{
-webkit-transform: translateY(20px) rotate(-45deg);
transform: translateY(20px) rotate(-45deg);
top: -2px;
}
input[type="checkbox"].on-off:checked ~ label .middle{
display: none;
}
input[type="checkbox"].on-off:checked ~ label .bottom{
-webkit-transform: translateY(-20px) rotate(45deg);
transform: translateY(-20px) rotate(45deg);
top: 38px;
}
}
/* ----------------------------
* btn
* -------------------------- */
//input要素の非表示
input[type="checkbox"].on-off{
display: none;
}
.btn{
width: 360px;
height: 76px;
border: 2px $c_b1 solid;
margin: 50px auto 0;
a{
font-size: 24px;
font-style: italic;
display: inline-block;
width: 360px;
text-align: center;
padding: 26px 0;
color: $c_b2;
transition: .3s;
&:hover{
color: $c_w1;
background-color: $c_b6;
}
}
}
@include mobile{
.btn{
width: 240px;
height: 50px;
margin: 30px auto 40px;
a{
font-size: 14px;
display: inline-block;
width: 240px;
text-align: center;
padding:18px 0;
color: $c_b2;
transition: inherit;
&:hover{
color: inherit;
background-color: inherit;
}
}
}
}
<header class="l-header">
<div class="l-container-header left">
<h2 class="header-logo">
<div class="pc-visible"><a href="#" class="js-pagetop"><img src="" alt="" class="logo-header01"></a><a href="#" class="js-pagetop"><img src="" alt="" class=""></a></div>
<div class="sp-visible"><a href="#" class="js-pagetop"><img src="" alt="" class="sp-logo-header01"></a><a href="#" class="js-pagetop"><img src="" alt="" class="sp-logo-header02"></a></div>
</h2>
</div>
<div class="l-container-header center">
<nav class="header-gnavi">
<ul class="header-gnavi-ul js-gnavi">
<li class="header-gnavi-li "><a href="#n1" class="gnavi-current">TOP</a></li>
<li class="header-gnavi-li"><a href="#n2">ENTREPRENEUR</a></li>
<li class="header-gnavi-li"><a href="#n3">DATA SCIENTIST</a></li>
<li class="header-gnavi-li"><a href="#n4">ENGINEER</a></li>
<li class="header-gnavi-li"><a href="#n6">EVENT / LINK</a></li>
</ul>
</nav>
</div>
<div class="l-container-header right">
<div class="l-wrap-right">
<ul class="header-sns pc-visible">
<li><a href="" target="_blank"><img src="" alt=""></a></li>
<li><a href="" target="_blank"><img src="" alt=""></a></li>
<li class='js-liline'><a class="js-linebutton"><img src="" alt=""></a></li>
</ul>
<div class="line-dummybox">
<div class="line-it-button" style="display: none;" data-type="share-d" data-lang="ja"></div>
</div>
<div class="header-entry pc-visible"><a href="" class="smp-page-link">ENTRY</a></div>
</div>
</div>
<!-- sp gnavi -->
<input type="checkbox" id="input-gnavi" class="on-off" />
<label for="input-gnavi">
<div class="sp-menu sp-visible">
<div class="menu-trigger" href="#">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
<span class="menu">MENU</span>
<span class="close">CLOSE</span>
</div>
</div>
</label>
<nav class="sp-header-gnavi sp-visible">
<div class="sp-gnavi-content">
<ul class="sp-header-gnavi-ul js-gnavi">
<li class="sp-header-gnavi-li"><a href="#n1">TOP</a></li>
<li class="sp-header-gnavi-li"><a href="#n2">ENTREPRENEUR</a></li>
<li class="sp-header-gnavi-li"><a href="#n3">DATA SCIENTIST</a></li>
<li class="sp-header-gnavi-li"><a href="#n4">ENGINEER</a></li>
<li class="sp-header-gnavi-li"><a href="#n5">ABOUT SELECTION</a></li>
<li class="sp-header-gnavi-li"><a href="#n6">EVENT / LINK</a></li>
</ul>
<ul class="sp-header-sns">
<li class="sp-fb-li"><a href="" target="_blank"><img src="" alt="" class="sp-fb"></a></li>
<li class="sp-tw-li"><a href="" target="_blank"><img src="" alt="" class="sp-tw"></a></li>
<li class="sp-line-li js-liline"><a><img src="" alt="" class="sp-line"></a></li>
<li class="sp-line-dummybox">
<div class="line-it-button" style="display: none;" data-type="share-d" data-lang="ja"></div>
</li>
</ul>
<div class="sp-header-entry"><a href="" class="smp-page-link">ENTRY</a></div>
</div>
</nav>
<!-- sp gnavi -->
</header>