/* ===== 全体のスタイル ===== */
body {
    /* 使用するフォントを指定 */
    font-family:'Times New Roman', Times, serif  Arial, Helvetica, sans-serif, 'Meiryo UI','Segoe UI', Tahoma, Geneva, Verdana;
    /* 背景色を薄いグレーに設定 */
    background-color: #f5f7fa;
    /* テキストの色をダークグレーに設定 */
    color: #34495e;
    /* コンテンツを中央揃え */
    /*display: flex;
    justify-content: center;*/
    align-items: center;
    /* ビューポートの高さを100%に設定 */
    height: 100vh;
    /* 余白をゼロに設定 */
    margin:auto 0;
    width:100%;
}

.asciiart{
    font-family:Courier, 'Courier New';
    font-size:0.8rem;
    color:crimson;
    letter-spacing: -0.1rem;
    margin-left: 2rem;
    font-weight: 800;
    text-shadow: 1px 2px 3px red;
}

.topband{
    border-bottom: slategray 3px solid;
    background-color:lightslategray;
    /*white-space: nowrap;*/
    color:lavender;
    text-align:left;
    padding-top:0.3rem;
    padding-bottom:0.3rem;
    font-size: 0.8em;
}

#clock {
    background-color:lightslategray;
    color:lavender;
    text-align:right;
    padding-top:0.3rem;
    padding-bottom:0.3rem;
    padding-right:1rem;
    font-size: 0.5em;
    margin-top:2rem;
}

/* ===== コンテナのスタイル ===== */
.container {
    /* 背景色を白に設定 */
    background-color: #ffffff;
    /* 内側の余白を設定 */
    padding-top:2rem;
    padding-left:2rem;
    padding-bottom:3rem;
    padding-right:2rem;
    /* 角を丸くする */
    border-radius: 8px;
    /* 影を設定 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* 幅を100%に設定 */
    width: 80%;
    /* ボックスのサイズを境界ボックスに基づかせる */
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
}

.left_container {
    display: inline-block;
    width:50%;
    vertical-align: top;
    padding-top:1rem;
}

.right_container {
    display: inline-block;
    width:50%;
    vertical-align: top;
}

.left_container_detail {
    display: inline-block;
    width:30%;
    vertical-align: top;
}

.right_container_detail {
    display: inline-block;
    width:70%;
    vertical-align: top;
}

.pblock{
    height: 6rem;
    color:#2b2b2b;
    font-size: 1.2em;
    margin-left: 2rem;
    font-weight: 800;
}

.imgblock{
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
}

.titleimg{
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    margin-left: 3%;
}

.topimg{
    vertical-align: middle;
    margin-left:1rem;
}

.backtolist{
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.2em;
    font-weight: 800;
    color:royalblue;
}

.posteddate{
    color:slategrey;
    font-size: 0.8rem;
    text-align: right;
    padding-right: 1rem;
    margin-bottom: 0.5rem;
}

.category_title{
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.titleauthor{
    font-size: 1.2rem;
    font-weight: 800;
    color:dimgray;
    margin-bottom: 1rem;
}

.titlecontents{
    font-size: 1rem;
    font-weight: 300;
    color:#2b2b2b;
    margin-top: 1rem;
    margin-bottom:1rem;
    border:silver solid  1px;
    padding:0.4rem;
}

.titlepdf{
    font-size: 1.2rem;
    font-weight: 800;
    color:dimgray;
    margin-top: 1rem;  
    margin-bottom: 1rem;  
}

.titleimg{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.textgold{
    color:gold;
}

.listblock{
    margin-bottom: 0.8rem;
}

.list_date{
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 300;
    color:darkslateblue;
}

.list_title{
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    margin-left:1rem;
}

.list_author{
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 300;
    color:darkslateblue;
    font-style: italic;
    margin-left:1rem;
}

.list_category{
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    color:darkslateblue;
    font-style: italic;
}

.listitem{    
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    color:navy;
    margin-right:1rem;
}

.textbold{
    font-size: 1.2em;
    font-weight: 800;
    color:royalblue;
    margin-left: 1rem;
    margin-top: 1rem;
}

.textsmall{
    font-size: 0.9rem;
    font-weight: 400;
    color:dimgray;
    margin-left: 1rem;
    margin-top: 0.5rem;
}

.category_name{
    display: inline-block;
    width: 13rem;
    margin-bottom: 0.4rem;
}

.inlineblock{
    display: inline-block;
}

.helptext{
    display:block;
    font-size: 0.8em;
}

/* ===== 見出しのスタイル ===== */
h1 {
    /* テキストの色を青に設定 */
    color:#2b2b2b;
    /* テキストを中央揃え */
    text-align: center;
    /* フォントサイズを設定 */
    font-size: 2.2rem;
    /* 下に20pxの余白を設定 */
    margin-bottom: 0;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* 文字間のスペースを設定 */
    letter-spacing: 1px;
    background-color: navy;
    margin-top:0;    
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-left:1px solid steelblue;
    border-right:1px solid steelblue;
    border-top:1px solid black;
    border-bottom:2px solid steelblue;
}

/* ===== 見出しのスタイル ===== */
h2 {
    /* テキストの色を青に設定 */
    color:#2b2b2b;
    /* テキストを中央揃え */
    text-align:left;
    /* フォントサイズを設定 */
    font-size: 1.6rem;
    /* 下に20pxの余白を設定 */
    margin-bottom: 0;
    margin-top:0;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* 文字間のスペースを設定 */
    letter-spacing: 1px;
    text-shadow: 2px 3px 5px lightslategray;
}

img {
  max-width: 100%;
  height: auto; /* アスペクト比維持 */
}

/* ===== フォームのスタイル ===== */
form {
    /* フレックスボックスを使用して縦方向にアイテムを並べる */
    display: flex;
    flex-direction: column;
}

/* フォーム内の各パラグラフのスタイル */
form p {
    /* 下に20pxの余白を設定 */
    margin-bottom: 10px;
}

/* ラベルのスタイル */
form label {
    /* ブロック要素に設定 */
    display: block;
    /* 下に3pxの余白を設定 */
    margin-bottom: 3px;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* テキストの色をダークグレーに設定 */
    color: #34495e;
}

/* テキストとパスワード入力フィールドのスタイル */
form input[type="text"],
form input[type="password"] {
    width: 200px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 2px solid #ddd;
    /* ボックスのサイズを境界ボックスに基づかせる */
    box-sizing: border-box;
    color:navy;
}

label[for="id_username"] {
    display: block; /* ラベルをブロック要素にして改行 */
    margin-bottom: 5px; /* 入力欄との間隔を空ける */
    font-weight: 800; /* 太字に */
    color: #34495e; /* 文字色 */
}


form input[type="checkbox"] {
    margin-left: 2rem;
    display: inline-block;
}
label[for="picture-clear_id"] {
    margin-left: 0rem;
    display: inline-block;
    font-weight: 300;
    color:dimgray;
    font-size:0.9rem;
    text-shadow: 1px 1px 3px lightslategray;
}

label[for="pdf_file-clear_id"] {
    margin-left: 0rem;
    display: inline-block;
    font-weight: 300;
    color:dimgray;
    font-size:0.9rem;
    text-shadow: 1px 1px 3px lightslategray;
}

label[for="id_password"] {
    display: block; /* ラベルをブロック要素にして改行 */
    margin-bottom: 5px; /* 入力欄との間隔を空ける */
    font-weight: 800; /* 太字に */
    color: #34495e; /* 文字色 */
}

/* ボタンのスタイル */
form button {
    width: 10rem;
    /* ボタンの背景色を青に設定 */
    background-color: #3498db;
    /* テキストの色を白に設定 */
    color: #ffffff;
    /* 内側の余白を設定 */
    padding: 0.5rem 0.1rem;
    border-radius: 5px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid lightslategray;
    border-bottom: 2px solid lightslategray;

    /* マウスカーソルをポインタに設定 */
    cursor: pointer;
    /* フォントサイズを設定 */
    font-size: 16px;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* アニメーションを設定 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-right: auto;
    margin-left: auto;
    margin-top:1rem;
    margin-bottom:1rem;
}

/* ボタンにホバーした時のスタイル */
form button:hover {
    /* ホバー時の背景色を変更 */
    background-color: #2980b9;
    /* ホバー時の位置を少し上に */
    transform: translateY(-2px);
    /* 影を設定 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ボタンをクリックした時のスタイル */
form button:active {
    /* クリック時の位置を元に戻す */
    transform: translateY(0);
    /* 影を消す */
    box-shadow: none;
}

@media screen and (max-width : 768px) {


/* ===== コンテナのスタイル ===== */
.container {
    /* 背景色を白に設定 */
    background-color: #ffffff;
    /* 内側の余白を設定 */
    padding-top:2rem;
    padding-left:2rem;
    padding-bottom:3rem;
    padding-right:2rem;
    /* 角を丸くする */
    border-radius: 8px;
    /* 影を設定 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* 幅を100%に設定 */
    width: 100%;
    /* ボックスのサイズを境界ボックスに基づかせる */
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
}

.left_container {
    display: inline-block;
    width:100%;
    vertical-align: top;
    padding-top:1rem;
}

.right_container {
    display: none;
}

.left_container_detail {
    display:block;
    width:100%;
}

.right_container_detail {
    display: block;
    width:100%;
}


.topimg{
    display:none;
}

/* ===== 見出しのスタイル ===== */
h1 {
    /* テキストの色を青に設定 */
    color:#2b2b2b;
    /* テキストを中央揃え */
    text-align: center;
    /* フォントサイズを設定 */
    font-size: 1.5em;
    /* 下に20pxの余白を設定 */
    margin-bottom: 0;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* 文字間のスペースを設定 */
    letter-spacing: 1px;
    background-color: navy;
    margin-top:0;    
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-left:1px solid cyan;
    border-right:1px solid cyan;
    border-top:1px solid black;
    border-bottom:2px solid slategrey;
}

}