/* パソコンで見たとき */

* {
    margin: 0;
    padding: 0;
}
  
h1 {
    color: #2e75b6;
}

  /* ヘッダー */
  #header {
    display: flex;
    align-items: stretch;
  }
  #header h1 {
      width: 40%;
      height: 100%;
  }
  #header h1 div {
    padding-top: 1%;
    padding-left: 10%;
    width: 80%;
  }
  #header h1 div a img {
    padding: 0;
    width: 100%;
  }
  
  #pc-menu {
      width: 60%;
  }
  #pc-menu ul {
        display: table;
        width: 100%;
        height: 100%;
  }
  #pc-menu ul li {
          display: table-cell;
          width: 15.5%;
          height: 100%;
          background-color: #DEDEDE;
  }
  #pc-menu ul li a {
            display: inline;
            height: 100%;
            text-decoration: none; /* リンク下線非表示 */
  }
  #pc-menu ul li a div {
              display: table;
              width: 100%;
              height: 100%;
              align-items: stretch;
              text-align: center;
              font-weight: bold;
              color: #555;
  }
  #pc-menu ul li a div div {
                display: table-cell;
                vertical-align: middle;
  }
  
  #pc-menu ul li.current {
          background-color: #DEEBF7;
          color: #555;
  }
  #pc-menu ul li:hover {
          background-color: #FF0000;
          color: #FFFFFF;
  }
  
  #smart-menu {
    display: none;
  }
  
  #smart-menu-2 {
    visibility:hidden;
    position: fixed;
    top: 50px;
    float: right;
    text-align: right;
    z-index: 1000;
  }
  #smart-menu-2 div {
      float: right;
      background-color: #F2F2F2;
      width: calc(90% - 6px);
      margin-top: 3%; 
      border: 3px solid black; 
      padding: 2%;
      text-align: left;
  }
  #smart-menu-2 div ul li {
        list-style: none;
        padding-left: 0;
  }
  #smart-menu-2 div ul li a {
          width: 100%;
  }
  #smart-menu-2 div ul li a .smart-menu-2-img-l {
            margin-left: 5%;
            width: 15%;
  }
  #smart-menu-2 div ul li a .smart-menu-2-img-2 {
            margin-left: 4%; 
            width: 71%;
  }
  #smart-menu-2 div ul li a .smart-menu-2-img-2b {
            margin-left: 24%; 
            width: 71%;
  }
  
  #smart-menu-2 div  p {
        margin-top: 4%;
        margin-left: 5%;
        width: 100%;
        color: #0000D0;
        font-weight: bold;
  }
  
  /* ボディ共通 */
  body {
    max-width: 1200px;
    margin:auto;
    scroll-behavior: smooth;
    background-color: #F2F2F2;
    padding-bottom: 90px;
  }
  
  /* トップに戻る */
  #page_top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    float: right;
    z-index: 999;
  }
  #page_top a {
      display: block;
      text-decoration: none;
  }
  #page_top img {
      width: 80px;
  }
  
  .on-tablet {
    display: none;
  }
  .on-smart {
    display: none;
  }
  
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  
  /* メニューが改行される場合 */
  @media only screen and (max-width: 768px) {
    .on-tablet {
      display: inline;
    }
  
    .off-tablet {
      display: none;
    }
  
    #header {
      display: inline;
      align-items: normal;
    }
    #header h1 {
        width: 60%;
    }
    #header h1 div {
          padding-top: 0%;
          padding-left: 5%;
    }
    #header #pc-menu {
        width: 100%;
    }
    #header #pc-menu ul li{
            width: auto;
    }
  
    #page_top img {
      width: 50px;
    }
    
  }
  
  /* スマートフォンで見たとき */
  @media screen and (max-width: 425px) {
    .on-smart {
      display: inline;
    }
  
    .off-smart {
      display: none;
    }
  
    body {
      padding-top: 40px;
    }
  
    #header {
      margin-top: -65px;
      position: fixed;
      z-index: 1000;
      display: flex;
      align-items: stretch;
      background-color: #F2F2F2;
      width: 100%;
      height: 65px;
    }
    #header h1 {
        width: 60%;
        height: 100%;
    }
    #header h1 div {
          padding-top: 1%;
          padding-left: 5%;
          width: 90%;
    }
    #header h1 div a img {
            padding: 0;
            width: 100%;
    }
    #header #pc-menu {
        display: none;
    }
    #header  #smart-menu {
        display: inline;
        width: 38%;
        height: 100%;
    }
    #header #smart-menu ul {
          display: table;
          width: 100%;
          margin-top: 5%;
          height: 100%;
    }
    #header #smart-menu ul li {
            display: table-cell;
            width: 33%;
            height: 100%;
    }
    #header #smart-menu ul li a {
              display: inline;
              text-decoration: none; /* リンク下線非表示 */
              margin-left: 10%;
              width: 90%;
    }
    #header #smart-menu ul li a img {
                margin-left: 10%;
                width: 90%;
    }
    #header #smart-menu ul li img {
              margin-left: 20%;
              width: 90%;
    }
  
  }