@charset "UTF-8";       /* 文字化け防止 */

/* ================== 全体 ==================== */
html{
    font-size: 100%;    /* 文字サイズ */
}

/* ==================== body全体 ===================== */
body{
    width:1200px;       /* 全体の幅 */
    margin: auto;       /* 左右余白自動調整（中央揃え）*/
}

/* ==================== header ===================== */
/* サイト名 */
#topTitle{
    background-color:#ff15f5;
    font-weight:bolder;
    font-style:italic;
    padding-left:20px;
}

/* サブタイトル */
#subTitle{
    font-weight:bolder;
    font-size: large;
    padding-left:50px;
}

/* =============== Googleサーチと日付表示===================== */
/* Googleサーチと日付表示 */
#googleSearch{
    padding-left: 50px;
    display: flex;                      /* ﾚｲｱｳﾄ */
    justify-content: space-between;     /* 両端揃え */
}

/* 日付表示の文字設定 */
#dateView{
    font-weight:bolder;
    font-size: medium;
    color: red;
}

/* ========================== ナビ============================= */
/* ナビの表示設定 */
nav ul{
    overflow: hidden; 
    margin: 0 0 10px 0;
    padding: 0;
    border: 1px solid #000;
    line-height: 1.0;
    background-color: lightblue;
}

/* ナビを横に並べる */
nav li,nav a{
    display:block;
    color: black;
    font-weight: bold;

    float: left;
    border-right: 1px solid #000;
}

/* ナビの文字余白 */
nav a{
    padding:  15px 25px;
}


/* ========================= Main Page ========================== */
/* ﾒｲﾝﾍﾟｰｼﾞ全体のﾚｲｱｳﾄ */
#mainPage{
    display: flex;
}

/* 左カラム（サブコンテンツ） */
#sub{
    flex-basis: 250px;      /* 幅 */
    color: #000;
    background-color: rgb(145, 255, 0);

    font-size: medium;
    font-weight: bold;
    font-style: italic;
}

/* リンクマウスオーバー */
#sub a:hover{
    background: #6fd;
}

/* 中央カラム（メインコンテンツ） */
#mainTxt{
    flex:1;                 /* 左右カラムの余りは全部ここに使用 */
    color:#000;
    background-color: lightblue;
    font-size: medium;
    font-weight: bold;
    padding: 10px 10px 0 10px;
}

/* 右カラム（天気予報） */
#weatherNews{
    flex-basis: 150px;      /* 150pxがベスト */
    background-color: lightsalmon;
}




/* ========================= フッター ========================== */
footer{
    text-align: center;
    color: #fff;
    background: #bbb;
    clear: both;
}