body{
  font-family: Arial, Yu Gothic Medium;
  font-style: normal;
  font-weight: 400;
background-color: #faf8f5;;
margin: 0; /*bodyのマージンは0に設定　*/
letter-spacing: 0.1em;/*文字の間隔*/
}


a{
  text-decoration: none; 
  color: black;
}


a:hover {
text-decoration:underline;
color: orange;
}

p {
	line-height: 2; /*行間の設定*/
 
  }
	



img{
  max-width: 100%; /*imgは親要素の中におさめる*/
}

img.icon{
  max-width: 60px;
}

img.icon2{
  max-width: 100px;

}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  padding: 0.8em; /*文字と下線の間の距離を設定*/
}

h2:after { /*h2の下線の設定*/
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;/*幅を設定*/
  height: 5px;
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

@media(max-width: 600px) {
  h2{
font-size: 1rem;
  }
    }



main{
  margin-bottom: 10px;
}

footer{
  margin-top: 10px;
}
/*以下ナビゲーションメニューの固定*/

.header-nav-wrapper{
  position: fixed;
  z-index: 10;
  left: 0;
  top:0;
  width: 100%;
  background-color: #faf8f5;
}

.main-wrapper{
position: absolute;
z-index: 0;
top:120px;
width: 100%;
background-color: #faf8f5;
}

@media(max-width: 600px) {
  .main-wrapper{
  top:80px; /*上からの配置を設定　ナビゲーションにかぶらないよう設定*/

  }
}



/*=おわり==========================*/


/*navigationメニュー============================-*/
.nav-inner{
  margin: 0px auto;
  max-width: 1200px;
  color: green;
  font-family: メイリオ;

}

@media(max-width: 600px) {
  .nav-inner{
  display: flex;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;}
  .nav-inner >:first-child {
  flex-basis: 500px;
}
  }

.nav-inner img{width: 230px;}

.nav-inner a {
color: green;
text-decoration: none;

}

.nav-inner ul{
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none; /*箇条書きの点を消す*/
display: flex;
align-items: center; /*中央に均配置*/
justify-content: space-around;}

@media(max-width: 600px){ /*スマホの場合は次のように表示*/
.nav-inner ul{
padding: 0;
font-size: 0.5em;
margin-left: 0;
justify-content: space-between;
}
}


@media(max-width: 600px){
.nav-inner li{
  width: 25%;
  margin: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

}




@media(max-width: 600px){/*スマホの場合は次のように表示*/
.main-container{
flex-direction: column;
}
}


.main-container{
  margin: 0 auto; /*親要素の中央に揃える*/
  max-width: 1200px;
display: flex;
background-color:  white;
justify-content: space-between;
}


.maincol1 {
flex: 1 1 auto;
background-color:  #faf8f5;
padding-top: 30px;
  padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
}

.maincol p{
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}


.blog-container {
flex: 1 1 auto;
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left:padding-top: 30px;
padding-left: 40px;
padding-right: 40px;
}

.blog-container p{
  padding-left: 20px;
  text-indent:1em; /*字下げの設定*/
}

@media(max-width: 600px){
.blog-container {
padding: 5px 5px;
}
}

.sidebar {
background-color: white;
  flex: 0 0 300px;
  padding-top: 30px;
  padding-bottom: 30px;
padding-left:  10px;
padding-right: 10px;
}

.profile p{
  text-align: center;
}

@media(max-width: 600px){
  .new article{
    display: grid;
    width: auto;
    grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  }
}

.reference p{
text-indent: -1em;
padding-left: 1em;
}

.sidebar1 {
background-color: #99CC99;
  flex: 0 0 300px;
  padding-top: 30px;
  padding-bottom: 30px;
padding-left:  10px;
padding-right: 10px;
}


/*ホーム画面トップ画像の設定*/
.top-container{
  padding-top: 0px;
  position: relative;
    margin-bottom: 10px;
    width: 1000px;
max-width: 100%; /*親要素の中に入れる*/
  	height: 300px;
    margin-left: auto;/*真ん中に来るように調整*/
    margin-right: auto;

}

@media(max-width: 600px){
.top-container{
  height: 100px;
}
}



.sample-container {
  margin-left: auto;/*真ん中に来るように調整*/
  margin-right: auto;
	position: relative;
	width: 500px;
	max-width: 100%;
	height: 400px;
}



.footer-inner{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
      max-width: 1200px;
  text-align: center;}

.grid{
  display: grid;
  width: auto;
  grid-gap: 10px;
 grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}

@media(max-width: 600px){
  .grid{
    display: grid;
    width: auto;
    grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
   font-size: small;
  }
}



.grid h4{
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.caption{   /*画像下の説明のために残しておく*/
  
}



.grid-img{/*文字と画像の幅を指定*/
  flex-grow: 1;　/*下の下線をそろえるための指定*/
}


.item{
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  display: flex; /*要素の位置をそろえるための指定*/
  flex-direction: column;
}

.item p{
  line-height: 1.7;
  
}

.tree p{    /*ツリー構造のcss*/
text-align: left;
background-color: white;
font-size: 0.5rem;
padding-left: 10px;
padding-bottom: 15px;
border-radius: 10px; /*角を丸める*/
}
.tree img{

position: relative;
left: 0px;
top:10px;
}

.post-title{ /*記事タイトル*/
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
font-size:2rem;
}


@media(max-width: 600px) {
  .post-title{/*articleの設定*/
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;}
  }

.post-day{
font-size: 0.8rem;}

.post-day img{
  position: relative;
  top: 10px;
  left: -1px;
}

.kakomi{
  margin: 10px;
  padding:5px 0;
  background-color: white;
  border: solid;
  border-color: black;
  border: bold;
  border-radius: 5px;
  font-size: small;
}

.kakomi li{
  padding: 10px 0;
}

.kakomi h3{
  margin: 0 auto;
  padding-bottom: 0;
}

.kakomi img{
  width: 250px;
}



/*以下トップページの新着記事の紹介*/
.newarticle-container{
  padding-top: 0px;
    margin-left: auto;/*真ん中に来るように調整*/
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 1200px;
    text-align: center;
}
.newarticle-container ul{
  display: flex;
	overflow-x: scroll;
	margin: 0;
	padding: 0;
}

.newarticle-container li{
	min-width: 80%;
	margin: 10px;
	padding: 0;
	list-style: none;
}


/*=====================================隠された説明のcss*/

.hidden_box {
  margin: 2em 0;/*前後の余白*/
  padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
  padding: 15px;
  font-weight: bold;
  border: dotted 2px black;
  cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
  background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

.line{
  border-bottom: solid 3px #87CEFA;
}

/*=============================================おわり*/

/*以下タグのボタンcss*/
.btn-flat-border {
padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}