/* 要素セレクタ */

html {
	height: 100%;
}

body { /* 900px以上の横解像度で */ 
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.2em;
	text-align: left;
	font-weight: normal;
	text-decoration: none;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color: black;
	background-color: rgba(251,251,245,1);
	background-image:none;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

h1 { /* コンテンツタイトル */
	color: navy;
	text-align: left;
	margin: 8px auto 16px 4px;
	font-size: 14pt;
	font-weight: bold;
}

h2 { /* コンテンツサブタイトル */
    text-align: left;
    font-size: 13pt;
    font-weight: bolder;
    margin: 8px auto 2px 4px;
}

h3 { /* コンテンツブイ名等系列名 */
    color: #500000;
    text-align: left;
    font-size: 12pt;
    margin: 8px auto 2px 4px;
    font-weight: bolder;
}

hr { /* 水平線 */
	color: gray;
	height: 1px;
	width: 90%;
}

img { /* 画像 */
	border: none;
	margin: 0;
	padding: 0;
}

p { /* 段落 */
	color: black;
}

a { /* リンク */
	color: blue;
	text-decoration: none;
}

	a:hover {
		color: #33f;
		background-color: rgba(255,255,255,0.3);
		text-decoration: underline;
	}

	a:active {
		color: #ea33ff;
		text-decoration: underline;
	}

ul, ol {
	list-style-position: outside;
	margin: 0;
	padding: 0;
}

li {
	float: left;
	margin: 0;
	padding: 0;
}

table { /* 表 */
    width: 98%;
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
    float: none;
    border: 1px solid #C0C0C0;
    text-align: right;
}

th { /* 表タイトル行 */
    text-align: center;
    color: white;
    border: 1px solid #C0C0C0;
    border-collapse: collapse;
    background-color: #000080;
    font-weight: normal;
}

td { /* 表のセル */
    text-decoration: none;
    text-align: right;
    border: 1px solid #C0C0C0;
    border-collapse: collapse;
    padding: 3px;
}
tr:nth-child(2n+1) {
    background: #f0fcfc;
}


	dl dt { /* タイトル行 */
		margin-bottom: 2px;
		font-weight: bold;
	}

	dl dd { /* 内容の行 */
		margin-bottom: 8px;
	}

div { /* (空間) */
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 0;
    float:none;
}

select {
    font-size:12pt;
    line-height:14pt;
}
input {
    font-size: 12pt;
    line-height: 14pt;
}

/* ↑ここまでは一通り更新済み */


/* 個別IDセレクタ */
#wrapper { /* ★up★ */
	min-height: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	max-width: 960px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.wrapper2 { /* ラッパーの内部の余白調整用 スマホでは余白ゼロ */
    width: 96%;
    height: auto;
    text-align: left;
    margin: auto;
}


/* 個別クラスセレクタ */
/* ページ共通 */
.float_clr_sp { /* スマホ用フロート解除 */ /* ★up★ */
    display: none;
}

.br_sp { /* スマホ用改行 */ /* ★up★ */
    display: none;
}

.float_clr { /* PC用フロート解除 */ /* ★up★ */
    float: none;
    clear: both;
}

.new_data { /* 最新データのフロート用DIV　他項目ブイは１ブイ、水温ブイは2ブイ含む */ /* ★up★ */
    width: 31%;
    min-width: 300px;
    margin: 4px 4px 12px 4px;
    float: left;
    height: 240px;
}
.new_data_half { /* ★up★ 2ブイ用分割DIV */
    width: 46%;
    margin: 0 1%;
    float: left;
}
#footer { /* ページ最下部のクレジット */
    width: 100%;
    background-color: #aebadc;
    color: aliceblue;
    text-align: center;
    font-size: small;
}

.robo_height{
    height:340px;
}

.map_img {
    width:100%;
    max-width:320px;
    height:auto;
}

.half_con {
    float: left;
    height:auto;
    text-align: center;
    width: 49%;
    margin: 0;
    padding: 0;
    min-width: 320px;
}

.description {
	float: left;
	max-width: 560px;
    width:auto;
	text-align: left;
	margin: 12px;
	font-size: 11pt;
}

.link_banner {
	float: left;
	text-align: center;
	min-width: 320px;
	width:90%;
    max-width:640px;
    margin: 4px 5%;
}
.link_banner div{
    float:left;
    width:46%;
    padding:2%;
    margin:0;
}


.swt_data {
	width: 98%;
	text-align: left;
}

.hour_g_div { /* ★up★ */
    max-width: 632px;
    padding: 6px;
    text-align: left;
}

.hour_g_img { /* ★up★ */
    width: 100%;
    max-width:612px;
}

.day_g_div { /* ★up★ */
    float: left;
    width: 31%;
    margin:0 1%;
    text-align: center;
    min-width: 295px;
    margin-bottom: 16px;
}

.day_g_img { /* ★up★ */
    min-width: 295px;
}

.intro_img {
	border: 3px;
}

.hj_top {
	width: 760px;
}

.new_data_map {
	padding: 0;
    width:100%;
    max-width:360px;
}

#wave_con{
	width:100%;
	max-width:620px;
	margin:4px auto;
}

/* データ表 */
table.d_table tr td:nth-of-type(1) {
    text-align: right;
    background-color: #ffffcc;
    color: brown;
    font-weight: normal;
}

td.y_dt {
    text-align: right;
    background-color: #ffffcc;
    color: brown;
    font-weight: normal;
}

table.sim_table th {
	background-color: #008000;
}

table.etc_table th {
    background-color: #800000;
}

table.jam_table th {
    background-color: #700070;
}



.red_dt {
	color: white;
	background-color: #880000;
}

.top_data_title {
	color: #990000;
}


/* レスポンシブ対応の表構成 */
/* ★up★ */
.res_table{
    width:auto;
}
.res_table td,th{
    padding:2px 6px;
}

.res_left_title { /* 左項目列の表示/非表示 */
    display: none;
}
.res_float { /* ★up★ */
    float: left;
}

.w_table { /* 今日・明日の天気 */
    width: 50%;
    float: left;
    font-size: 11pt;
}
    .w_table td {
        background-color: white;
        text-align: center;
        padding: 2px 0;
    }
.w_table_w { /* 週間天気 */
    width: auto;
    float: left;
    font-size:11pt;
}

    .w_table_w td {
        background-color: white;
        max-width:96px;
        width:25%;
        text-align:center;
        padding:2px 0;
    }
.brown_ttl {
    color:darkred;
}
    .brown_ttl td {
        text-align: center;
    }
.blue_ttl {
    color:#4131dd;
}

    .blue_ttl td {
        text-align: center;
    }


/* トップアラート表示 */
#alert{
    float: none;
    width: 96%;
    text-align: left;
    margin: 6px auto;
    border: solid 1px Orange;
    padding: 1%;
    font-size: 12pt;
    font-weight: bold;
    color: #cc0000;
    background-color:none;
}


/* 気象警報注意報 */
.s1-warn {
	color: #FFFF33;
	float: left;
	background-color: #8b0090;
	width: 100px;
	padding-top: 2px;
	text-align: center;
	margin: 0 2px 2px 2px;
}

.s2-warn {
	color: #ffffff;
	float: left;
	background-color: #FF0000;
	width: 100px;
	padding-top: 2px;
	text-align: center;
	margin: 0 2px 2px 2px;
}

.s3-warn {
	color: #000000;
	float: left;
	background-color: #FFFF00;
	width: 100px;
	padding-top: 2px;
	text-align: center;
	margin: 0 2px 2px 2px;
}

/* 階級表現 */
.low3 {
    color: White;
    background-color: #2222ff;
}

.low2 {
    color: Black;
    background-color: #66bbff;
}

.low1 {
    color: Black;
    background-color: #bdfffd;
}

.normal {
    color: Black;
    background-color: #ffffff;
}

.high1 {
    color: Black;
    background-color: #ffddbb;
}

.high2 {
    color: Black;
    background-color: #ff9922;
}

.high3 {
    color: White;
    background-color: #ff2222;
}

.unknown {
    color: black;
    background-color: #777777;
}

/* Other Style */
.other_menu {
	color: #4444ff;
	background-color: #ccffee;
	text-decoration: none;
	border-spacing: 3px;
	text-align: center;
}

/* メインメニュー */
#title_bar { /* ★up★ */
    vertical-align: baseline;
    color: #ffffff;
    background-color: #2b00bb;
    background-image: url('../images/title_bg.png');
    background-repeat: repeat-x;
    text-align: left;
    font-size: 11pt;
    font-weight: normal;
}

#menu { /* ★up★ */
    width: 100%;
    height: auto;
    font-size: 12pt;
    font-weight: normal;
    padding: 1px 0;
    margin: 0;
    background-color: #aebadc;
    color: #ffffff;
}

    #menu ul { /* ★up★ */
        padding: 0;
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0;
        list-style-type: none;
    }

        #menu ul li { /* ★up★ */
            width: 120px;
            float: left;
        }
            #menu ul li a { /* ★up★ */
                padding: 6px 1%;
                display: block;
                margin: 2px 1%;
                border-radius: 6px;
                width: 90%;
                box-shadow: 0 0 0 1px #aaccff inset;
            }

li.menu1 a { /* ★up★ */
    border: 1px solid #051cd0;
    color: white;
    background-color: #2020c1;
    background: -webkit-gradient( linear, left top, left bottom, from(#15158d), to(#3a86ff));
    background: -webkit-linear-gradient( #15158d, #3a86ff);
    background: -o-linear-gradient( #15158d, #3a86ff);
    background: linear-gradient( #15158d, #3a86ff);
}

    li.menu1 a:hover { /* ★up★ */
        background-color: #7777fa;
        background: -webkit-gradient( linear, left top, left bottom, from(#2424ff), to(#5856ff));
        background: -webkit-linear-gradient( #2424ff, #5856ff);
        background: -o-linear-gradient( #2424ff, #5856ff);
        background: linear-gradient( #2424ff, #5856ff);
    }

li.menu2 a { /* ★up★ */
    border: 1px solid #930000;
    color: white;
    background-color: #930000;
    background: -webkit-gradient( linear, left top, left bottom, from(#550c0c), to(#e23232));
    background: -webkit-linear-gradient( #550c0c, #e23232);
    background: -o-linear-gradient( #550c0c, #e23232);
    background: linear-gradient( #550c0c, #e23232);
}

    li.menu2 a:hover { /* ★up★ */
        background-color: #dd4444;
        background: -webkit-gradient( linear, left top, left bottom, from(#bf1a3d), to(#c8104e));
        background: -webkit-linear-gradient( #bf1a3d, #c8104e);
        background: -o-linear-gradient( #bf1a3d, #c8104e);
        background: linear-gradient( #bf1a3d, #c8104e);
    }

/* サブメニュー */
.submenu { /* ★up★ */
    font-size: 12pt;
    background-color: transparent;
    height: 42px;
    width: auto;
}

    .submenu ul { /* ★up★ */
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .submenu ul li { /* ★up★ */
            width: 144px;
            float: left;
        }

            .submenu ul li a { /* ★up★ */
                width: 90%;
                padding: 6px 1%;
                margin: 2px 1%;
                display: block;
                margin: 4px;
                float: left;
                border-radius: 13px;
            }
                .submenu ul li a:hover { /* ★up★ */
                    border: 1px solid #ffe495;
                    background-color: #700000;
                    color: #ffe495;
                }
a.submenu1 { /* ★up★ */
    background-color: #dddddd;
    border: 1px solid #444444;
    color: #444444;
}
a.submenu2 { /* ★up★ */
    background-color: #ffcccc;
    border: 1px solid #aa0000;
    color: #aa0000;
}

/* フリーキャンバス */
.freecanvas { /* ★up★ */
    border: 1px solid #ccccFF;
    width: 96%;
    max-height: 360px;
    overflow: auto;
    background-color: #f0f0ff;
    margin:20px auto;
}

    .freecanvas p { /* ★up★ */
        font-size: larger;
        color: Maroon;
        font-weight: bold;
        text-align: left;
        margin: 1%;
    }

        .freecanvas p a { /* ★up★ */
            color: Maroon;
            text-decoration: underline;
        }

            .freecanvas p a:hover { /* ★up★ */
                text-decoration: none;
            }

    .freecanvas img { /* ★up★ */
        width: 48%;
        max-width:100%;
        min-width: 240px;
        height: auto;
        max-height: 300px;
        float: left;
        margin: 4px 1%;
    }
   
    .freecanvas div { /* ★up★ */
        font-size: 10pt;
        float: left;
        color: Black;
        text-align: left;
        line-height: 1.3em;
        width: 48%;
        min-width: 240px;
        vertical-align: top;
        margin: 4px 1%;
    }

.info_title { /* ★up★ */
    font-size: 12pt;
    border: solid 1px #ddeeff;
    font-weight:bold;
    padding: 4px;
    margin: 0 auto;
    width: 96%;
    height: 24px;
    color: #000055;
    background-color: #ddeeff;
    text-align: center;
}

#news { /* ★up★ */
    text-align: left;
    border: solid 1px #ddeeff;
    background-color: #fbfbfb;
    width: 96%;
    height: 180px;
    overflow: auto;
    padding: 4px;
    margin: 0 auto;
    font-size: 11pt;
}

/* その他 */
.topic {
	text-align: left;
	list-style-type: none;
}



.other_dd {
	font-size: 9pt;
	color: Black;
}

.wea_info dt { /* ★up★ */
    font-size: 11pt;
    font-weight: 500;
    color: #880000;
}

.wea_info dd { /* ★up★ */
    font-size: 9pt;
    color: Black;
}

.lineless_table { /* ★up★ 透明なテーブル(最終的には使わないかも)　*/
    margin: 0 auto;
    padding: 0;
    border-width: 2px;
    border-style: none;
    width: 98%;
    border-collapse: collapse;
}



.graph_img {
	width:auto;
}


@media screen and (max-width: 978px) {
	#menu ul li {
	width:12.5%;
	}
}


@media screen and (max-width: 840px) {
	#menu ul li {
		width: 20%;
	}
    #official{
        font-size:8pt;
    }
    .day_g_div{
        width:48%;
        margin:0 1%;
    }
    .new_data {
        width: 48%;
    }
    .d_table{
        width:100%;
        float:none;
    }

    /* レスポンシブ表 */
    .res_left_title { /* 左項目列の表示/非表示 */
        display: block;
    }

    .res_float { /* ★up★ */ /* 横並び解除 */
        float: none;
    }

}

@media screen and (max-width: 560px) {
	#menu ul li {
		width: 25%;
	}

	body {
		font-size: 100%;
	}
    .half_con {
        float: none;
        text-align: center;
        width: 98%;
        margin: 1%;
    }

	#menu ul li {
		width: 50%;
	}

	.float_clr_sp {
		clear: both;
		float: none;
	}

    .br_sp{
        display:inline;
    }

	.graph_img{
		width:98%;
		margin:0 auto;
		padding:0;
	}
    .day_g_div {
        width: 100%;
        margin:0;
    }
    .new_data {
        width: 98%;
    }
    .wrapper2{
        width:100%;
        height:auto;
    }

    .freecanvas img { /* ★up★ */
        width: 98%;
        min-width: initial;
        float: none;
    }

    .freecanvas div { /* ★up★ */
        float: none;
        width: 98%;
        min-width: initial;
    }


}

@media print {
    .wrap {
        overflow: visible; /*←属性値をvisibleにする*/
    }
}

@page {
    margin: 0mm 5mm;
    size: A4 portrait;
    //横の場合はlandscape
}