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


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

.sa--lr {
  transform: translate(-10px, 0);
}
 
.sa--rl {
  transform: translate(10px, 0);
}
 
.sa--up {
  transform: translate(0, 50px);
}
 
.sa--down {
  transform: translate(0, -50px);
}
 
.sa--scaleUp {
  transform: scale(.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: -10px 0 0 -5px;
           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;
        }
}




/* --- メニューバー ----------*/
.menu { position: fixed;
        top: 10px;
        right: 0px;
        max-width: 900px;
        width: 100%;
        height: 50px;
        list-style: none;
        line-height: 27px;
        z-index: 1000;
        margin: 0 10px;
        display:flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        }

.menu > li{
            width: 16%;  /*** ナビが５つの場合 ***/
            height: 50%;
           }

.menu > li a {color: #000;
              display: block;
              font-size: 0.9em;
              text-decoration: none;
              text-align: center;}

.menu > li a:hover{color: #fff;
                   transition: 0.1s;}

.menu > li.menu__single {
         position: relative;
        }

.menu__second-level {
    visibility: hidden;
    opacity: 0;
    list-style: none;
    }

.menu > li:hover{
    background: #192f60;
    -webkit-transition: all .5s;
    transition: all .5s;
    }

.menu__second-level li a:hover {
    background: rgba(25,47,96,1.0);
    }


li.menu__single ul.menu__second-level{
    position: absolute;
    top: 0px;
    width: 100%;
    background: rgba(25,47,96,0.5);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }

li.menu__single:hover ul.menu__second-level{
    top: 25px;
    visibility: visible;
    opacity: 1;
    }

.twitter_symbol img{ width: 30px;
                      margin: 0px 10px 0 0;}

/*** 矢印 ***/
.init-bottom:after {
    content:'';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    }



/* --- トップバーへの切り替え ----------*/

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

.global-nav {display: none;}

} /******* メディアクエリのおわりカッコ ********/




/* --- ハンバーガーメニューへの切り替え ----------*/
@media screen and (max-width: 480px) {

.menu {display:none;}

/*--- ハンバーガーメニュー  ---*/

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  }

.twitter_symbol_mobile img{ position: fixed;
                            right: 50px;
                            top: 10px;
                            width: 30px;
                            margin: 0px 10px 0 0;
                            z-index: 200;
                            }

.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 300px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 40px;
  background-color: rgba(25,47,96,0.5);
  transition: all .3s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }

.hamburger {
  position: fixed;
  right: 18px;
  top: 8px;
  width: 30px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 30px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
 }

.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
 }

.global-nav__item {
  text-align: center;
  padding: 0 14px;
 }

.global-nav__item p {background-color:#fff;}

.global-nav__item a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #fff;
 }

.global-nav__item a:hover {
  color:#192f60;
  background-color: #eee;

 }

.hamburger__line {
  position: fixed;
  right: 21px;
  width: 25px;
  height: 2.5px;
  background-color: #192f60;
  transition: all .3s;
 }

.hamburger__line--1 {
  top: 17px;
 }

.hamburger__line--2 {
  top: 23px;
 }

.hamburger__line--3 {
  top: 29px;
 }

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(25,47,96,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  cursor: pointer;
 }

/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
 }

.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
 }

.nav-open .hamburger__line{
  background-color: #fff;}

.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 23px;
 }

.nav-open .hamburger__line--2 {
  width: 0;
  right: 25%;
 }

.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 23px;
 }

/*** ドロップダウン ***/

.acd-check{ display: none;}

.acd-label {
   background: rgba(25,47,96,1.0);
   color: #fff;
   display: block;
   margin-bottom: 1px;
   padding: 10px;
   position: relative;
  }

.contents {
   background: rgba(25,47,96,1.0);
   color: #fff;
   display: block;
   margin-bottom: 1px;
   padding: 10px;
   position: relative;
  }

.acd-label:after{
   background: rgba(255,255,255,0.7);
   box-sizing: border-box;
   content: '\ff0b';
   color: #000;
   display: block;
   height: 36px;
   padding:10px 20px;
   position: absolute;
   right: 0;
   top: 0px;
   }

.acd-content {
     display: block;
     height: 0;
     opacity: 0;
     transition: 0.3s;
     visibility: hidden;
     }

.acd-check:checked + .acd-label:after{
   content: '\ff0d';
   }

.acd-check:checked + .acd-label + .acd-content{
   height: auto;
   opacity: 1;
   visibility: visible;
   }


}/******* メディアクエリのおわりカッコ ********/


/*---見出し--*/

@keyframes LtoR {
          0% { opacity: 0;
               transform: translateX(-10px);
      }
        100% { opacity: 1;
               transform: translateX(0);
      }
   }

@keyframes RtoL {
          0% { opacity: 0;
               transform: translateX(20px);
      }
        100% { opacity: 1;
               transform: translateX(0);
      }
   }

.midashi0 { position: relative;
            margin-top:50px;}

.midashi_p { text-align: center;
            
             animation-name: LtoR;
             animation-duration: 0.7s;
            }

.midashi_p img{ width: 75%;
                height: auto;
                }

.midashi1{ position: absolute;
           bottom: 5%;
           left: 15%;
           color:rgba(255,255,255,0.7);
           font-size:12em;
           
           animation-name: RtoL;
           animation-duration: 0.7s;
           }

.midashi2 { position: relative;
            left:15%;
            display: inline-block;
            padding: 0 65px;
            color:rgba(25,47,96,1.0); 

            font-weight: bold;
            font-size: 2em;
            
            animation-name: RtoL;
            animation-duration: 0.7s;
            }

.midashi2:before {
           position: absolute;
           top: calc(50% - 3px);
           left: 0px;
           width:50px;
           height:6px;
           content: '';
           border-top: solid 1px rgba(25,47,96,1.0); 
           }


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

    .midashi1{ font-size:5.5em;
               left: 5%;
               }
    .midashi2{ font-size:1em;
               left: 5%;
               }
    .midashi_p img{ width: 98%;}
    }





/*----沿革コンテンツ -----*/

.content0{max-width:1024px;
          width:100%;
          margin:150px auto;
         }

.timeline{margin-left: 30px;}

h3 { border-left: solid 10px #192f60;
     border-bottom: solid 1px #ccc;
     width: 100%;
     padding: 10px 10px;
     margin:50px auto 0px auto;
     font-size:1.5em;
     }

.imgbox{margin: 30px 5px;
        box-shadow: 3px 3px 1px -1px rgba(0,0,0,0.5);
        border:1px solid #eee;}

.imgphoto {margin: 10px 5px;
           }

img { margin: 10px 5px;
      width: 350px;
      height: auto;
      }

p.cap{ font-size: 0.8em;
       text-align: center;
       margin: 0 0 10px 0;}

p.cap2{ font-size: 0.8em;
        text-align: center;
        margin: -10px 0 0 0;}

/***** デスクトップの表示 *****/

.photo{display:flex;
       flex-wrap:wrap;
       align-items: baseline;
       justify-content:center;
       }

.others,.sayonara{ display:flex;
                   flex-wrap:wrap;
                   align-items: baseline;
                   justify-content:flex-end;
        border-top: dotted 2px #aaa;
        border-bottom : dotted 2px #aaa;
       }

.august{ font-weight: bold;}

.timeline > li {
  overflow: hidden;
  margin: 0;
  position: relative;
}
.timeline-date{
  width: 100px;
  float: left;
  margin-top: 20px;
}

.timeline-content {
  max-width:850px;
  width: 100%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-top:20px;
  padding-left:30px;
  }

.timeline-content:before {/** ●の設定 **/
  content: '';
  width: 11px;
  height: 11px;
  border: 2px solid #192f60;
  background: #fff;
  position: absolute;
  left: 96px;/*** "●の大きさによって調整 ***/
  top: 22px; /*** "●の大きさによって調整 ***/
  border-radius: 100%;
}

.timeline-content_august {
  max-width:850px;
  width: 100%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-top:20px;
  padding-left:30px;
 }

.timeline-content_august:before {/** ●の設定 **/
  content: '';
  width: 12px;
  height:12px;
  border: 2px solid #fff;
  background: #e4007f;
  box-shadow: 0 0 0 1px  #e4007f;
  position: absolute;
  left: 96px;
  top: 20px;
  border-radius: 100%;
}

@media ( max-width : 1024px ) {
.timeline-content{width:75%;}
.timeline-content_august {width:75%;}
}



/***** パッドの表示 *****/
@media ( max-width : 780px ) {

.photo2{ display:flex;
         jusutify-content:center;
         }

}



/***** スマホの表示 *****/
@media ( max-width : 480px ) {


.content0{max-width:480px;
          width:100%;
          }

h2 { width: 98%;
     font-size:1.2em;
     margin:50px auto;}

.imgbox{max-width:300px;
        width:100%;}

.imgphoto {max-width:350px;
           width:100%;}

img { margin: 10px 5px 5px 5px;
      text-align: center;
      width:98%;}

.others,.sayonara{max-width:480px;
                  width:95%;
                  margin:20px auto;
                  justify-content:center;}

.timeline {margin-left:0px;
           margin-right:5px;}

.timeline-content:before {display:none;}
.timeline-content_august:before {display:none;}

.timeline-date{ font-size:13px;
                border-radius:1px;
                background-color:#192f60;
                color: #fff;
                text-align:center;
                width:80px;
                margin-left: 15px;}

.timeline-date.august{ background-color:#e4007f;}

.timeline-content {font-size:13px;
                   padding-top:10px;
                   margin: 0 0 0 10px;
                   border:none;
                   width: 98%;}

.timeline-content_august {font-size:13px;
                          padding-top:10px;
                          margin: 0 0 0 10px;
                          border:none;
                          width: 98%;}                


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





/*--ページトップ--*/
#page_top1 img{z-index:50;
  width: 56px;
  height: 38px;
  position: fixed;
  right: 43px;
  bottom: 23px;
  opacity: 0;

  animation-name: Ptop1;
  animation-duration: 1.8s;
  animation-timing-function:ease-out;
  animation-delay: 2s;
  
}

@keyframes Ptop1 {
          0% { opacity: 0;  }
        100% { opacity: 1;  }
   }

#page_top2 img{z-index:50;
  width: 57px;
  height: 54px;
  position: fixed;
  right: 43px;
  bottom: 23px;
  opacity: 0;
  
  animation-name: Ptop2;
  animation-duration: 2.1s;
  animation-delay: 3.0s;
 }

@keyframes Ptop2 {
          0% { 
               opacity: 0;
               }
        100% { opacity: 1;
   }
}

#page_top3 img{z-index:50;
  width: 97px;
  height: 72px;
  position: fixed;
  right: 24px;
  bottom: 22px;
  opacity: 0;
  
  animation-name: Ptop3;
  animation-duration: 2.1s;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

@keyframes Ptop3 {
          0% { 
               opacity: 0;
               }
        100% { opacity: 1;
   }
}

/*--ページトップ終わり--*/


/*** リンク ***/

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

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

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


.midashi7 { font-size:5.0em;
            font-weight: bold;
            color:rgba(25,47,96,0.5);}
@media screen and (max-width: 480px){
    .midashi7 { 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:90%;
         }

.lbox2{ width:90%;
        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){
.klist { margin:0px;}
.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;
}