@charset "shift_jis";

body {color:#000000; margin:0; padding:0; border:0;
  font-family: Verdana, Meiryo, sans-serif;
  background-color: #cccccc;
  background-position: center top;
}
/* スマホ「以外」で背景画像表示（ブレイクポイントは他と統一せよ） */
@media only screen and ( min-width:680px ){ 
  body{ background-image:url("images/general/gaobgd.jpg")  }
}

a:link    {color:#0000ee; /*text-decoration:none*/}
a:visited {color:#0000ee; /*text-decoration:none*/}
a:focus   {color:#bb0000; /*text-decoration:underline*/}
a:hover   {color:#bb0000; /*text-decoration:underline*/}
a:active  {color:#bb0000; /*text-decoration:underline*/}
/* 背景色とのコントラストに注意
   JIS X 8341-3:2010 の AA基準で考えると 小さな文字の場合で
   背景 #ddddff に対し 文字色は #ca0000までOK #cc0000や#f00は不可。*/

img { border:0 }

/*----------------------------------------------------------------------------
  ブレイクポイントについて
　(1) 現在は コンテンツ幅320px＋余白20px で設計している
      3つ並べると [320]+20+[320]+20+[320] = 全幅1000px ←デフォルト
      2つ並べると [320]+20+[320] = 全幅660px
      右スクロールバーにコンテンツが隠れないよう、
      ブレイクポイントは全幅+20pxとしている。( 例: 1020以上か1019未満 )
  (2) 上記に加えiPad幅対応のレイアウト(今は全幅730px(仮設定値))も設定
  (3) 全幅660px未満の端末(スマホ)では1カラム表示
      この場合幅320のブロックを全幅表示に拡大
  (4) 上記の議論のキモは"320px"という値
      これは[320px]内に写真300pxと左右マージン各10pxを想定したもの
      将来的にトップページの背景画像を無くすなら、
      [320px]の"内部"の左右マージン10pxは不要になるから
      基本単位を320pxから300pxに変更してブレイクポイント等の再設計を。
  (5) 2015/2現在、トップページ以外は[320]を基本単位としていない。

  ブレイクポイントの値を変える場合の注意
              複数箇所の@mediaで数字を同時に書き換えること
              さもないと表示が崩れる
----------------------------------------------------------------------------*/

/* max-widthではなくwidthで指定する。max-widthを採用すると、PCブラウザで
   スクロールバーによってwidthが削られ、内部で横並びする子要素の幅が不足し
   レイアウト崩れの原因になる */
div.maincontainer { width:1000px; margin:0 auto}
div.maincontainer { background:#ffffee} /* スマホ以外 */
/*div.maincontainer { background:rgba(247,247,223,0.9)}*/

/* スクロールバー込みで幅1000確保するため1020pxでブレイク判定 */
@media only screen and ( max-width:1019px ) and ( min-width:750px ){ 
  div.maincontainer { width:730px }
 }
/* スクロールバー込みで幅730確保するため750pxでブレイク判定 */
@media only screen and ( max-width:749px ) and ( min-width:680px ){ 
  div.maincontainer { width:660px }
 }
/* スクロールバー込みで幅660確保するため680pxでブレイク判定 */
@media only screen and ( max-width:679px ){ 
  div.maincontainer { width:100% }
  div.maincontainer { background:#cccccc} /* スマホのみ */
 }


/* ------------------------------------------------------------------ */
/*      <header>部分の設定                                            */
/* ------------------------------------------------------------------ */

div.header {padding:5px 5px 1em 3px;background-color:#ffffee;overflow:hidden}
/* overflow:hiddenを実行することで、div.topright が h1 の下に回り込んでも、div.topright が div.header からはみ出さず背景色が適用される */
/*h1.top {display:inline} *//* 2015.3.27次行に変更*/
h1.top {width:290px;height:70px;float:left;margin:0;border:0;padding:0;}
a.jump2main {display:inline;position:relative;left:-4999px}
a.jump2main:focus {left:0}
div.topright {float:right; line-height:1.5; text-align:right;}
@media only screen and (max-width:679px){ 
  span.pc-only {display:none}
  div.topright {padding-right:16px}
}

/* ------------------------------------------------------------------ */
/*      <header>内<nav>(#dropmenu) の設定                             */
/* ------------------------------------------------------------------ */

div.dropmenu{
  width:100%;height:75px
}
#dropmenu {
  list-style-type: none;
  width: 100%;
  margin: auto;
  padding: 0;
}
#dropmenu li {
  position: relative;
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  border-top:1px solid #0000cc; /* NEW! */
  border-bottom:1px solid #0000cc; /* NEW! */
}
/* スマホ等(width<680px)ではメニューを2段表示するため
   div.dropmenu の height を 124px に上書き
   #dropmenu li { width } を   50% に上書き */
@media only screen and (max-width:679px){ 
  div.dropmenu{height:124px}
  #dropmenu li {width:50%}
  #dropmenu li:nth-child(1){ border-bottom:0 }/* NEW! */
  #dropmenu li:nth-child(2){ border-bottom:0 }/* NEW! */
}
#dropmenu li span {
  display: block;
  margin: 0;
  padding: 1em 0;
  background: #fff;
  color: #0000cc;
  font-size:larger;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li a {
  display: block;
  margin: 0;
  padding: 1em 0;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #001177;
}
#dropmenu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #000;
  transition: .2s;
  border-top:0; /* NEW! */
  border-bottom:0 /* NEW! */
}
#dropmenu li ul li span {
  padding: 1em 0.4em; /* 13px 15px から変更 */
  background: #001177;
  color:#ffffff;
  text-align: left;
  font-size: smaller;
  font-weight: normal;
}
#dropmenu li ul li a {
  padding: 1em 0.4em; /* 13px 15px から変更 */
  background: #001177;
  color:#ffffff;
  text-align: left;
  font-size: smaller;
  font-weight: normal;
}
#dropmenu > li:hover > span {  background: #001177 ; color:#ffffff }
#dropmenu > li:hover li:hover > span {  background: #003399}
#dropmenu > li:hover li:hover > a {  background: #003399}
#dropmenu > li:hover > ul > li {
  overflow: visible;
  height: 2.5em; /* 38pxから変更 , 変更する場合は javascript も変更 */
}
#dropmenu li ul li ul {
  top: 0;
  left: 100%;
}
/*#dropmenu li:last-child ul li ul { 
  left: -100%;
  width: 100%;
}*/
#dropmenu li#lastcolumn ul li ul { 
  left: -100%;
  width: 100%;
}
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 1em; /* 13px から変更 */
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #cccccc;
}
/*#dropmenu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 1em;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #cccccc;
}*/
#dropmenu li#lastcolumn ul li ul:before {
  position: absolute;
  content: "";
  top: 1em; /* 13px から変更 */
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #cccccc;
}
#dropmenu li ul li:hover > ul > li {
  overflow: visible;
  height: 2.5em; /* 38pxから変更 , 変更する場合は javascript も変更 */
}
#dropmenu li ul li ul li a {  background: #003399 }
#dropmenu li:hover ul li ul li a:hover {  background: #0066aa }

/* ------------------------------------------------------------------ */
/* 本文とフッター部分の設定                                           */
/* div.maincontainer の中に次の4つのdivが入る                         */
/*      leftcontainer: お知らせ＋天体観望情報 (float:left)            */
/*      rightcontainer: 写真で見る話題(float:right)                   */
/*      special_item: 特集バナー(float:left or clear:both)            */
/*      bottom_container: バナー広告(予定)とフッター (clear:both)     */
/*                                                                    */
/*  id="main" は<h2>タグではなく <div>タグにつけておくこと            */
/* ------------------------------------------------------------------ */
div.leftcontainer   {float:left ;width:660px ;padding:0;border:0;margin:0}
div.rightcontainer  {float:right;width:320px ;padding:0;border:0;margin:0}
div.bottomcontainer {clear:both ;width:1000px;padding:0;border:0;margin:0}
div.special_item         {float:left;width:640px;background-color:#ffffee;
                          padding:10px; border:0; margin:0 0 10px 0}
div.leftcontainer_item   {float:left;width:300px;background-color:#ffffee;
                          padding:10px; border:0; margin:0 0 10px 0}
div.leftcontainer_item#main { margin-right:20px }
div.rightcontainer_item  {width:300px;background-color:#ffffee;
                          padding:10px; border:0; margin:0 0 10px 0}
div.bottomcontainer_item {width:980px;background-color:#ffffee;
                          padding:0 10px 10px 10px; border:0;
                          margin:10px 0 0 0}

@media only screen and ( max-width:1019px ) and ( min-width:750px ){ 
  /* このとき maincontainer は width:730 (max-widthではなくwidth) */
  div.leftcontainer        {width:390px}
  div.leftcontainer_item   {float:none; width:370px}/*padding10*/
  div.leftcontainer_item#main { margin-right:0 }
  div.special_item         {float:none;clear:both;width:710px}/*padding10*/
  div.bottomcontainer      {width:730px}
  div.bottomcontainer_item   {width:710px}/*padding10*/
}
@media only screen and ( max-width:749px ) and ( min-width:680px ){ 
  /* このとき maincontainer は width:660 (max-widthではなくwidth) */
  div.leftcontainer        {width:320px}
  div.leftcontainer_item   {float:none; width:300px}/*padding10*/
  div.leftcontainer_item#main { margin-right:0 }
  div.special_item         {float:none;clear:both;width:640px}/*padding10*/
  div.bottomcontainer      {width:660px}
  div.bottomcontainer_item   {width:640px}/*padding10*/
}
@media only screen and ( max-width:679px ){ /* １カラム全幅表示 */
  /* このとき maincontainer は 100% = body幅 */
  div.leftcontainer        {float:none; width:100%}
  div.leftcontainer_item   {float:none; width:94%; padding:10px 3%; margin:0 0 10px 0}
  div.leftcontainer_item#main { margin-right:0 }
  div.rightcontainer       {float:none; width:100%}
  div.rightcontainer_item  {float:none; width:94%; padding:10px 3%; margin:0 0 10px 0}
  div.special_item         {float:none; width:94%; padding:10px 3%; margin:0 0 10px 0}
  div.bottomcontainer      {float:none; width:100%}
  div.bottomcontainer_item {float:none; width:94%; padding:10px 3%; margin:10px 0 0 0}
}

h2.none { display:none }
h2.sectiontitle {margin:0 0 10px 0; padding:0; font-weight:normal;
                 display:inline-block;border-bottom:3px double #000099}
h3.sectiontitle {margin:0 0 10px 0; padding:0; font-weight:normal;
                 display:inline-block;border-bottom:1px solid #000099}

img#koyomi { padding-bottom:1em }

div.heading{clear:both;margin:0;padding:0; overflow:hidden}
div.leftcontainer_item div.heading { border-bottom:1px dotted #666666 }
div.heading p {line-height:1.7;margin:10px 6px 10px 0;/*text-align:justify;text-justify:distribute*/ }
div.thumbnail {float:left; margin:10px 10px 10px 0}
div.readmore {clear:both;text-align:right;padding:0 6px;overflow:hidden}
div.readmore p {margin-bottom:0; padding-bottom:0}
div.rightcontainer_item p { margin:0 }
div.center{margin:auto;text-align:center}

hr.footer {width:100%;border:0;border-top:1px dotted #666666;
           padding-top:0;margin-top:0}
@media only screen and ( max-width:679px ){
  hr.footer { display:none }
}
table.footer caption { text-align:left }
table.footer tr { font-size:smaller }
table.footer th { white-space:nowrap; vertical-align:top  }
span.nw { white-space:nowrap }



/* ------ calendar ------- */ 
table.calendar  { border-collapse:collapse; margin: auto }
table.calendar tr th { text-align:center ; width:32px ; border:1px solid #6666ff}
table.calendar tr td { text-align:center ; width:32px ; border:1px solid #6666ff ; padding:3px 0 0 0; line-height:1.2}
table.calendar tr td:first-child { text-align:center ; width:30px ; border:1px solid #6666ff ; padding:3px 0 0 0; line-height:1.2}
table.calendar tr th { padding:0 }
table.calendar tr td { padding:0 ; vertical-align:bottom }
table.calendar tr th div { height:1em  }
table.calendar tr td div { height:1em  }
div.hd {color:#c00}
div.sd {color:#00c}
div.wd {color:#000}
div.c1 {background-color:#ffc ; padding-bottom:1px}
div.c2 {background-color:#cff ; padding-bottom:1px}
div.c3 {background-color:#cfd ; padding-bottom:1px}
div.c4 {background-color:#ddd ; padding-bottom:1px}
span.c1 {background-color:#ffc}
span.c2 {background-color:#cff}
span.c3 {background-color:#cfd}
span.c4 {background-color:#ddd}
p.calfoot { margin-top:0 }
/* ------ calendar ------- */