@charset "UTF-8";
html{
  font-size: 100%;
}

h1{
color:black;
 font-family:serif;
font-size: 20px;
}
h2{
color:black;
 font-family:serif;
font-size: 10px;
}

wrap{overflow: hidden;

}



  /*トップの写真の大きさを変える
  -----------------------------*/
  a{
      text-align:inherit;
      color: #fff;
      text-decoration: none;
  }

  img{
     max-width: 100%;

}

/*みだしアイコン183P
-----------------------------*/
.main-nav{
  display: flex;

}


 .main-nav a {
   color:black;
   background-color:;
   font-size: 1rem;
   border-radius: 0.7px;
   padding: 10px 17px;


 }
 ul {
  list-style: none;
}
.min-nav a:hover{
     color:black;
        background-color: BLACK;
   }
   /*P188　大きな背景画面：画像の比率をたもったまま画面いっぱいに
   -----------------------------*/


/*189P homeというIDに紐づいている　変更すること可能
最上面の背景はここできまる。min-heightで高-さをかえる
-----------------------------*/


#home{
background-image:url(image/TOP4.jpg);
height:800px;
background-size: cover;
max-width: 100%;
  }
.home-cotent {
  text-align:center;
  margin-top:10%;
  max-width: 100%;
}

.home-content p{
  font-size:0.7rem;
  margin:10px 0 42px;
  text-align: center;
  max-width: 100%;
}

.page-tittle{
  font-size:3rem;
  font-family:'Philosopher',serif;
  text-transform:uppercase;
  font-weight: normal;
  text-align: center;
  max-width: 100%;
}


/*ボタンのアレンジ方法184P
-----------------------------*/
  .button{
          font-size: 2rem;
          background:#FFF;
          color: #0bd;
          border-radius: 5px;
          text-align: center;
          max-width: 100%;

        }

        .button:hover{
          background: #0090aa;
          max-width: 100%;

        }
      .item a{
          padding: 0px ;

        }

      .item {
        background:#0bd;
        color:#fff;
        margin: 10px;
        padding:10px;
        max-width: 100%;


      }

      .container{
        display:flex;
        flex-direction: row-reverse;
        gap:10px;
        justify-content: space-around;
        background:#0bd;
        color:#fff;
        max-width: 100%;
        margin-top: 30px;
        }


.item img{
  size:100px;
}
}

/*小見だしの記事
---------------------------*/
article
{
  width: 70%;
max-width: 100%;}

aside{
  width:30%;
  margin-left: 50px;
  max-width: 100%;
}

.news-contents {
  display:flex;
  justify-content:space-between;
max-width: 100%;
}


.wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: 30px;
    padding-left: auto;
    padding-right: auto;
      overflow:hidden;
}



article{

  margin-top: 0px;
  font-size: 0.7rem;
  margin-left: 30px;
max-width: 100%;
}
article p{
  width: 100%;
  margin-top: 0px;
  font-size: 1rem;
  justify-content: center;
max-width: 100%;
}
article img{
  width: 100%;
max-width: 100%;
}
aside{

  margin-top: 0px;
  font-size: 0.7rem;
  margin-left: 30px;
max-width: 100%;
}
aside a{
  color:black;
  max-width: 100%;
    font-size: 1rem;
}
aside p{
  width: 100%;
  margin-top: 0px;
  font-size: 1rem;
  justify-content: center;
max-width: 100%;



}
/*フッター　206P
    -----------------------------*/

.footer{
  background-color:black;
  text-align:center;
  padding:  26px 0;
  max-height: 30vh;
}
footer p{
  font-size: 0.875rem;
  color: #FFF;
  text-align:center;
}

/*モバイル版219 page
--------------------------------------*/
@media(max-width:600px){
.wrapper{
  padding: 0px;
  margin:0 auto;
  overflow:hidden;


}
.page-header{
  flex-direction: column;
align-items:center;
}
#home {
  background-size: 100%;
  height:100%;
  }
#home .page-tittle{
  font-size: 1.5rem;
  margin-top: 10%;

}
#home p{
  font-size:0.5rem;
  padding: 0rem;
}
#home content{
  margin-top:20%;

}
.main-nav a{
font-size:0.7rem;

}

.container{
  flex-direction: column;
margin-top: 10px;

}
.news-contents{
  flex-direction: column;
  margin-right: 20px;
}

.item{

margin-top: 10px;}
.item a{
font-size: 0.08rem;
max-width: 100%;
}
.item a{
font-size: 2rem;
max-width: 100%;

}
.button{
  background:#FFF;
  color: #0bd;
  border-radius: 5px;
  text-align: center;
  max-width: 100%;

}
aside{
width:auto;
max-width: 100%;
}



}