@charset "shift_jis";

/* gaostyle2015.cssの設定を上書き */
/* 5つある div.block300 は「5つ横並び」「上に3つ下に2つ」「上2中2下1」
   のいずれかで並ばせ、「上4つ下1つ」とは並べない。(不格好だから。)
   幅1570なら5つ並べるし、幅1600のノートPCで右スクロールバーが出ても大丈夫。
   幅1570未満なら幅を1000以下とし、横並びは最大3個に抑制 */
/* IE8 は@media を理解しないため、デフォルト幅1000pxとして「上4つ下1つ」を
   阻止したうえで、ブラウザ幅が広い場合に@media適用で5つ横並び化する。*/
/* block300 がマージン込みで幅315以内ならmax-width:1570pxで良いが、
   block300 の仕様を変えるなら下記の max-widthを変える必要あり */
div.maincontainer { max-width:1000px }
@media screen and (min-width:1590px){ 
  div.maincontainer { max-width:1570px }
}

/* gaostyle2015.css の div.block に属性追加 */
div.block300 a {
  text-align:center;
  display:block;
  border:1px solid #6666ff;
  background-color:#fff;
}
div.block300 a:focus { background-color:#ddddff;}
div.block300 a:hover { background-color:#ddddff;}

/*-- pの後ろに右矢印をつける設定ここから --*/
div.block300 a p { 
    display:block;
}
div.block300 a p:after { 
    display:block; float:right; 
    content: ""; width: 0; height: 0;
    border: 7px solid transparent;
    border-left-color: #6666ff;
    margin: 5px 0 0 -14px;
 }
div.block300 a:hover p:after { 
    border-left-color: #00f;
 }
/*-- pの後ろに右矢印をつける設定ここまで --*/



div.block300 p { text-align:center;padding:10px 0;margin:0 }
div.block300 a br{
  display:none; /* 後述の縮小表示時のみ文字列を改行 */
}
div.block300:hover {
  background-color:#ffffff;
}
div.block300 img { display:block;/* これが無いとimgの下に空白ができちゃう */
                   width:298px; height:199px }

/*
   表示幅640px未満※の場合は上記サイズで2列表示ができないため
　　　（※スクロールバーが入るので実質620px程度）
   各ブロックの表示を半分のサイズに
   そのため html内のimgタグには width height 属性を指定しないこと！
*/
@media only screen and (max-width:639px){ 

  div.center       { max-width: 598px } /* 横4つ並び阻止 */
  div.block300     { width:150px ; display:inline-block;
                     margin:2px /*  右余白確保のため margin は2px以下とせよ  */
                   }
  div.block300 img { width:150px ; height:100px }
  div.block300 a br{ display:inline;}
} 
/*
    印刷は A4×1枚
*/
@media only print{ 
  div.block300 img { width:225px ; height:150px }
  div.block300 { width:225px ; display:inline-block}
  div.block300 a br{ display:none;}
}