/* 各活動の個別の記録(12_280518.html等) */

@charset "Shift_JIS";

body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
        background-color: #fffee0;
}

/* 表題の下に罫線を挿入 */
.contents .main1  {border-bottom: solid 1px #dddddd}

/* 各活動の表紙の名前(class"main1,main1-inner") */
.site h1  {margin: 10;
           color: #000000;
           text-decoration: none;
	   font-size: 22px}

/* 記録の写真と記事部分(class"main2,main2-1") */
.kiji h2  {margin-top: 0;
	   margin-bottom: 5px;
	   padding-left: 16px;
           /* 左赤マーク見だし */
	   border-left: solid 5px #c50018;
           border-bottom: solid 1px #dddddd;
	   font-size: 14px;
	  font-weight: normal}

.kiji p	{max-width: 640px;
	margin-top: 0;
	margin-bottom: 16px}

.kiji .lead  {max-width: 100%;
	      color: #666666}

.kijiimg   {max-width: 100%;
	    height: auto;
	    margin-bottom: 5px}


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

/* 最下部footerをバーの形にする */
.footer	{padding-top: 15px;
	 padding-bottom: 15px;
	 background-color: #dddddd}

/* ボックスの左右 */
.main1,.footer, .main2
	{padding-left: 15px;
	padding-right: 15px}

/* ボックスの上下 */
.main1	{padding-top: 0px;
	padding-bottom: 10px}

.main2	{padding-top: 5px;
	padding-bottom: 25px}



/* メニューのトグルボタン制御650以下and　651以上 */

/* ###########　650px以下 ボタン表示########### */
@media (max-width: 650px){

#menubtn  {padding: 6px 12px;
	   border: solid 1px #aaaaaa;
	   border-radius: 5px;
	   background-color: #ffffff;
	   position: absolute;
	   top: 20px;
	   right: 15px;
	   cursor: pointer}

#menubtn:hover	{background-color: #dddddd}
#menubtn:focus	{outline: none}
#menubtn i	{color: #888888;
	         font-size: 18px}
#menubtn span	{display: inline-block;
                 text-indent: -9999px}

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

.main2 img	{width: 100%;
	         height: auto}
}


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

#menubtn	{display: none}

/* 全体の横幅を固定 */
.slidebox, .main1, .main2, .footer-inner
	{width: 650px;
	margin-left: auto;
	margin-right: auto}

/* メニュー */
#menu	   {display: block !important}
.menu ul   {margin: 0;
	    padding: 0;
	    list-style: none}
.menu li a {display: block;
	    padding: 10px 15px;
	    color: #000000;
	    font-size: 16px;
	    text-decoration: none}
.menu li a:hover  {background-color: #eeeeee}

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

.menu li {float: left;
	  width: auto}

.main2 img	{width: 100%;
	         height: auto}

}

/* ## 画面サイズで全体表示制御　400px以上 599px以下 ########### */
@media (min-width: 400px) and(max-width: 599px) {

/* 全体の横幅を固定 */
.slidebox, .main1, .main2, .footer-inner
	{width: 400px;
	 margin-left: auto;
	 margin-right: auto}
/* 活動記録記述部 */
.kiji h2	{font-size: 16px}
.kiji .lead	{font-size: 18px}

}

* ## 画面サイズで全体表示制御　600px以上 899px以下 ########### */
@media (min-width: 600px) and(max-width: 899px) {

/* 全体の横幅を固定 */
.slidebox, .main1, .main2, .footer-inner,
	{width: 550px;
	 margin-left: auto;
	 margin-right: auto}
/* 活動記録記述部 */
.kiji h2	{font-size: 16px}
.kiji .lead	{font-size: 18px}

}

/* ## 画面サイズで全体表示制御 900px以上 ########### */
@media (min-width: 900px) {

/* 全体の横幅を固定 */
.slidebox, .main1, .main2, .footer-inner,
	{width: 750px;
	 margin-left: auto;
	 margin-right: auto}

.kiji h2	{font-size: 18px}
.kiji .lead	{font-size: 18px}

}