@charset "UTF-8";


body	{
	margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	border-top-style: solid;
	border-top:5px solid #090;
}


/* ボックスの左右に確保する余白 */
.box1, .boxA, .box2-inner, .box5-inner{
	padding-left: 0px;
	padding-right: 0px
	}
	
.box2{
	width: 100%;
	  background: #333
	  }
	  
.box3{
	padding-left: 20px;
	padding-right: 20px
	}	  

.mv img	{
	max-width: 100%;
	height: auto;
	border: none;
	margin-bottom: 15px;
	vertical-align: bottom
	}
	
/* サイト名 */
.site h1 a	{
	color: #009900;
	text-decoration: none;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	}

.site h1	{
	margin: 0;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	padding-left: 10px;
	padding-top: 5px
}


/* ナビゲーション */


#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-size:12px;
  font-color:#FFF
}
#menu li{
  display: block;
  float: left;
  width: 16.5%;
  margin: 0;
  padding: 0;
   }
#menu li a{
	display: block;
	padding: 15px 0 15px;

/* グラデーション */
background: #191919; 

background: -moz-linear-gradient(top,  #191919 0%, #4f4f4f 2%, #000000 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  #191919 0%,#4f4f4f 2%,#000000 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  #191919 0%,#4f4f4f 2%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191919', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

text-align: center;
text-decoration: none;
color: #FFF}

/* 矢印 */

#menu li a.arrow{
	position: relative;
}

#menu li a.arrow::after{
	content:"";
	display: block;
	width:8px;
	height:8px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:10px;
	top:50%;
	margin-top:-5px;
}/* 矢印 */


#menu li a:hover{
  background: #444
}
#toggle{ 
 display: none
}

/* 区切り線 */
#menu li {
  border-left: 1px solid #666;
  border-right: 1px solid #666;
}
 
#menu li+ li {
  border-left: 0;
  border-right: 1px solid #666;
}

@media only screen and (max-width: 768px) {
    #menu li{
    width: 32%;
    border-bottom: 1px solid #444
  }
}
@media only screen and (max-width: 480px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222
  }
  
  #toggle a:before{
    margin-top: -6px
  }
  
  #toggle a:after{
    margin-top: 2px
  }
}



/* 記事 */
.kiji h1	{
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 30px;
	position: relative;
	padding-top: 0.8em;
	padding-right: 0;
	padding-bottom: 0.8em;
	padding-left: 10px;
	color: #090;
}

.point {
	font-size: 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	color:#090;
	padding: 1em;
	border: 3px solid #ccc;
	border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}



/*見出し*/

.kiji h1 span {
	display: block;
	padding: .75em 1em;
	border: 1px dashed #ccc;
}

.kiji h1:before,
.kiji h1:after {
position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box
}
.kiji h1:before {
top: 0;
	border-top: 2px solid #090;
	border-bottom: 1px solid #090;
}
.kiji h1:after {
	bottom: 0;
	border-top: 1px solid #090;
	border-bottom: 2px solid #090;
}

.kiji p	{
	margin-top: 0;
	margin-bottom: 20px;
	font-size : 14px;
	color: #333333;
	line-height: 28px
	}

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


/* 記事の小見出し */
.kiji h2	{
	margin-top: 40px;
	font-weight: bold;
	background-color: #E3FFC4;
	padding-top: 0.75em;
	padding-right: 0.75em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
	font-size: 24px;
	border-left-width: 6px;
	border-left-style: solid;
	border-left-color: #090;
	color: #333;
	}


.kiji h3 {
	position: relative;
	padding: .75em 1em .75em 1.5em;
	border: 1px solid #ccc;
	color: #333;
}
.kiji h3::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #009900;
	border-radius: 4px;
}

.kiji h4 {
	position: relative;
	padding-bottom: .5em;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.kiji h4::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 38%;
	height: 4px;
	background-color: #fc0;
}

.kiji li 	{

	font-size: 14px;
	text-decoration: none;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

.hyouka 	{
	background-color: #FFFFCC;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 30px;
	font-weight: bold;
	color: #333;
	border: 2px dotted #FC6;
}

/* サイドメニュー */
.sidemenu	{margin-bottom: 30px}

.sidemenu ul	{margin: 0;
	padding: 0;
	list-style: none}

.sidemenu li a	{
	display: block;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

.sidemenu li a:hover	{background-color: #eeeeee}

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

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


/* おすすめ記事メニュー */
.osusume	{margin-bottom: 30px}

.osusume ul	{margin: 0;
	padding: 0;
	list-style: none}

.osusume li a	{display: block;
	margin-bottom: 10px;
	padding: 0;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.osusume li a:hover	{background-color: #eeeeee;
	opacity: 0.8}

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

.osusume img	{width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom}

.osusume .text	{padding: 5px 10px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff}

.osusume a	{position: relative}

.osusume .text	{position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}



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


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


/* 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;
	background-color: #009900;
}



/* ########### 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}

}