body {
  margin: 0px;
  padding: 0px;
  font-family: 'Julius Sans One', "游明朝", 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* ヘッダー内容 */
.other-h1{
 font-size: 20px;
 padding-top: 150px;
 text-align: center;
}
#cover {
   background: #000;
   opacity: 0.6;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   display: none;
 }
 #menu {
   z-index: 70;
   position:fixed;
   top: 0;
   right: -3000px;
   color:#333333;
   opacity: .999;
   background:#FFFFFB;
   padding: 8px;
   box-sizing: border-box;
   width:  80%;
   height: 100%;
   overflow: scroll;
   min-height: 100%;
   transition: .4s;
 }
    .ularea {
      width: 300px;
      margin: 0 auto;
      margin-top: 100px;
    }
    #menu ul {
      list-style: none;
      font-size: 24px;
      text-align:center;
      padding: 0px;
    }
    #menu ul a{
      color:black;
    }
    #menu li {
      font-weight: 100;
      line-height: 3;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      font-family: 'Julius Sans One', "游明朝", 'Caveat','Dancing Script',  cursive;
    }
    #menu li .fab {
      font-size: 30px;
    }
    #menu li:first-child {
      border-top: 2px solid black;
    }
    #menu li:last-child {
      border-bottom: 2px solid black;
    }
 #hide {
   float: right;
   cursor: pointer;
   font-size: 30px;
   padding: 10px;
 }
 body.menu-open {
   overflow-y: hidden;
 }
 body.menu-open #cover {
   display: block;
 }
 body.menu-open #menu {
   right: 0;
}

a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
}
header {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 50;
  width: 100%;
  transition: .3s;
  padding-top: 25px;
}
 .top-ul {
   display: none;
 }
 .now {
   border-bottom: 3px skyblue solid;
 }
.bar {
  width: 85%;
  height: 45px;
  margin: 0 auto;
  position: relative;
}
.fa-bars {
  font-size: 50px;
  padding-top: 20px;
  float:right;
  color:black;
}

/* ヘッダー内容 終了 */


.text-box {
  margin-top: 100px;
  margin-bottom: 50px;
}
.text-box h1 {
  font-family: 'Julius Sans One', "游明朝", 'Mali', cursive;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}



.one-album {
width: 100%;
max-width: 1400px;
margin: 0 auto;
margin-top:0px;
}


.album {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content:space-around;
  margin-bottom: 20px;
}
  .one-box {
    width:50%;
    height:100px;
  }
    .one-box img {
      width:80px;
      height: 80px;
      object-fit: cover;
      display: block;
      margin: 0 auto;
      border-radius: 3%;
    }


footer {
 background-color: white;
 height: 30px;
}
  footer p{
  font-size: 10px;
  text-align: center;
  line-height: 30px;
  margin: 0px;
  }
  footer a {
    color: #333333;
  }
  footer a:hover {
    color: #333333;
    text-decoration: none;
  }


  @media (min-width:768px) {  /**/
    header {
      padding: 0px;
      height: 60px;
      /* background-color: gray; */
    }

    .top-ul {
      width: 100%;
      height: 60px;
      margin: 0 auto;
      background-color:white;
      display: block;
      position: relative;
    }

    .top-icon {
      height: 60px;
      width: 21%;
      position: absolute;
      top:0px;
      right: 0px;
    }

    .home-icon {
      height: 60px;
      width: 10%;
      position: absolute;
      top:0px;
      left: 0px;
    }

    header ul {
      display: block;
      list-style: none;
      width: 55%;
      height: 50px;
      margin: 0 auto;
      padding-left: 10%;
    }
      header li {
        float:left;
        padding: 18px 5px;
        width: 25%;
        text-align: center;
        color: white;
        font-family: 'Julius Sans One', "游明朝", 'Caveat', 'Dancing Script';
        font-weight: 700;
      }

    .top-icon .fab {
      font-size: 30px;
      color:black;
      padding-top: 15px;
      padding-right: 20px;
    }

    .home-icon .fas {
      font-size: 25px;
      color:black;
      padding-top: 15px;
      padding-left: 40px;
    }


  header li a{
    color:#333333;
  }
  header li a:hover{
    color:#c3c3c3;
    text-decoration: none;
  }

    #menu {
      display: none;
    }

    #show{
      display: none;
    }

    .bar {
      display: none;
    }





.one-album {
width: 90%;
margin: 0 auto;
margin-top:0px;
display: flex;
justify-content: space-around;
}

.album {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content:space-between;
  margin-bottom: 20px;
}
  .one-box {
    width:50%;
    height:90px;
  }
    .one-box img {
      width:90px;
      height: 90px;
      object-fit: cover;
      display: block;
      margin: 0 auto;
      border-radius: 3%;
    }


  @media (min-width:992px) {  /**/


    .one-album {
    width: 90%;
    margin: 0 auto;
    margin-top:0px;
    display: flex;
    justify-content: space-around;
    }

    .album {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content:space-between;
      margin-bottom: 20px;
    }
      .one-box {
        width:50%;
        height:140px;
      }
        .one-box img {
          width:140px;
          height: 140px;
          object-fit: cover;
          display: block;
          margin: 0 auto;
          border-radius: 3%;
        }

  }



  @media (min-width:1200px) {


    .one-album {
    width: 90%;
    margin: 0 auto;
    margin-top:0px;
    display: flex;
    justify-content: space-around;
    }

    .album {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content:space-between;
      margin-bottom: 20px;
    }
      .one-box {
        width:50%;
        height:190px;
      }
        .one-box img {
          width:170px;
          height: 170px;
          object-fit: cover;
          display: block;
          margin: 0 auto;
          border-radius: 3%;
        }
  }