@charset "UTF-8";
html,body{
  margin : 0;
  padding : 0;
  width : 100%;
  height : 100%;
}
body{
  color : #a5a5a5;
  background-color : white;
}
table {
  border-width : 0px;
}
td {
  white-space: nowrap;
}
img {
  border-width : 0px;
}
a{
  text-decoration : none;
  color : black;
}
a:hover{
  color : #a5a5a5;
}
.top {
  width : 100%;
  height : 100%;
  display : table;
}
.center {
  display : table-cell;
  vertical-align : middle;
  width : 100%;
  text-align : center;
  padding : 15px 0px 0px 0px;
  z-index: 1;  
}
.center_box {
  width : 100%;
}
.image {
  width : 100%;
}
.image a{
  display : block;
  text-indent: -9999px;
  background-image : url(http://www.jun291.com/main_image_on.jpg);
  background-size : 80% auto;
  background-repeat : no-repeat;
  background-position: center center;
  margin : -25% 0px 0px 0px;
}
.title1 {
  position: absolute;
  text-indent: -9999px;
  background-image : url(http://www.jun291.com/main_title1s.gif);
  background-size : 55% auto;
  background-repeat : no-repeat;
  background-position: center center;
  width : 100%;
  height : 40px;
  top : 74%;
}
.title1 img {
  width : 0px;
}
.title2 {
  position: absolute;
  text-indent: -9999px;
  background-image : url(http://www.jun291.com/main_title2s.gif);
  background-size : 82% auto;
  background-repeat : no-repeat;
  background-position: center center;
  width : 100%;
  height : 25px;
  top : 82%;
}
.time {
  position: absolute;
  font-family :  "Trebuchet MS",Tahoma,sans-serif;
  font-size : 11px;
  color : #8C8C8C;
  width : 100%;
  top : 90%;
}
.main {
  font-family : sans-serif;
  font-size : 12px;
  line-height : 17px;
  color : #8C8C8C;
  top : 100%;
  left : 0;
  text-align : center;
  padding : 0px 0px 30px 0px;
  width : 100%;
  position : absolute;  
}
.main h1 {
  font-size : 13px;
  font-weight : normal;
  color : black;
  line-height : 12px;
  margin : 60px 0px 8px 0px;
}
.main h2 {
  font-size : 14px;
  font-weight : normal;
  color : black;
  margin : 20px 0px 5px 0px;
}
.main h3 {
  font-size : 14px;
  font-weight : normal;
  margin : 15px 0px 4px 0px;
}
.main_menu{
  -webkit-transform: scale(0.8,1);
  transform: scale(0.8,1);
  line-height : 18px;
  width : 122%;
  margin : 0 0 0 -11%;
}
.main_menu a{
  display : inline-block;
  font-size : 13px;
  -webkit-transform: scale(1.25,1);
  transform: scale(1.25,1);  text-align : center;
}
.main_menu br{
  display : block;
}
.main_menu a{
  text-decoration : none;
}
.notes{
  text-align : left;
  width : 86%;
  margin : 20px auto 0 auto;
}
.notes br{
  display : none;
}
.side{
  display : table;
  top: 0px;
  position: fixed;
  width : 100%;
  z-index: 2;  
}
.menu{
  display : table;
  font-family : "Trebuchet MS",Tahoma,sans-serif;
  font-size : 11px;
  height : 20px;
  top: 0px;
  width : 100%;
  margin : 0;
}
.menu a{
  color : #848484;
  background-color : #393939;
  display : block;
  height : 21px;
  padding : 9px 0px 0px 0px;
}
.menu a:hover{
  color : white;
  background-color : #636363;
}
.menu_current a {
  color : white;
  background-color : #636363;
}
.menu_home{
  float : none;
  display : table-cell;
  text-align : center;
  padding : 0;
  width : 20%;
  height : 30px;
  border-right : 1px solid black;
}
.menu_0pix{
  display : table-cell;
  text-align : center;
  position : static;
  width : 20%;
  border-right : 1px solid black;
}
.menu_0pix:first-letter {
  font-size : 0px;
}
.menu_12pix{
  display : table-cell;
  text-align : center;
  position : static;
  width : 20%;
  border-right : 1px solid black;
}
.menu_12pix:first-letter {
  font-size : 0px;
}
.menu_24pix{
  display : table-cell;
  text-align : center;
  position : static;
  width : 20%;
  border-right : 1px solid black;
}
.menu_24pix:first-letter {
  font-size : 0px;
}
.menu_36pix{
  display : table-cell;
  text-align : center;
  position : static;
  width : 20%;
  border-right : 1px solid black;
}
.menu_36pix:first-letter {
  font-size : 0px;
}
.n {
  display : none;
}

@media screen and (min-width:480px) { 
.center_box {
  display : table;
  position: absolute;
  width : 100%;
  height : 90%;
  top : 30px;
}
.image {
  display : table-cell;
  vertical-align : middle;
  width : 50%; 
}
.image img{
  width : 80%;
  height : auto;
}
.image a{
  display : block;
  text-indent: -9999px;
  background-image : url(http://www.jun291.com/main_image_on.jpg);
  background-size : 80% auto;
  background-repeat : no-repeat;
  background-position: center right;
  margin : 0px 0px 0px 0px;
}
.title1 {
  background-size : 65% auto;
  background-position: left center;
  width : 50%;
  top : 37%;
  left : 49.7%;
 }
.title2 {
  background-size : 85% auto;
  background-position: left center;
  width : 50%;
  top : 48%;
}
.time {
  position: absolute;
  font-family :  "Trebuchet MS",Tahoma,sans-serif;
  font-size : 11px;
  text-align : left;
  width : 50%;
  left : 50%;
  top : 63%;
}
}

@media screen and (min-width:768px) {
.n {
  display : block;
}
ul {
  font-family : "Meiryo UI","Hiragino Kaku Gothic ProN","MS UI Gothic",sans-serif;
  font-size : 11px;
  color : #4A4A4A;
  line-height : 13px;
  list-style : disc outside;
  margin : 0px 0px 15px 15px;
  padding : 0px 0px 0px 0px;
}
.center {
  width : 80%;
}
.center_box {
  position : static;  
  margin : 0 auto 0 auto;
  max-width: 860px; 
  height :80%;
}
.image {
  width : 46.5%;
  height : 100%;
}
.image img{
  width : 100%;
  height : auto;
}
.image a{
  background-image : url(http://www.jun291.com/main_image_off.jpg);
  background-size : contain;
  background-position: center center;
  width : 100%;
}
.image a:hover{
  background-image : url(http://www.jun291.com/main_image_on.jpg);
}
.title1 {
  display : table-cell;
  vertical-align : middle;
  position : static;
  text-indent: 0px;
  background-image : none;
  width : 7%;
}
.title1 img {
  width : 100%;
  height : auto;
  margin : 0 0 80% 0;
}
.title2 {
  display : table-cell;
  position : static;
  background-image : url(http://www.jun291.com/main_title2.gif);
  background-size : 100% auto;
  background-position: center center;
  width : 46.5%;
}
.counter {
  display : inline;
}
.time {
  position : static;
  font-family : "Meiryo UI","Hiragino Kaku Gothic ProN","MS UI Gothic",sans-serif;
  font-size : 13px;
  line-height : 15px;
  text-align : center;
  width : 100%;
}
.time br{
  display : none;
}
.main {
  font-family : "Meiryo UI","Hiragino Kaku Gothic ProN","MS UI Gothic",sans-serif;
  font-size : 12px;
  line-height : 17px;
  color : #8C8C8C;
  top : 100%;
  left : 0;
  text-align : center;
  padding : 0px 0px 30px 0px;
  width : 100%;
  position : absolute;  
}
.main h1 {
  font-size : 13px;
  font-weight : normal;
  color : black;
  line-height : 12px;
  margin : 60px 0px 8px 0px;
}
.main h2 {
  font-size : 14px;
  font-weight : normal;
  color : black;
  margin : 20px 0px 5px 0px;
}
.main h3 {
  font-size : 14px;
  font-weight : normal;
  margin : 15px 0px 4px 0px;
}
.main_menu {
  -webkit-transform: none;
  transform: none;
  line-height : 18px;
  width : 100%;
  margin : 0 0 0 0;
}
.main_menu br{
  display : none;
}
.main_menu a {
  display : inline-block;
  font-size : 13px;
  -webkit-transform: none;
  transform: none;
}
.notes{
  text-align : center;
  width : 86%;
  margin : 20px auto 0 auto;
}
.notes br{
  display : block;
}
.side{
  display : table-cell;
  position : static;
  width : 20%;
  min-width : 160px;
}
.sitemap {
  font-size : 10px;
  font-family : Verdana,sans-serif;
  color : #a5a5a5;
  padding : 18px 0px 0px 18px;
}
.sitemap a {
  text-decoration : none;
  color : #a5a5a5;
}
.sitemap a:hover {
  color : black;
}
.menu{
  display : block;
  font-size : 14px;
  font-family : "Trebuchet MS",Tahoma,sans-serif;
  width: 165px;
  height : 119px;
  top: 50%;
  position: absolute;
  margin : -62px 0px 0px 2.5%;
}
.menu_home{
  float : left;
  display : block;
  text-align : left;
  width : auto;
  height : 119px;
  padding : 55px 0px 0px 0px;
  border-right : none;
}
.menu a{
  color : black;
  background : none;
  display : inline;
  height : 17px;
  padding : 0px 0px 0px 0px;
}
.menu a:hover{
  color : #a5a5a5;
  background : none;
}
.menu_current a {
  color : #848484;
  background : none;
}
.menu_0pix{
  display : block;
  position : relative;
  text-align : left;
  width : auto;
  border-right : none;
  height : 17px;
}
.menu_0pix:first-letter {
  font-size : 18px;
}
.menu_12pix{
  display : block;
  position : relative;
  text-align : left;
  width : auto;
  border-right : none;
  left : 12px;
  height : 17px;
}
.menu_12pix:first-letter {
  font-size : 18px;
}
.menu_24pix{
  display : block;
  position : relative;
  text-align : left;
  width : auto;
  border-right : none;
  left : 24px;
  height : 17px;
}
.menu_24pix:first-letter {
  font-size : 18px;
}
.menu_36pix{
  display : block;
  position : relative;
  text-align : left;
  width : auto;
  border-right : none;
  left : 36px;
  height : 17px;
}
.menu_36pix:first-letter {
  font-size : 18px;
}
.menu_new {
  display : inline;
  font-size : 11px;
  font-family : "Trebuchet MS",Arial,sans-serif;
  color : red;
  vertical-align : 1px;
  margin : 0px 0px 0px 1px;
}
.right {
  display : table-cell;
  width : 20%;
  min-width : 160px;
}
.blog {
  position : absolute;
  top : 0px;
  right : 0px;
  background-color : black;
  padding : 30px 0px 0px 16px;
  width : 10%;
  min-width : 160px;
  min-height : 100%; 
  overflow:hidden;
}
.blog h3 {
  font-family : Verdana,Arial,sans-serif;
  font-size : 11px;
  font-weight : bold;
  color : #636363;
  margin : 0px 0px 5px 0px;
}
.blog a {
  color : #525252;
  text-decoration : none;
}
.blog a:hover {
  color : white;
  text-decoration : underline;
}
.blog img {
  margin : 4px 0px 10px 4px;
  max-width : 125px;
  max-height : 125px;
  border-width : 0px 0px 0px 0px;
}
}