/* 全体共通 */
hr {
    border-width: 2px 0px 0px;  /* 上2px, 左右0px, 下0px */
    border-top-color: rgb(255, 153, 0);
    border-top-style: dashed;   /* 破線 */
}

/* ヘッダー領域 */
/* サイトロゴ、サイト内検索 */
.site_logo_container {
    display: table;  /* 要素を横並びできるようにする */
    width: 100%;    /* 幅いっぱい使う */
}
.site_logo {
    display: table-cell;  /* 後ろの要素と横並びする */
    line-height:0;  /* ボタン内の画像の下部分にできる余白の除去。*/
}
.site_search {
    display: table-cell;  /* 前の要素と横並びする */
    width: auto;    /* 幅の残りすべてを使う */
    vertical-align: middle; /* (隣接要素と)上下中央揃え */
    text-align: right;  /* 右寄せ */
}
.site_search__button {
    display: none;  /* 初期状態は非表示 */
}
/* グローバルナビ */
.global_navi {
    width: 100%;    /* 幅いっぱい使う */
    text-align: right;  /* 右寄せ */
}
.global_navi__button {
    display: none;  /* 初期状態は非表示 */
}
.global_navi__list {
    display: block; /* 初期状態は表示（ulはblock要素） */
    list-style-type: none;   /* リストアイテムの先頭の「・」を消す */
    margin: 0px;   /* ブラウザデフォルトのmargin(1em 0px 1em 0px)をリセット */
    padding: 0px;   /* ブラウザデフォルトのpadding(0px 0px 0px 40px)をリセット */
}
.global_navi__list li {
    display: inline-block;  /* リスト表示ではなく、横並びで表示 */
    margin-left: 10px;  /* アイテム間に余白を設定 */
}
/* ローカルナビ（トピックパス、最終更新） */
.local_navi_container {
    display: table; /* テーブル形式表示 */
    width: 100%;    /* 幅いっぱい使う */
    background : rgb(255, 153, 0);
}
.topic_path {
    display: table-cell; /* テーブルセル形式表示 */
    vertical-align: middle; /* 上下中央揃え */
}
.last_modified {
    display: table-cell; /* テーブルセル形式表示 */
    width: 150px;    /* 幅の残りすべてを使う */
    text-align: right;
}

/* メイン領域の２カラムレイアウト（広告枠、メイン枠） */
.main_container {
    display: flex; /* 子要素をflex配置とする */
    flex-direction: row; /* 子要素のflex配置の方向は行方向（横方向） */
}

/* 広告枠 */
.advertisement {
    order: 2;   /*flexの表示順*/
    width: 220px;
    text-align: center; /* 左右中央表示 */
}
/* 広告枠内の設定 */
.ad_google_RightSquare {
    margin-top: 10px;
    margin-bottom: 10px;
}
.ad_rakuten_horizontal {
    display: none;  /* 横広告は初期状態は非表示 */
}
.ad_amazon {
    border: 1px solid lightgray; /* 境界線を指定 */
    margin: 10px;   /* 外余白の指定 */
    line-height:0;  /* セル内の画像の下部分にできる余白の除去。*/
}
.ad_amazon_item {
    border: 1px solid lightgray; /* 境界線を指定 */
    padding: 10px;  /* 内余白の指定（外余白はなしで隣接するアイテムと境界線がくっつく。境界線共有はしない） */
}
.ad_amazon_item > a > img {
    width: 100%;    /* アイテムの画像は等倍表示 */
}
.ad_amazon_logo {
    border: 1px solid lightgray; /* 境界線を指定 */
    text-align: center; /* 画像を左右中央に表示 */
    padding: 10px;   /* 内余白の指定 */
}

/* メイン枠 */
.main {
    order: 1;   /*flexの表示順*/
    flex: 1; /* 「display:flex」を指定した親要素のflex-directionの残り全部を使う */
}
/* 左マージン値の一括指定 */
.main p,     /* 段落 */
.main > ul,  /* 番号なしリスト（注：<ul>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
.main > ol,  /* 番号付きリスト（注：<ol>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
.main > dl,  /* 説明付きリスト（注：<dl>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
.main table, /* テーブル（注：<table>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
.commentcolumn_comment,     /* コメント欄のコメント */
.commentcolumn_author,      /* コメント欄のコメント投稿者と投稿日時 */
.commentcolumn_form form,   /* コメント欄の投稿フォーム */
.ad_google_BttmBigrect,
#mailform form {            /* メールフォームの投稿フォーム */
    margin-left: 60px;
}
/* 左マージン値（テーブルセル内での左マージン） */
.main td ul,     /* データセル内の番号なしリスト */
.main td ol,     /* データセル内の番号付きリスト */
.main td dl {    /* データセル内の説明付きリスト */
    margin-left: 0px;
}
/* 見出し要素の装飾 */
.main h1 {
    text-align: left;
    border-width: 3px 12px;
    border-style: solid;
    border-color: rgb(0, 0, 153);
    padding-left: 12px;
}
.main h2 {
    margin-left: 12px;
    border-left-width: 12px;
    border-left-style: solid;
    border-left-color: rgb(0, 0, 153);
    padding-left: 12px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgb(0, 0, 153);
}
.main h3 {
    padding-left: 10px;
    margin-left: 24px;
    border-left-width: 12px;
    border-left-style: solid;
    border-left-color: rgb(0, 0, 153);
}
/* メイン枠その他 */
.main textarea { /* （注：<textarea>要素は、inline要素なので、<p>要素に入れられる。なので、margin-leftを指定しない）*/
    width: 100%;    /* 幅いっぱい使う */
}
.main table {
    border-collapse: collapse;  /* 隣接するセルで境界線を共有 */
    empty-cells: show;  /* 表の空のセルの表示 */
}
.main th,    /* 見出しセル */
.main td {   /* データセル */
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-top-color: rgb(0, 0, 153);
    border-left-color: rgb(0, 0, 153);
    border-right-color: rgb(0, 0, 153);
    border-bottom-color: rgb(0, 0, 153);
}
.main th {
    background-color: rgb(102, 153, 255);   /* 見出しセルは背景水色 */
}
/* 下方のgoogle広告欄 */
.ad_google_BttmBigrect {
    /* margin-leftは、一括指定箇所で指定 */
    margin-top: 10px;
    margin-bottom: 10px;
}
/* コメント欄 */
.commentcolumn {    /* コメント欄の外枠 */
    border-width: 1px;
    border-style: dotted;
    border-color: rgb(255, 153, 0);
}
.commentcolumn_label {  /* コメント欄のキャプション欄（「コメント」と「コメントを投稿する」） */
    background-color: rgb(255, 153, 0);
}
.commentcolumn_comment {    /* コメント欄の１件のコメント */
    /* margin-leftは、一括指定箇所で指定 */
    margin-top: 10px;
    margin-right: 10px;
}
.commentcolumn_author { /* コメント欄のコメント投稿者と投稿日時 */
    /* margin-leftは、一括指定箇所で指定 */
    margin-right: 10px;
    margin-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: rgb(255, 153, 0);
}
.commentcolumn_form form {  /* コメント欄の投稿フォーム */
    /* margin-leftは、一括指定箇所で指定 */
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* フッター領域 */
/* Aboutナビゲーション */
.about_navi {
    width: 100%;    /* 幅いっぱい使う */
    text-align: right;  /* 右寄せ */
}
.about_navi__list {
    list-style-type: none;   /* リストアイテムの先頭の「・」を消す */
    margin: 0px;   /* ブラウザデフォルトのmargin(1em 0px 1em 0px)をリセット */
    padding: 0px;   /* ブラウザデフォルトのpadding(0px 0px 0px 40px)をリセット */
}
.about_navi__list li {
    display: inline-block;  /* リスト表示ではなく、横並びで表示 */
    margin-left: 10px;  /* アイテム間に余白を設定 */
}
/* コピーライト */
.copy_right {
    width: 100%;    /* 幅いっぱい使う */
    text-align: center;  /* 左右中央表示 */
}

/* スマホ対応 */
/* （768x1024のタブレットは、スマホではなくPCとして表示されるように、max-widthに767を指定） */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }

    /* サイトロゴ画像 */
    .site_logo > a > img {
        zoom: 0.8;
    }

    /* ヘッダーボタン */
    .site_search__button, .global_navi__button {
        display: inline-block;  /* 初期状態は表示（buttonは、inline-block要素） */
        line-height:0;  /* ボタン内の画像の下部分にできる余白の除去。*/
        vertical-align: bottom; /* 親要素に対して下部分にできる余白の除去 */
        cursor: pointer;    /* マウスオーバーで指マークになるようにする */
        padding: 0px;   /* ブラウザデフォルトをリセット */
        border: none;   /* ブラウザデフォルトをリセット */
    }

    /* サイト内検索 */
    .site_search {
        /* 絶対値指定で、ページ右上に表示 */
        display: block;
        position: absolute;
        top: 16px;
        right: 48px;
        z-index: 2; /* 検索divは、ナビdivより上に表示。ナビボタンを押下した際に、ナビdivにより検索ボタンが押せなくなることの対策。 */
        text-align: right;  /* 表示要素を右寄せで表示 */
    }
    /* グローバルナビ */
    .global_navi {
        /* 絶対値指定で、ページ右上に表示 */
        display: block;
        position: absolute;
        top: 16px;
        right: 8px;
        z-index: 1; /* 検索divは、ナビdivより上に表示。ナビボタンを押下した際に、ナビdivにより検索ボタンが押せなくなることの対策。 */
        width: auto;    /* 「幅いっぱい使う」ではなく、幅は要素にフィット */
        text-align: right;  /* 表示要素を右寄せで表示 */
    }
    /* サイト内検索 */
    .site_search__form {
        display: none;  /* 初期状態は非表示 */
    }
    .site_search__form.open {
        display: block;  /* 「open」クラスが付与されているときは表示 */
        background: white;  /* 背景色指定しないと透けてしまう */
        border: 1px solid rgb(0, 0, 153);    /* 境界線あり */
        padding: 10px;  /* 内側の上下左右に余白 */
    }
    /* グローバルナビ */
    .global_navi__list {
        display: none;  /* 初期状態は非表示 */
    }
    .global_navi__list.open {
        display: block; /* 「open」クラスが付与されているときは表示 */
        background: white;  /* 背景色指定しないと透けてしまう */
        border: 1px solid rgb(0, 0, 153);    /* 境界線あり */
        padding: 10px;  /* 内側の上下左右に余白 */
    }
    .global_navi__list li {
        display: list-item; /* リスト表示（横並び表示ではなく） */
        text-align: start; /* 左寄せ表示 */
        margin: 10px;  /* アイテムの上下左右に余白 */
    }

    /* メイン領域の２カラムレイアウト（広告枠、メイン枠） */
    .main_container {
        flex-direction: column; /* 子要素のflex配置の方向は列方向（縦方向） */
    }
    /* 広告枠 */
    .advertisement {
        width: 100%;    /* 幅いっぱい使う */
        order: 1;   /*flexの表示順*/
    }
    /* メイン枠 */
    .main {
        width: 100%;    /* 幅いっぱい使う */
        order: 2;   /*flexの表示順*/
        flex: initial; /* デフォルト値に戻す */
    }
    .ad_rakuten_vertical {
        display: none;  /* 縦広告非表示 */
    }
    .ad_rakuten_horizontal {
        display: block;  /* 横広告表示 */
    }
    .ad_amazon {
        display: table; /* アイテムを横に並べる */
    }
    .ad_amazon_item {
        display: table-cell;    /* 横に並べる */
        padding: 0px;   /* 内余白はなし */
    }
    .ad_amazon_logo {
        padding: 0px;   /* 内余白はなし */
    }

    /* 左マージン値の一括指定 */
    .main p,     /* 段落 */
    .main > ul,  /* 番号なしリスト（注：<ul>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
    .main > ol,  /* 番号付きリスト（注：<ol>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
    .main > dl,  /* 説明付きリスト（注：<dl>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
    .main table, /* テーブル（注：<table>要素は、block要素なので、<p>要素に入れられない。なので、別途指定する） */
    .commentcolumn_comment,     /* コメント欄のコメント */
    .commentcolumn_author,      /* コメント欄のコメント投稿者と投稿日時 */
    .commentcolumn_form form,   /* コメント欄の投稿フォーム */
    .ad_google_BttmBigrect,
    #mailform form {            /* メールフォームの投稿フォーム */
        margin-left: 30px;
    }
}

/* 印刷対応 */
@media print {
    .advertisement { display: none; }   /* 広告枠は非表示 */
    .main { width: 100%; }   /* メイン枠は幅いっぱい使う */
    .ad_google_BttmBigrect{ display: none; }   /* メインコンテンツ内の広告は非表示 */
}