@charset "UTF-8";

body {
    background-color: #ffffff;
    color: #333333;
    font-family: "Noto_Sans_JP","Hiragino Kaku Gothic Pro", sans-serif;
    width: 960px;
    margin-top: 0;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    font-size: 22px;
}


/* 1920x1080 */
/* 1280 */
/* 1024 */
/* 800x600 */


/* スマートフォンのサイズ幅は
   375px×640px、414px×896px、360px×640pxが主流
*/


h2 {
    height: 40px;
    margin: 0px 0px 5px 0px;    /* 上 | 右 | 下 | 左 */
    padding: 4px 0px 0px 3px;   /* 上 | 右 | 下 | 左 */
    font-size: 28px;
    font-weight:bold;
    color:#333333;
    background-image:url(../img/head00702b.gif);

    /* height:24px;
    margin:0px 0px 5px 0px;
    padding:6px 0px 0px 3px;
    font-size:16px;
    /* font-weight:bold; */
    /* color:#333333; */
    /* background-image:url(../img/head00702.gif); */
}

header {
    background-color: #ffffff;
    position: fixed; /*position:fixed;は浮く*/
    width:100%;
    
  /* ヘッダーを固定するときは必ずtop:0 と left:0 を指定する（スクロールで重ならないために）*/
  top: 0; 
  left: 0;

  display: flex; /*中の要素を横並びにする*/
  justify-content: center; /*ヘッダータイトル画像を中央に配置する */
  /* align-items: center; 中の要素を上下中央に並べる  */

  /* margin-bottom: 80px; */
}


.header-nav{
  background-color: #ffffff;
  position: fixed; /*position:fixed;は浮く*/

  width: 100%;
  /* height: 20px; */

  top: 140px;
  left: 0;

  display: flex; /*中の要素を横並びにする*/
  justify-content: center; /**/
  text-align: center;
  /* align-items: center; 中の要素を上下中央に並べる  */

  /* margin-top: 40px; */
  /* margin-bottom: 100px; */
}

.header-ul {
    background-color: #ffffff;
    list-style-type:none;
	padding-left:0; /*領域内のスペース幅の指定*/
    line-height:1.8; /*行間の指定*/
    /*display: flex; /*中の要素を横並びにする*/
    justify-content: center; /**/
    align-items: center; /*中の要素を上下中央に並べる*/ 


    display: inline; /* 横並びにする */
    /* list-style: none; リストの・を表示させない */

}

/*navやulの中身を中央寄せしたいならdisplay: flexとjustify-content: centerを
利用するとよいでしょう。子要素を横並べしつつ中央寄せできます。ulタグに定義する*/


.header-ul li {
    background-color: #ffffff;
    display: inline; /*横並びにする*/
  list-style: none; /*リストの・を表示させない */
}



/*静止・未訪問の状態*/
.header-ul a:link {
    font-size: 22px;

  padding: 15px;
  text-decoration: none; /*リンク文字の下線を引かない*/
  color:white;
  border-radius: 100vh;
  /* box-shadow: 2px 2px lightgray; */
  border: none; 

  margin-right: 20px; /*リンク文字の間をあける */


    background-image: radial-gradient(circle, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);


}
  
/*静止・訪問済の状態*/
.header-ul a:visited {
    font-size: 22px;
  background-color: #42A5FF;
  padding: 15px;
  text-decoration: none; /*リンク文字の下線を引かない*/
  color:white;
  border-radius: 100vh;
  /* box-shadow: 2px 2px lightgray; */
  border: none; 

  margin-right: 20px; /*リンク文字の間をあける  */





  background-image: radial-gradient(circle, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}
  
/*マウスでポイントした状態*/
.header-ul a:hover {
    font-size: 22px;

  padding: 15px;
  text-decoration: none; /*リンク文字の下線を引かない*/
  color: rgb(255, 246, 196);

  border-radius: 100vh;
  /* box-shadow: 2px 2px lightgray; */
  border: none; 
 
  margin-right: 20px; /*リンク文字の間をあける*/


  background-image: radial-gradient(circle, rgba(58, 97, 255, 0.815), rgba(42, 178, 252, 0.726) 90%);
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}  





/*マウスで押されている状態*/
.header-ul a:active {

  font-size: 22px;



  padding: 15px;
  text-decoration: none; /*リンク文字の下線を引かない*/
  /* color:#2908bba6;  */
  color: rgb(255, 246, 196);
  border-radius: 100vh;
  border: none; 
   
  margin-right: 20px; /*リンク文字の間をあける*/


  background-image: radial-gradient(circle, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);

  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);

}
  
 
 
#HOME {
    display: block;
    padding-top: 280px;
    margin-top: -280px;
}

#oshirase {
    display: block;
    padding-top: 280px;
    margin-top: -280px;
}
  
#eigyouzikan {
    display: block;
    padding-top: 280px;
    margin-top: -280px;
}

#tenpo {
    display: block;
    padding-top: 280px;
    margin-top: -280px; 
}

#accese {
    display: block;
    padding-top: 280px;
    margin-top: -280px;
} 

.article-home{
    margin-bottom: 280px;
}

.article-oshirase{
    /* margin-top: 300px;
    padding-top: 240px; */
   /* margin-left: 100px;  テーブルの左余白 */
/*  margin-right: auto; /*テーブルの右余白*/
    margin-bottom: 40px; /*テーブルの下余白*/
    padding-bottom: 100px;
    /* margin-right: 100px; */
    

}

.article-oshirase dl{
    border:1px solid #42A5FF;
    font-size: 90%;
 
    margin-left: 100px; /*テーブルの左余白*/
    margin-right: 40px; /*テーブルの右余白*/
    margin-bottom: 40px; /*テーブルの下余白 */
    border-collapse: collapse; /* 枠線を1本で表示 */

    width: auto;

    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.article-oshirase dd{
    padding-bottom: 40px;
}

.article-eigyouzikan table{
    font-size: 90%;
    margin-top: 20px;
    margin-left: 100px; /*テーブルの左余白*/
    margin-right: 100px; /*テーブルの右余白 */
    margin-bottom: 100px;
    border-collapse: collapse; /* 枠線を1本で表示 */

}

.article-eigyouzikan td {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    border: 1px solid  #42A5FF;
    border-collapse: collapse; /* 枠線を1本で表示 */
}

.article-eigyouzikan th {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    background-color: #42A5FF;
    color: #ffffff;
    border: 1px solid  #ffffff;
    border-collapse: collapse; /* 枠線を1本で表示 */
}
  

.article-tenpo table{
    font-size: 90%;
    margin-top: 20px;
    margin-left: 100px; /*テーブルの左余白*/
    margin-right: auto; /*テーブルの右余白 */   
    border-collapse: collapse; /* 枠線を1本で表示 */
    margin-bottom: 100px;

}

.article-tenpo td {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    border: 1px solid  #42A5FF;
    border-collapse: collapse; /* 枠線を1本で表示 */
}

.article-tenpo th {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    background-color: #42A5FF;
    color: #ffffff;
    border: 1px solid  #ffffff;
    border-collapse: collapse; /* 枠線を1本で表示 */
}

.article-tenpo-img{
    margin-top: 20px;
    margin-left: 100px;
    padding-bottom: 100px;
}

iframe{
    margin-left: 100px;
}

.article-accese{
    margin-top: 20px;
    margin-left: 100px;
    margin-bottom: 300px;
    margin-right: 100px;
    
}




.copyright{
    background-color: #42A5FF;
    color: #ffffff;
    /* align-items: center; 中の要素を上下中央に並べる  */
    text-align: center;
}




/*　画面サイズが480px以下の場合ここの記述が適用される　*/
@media screen and (max-width:480px) {


}