@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

img { vertical-align: middle; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

li { list-style-type: none; }

/* base
	========================================================================== */
body { color: #000; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; font-size: 14px; background-color: #fff; }

*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a { -webkit-touch-callout: none; text-decoration: none; -webkit-tap-highlight-color: rgba(219, 232, 255, 0.5); }

select, input, label { -webkit-tap-highlight-color: rgba(219, 232, 255, 0.5); }

a, a:link, a:visited { color: #000; }

img { zoom: .5; }

/* partial
	========================================================================== */
/*[ header ]*/
.header { padding: 15px 10px; margin-bottom: -13%; }
.header img { width: 100%; }

/* [ footer ] */
.footer { height: auto; border-top: 1px solid #0c419a; padding: 10px; text-align: center; font-size: 10px; }
.footer small { display: block; }

/* top
	========================================================================== */
.howto-menu { font-size: 12px; line-height: 1; }
.howto-menu .column { float: left; width: 33.3%; height: 100px; text-align: center; }
.howto-menu .column:nth-child(3n) { width: 33.4%; }
.howto-menu .column a { display: block; height: 100px; padding-top: 15px; }
.howto-menu .column.line-two a { padding-top: 10px; }
.howto-menu .column.line-two svg { margin-bottom: -.5em; }
.howto-menu .icon { width: 50px; height: 50px; line-height: 50px; }
.howto-menu .icon-map { width: 45px; height: 45px; margin-bottom: -.25em !important; }

.top-menu { background-color: #48bdf7; }
.top-menu.howto-menu a { color: #fff; }

.wni-appli .list { display: block; padding: 10px; }
.wni-appli .list figcaption { margin-left: 100px; font-size: 12px; }
.wni-appli .list img { float: left; -webkit-border-radius: 25px; border-radius: 25px; margin-right: 20px; }
.wni-appli .list:nth-child(odd) { background-color: #dbf2fd; }
.wni-appli .list:nth-child(even) { background-color: #f3fbfe; }

.icon-allch, .icon-mych, .icon-mypage { fill: #fff; }

.icon-prep, .icon-rain, .icon-satellite, .icon-tsunami { fill: #4d9eff; }

.icon-map, .icon-10min, .icon-livecamera { fill: #99ccff; }

.icon-thunder, .icon-update { fill: #fccf00; }

.icon-iza, .icon-alerm { fill: #f8b534; }

.icon-alert { fill: #ff9d83; }

.icon-weather .path1 { fill: #ff8000; }
.icon-weather .path2 { fill: #ccc; }

.icon-chart .path1 { fill: #f00; }
.icon-chart .path2 { fill: #3ff; }
.icon-chart .path3 { fill: #f00; }
.icon-chart .path4 { fill: #fff; }
.icon-chart .path5 { fill: #fff; }

.icon-guerrilla { fill: #08fe09; }

.icon-earthquake { fill: #8b90f4; }

.icon-typhoon { fill: #bc73e6; }

.icon-gensai .path1 { fill: #17a83a; }
.icon-gensai .path2 { fill: #0583c9; }
.icon-gensai .path3 { fill: #f4a000; }
.icon-gensai .path4 { fill: #ea629f; }
.icon-gensai .path5 { fill: #17a83a; }

.icon-wni { fill: #0b419b; }