@charset "UTF-8";

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


/* 概要 */
.gaiyou img  {max-width: 100%;
             height: auto;
             border: none}

.gaiyou h2   {text-align: center}


/* ボックスの左右に確保する余白 */
.box1,.boxA,.box2-inner,.box5-inner
             {padding-left: 10px;
             padding-right: 10px}


/* サイト名 */
.site h1 a   {color: #83a4a8;
             text-decoration: none}

.site h1     {margin: 0;
             font-size: 30px}
             font-family: 'paytone one', sans-serif;
             font-weight: normal}

.site h3     {font-size: 20px}

.site p      {margin: 0;
             font-size: 12px}

/* ナビゲーション */
.menu ul     {margin: 0;
             padding: 0;
             list-style: none}

.menu li a   {display: block;
             padding: 10px 3px;
             color: #000000;
             font-size: 11px;
             text-decoration: none}

.menu li a:hover   {background-color: #75dbe7}

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

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

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

.kiji p      {margin-top: 0;
             margin-bottom: 20px}

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

/* 記事の小見出し */
.kiji h2     {margin-top: 40px;
             padding-left: 10px;
             border-left: solid 10px #7cbac1;
             font-weight: normal}

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

.kijiinfo i  {margin-right: 5px;
             color: #aaaaaa;
             font-size: 20px}

/* 記事の分類 */
.kijicat      {margin-bottom: 25px}

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

.kijicat li a {display: block;
              margin-right: 5px;
              padding: 3px;
              border-radius: 2px;
              background-color: #75dbe7;
              color: #ffffff;
              font-size: 12px;
              text-decoration: none}

.kijicat li a:hover {background-color: #94ecf6}

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

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

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

.ninki li a   {display: block;
              padding: 5px;
              border-bottom: dotted 4px #dddddd;
              color: #003366;
              font-size: 14px;
              text-decoration: none}

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

.ninki li a img      {border: none}

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

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

.ninki img     {float: left;
               width: 60px}

.ninki .text   {float: none;
               width: auto;
               margin-left: 60px;
               padding-left: 15px}

.ninki span    {display: block;
               color: #666666;
               font-size: 12px}


/* おすすめ記事メニュー */
.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;
                    opasity: 0.8}

.osusume h1    {margin-top: 0;
               margin-bottom: 10px;
               border-bottom: dotted 2px #dddddd;
               color: #666666;
               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}


/* サイドメニュー */
.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: #888888}


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

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

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

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

.box3         {padding-top: 25px;
              padding-bottom: 30px}

.box4         {padding-top: 40px;
              padding-bottom: 30px}

.box5         {padding-top: 15px;
              padding-bottom: 15px}

.top .boxA    {padding-top: 20px;
              padding-bottom: 20px}

/* ＳＮＳのシェアボタン */
.share        {margin-top: 40px}

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

.share li a   {display: block;
              padding: 10px 5px;
              color: #ffffff;
              font-size: 14px;
              text-align: center;
              text-decoration: none}

.share-tw     {background-color: #55acee}
.share-fb     {background-color: #3b5998}
.share-gp     {background-color: #dd4b39}

.share li a:hover   {opacity: 0.8}

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

.share li           {float: left;
                    width: 33.3333%}

/* 関連記事メニュー */
.kanren        {margin-top: 40px;
               padding: 20px;
               background-color: #fbddc3}

.kanren h1     {margin-top: 0;
               margin-bottom: 5px;
               color: #727224;
               font-size: 20px;
               font-weight: normal}

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

.kanren li a   {display: block;
               padding: 5px;
               color: #000000;
               font-size: 18px;
               text-decoration: none}

.kanren li a:hover   {background-color: #eeeeee;
                     text-decoration: underline}

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

.kanren li           {float: left;
                     width: 25%}

.kanren img          {max-width: 100%;
                     height: auto;
                     border: none}


/* ########## 599px以下 ########## */
@media (max-width: 599px){

/* 関連記事メニュー */
.kanren         {padding: 10px}

.kanren li      {width: 50%}

.kanren li:nth-child(3)     {clear: both}


/* ＳＮＳのシェアボタン */
.share span     {display: inline-block;
                text-indent: -9999px}

}

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

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

.box4-1        {float: left;
               width: 50px}

.box4-2        {float: left;
               width: 50px}

/* 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) {

/* BOX6とBOX7とBOX8を横に並べる設定 */
.boxB:after  {content: "";
             display: block;
             clear: both}

.box6        {float: left;
             width: 33.3333%}

.box7        {float: left;
             width: 33.3333%}

.box8        {float: left;
             width: 33.3333%}





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

}