/* メインタイトル */
.ArticlesTitle{
    font-family: 'Arial', sans-serif;
    font-size: 2.5em; /* 大きさを調整 */
    font-weight: bold;
    color: #333; /* 落ち着いた色 */
    text-align: center; /* タイトルを中央寄せ */
    padding: 20px 0;
    margin: 0 0 20px;
    border-bottom: 2px solid #70a1ff; /* 下にラインを追加 */
}


/* 更新日 */
.UploadDate{
    text-align: right;
    color: #555;
    margin: 20px 0;
    padding-right: 10px;
    font-family: 'Segoe UI', sans-serif;
}

.UploadDate::before {
    content: "🕓更新日：";
    color: #888;
}


/* サブタイトル */
.ArticlesSubTitle{
    font-size: 1.8rem;
    color: #333;
    border-left: 6px solid #00aaff;
    padding-left: 1em;
    margin: 2em 0 1em;
    background-color: #f9f9f9;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}


/* H3のサブタイトル */
.ArticlesSubTitleH3{
    font-size: 1.5rem;
    color: #2c3e50;
    margin-left: 10px;
    font-weight: bold;
}


/* イメージ画像------------------------------------------------------------ */
.ArticlesImage{
    width: 100%;
    height: auto;
    border: 1px solid transparent; /* 境界線を透明に */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent; /* 背景を透明に */
}

.ArticlesImage img{
    object-fit: unset;
    width: 80%;
}
/* ------------------------------------------------------------イメージ画像 */


/* テーブルスタイル-------------------------------------------------------- */
.ArticlesTableData {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
    width: 100%;
}
.ArticlesTableData th {
    border: 1px solid #000;
    padding: 10px;
    text-align: left;
    background-color: #f2f2f2;
}
.ArticlesTableData td{
    border: 1px solid #000;
    padding: 10px;
    text-align: left;
}
/* --------------------------------------------------------テーブルスタイル */


/* ユーザーフォームの各コントロールの使い方リスト----------------------------- */
.UserFormList{
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
}
.UserFormList li{
    margin: 10px 0; /* リストアイテムに間隔を追加 */
    font-size: 18px; /* フォントサイズを大きく */
    padding: 10px 15px; /* 内側に余白を追加 */
    border-radius: 5px; /* 角を丸く */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影をつけて浮かせる */
    transition: background-color 0.3s ease; /* 背景色の変化にアニメーション */
}

.UserFormList li a{
    text-decoration: none; /* 下線を消す */
    font-weight: bold; /* 太字 */
}

.UserFormList li:hover{
    background-color: #e6f7ff; /* ホバー時の背景色 */
}

.UserFormList li a:hover {
    color: #007acc; /* リンクのホバー時の色 */
}
/* -----------------------------ユーザーフォームの各コントロールの使い方リスト */


/* コードコピー------------------------------------------------------------ */
.ArticlesCodeCopy{
    text-align: right;
    padding-right: 20px;
}

.ArticlesCodeCopy button{
    background-color: #4a90e2;         /* 青系の背景色 */
    color: white;                      /* 文字色 */
    border: none;
    padding: 10px 16px;
    border-radius: 8px;                /* 角を丸く */
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s, transform 0.2s;
}

.ArticlesCodeCopy button:hover {
  background-color: #357ABD;         /* 少し濃い青に */
  transform: translateY(-2px);       /* 少し浮かせる */
}

.ArticlesCodeCopy button:active {
  transform: scale(0.98);            /* 押した感触 */
}


/* ------------------------------------------------------------コードコピー */


/* コード------------------------------------------------------------------ */
pre {
    background-color: #1e1e1e; /* 背景色を黒に */
    color: #dcdcdc; /* テキストカラーをライトグレーに */
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    overflow-x: auto; /* 横スクロールを可能に */
    margin-left: 20px;
    margin-right: 20px;
}

code {
    font-family: 'Courier New', monospace; /* 等幅フォントで表示 */
    font-size: 1.2em;
    line-height: 1.6;
    white-space: pre; /* インデントを保持 */
}

pre code {
    tab-size: 4; /* タブのサイズを設定してインデントを保持 */
}
/* ------------------------------------------------------------------コード */


/* --- スマホ用スタイル（画面幅767px以下） --- */
@media screen and (max-width: 767px) {

    /* メインタイトル */
    .ArticlesTitle{
        font-size: 1.8em; /* 大きさを調整 */
    }

    /* サブタイトル */
    .ArticlesSubTitle{
        font-size: 1.2rem;
    }

    /* H3のサブタイトル */
    .ArticlesSubTitleH3{
        font-size: 1.0rem;
    }

    .ArticlesCodeCopy button{
        font-size: 10px;
    }

    code{
        font-size: 0.7em;
    }

    .ArticlesImage img{
        width: 100%;
    }
}