/*************************
* ページ全体に適用されるもの *
*************************/
body {
    background-color: #444444;/*content部分以外は灰色に*/
}

/*ページの一番最初に使う*/
h1 {
    color: #424242;
    font-size: 24px;
    text-align: center;
    font-family: 'HGMaruGothicMPRO';
    font-weight: 400;
    line-height: 29px;
    margin-bottom: 0px;
}

a {
    color: #584d4d;
    text-decoration: underline;/*リンク部は既定で下線がひかれるように*/
}

a:visited {
    color: #797979;
    text-decoration: underline;
}

ul {
    list-style: none;/*既定でリストのドットを無しにする*/
    text-align: left;
}

ol {
    margin-top: 0px;
    list-style-type: decimal;/*数字付リストの規定は算用数字*/
    text-align: left;
}

/**********全体的に使いまわすもの**********/
/*コンテンツを置く部分の指定*/
.content {
    width: 799.4px;/*全体幅の指定*/
    background-color: white;/*背景を白色に*/
    margin: auto;/*白背景を中央揃え*/
}

/*文章等を囲む*/
.wrapper {
    margin:0 auto;
    text-align: center;/*中身のものはセンタリング、pタグは例外*/
    font-family: 'HiraMinPro-W3', 'Hiragino Mincho Pro', 'MS PMincho', sans-serif;
    font-size: 13px;
    line-height: 20px;
}

/*wrapper内のpタグの挙動を指定*/
/*左右にある程度のマージンを取りつつ、文章は左寄せした状態になる*/
.wrapper p {
    text-align:left;/*テキスト自体は左寄せ*/
    display:inline-block;/*横幅が文字によって変化するようにする*/
    text-indent: 1em;
    width: 580px;
    margin: 0 auto;
}

/*センタリング用*/
/*<div class="wrapper centering">のように使ってもOK*/
.centering p{
    max-width: 580px;
    text-align: center;
}

/*太字にしたい時用*/
.bold {
    font-weight: 600;
    font-size: 105%;/*ついでにちょっと文字が大きくなる*/
}

/*************************
*        ClearFix        *
*************************/
/*float使う際に、親要素に適用させること*/
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
 
.cf:after {
  clear: both;
}

/*************************
*          header        *
*************************/
/*ヘッダーとフッターのバー*/
.color_bar {
    height: 28px;/*カラーバーの高さを指定*/
    background-color: #0096ff;
}

/*ロゴ+名称+略称を囲む*/
.header {
    padding: 10px 0px 5px 0px;/*位置調整*/
    border-bottom:2px solid #000;/*ヘッダの下にborderを追加*/
}

/*ロゴに対してfloat指定*/
.header > img {
    float:left;
    padding:10px 0 0 5px;/*位置調整*/
}

/*名称+略称に対して使用*/
.header_wrapper {
    text-align: right;/*右寄せ*/
    padding: 30px 10px 0px 0px;/*位置調整*/
}

/*名称に対してfloat指定*/
.header_wrapper > img {
    float: right;
}

/*略称用*/
.paragraph {
    color:#a7a7a7;/*基本色指定*/
    margin: auto;/*上下のマージンを阻止*/
    font-size: 24px;
    font-weight: 700;/*文字の太さを指定*/
    text-shadow: 0px 1px 3px #000000;/*テキストに影をつける*/
    padding-right: 5px;/*位置調整*/
    display: inline-block;/*改行を阻止*/
    font-family: 'Arial-BoldMT', 'Arial', sans-serif;
}

/*略称で先頭の文字色を変える*/
.first_letter {
    color:#0096ff;
}

/*************************
*           menu         *
*************************/
/*メニュー部全体*/
#dropmenu {
    padding: 0px 0px 2px 0px;/*border用にpadding*/
    border-bottom: 2px solid #000000;/*メニューのチョイ下に黒のボーダー*/
    margin-bottom: 80px;
    z-index: 3;/*トップページのnotice等と被ると背後に回ってしまうため指定*/
    padding-top: 2px;/*メニュー上ボーダーとの間に隙間を*/
    font-family: 'Arial-BoldMT', 'Arial', sans-serif;
}

/*メニュー部分本体*/
#dropmenu > ul{
    max-width: 799.4px;/*横幅指定*/
    height: 34px;/*高さ指定*/
    margin: 0 auto;/*中央揃え(要らないかも)と上下空白部阻止*/
    padding: 0px;/*左に出てくるpaddingを0pxに*/
    text-align: center;/*テキストを中央揃え*/
}

/*メインメニュー部*/
#dropmenu ul li {
    float: left;/*メインメニューを横並びに*/
    width:114.2px;/* =799.4/7(メニューの数)*/
    font-size: 15px;/*フォントサイズ指定*/
    height: 34px;/*ボタン部の高さ指定*/
    background-color: #404040;/*ボタン部の背景色指定*/
    position: relative;/*サブメニュー用、ここを基準に出てきてもらうよう指定*/
}

/*メインメニューのリンク部*/
#dropmenu ul li a {
    padding-top: 11px;/*文字の位置が上下で大体真ん中になるように*/
    height: 23px;/*padding-top + height = ul liのheight*/
    color: #dddddd;/*文字色を指定*/
    text-decoration: none;/*下線を阻止*/
    display: block;/*ブロック要素とすることでボタン全体をリンクとして使えるようにする*/
    font-weight: 500;/*文字の太さ指定*/
    letter-spacing: 1.5px;/*文字間の幅を指定*/
    text-shadow: 0 -1px 0px #333333,
                 0 1px 0px #555555;/*文字の上に少し濃い影,文字の下に少し薄い影*/
    border-left: 1px solid #363636;/*区切りの真ん中の色*/
    box-shadow:  1px 0px 0px rgba(192,192,192, 0.2) inset,
                -1px 0px 0px rgba(192,192,192,0.2) inset,
                 0px 1px 1px rgba(0,0,0,0.3) inset,
                 0px -1px 1px rgba(0,0,0,0.3) inset;/*左の装飾,右の装飾,上の装飾.下の装飾*/
}

/*HOME(一番左)のボタン用 左には装飾しない*/
#dropmenu ul li:first-child a {
   box-shadow: -1px 0px 0px rgba(192,192,192,0.2) inset,
                0px 1px 0px rgba(0,0,0,0.1) inset,
                0px -1px 1px rgba(0,0,0,0.3) inset;
}

/*リンク(一番右)のボタン用 右には装飾しない*/
#dropmenu ul li:last-child a {
   box-shadow: 1px 0px 0px rgba(192,192,192,0.2) inset,
               0px 1px 1px rgba(0,0,0,0.1) inset,
               0px -1px 1px rgba(0,0,0,0.3) inset;
}

/*メインメニューにホバーした時の動作*/
#dropmenu ul li:hover > a{
    background: #303030;/*ホバーした時のメインメニューの色*/
    color: #ffffff;/*ホバーした時のメインメニューの文字の色*/
    box-shadow:  1px 0px 0px rgba(255,255,255,0) inset,
                -1px 0px 0px rgba(255,255,255,0) inset,
                 0px 1px 1px rgba(0,0,0,0.1) inset,
                 0px -1px 1px rgba(0,0,0,0.3) inset;
}

/**********ここからサブメニューの設定**********/

/*サブメニューの位置指定*/
#dropmenu ul li ul {
    position: absolute;/*メインメニューからの位置を指定*/
    top: 100%;/*メインメニューから下にずらす幅、100％で真下*/
    left: 0;/*メインメニューから右にずらす幅、0で左揃え*/
    padding: 0;/*左の空白を阻止*/
    margin: 0;
}

/*「リンク」にサブメニューをつけると右にはみ出るのでその対策*/
/*#dropmenu ul li ul liのwidthが100%の場合は不要*/
#dropmenu ul li:last-child ul {
    left: -50%;/*#dropmenu ul li ul liのwidthと足したら100%になるようにする*/
    width: 100%;
}

/*サブメニューの中身の設定*/
#dropmenu ul li ul li {
    height: 0px;/*絶対0pxの指定をする*/
    overflow: hidden;/*heightと協力して通常時は隠す設定*/
    width:150%;/*メインメニューの1.5倍の幅*/
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;/*0.2秒かけて出現する*/
    z-index: 1;
}

/*ホバーされたときサブメニューを出すための設定*/
#dropmenu ul li:hover ul li {
    overflow: visible;/*ホバーされたとき出現させる*/
    height: 34px;/*#dropmenu li ul li aの上下padding+font*size*/
}

/*サブメニューのリンク部の指定*/
#dropmenu ul li ul li a {
    background: #404040;/*これが無いと出現するときに違和感を感じるので外さないこと*/
    font-size: 13px;
    padding: 9.5px 0px 0px 15px;/*文字の位置調整*/
    text-align: left;/*テキスト自体は左寄せ*/
    height: 24.5px;
    border-top: 1px solid #484848;
    border-left: 0px;
    box-shadow:  0px 1px 1px rgba(0,0,0,0.3) inset,
                 0px -1px 1px rgba(0,0,0,0.3) inset;/*上の装飾,下の装飾*/
}

/*サブメニューの一番上のボタン用*/
#dropmenu ul li ul li:first-child a {
   box-shadow:  0px 1px 0px rgba(0,0,0,0.1) inset,
                0px -1px 1px rgba(0,0,0,0.3) inset;
    border-top: 0px;
}

/*サブメニューの一番下のボタン用*/
#dropmenu ul li ul li:last-child a {
   box-shadow:  0px 1px 0px rgba(0,0,0,0.1) inset,
                0px -1px 1px rgba(0,0,0,0.3) inset;
}