/* ページ内のテンプレート部分に関するCSS */

/* ページ右上の外部サイトへのリンクの位置の基準にするためにbodyをrelativeに */
body {
    position : relative;
}

/* ここからページヘッダのレイアウト */

/* メインのナビゲーションを
 * .main-header > h1 { float : left }
 * .main-nav { display : inline-block }
 * の指定で、ロゴ右側のスペースに入れつつ右寄せにする
 * その際 inline-block の影響で .main-nav の周囲の
 * 空白文字が表示されて .main-nav のレイアウトに影響しないよう
 * word-spacing : -1.0em ぐらいを指定して、表示上の空白を完全に消滅させる
 */
.main-header {
    word-spacing : -1.0em;
    text-align : right;
    border-bottom : 1px solid;
    margin-bottom : 0.5em;
}
.main-header > h1 {
    float : left;
}

/* レイアウトのために変更した word-spacing を元に戻す */
.main-header > * {
    word-spacing : normal;
}

/* ロゴの水平位置 */
.main-header > h1 > a > img {
    vertical-align : middle;
}

/* 外部サイトへのリンク */
.other-site-nav {
    position : absolute;
    top : 0px;
    right : 0px;
    font-size : 0.8em;
    width : 100%;
    word-spacing : -1.0em;
}
.other-site-nav > * {
    display : inline-block;
    text-align : center;
    width : 8.0em;
    background-color : #0a0b37;
}
.other-site-nav > :first-child {
    border-bottom-left-radius : 0.5em;
}
.other-site-nav > :not(:first-child) {
    border-left : 1px solid #e3e1d0;
}
.other-site-nav > * > a {
    color : #f2f2f2;
}
.other-site-nav > * > a > img {
    height : 1.0em;
    padding-right : 0.3em;
}

/* メインナビゲーションをヘッダのbottomを基準にレイアウトするため、
 * ロゴと同じ高さの要素をinline-blockとしてメインナビゲーションの隣に入れておき、
 * vertical-align : bottom を指定する。
 * このスペーサとメインナビゲーションは同一の行内で扱われて、かつ下揃えになり、かつ
 * 行の高さがヘッダと同じであるのでbottomが基準になっているように見える
 */
.main-nav-height-spacer {
    display : inline-block;
    height : 150px;
    vertical-align : bottom;
}
.main-nav {
    display : inline-block;
}
/* サイト内ナビゲーション */
.site-nav {
    margin-bottom : 0.5em;
    display : -moz-box;
    display : -webkit-box;
    display : box;
    -moz-box-align : end;
    -moz-webkit-align : end;
    box-align : end;
    -moz-box-pack : end;
    -moz-webkit-pack : end;
    box-pack : end;
    border-radius : 0.5em;
    background-color : #0a0b37;
}
.site-nav > * {
    padding : 0.5em 1.5em;
    font-size : 1.2em;
}
.site-nav > * > a {
    display : block;
    text-align : center;
    color : #f2f2f2;
}
.site-nav > * > a > img {
    height : 1.3em;
    padding-right : 0.3em;
}

.main {
    margin-bottom : 1.0em;
}

.main-title {
    font-size : 2.0em;
    margin : 0.5em 0;
}

.main > section section:not(:first-child) {
    margin-top : 1.0em;
}