/* ヘッダー（大見出し）のスタイル設定 */
h1 {
    /* 文字色を#333（ダークグレー）に設定 */
    color: #333;
    /* テキストを中央寄せ */
    text-align: center;
    /* 上部のマージン（外側の余白）を50pxに設定 */
    margin-top: 50px;
}

/* 説明文 */
.description {
    text-align: center; /* 中央揃え */
    max-width: 800px; /* 最大幅を設定して改行をコントロール */
    margin: 0 auto; /* ブロック要素の中央寄せ */
}

.image-container {
    text-align: center; /* コンテナ全体を中央揃え */
    margin-top: 20px;
}

.image-container img {
    display: inline-block; /* 画像を横に並べる */
    margin: 0 10px; /* 画像間にスペースを追加 */
    width: 400px; /* 画像サイズ調整 */
    height: auto;
}

.card-scale {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    will-change: transform;
}
.card-scale:hover,
.card-scale:focus-within {
    transform: scale(1.1);          /* ← ここが拡大 */
    box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.12);
    background-color: rgba(255,255,255,.55); /* お好みで */
}

/*  ラベルのフォントサイズを20pxに設定 */
label {
    font-size: 20px;
}

.datasets {
    text-align:left;
}

/* ボタンのスタイル */
.button {
    /* 背景色を緑 */
    background-color: none;
    /* ボーダーなし */
    border: none;
    /* テキストの色を白 */
    color: #00CCCC;
    /* パディング
    padding: 10px 10px;
    /* テキストを中央寄せ */
    text-align: center;
    /* テキストの装飾なし */
    text-decoration: none;
    /* 文字サイズ */
    font-size: 14px;

    margin: 1px;
}

/* Add Chromボタンのスタイル */
a.button {
    /* 表示をブロック */
    display: block;
    /* 幅を200pxに設定 */
    width: 200px;
}

/* リストのスタイルを設定 */
.ul_list {
    /* リストスタイルなし */
    display: flex;
    border: 1px solid #C0C0C0;
    width: 200px;
    height: 20px;
}

/* div要素のスタイル */
.links {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* 間隔を空けるための余白 */
    text-decoration: none;
    color: black;
  }


/* 段落のフォントサイズを20pxに設定 */
p {
    font-size: 20px;
}

.text-input {
    /* 要素の全ての辺（上、右、下、左）に対して、内側に10pxに設定 */
    padding: 10px;
    /* 要素の幅を親要素の80%に設定 */
    width: 80%;
    /* 要素のボーダーの角を丸くするために使用 */
    border-radius: 5px;
    /* ボーダーを1pxのソリッド（実線）ライトグレー */
    border: 1px solid #ccc;
    /* 要素の全ての辺（上、右、下、左）に対して、内側に10pxに設定 */
    margin: 10px;
}