@charset "UTF-8";
body {
margin: 0;
font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif
}  

/* ボックスの左右に確保する余白 */
.box1, .boxA, .box2-inner, .box5-inner {
padding-left: 10px;
padding-right: 10px
}
  
/* サイト名*/
.site h1 a {
color: #000000;
text-decoration: none;
margin-left: 10px;
}

.site h1 {
margin: 0;
font-size: 30px;
margin-top: 30px;
}

.site h1 i {
color: #f8f8ff;
}
/* ナビテーション */
.menu ul {
margin: 0;
padding: 0;
list-style: none
}
.menu li a {
display: block;
padding: 15px;
color: #000000;
font-size: 14px;
text-decoration: none
}
.menu li a:hover {
background-color: #eeeeee
}
.menu ul:after {
content: "";
display: block;
clear: both
}
.menu li {
float: left;
width: auto
}
.menu i {
margin-right: 5px;
color: #b0c4de
}

/* 記事 */
.kiji h1 {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px
}
.kiji p {
margin-top: 0;
margin-bottom: 20px;
}

.kiji img {
max-width: 100%;
height: auto
}

.kiji a {
 color: #7172ac;
}
/* 記事中の文字の色 */
.cnavy {
    font-weight: bold;
    color: #000080;     /* 文字色指定 */
}
.corangered {
    font-weight: bold;
    color: #ff4500;     /* 文字色指定 */
}

/*記事中の写真の下の文字<div class="rightphoto-box">*/
.rightphoto-box {
padding: 0.2em;
text-align: left;
font-size: small;

}
/*記事中の目次*/
.table_of_contents ul, ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
  list-style: none;

}

.table_of_contents ul li, ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}



/*記事の登校日*/
.kijiinfo {
margin-top: -10px;
margin-bottom: 20px
}





/* 記事の小見出しh2 */
 

.kiji h2 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7b6459;/*文字色*/
}

.kiji h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #4169e1; /*アイコン色*/
}

.kijiinfo i {
margin-right: 2px;
font-size: 15px
}


/* アーカイブ */
.archive ul {
margin: 0;
padding: 0;
list-style: none
}
.archive li a {
display: block;
padding: 5px;
color: #7172ac;
font-size: 14px;
text-decoration: none
}

/* サイドメニュー */
.sidemenu {
margin-bottom: 30px
}
.sidemenu ul {
margin: 0;
padding: 0;
list-style: none
}
.sidemenu li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none
}
.sidemenu li a:hover {
background-color: #eeeeee
}

.sidemenu h1 {
margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px
}

.sidemenu i {
margin-right: 5px;
color: #4169e1
}

/* おすすめ記事のメニュー */
.osusume {
margin-bottom: 30px;
}
.osusume ul {
margin: 0;
padding: 0;
list-style: none
}
.osusume li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none
}

.osusume li a:hover {
background-color: #eeeeee
}
.osusume h1 {
margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666;
font-size: 18px
}
.osusume i {
margin-right: 5px;
color: #4169e1
}

/* 人気の記事メニュー */
.ninki ul {
margin: 0;
padding: 0;
list-style: none
}

.ninki li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none
}
.ninki li a:hover {
background-color: #eeeeee
}
.ninki h1 {
margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666;
font-size: 18px
}
.ninki i {
margin-right: 5px;
color: #4169e1
}

/* コピーライト */
.copyright p {
margin: 0;
color: #666666;
font-size: 14px
}


/* BOX2をバーの形にする */
.box2 {
background-color: #ffffff
}


/* BOX5の上に区切り線を入れる */
.box5 {
border-top: solid 1px #dddddd
}

/* ボックスの上下の間隔 */
.box1 {
padding-top: 8px;
padding-bottom: 8px
}
.box3 {
padding-top: 40px;
padding-bottom: 30px
}
.box4 {
padding-top: 40px;
padding-bottom: 30px
}
.box5 {
padding-top: 15px;
padding-bottom: 15px
}


/* ### 599px以下 ### */
@media (max-width: 599px) {
/* ナビテーション */
.menu li a {
padding: 10px 3px;
font-size: 11px
}
/* サイト名と記事のタイトル */
.site h1 {
font-size: 20px
}
.kiji h1 {
font-size: 26px
}

/* ボックス上下の間隔 */
.box1 {
padding-top: 4px;
padding-bottom: 4px
}
.box3 {
padding-top: 25px
}

}



/* ### 600px以上～767px以下 ### */
@media (min-width: 600px) and (max-width: 767px) {

/* BOX4-1とBOX4-2を横に並べる設定 */
.box4:after {
content: "";
display: block;
clear: both;
}
.box4-1 {
float: left;
width: 50%
}
.box4-2 {
float: left;
width: 50%
}

/* BOX4-1とBOX4-2の左右の間隔 */
.box4-1 {
padding-right: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.box4-2 {
padding-left: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}


}

/* ### 768px以上 ### */

@media (min-width: 768px) {

/* BOX3とBOX4を横に並べる設定*/

.boxA:after {
content: "";
display: block;
clear: both
}

.box3 {
float: left;
width: 70%
}

.box4 {
float: left;
width: 30%
}

/* BOX3とBOX4の左右の間隔 */
.box3 {
padding-right: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}

}

/* ### 1040px以上 ### */
@media (min-width: 1040px) {

/* 全体の横幅を固定 */
.box1, .boxA, .box2-inner, .box5-inner {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

}