body{
    background-color: lightyellow;
  }
  
  h1 {  /*   h1,h2 {*/
      margin: 0;
      padding: 1em 0;
      text-align: center;
      color: #ddd;
  }
  
  header{
    z-index: 10;
      height: 64px;
    position: absolute;
    top: 000px;
    background-color: #333;
    width: 100%;
    text-align: center;
    z-index: 2;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  }
  
  a {
    color: #fff;
      text-transform: uppercase;
  }
  
  ul {
      overflow:hidden;
      list-style:none;
      margin: 0 auto;
      z-index: 20;
  
  }
  
  ul li {
    display: inline-block;
    padding: 26px 10px 20px 10px;
  }
  
  ul li:hover {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
  }
  .spaser{
    height: 100px;
  }
  .top-image-area{
    width: 100%;
    height: 010px;  /*  画像の高さ ３００　*/
    /*   background-image: url("../img/topimage.jpg");*/
    background-position: 50% 20%;
    background-size: cover;
  }
  .logo-container{
    width: 70px;
    height: 70px;
    margin-left: 10px;
  }
  .logo-container img{
    height: 100%;
    width: 100%;
  }
  
  .slanting {
      position: relative;
      height: 200px;
      background: #ddd;
  }
  svg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 200px;
      fill: #5f5f5f;
  }
  .contents {
  
  }
  
  .footer{
    height: 200px;
    background: black;
    color: #fff;
    clear: both;
  }
  .main-contents, .left-navi, .right-navi {
    height: 100%;
  }
  .main-contents {
    float: left;
    width: 80%;
  }
  .left-navi {
    background-color: blue;
    color: #fff;
    width: 20%;
    float: right;
    height: 400px;
    margin-top: 64px;
  }
  .right-navi {
    background-color: blueviolet;
    color: #fff;
    float: right;
    width: 20%;
    height: 400px;
  }
  .main{
    width: 80%;
    float: right;
    margin-top: 64px;
  }
  
  @media screen and (max-width: 600px){
    .main, .left-navi,.main-contents, .right-navi{
    width: 100%;
    }
  }
  
  .btn4{
    text-transform: uppercase;
    text-align: center;
    position: relative;
    text-decoration: none;
    display:inline-block;
  }
  
  .btn4::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #3367ff;
    display: block;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
  }
  .btn4:hover::before {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
  }
  
  .btn2{
    text-transform: uppercase;
    text-align: center;
    position: relative;
    text-decoration: none;
    display:inline-block;
    border-bottom: 2px solid #3367ff;
  
  }





/**
 * 概  要 : 上部画像固定用CSS
 * 作成日 : 2014.12.27
 * 作成者 : toogie
 */
/* フローティングバナーのラップ要素 */

#fixed_right_banner
{
    /* 右端の上から20pxの位置に固定表示 */
    position: fixed;
    bottom: 100;
    
    right: 100;
    display: none;
    
}

/* 画像の共通設定 */
#fixed_right_banner > *
{
    /* 座標の基準要素にする */
    position: relative;

    /* 横幅 */
    width: 65px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 20px; }

/* リンク要素 */
#fixed_right_banner > a
{
    /* ブロック要素に変更 */
    display: block;
}

/* 吹き出し要素 */
#fixed_right_banner > * > span
{
    /* マウスオーバー時以外は非表示にする */
    display: none;

    /* 画像の左上に移動 */
    position: absolute;
    top: -1em;
    left: -1em;

    /* 画像の左上に移動 */
    padding: .5em 1em;

    /* 背景色 */
    background-color: #c00;

    /* 画像の左上に移動 */
    border-radius: 5px;

    /* テキストの設定 */
    color: #fff;
    font-size: .75em;
    text-align: center;
    white-space: nowrap;
}

/* 吹き出し要素の足部分 */
#fixed_right_banner > * > span::after
{
    content: '';
    position: absolute;
    top: 99%;
    left: 1em;
    z-index: 5;
    width: 0;
    height: 0;
    border-color: #c00 #c00 transparent transparent;
    border-style: solid;
    border-width: 5px;
}

/* マウスオーバーされたら吹き出しを表示 */
#fixed_right_banner > *:hover > span
{
    /* マウスオーバー時以外は非表示にする */
    display: block;
}
#fixed_right_banner > * > span
{
    /* noneになっているとアニメーションしないのでblockに変更 */
    display: block;

    /* マウスオーバー時以外は非表示にする為に追加 */
    visibility: hidden;
    opacity: 0;

    /* 左座標の初期値を変更 */
    left: 0;

    /* アニメーション */
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

/* マウスオーバーされたら吹き出しを表示 */
#fixed_right_banner > *:hover > span
{
    /* 必要ないので削除する */
    /*display: block;*/

    /* マウスオーバーで吹き出しをスライドして表示 */
    visibility: visible;
    opacity: 1;
    left: -1em;
}



/*/////////////////////////////////////////////////////////////////*/
.floating {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: none;
}
.floating a {
  display: block;
  color: #fff;
  background: #000;
  padding: 8px;
  text-decoration: none;
  opacity: 0.6;
}
.floating a:hover {
  opacity: 1;
}