私のコーデイングバイブル

				
					@charset "utf-8";

$font-size: 16;
@function rem-calc($size) {
  $font-size: $font-size;
  $remSize: calc($size / $font-size);
  @return #{$remSize}rem;
}

/*=================================
# mixins
================================= */
//breakpoints
$breakpoints: (
  'sps': 'screen and (max-width: 375px)',
  'sp': 'screen and (max-width: 425px)',
  'tab': 'screen and (max-width: 768px)',
  'pc': 'screen and (min-width: 769px)'
) !default;

//media queries
@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/*=================================
# colors
================================= */
$color-text: #333;
$color-main: #163F74;
$color-dark: #002A52;
$color-light: #EEF3F8;
$color-accent1: #FEF251;
$color-accent2: #D33365;

/*=================================
# fonts     
================================= */
$font-ja: 'Noto Sans JP', sans-serif;
$font-en: 'Fira Sans', sans-serif;
$font-title: 'Roboto', sans-serif;

/*=================================
# common
================================= */
body {
  font-size: 16px;
  color: $color-text;
  font-family: $font-ja;
  box-sizing: border-box;
  background: #ffffff;
}

.inner {
  max-width: 1100px;
  margin: 0 auto;

  @include mq('sp') {
    width: 89.33%;
  }
}

img {
  width: 100%;
}

a {
 color: #1A1A1A;

 &:hover {
  opacity: 0.8;
 }
}

.btn-w {
  a {
    font-size: rem-calc(14);
    left: calc(24 / 14);
    color: #023E78;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: inherit;
    transition: all 0.3s 0s ease;

    @media screen and (max-width:1200px)  {
      background-color: #023E78;
      color: #fff;
      height: 99%;
    }

    &:hover {
      background-color: #023E78;
      color: #fff;
      opacity: 1;
    }
  }
}

.btn-b {
  a {
    font-size: rem-calc(14);
    left: calc(24 / 14);
    background-color: #023E78;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: inherit;
    transition: all 0.3s 0s ease;

    @media screen and (max-width:1200px)  {
      background-color: #fff;
      color: #023E78;
    }

    &:hover {
      background-color: #fff;
      color: #023E78;
      opacity: 1;
      height: 99%;
    }
  }
}

/* g-nav
-------------------------------------------------------------*/
@media screen and (max-width:1200px)  {
    #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: rem-calc(100);
    right: -120%;
    width:100%;
    height: 100vh;/*ナビの高さ*/
    background:#023E78;
    /*動き*/
    transition: all 0.6s;
  }

/*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive {
    right: 0;
  }

/*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

/*ナビゲーション*/
  #g-nav ul {
    /*ナビゲーション天地中央揃え*/
    // position: absolute;
    z-index: 999;
    // top:50%;
    // left:50%;
    // transform: translate(-50%,-50%);
    display: block;
    width: 78.66%;
    height: 100%;
    padding-top: 50px;
    margin: 0 auto;

    span {
      display: none;
    }
  }

/*リストのレイアウト設定*/
  #g-nav li {
    list-style: none;
    text-align: center;
  }

  #g-nav li a {
    color: #fff;
    text-decoration: none;
    padding: rem-calc(10);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
  }

/*========= ボタンのためのCSS ===============*/
  .open-btn {
    position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
    top: rem-calc(25);
    right: rem-calc(10);
    cursor: pointer;
    width: rem-calc(50);
    height: rem-calc(50);
  }
  
/*×に変化*/  
  .open-btn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: rem-calc(14);
    height: rem-calc(3);
    border-radius: 2px;
    background-color: #023E78;
    width: 45%;
  }

  .open-btn span:nth-of-type(1) {
    top: rem-calc(15); 
  }

  .open-btn span:nth-of-type(2) {
    top: rem-calc(23);
  }

  .open-btn span:nth-of-type(3) {
    top: rem-calc(31);
  }

  .open-btn.active span:nth-of-type(1) {
    top: rem-calc(18);
    left: rem-calc(18);
    transform: translateY(6px) rotate(-45deg);
    width: 27px;
  }

  .open-btn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .open-btn.active span:nth-of-type(3){
    top: rem-calc(30);
    left: rem-calc(18);
    transform: translateY(-6px) rotate(45deg);
    width: 27px;
  }
}

/* header
-------------------------------------------------------------*/
.header {
  width: 100%;
  display: inline-block;
  padding-top: rem-calc(22);
  padding-bottom: rem-calc(25);
}

.header__inner {
  width: 97.5%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__title {
  font-family: $font-title;
  font-weight: bold;
  font-style: italic;
  font-size: rem-calc(40);
  line-height: calc(53 / 40);
  color: #023E78;
}

.header__list {
  display: flex;
  align-items: center;

    span {
    width: 14px;
    margin: 0 16px 0;
  }
}

.header__item {
  a {
    font-size: rem-calc(14);
    line-height: calc(24 / 14);
    padding-bottom: rem-calc(10);
    color: #1A1A1A;
    
    &:hover {
      border-bottom: 2px solid #023E78;
    }
  }
}

.header__btn {
  width: rem-calc(176);
  height: rem-calc(68);
  border: 1px solid #023E78;
  margin-left: rem-calc(32);

  @media screen and (max-width:1200px)  {
    margin-left: 0;
    margin: 40px auto 0;
    border: 1px solid #fff;
  }

  & + & {
    margin-left: rem-calc(10);

    @media screen and (max-width:1200px)  {
      margin-left: 0;
      margin: 32px auto 0;
    }
  }
}