/*
CSS 優先順位
  セレクタ            強さ
  #id                 100
  .class	           10
  タグ （a,button 等）	 1
  ex： div .btn → 1 + 10 = 11
  ex： div .btn #login → 1 + 10 + 100 = 111 ←こっちが優先される
  同じ強さの時は、最後のやつが勝つ
*/

/*
全体設定
*/
header {
    margin-bottom: 50px;
}
body {
    color: white;
    background-color: black;
    font-size: 10px;
    text-align: center;
}
main {
    margin-bottom: 100px;
}

/*
大きな要素の中央寄せ
*/
.containerLayout_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px; /* ネクストスペース */
    
}

/*
横並び
*/
.contentsLayout_horizontal {
    display: flex;
    align-items: center;
    gap: 5px;
}

/*
縦並び
*/
.contentsLayout_vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.textAreaDesign_1 {
    width: 150px;
    height: 15px;
    border: 1px solid red;
}

.areaDesign_1 {
    width: 300px;
    height: auto;
    border: 2px solid white;
}


.btnDesign_1 {                     /* ボタンの基本クラス */
    display: flex;             /* ボタン内レイアウトを「flexbox」にする */
    justify-content: center;   /* flex（横方向）の中央寄せ */
    align-items: center;       /* flex（縦方向）の中央寄せ */
    width: auto;
    height: auto;
    padding: 2px 10px;                /* 高さ固定ならpaddingは0でもOK */
    box-sizing: border-box;    /* paddingを含めて幅計算 */
    border: 1px solid white; /* 境界線 */
    border-radius: 5px;        /* 軽く角を丸くする */
    background: black;       /* 背景色 */
    cursor: pointer;           /* ホバー時のポインター */
    color: white;            /* 文字色 */
    justify-content: center;   /* テキスト中央 */
    align-items: center;       /* テキスト中央 */
    transition: 0.2s;          /* ホバーアニメ用 */
}
.btnDesign_1:hover {               /* ボタンパターン０１のホバー時 */
    background: white;       /* 背景色 */
    color: black;            /* 文字色 */
}


/* 
グリッド２✕２
*/
.GrdPaturn_1 {
    display: grid;                     /* この要素をCSS Gridにする */
    grid-template-columns: 1fr 1fr;    /* 列2 */
    grid-template-rows: 1fr 1fr;       /* 行2 */
    gap: 5px;                          /* 行と列の間隔を5px */
    grid-template-areas: 
    "_view _reset"
    ". _top";
}
.GrdPaturn_1 ._view { grid-area: _view; }      /* view */
.GrdPaturn_1 ._reset { grid-area: _reset; }      /* reset */
.GrdPaturn_1 ._top { grid-area: _top; }      /* top */
/* 
マージンセット
*/
.marginSet_1 {
    margin-bottom: 30px;
}