@charset "utf-8";

/*navボックスのスタイル設定*/
header nav {
    /*background-color: whitesmoke;背景色を設定*/
    background-color: white;/*背景色*/
    padding: 0px;/*内余白を15pxに設定*/
    margin: 0px;/*外余白を0pxに設定*/
}

/*ナビゲーションのulボックスのスタイル設定*/
header nav ul {
    margin: 0px auto;/*上下余白を0に設定しセンタリング*/
    padding: 0px;/*内余白を0に設定*/
    box-sizing: border-box;/*ボックスサイズをボーダー基準に設定*/
    width: 100%;/*ボックス幅を100%に設定*/
}

/*ナビゲーションのliボックスのスタイル設定*/
header nav li {
    list-style: none;/*liの装飾を無に設定（頭につく黒丸をなしにする。）*/
    background-color: white;/*背景色を設定*/
    text-align: center;/*中の文字列をセンタリング*/
    padding: 10px;/*内余白を10ｐｘに設定*/
    box-sizing: border-box;/*ボックスサイズをボーダー基準に設定*/
    float: left;/*フロートを左に設定。これでリストが横並びになる*/
}

/*メディアクエリで条件分岐させ、処理を変える。画面の横幅960px以上,480~960px,480px以下で処理を変える。*/
@media screen and (min-width:960px){/*PC画面サイズ*/
    header nav li {
        margin: 0px 2px;
        width: 16%;
    }
    .image-container img {/*画像の位置とサイズを指定*/
        /*画像の位置をしてい*/
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-45%, -45%);
        /*画像のサイズを指定*/
        max-width: 40%; /* 画像の最大幅を設定 */
        max-height: 40%; /* 画像の最大高さを設定 */
        object-fit: contain; /* 画像のアスペクト比を保つ */
        /*ダム水位レベルの表示の位置を指定*/
    }
    .container {/*水位パーセントのテキストの位置や大きさを決める。*/
    
        position: absolute;
        top: 150px;/*120*/
        left: 90px;
        font-size: 48px;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        /* フォントスタイルの追加 */
        font-weight: bold;
        font-family: "Times New Roman", serif;
        font-style: italic;
        text-decoration: underline;
        letter-spacing: 2px;
        color: #333; /* テキストの色 */
    }
    
}

@media screen and (min-width:480px) and (max-width:960px) {/*タブレット画面サイズ*/
    header nav li {
        margin: 0px 2px 2px;
        width: 49%;
    }

/*画像の位置とサイズを指定*/
    .image-container img {
        /*画像の位置をしてい*/
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*画像のサイズを指定*/
        max-width: 30%; /* 画像の最大幅を設定 */
        max-height: 30%; /* 画像の最大高さを設定 */
        object-fit: contain; /* 画像のアスペクト比を保つ */
    }
    
        /*ダム水位レベルの表示の位置を指定*/
    .container {/*水位パーセントのテキストの位置や大きさを決める。*/
    
        position: absolute;
        top: 220px;
        left: 90px;
        font-size: 48px;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        /* フォントスタイルの追加 */
        font-weight: bold;
        font-family: "Times New Roman", serif;
        font-style: italic;
        text-decoration: underline;
        letter-spacing: 2px;
        color: #333; /* テキストの色 */
    }
}

@media screen and (max-width:480px) {/*スマホ画面サイズ*/
    header nav li{
        margin: 0px 0px 2px;
        width: 100%
    }

    .image-container img {/*画像の位置とサイズを指定*/
        /*画像の位置をしてい*/
        position: absolute;
        top: 100%;
        left: 80%;
        transform: translate(-50%, -50%);
        /*画像のサイズを指定*/
        max-width: 30%; /* 画像の最大幅を設定 */
        max-height: 30%; /* 画像の最大高さを設定 */
        object-fit: contain; /* 画像のアスペクト比を保つ */
         
    }
    /*ダム水位レベルの表示の位置を指定*/
    .container {/*水位パーセントのテキストの位置や大きさを決める。*/
    
        position: absolute;
        top: 350px;
        left: 90px;
        font-size: 24px;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        /* フォントスタイルの追加 */
        font-weight: bold;
        font-family: "Times New Roman", serif;
        font-style: italic;
        text-decoration: underline;
        letter-spacing: 2px;
        color: #333; /* テキストの色 */
    }
}

/*liボックス内のリンクスタイル設定*/
header nav li a {
    color: black;/*文字色を白に設定*/
    text-decoration-line: none;/*リンクのアンダーライン装飾をなしに設定*/
}

/*main内のsectionボックスのスタイル設定*/
main section {
    background-color: white;/*背景色を設定*/
    /*padding: 15px;/*内余白を15pxに設定*/
}

/*section内のpボックスのスタイル設定*/
main section p {
   margin: 0px;/*外余白を0pxに設定*/
}

/*クリアフィックス*/
.clearfix::after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
}