body {font-family: 'メイリオ','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',Roboto,'Droid Sans'  
        }

.sa {
  opacity: 0;
  transition: all 1.2s ease;
}
 
.sa.show {
  opacity: 1;
  transform: none;
}

.sa--lr {
  transform: translate(-30px, 0);
}
 
.sa--rl {
  transform: translate(30px, 0);
}
 
.sa--up {
  transform: translate(0, 30px);
}
 
.sa--down {
  transform: translate(0, -30px);
}

.sa--scaleUp {
  transform: scale(0.5);
}

.sa--scaleDown {
  transform: scale(1.5);
}

.sa--rotateL {
  transform: rotate(180deg);
}

.sa--rotateR {
  transform: rotate(-180deg);
}



/*---- ヘッダーの定義　----*/
header{position: fixed;
       left:0;
       width:100%;
       margin:-17px 0 0 0;  /*---- 上辺の余分な余白の除去　(top:-17px)----*/
       height:65px;
       background:#fff;
       z-index:1000;}

/*---- 全体の定義　----*/
body{max-width:1100px;
     margin:0 auto;}

/*---- タイトル　----*/
.titlebox {margin:0;
           max-width:170px;
           width:100%;
           }

.title{ padding:10px 0 0 30px;
        }

.aono img{ width:150px;}

@media screen and (max-width: 480px){
.title{ padding:15px 0 0 10px;
        }
}


.profilebox{display:flex;
           position: relative;
           width:100%;
           margin:100px auto 100px auto;
           }

.profilebox a{ display: block;
            padding: 5px 10px;
            background: #192f60; 
            border-radius: 10px;
            font-size: 10px;
            color: #fff;
            text-decoration: none;
            margin:0 auto;}


.profilebox a:hover { color: #fff;
                   background: #e4007f;
                   transition:0.3s; 
                   }







/*----- ブログ本文 ------*/

.midashi9 { margin: 50px 0px 0px 20px;
            display: flex;
            justify-content: center;
            align-items: center;}

.midashi7 { margin: 50px 0px 0px 20px;
            }

.midashi8 { display:inline-block;
            padding: 10px 5px 5px 50px;
            font-weight: bold;
            border-bottom:solid 1px #192f60;
            }

.page2 { width:80%;
         margin: 10px auto;
         line-height: 20px;
         }

.page2_p { display:flex;
           flex-wrap:wrap;
           justify-content:center;
           max-width: 1000px;
           width: 100%;
           margin: 20px auto;
           }

.image {margin:20px;}

.image img{ max-width:200px;
            width: 100%;
            height: auto;
           
            border-radius: 30px;
             }




/*** リンク ***/

.midashi0 { margin: 150px 20px 0px 20px;
           }

.midashi1 { position: relative;
            display: inline-block;
            padding: 0 65px;
            color:#192f60; 
            }

.midashi1:before {
           position: absolute;
           top: calc(50% - 3px);
           left: 2px;
           width:50px;
           height:6px;
           content: '';
           border-top: solid 1px #192f60; 
           }


.midashi2 { font-size:5.0em;
            font-weight: bold;
            color:rgba(25,47,96,0.5);}
@media screen and (max-width: 480px){
    .midashi2 { font-size:3.0em;}
    }


.llist0 { margin:0px auto 0 auto;
         position: relative;
         width:100%;
         height:400px;
         background-image: url("../h_link.jpg");
         background-size: cover;
         background-position:center;
         }

.llist1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(15deg,rgba(0,0,0,1.0),rgba(0,0,0,0.4),rgba(0,0,0,0));
         display:flex;
         flex-wrap-wrap;
        }

.llist1 a { text-decoration: none;
           color: #fff;
           }


.llist1 ul li {margin:10px 0;
              list-style: none;}

.llist1 ul li a{position: relative;
               display: inline-block;
               text-decoration: none;
               }

.llist1 ul li a:after{
       position: absolute;
       bottom: 0px;
       left: 0;
       content: '';
       width: 100%;
       height: 1px;
       background: #fff;
       transform: scale(0,1);
       transform-origin: left top;
       transition: transform 0.3s;
       }

.llist1 ul li a:hover:after{
       transform: scale(1,1);
       }

.llist2 { width: 100%;
          margin:10px;
          display:flex;
          flex-direction: column;
          justify-content:center;
          align-items:center;
          }

.lbox1{ display:flex;
        padding:10px;
        width:100%;
         }

.lbox2{ width:100%;
        margin:0 auto;}


@media screen and (max-width: 800px){

.page2 .page5
    { font-size: 18px;
      text-align: center;}

.llist0 { width:100%;
         height:300px;}

.llist1 ul { font-size:11px;}




}  /**** メディアクエリ終わり ****/





.btnlist { display: block;
           margin: 30px 0 0 20px;
          }

.btn {text-decoration:none;
  position     : relative;
  display      : inline;
  width        : 50px;  
  height       : 50px;
  margin       : 0 5px 10px 5px;
  cursor       : pointer;
  }

.btn:hover ,.btn2:hover {
  transform: scale(1.3);
  opacity      : .9;
  transition   : .1s;}


@media screen and (max-width: 800px){
.btnlist { margin:20px}
.btn{  width: 40px;  
        height: 40px;
        }

}  /**** メディアクエリ終わり ****/



@media screen and (max-width: 480px){

.llist1 { padding:5px;}
.llist2 { margin:20px;}

.lbox1{ padding:0px;
        justify-content:space-between;
        }

.btnlist { margin:10px 0px 10px 0px;
           }

}  /**** メディアクエリ終わり ****/




/*  フッター　　*/
/*---画像ボタン--*/

footer {width:100%;
        text-align:center;
        font-size:0.8em;
        padding-bottom:50px;}

footer div { padding:5px 0;
             }
footer div a { text-decoration: none;
               color:#192f60;
              } 
footer a:hover{ color: #e4007f;
                transition: 0.3s;
                }

.symbol img{ margin-top: 30px;
             width  : 100px;  
             height : auto;}

.symbol2 img{ margin-top: 30px;
             width  : 70px;  
             height : auto;}

.footerbar {margin-top: 100px;
            padding: 10px;
            border-top:1px solid #ccc;
           }





/*  スクロールバーのデザイン　　*/

::-webkit-scrollbar{
  width: 3px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 2px;
  box-shadow: inset -0.5px 0px 2px #ccc; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 2px;
  box-shadow: none;
}