@charset "utf-8";
/* ************************************************** */
/* Nature Record */
/* ************************************************** */
/* reset style */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* -------------------------------------------------- */
body {
	font-size: 14px;
	line-height: 2;
	color: #333;
	font-family: YuGothic, 'Yu Gothic', 'Yu Gothic UI', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
	/* for footer bottom line */
	display: flex;
	flex-direction: column;
	height: 100%;
	/*background-color: transparent;*/
}
p { margin-bottom: 1em; }
a:link, a:visited { text-decoration: underline; color: #3399cc; }
a:hover, a:active { text-decoration: none; color: orange; }
/* ---------- */
table { width: 100%; }
th { text-align: left; }
td { vertical-align: middle; word-break: break-all; }
td.center { text-align: center; }
td img { display: inline-block; vertical-align: middle; }
/* ---------- */
img.responsive { display: block; max-width: 100%; height: auto; margin: 0 auto; }
img.btn:hover,
img.btn:active { opacity: 0.7; cursor: pointer; }
/* ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select,
button,
input[type="submit"] {
	border-radius: 0;
	box-sizing: border-box;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
/* ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 4px 8px;
	/*border: solid 1px #ccc;*/
	border: solid 1px #3399cc;
	border-radius: 2px;
	background-color: transparent;
    font-size: 14px;
}
/* ---------- */
input[type="checkbox"] { vertical-align: middle; }
/* ---------- */
.ui-dialog-buttonset .ui-button,
button,
input[type="submit"],
input[type="button"] {
	padding: 3px 12px;
	border-radius: 20px;
	outline: 0;
	border: none;
	background: dodgerblue;
	color: #fff;
	cursor: pointer;
    font-size: 14px;
}
.app button,
.app input[type="submit"],
.app input[type="button"] {
    font-size: 16px;
}
input[type="submit"]:hover,
input[type="submit"]:active { opacity: 0.6; cursor: pointer; }
/* for iOS */
input[type="button"],
input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
}
/* ---------- */
::placeholder {
	color: #ccc;
}
/* ---------- */
.clearfix { display: block; }
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.nowrap { width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none; }
/* custom select */
.select-wrap { position: relative; display: inline-block; width: 100%; }
.select-wrap::after {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border: 0px;
	border-bottom: solid 2px #3399cc;
	border-right: solid 2px #3399cc;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: '';
}
.select-wrap select {
	position: relative;
	width: 100%;
	padding: 8px 40px 8px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid #3399cc;
	border-radius: 2px;
	z-index: 1;
}
select::-ms-expand { display: none; }
#show-dialog { display: none; }
.text-link { text-decoration: underline; color: #3399cc; cursor: pointer; }
.text-link:hover, .text-link:active { text-decoration: none; color: orange; }
/* ui dialog reset */
.ui-widget-header { background: none; background-color: #3399cc; color: #fff; }
.cms .ui-widget-header { background-color: #223a70; }
/* custom checkbox */
.checkbox {
	display: flex;
	padding: 4px 8px;
	align-items: center;
	cursor: pointer;
}
.checkbox-inp { width: 0; margin: 0; opacity: 0; }
.checkbox-inp:checked+.checkbox-dmy {
	background-color: dodgerblue; border: solid 1px dodgerblue;
}
.checkbox-inp:checked+.checkbox-dmy::before {
	display: block;
	position: absolute;
	top: 30%;
	left: 60%;
	width: 40%;
	height: 3px;
	background-color: #fff;
	transform: translate(-6px, 5px) rotateZ(-135deg);
	transform-origin: 2px 2px;
	content: "";
}
.checkbox-inp:checked+.checkbox-dmy::after {
	display: block;
	position: absolute;
	top: 30%;
	left: 60%;
	width: 60%;
	height: 3px;
	background-color: #fff;
	transform: translate(-5px, 6px) rotateZ(-45deg);
	transform-origin: 2px 2px;
	content: "";
}
.checkbox-dmy {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #eee;
	border: solid 1px #ddd;
}
.checkbox-lbl { display: block; margin-left: 8px; }	
/* -------------------------------------------------- */
/*main { margin-top: 52px; }*/
.pc { display: block!important; }
.sp { display: none!important; }
.wrapper { width: 1024px; margin: 0 auto; }
.app .wrapper { margin: 20px auto; }
.inner { width: 100%; }
h1.page-title { padding: 0 8px; background-color: #3399cc; color: #fff; }
.top-navi { margin-bottom: 10px; text-align: right; }
.bottom-navi { margin-top: 30px; text-align: center; }
.top-navi span { display: inline-block; margin: 0 0 0 4px; }
.bottom-navi span { display: inline-block; margin: 0 2px; }
.scroll-navi { text-align: right; /*font-size: 90%;*/ }
.scroll-navi span { margin-right: 0; }
.scroll-navi.top { margin: 100px 0 10px; }
.scroll-navi.bottom { margin-top: 20px; }
.g-recaptcha { width: 300px; margin-right: auto; margin-left: auto; text-align: center;}
form.edit .title { margin-top: 10px; color: #3399cc; }
form.edit .err { color: red; }
form.edit .notes { margin-top: 6px; font-size: 90%; color: #3399cc; line-height: 1.6; }
form.edit .no-input { padding: 4px 8px; background-color: #eaf4ff; }
.contents .logo { text-align: center; }
.contents .logo img { width: 100px; border-radius: 20px; }
.result-msg { margin: 20px 0; }
tr.row:hover, tr.row:active { cursor: pointer; background-color: antiquewhite; }
/* img upload button */
.btn-upload input { display: none; }
.btn-upload label {
	padding: 6px 12px;
	background-color: dodgerblue;
	color: #fff;
	border: none;
	border-radius: 20px;
	font-size: 12px;
}
.app .btn-upload label {
	font-size: 14px;
}
.btn-upload label:hover,
.btn-upload label:active { opacity: 0.6; cursor: pointer; }
.btn-upload span { display: inline-block; margin-left: 10px; }
.remove-img-checkbox { display: block; }
/* page navi */
.page-navi table { width: auto; margin: 10px auto 0; text-align: center; border: none!important; }
.page-navi td { padding: 0 4px; border: none!important; }
.page-navi a:link, .page-navi a:visited { text-decoration: none; }
.page-navi button { width: 34px; padding: 0 0 2px 0; border-radius: 12px; font-size: 18px; }
/* profile icon */
img.profile-icon { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }
.ac-edit img.profile-icon { width: 48px; height: 48px; }
img.profile-icon.large { width: 64px; height: 64px; }
img.profile-icon.ex { border: solid 2px #3399cc; }
img.data-type-icon { width: 16px; height: 16px; }
/* data type icon */
/* toast */
.toast {
    position: fixed;
    bottom: 30px;
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    z-index: 1000;
}	
/* -------------------------------------------------- */
/* header */
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	border-bottom: solid 1px #3399cc;
	z-index: 1000;
	line-height: 1.4;
}
header .wrapper { padding: 8px 8px 0; }
header .upper { margin-bottom: 8px; }
header .left { float: left; width: 70%; }
header .left .logo,
header .left .title { display: inline-block; }
header .left .logo { margin-right: 8px; }
header .left img { width: 140px; }
header .left .main { color: #3399cc; }
header .left .sub { font-size: 90%; }
header .right { float: left; width: 30%; }
header .bottom { margin-bottom: 8px; }
header .menu li { display: inline-block; margin-right: 4px; font-size: 90%; }
/* footer */
footer { margin: 10px 0 20px; padding-top: 10px; border-top: solid 1px #3399cc; text-align: center; }
footer .menu { font-size: 90%; }
footer .menu li { display: inline-block; margin: 0 4px; }
footer .logo img { width: 120px; }
footer .copyright { margin-top: -10px; }
/* humberger menu */
.btn-humberger { padding-top: 8px; padding-right: 16px; text-align: right; }
#btn-humberger {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 35px;
	border: solid 1px #3399cc;
}
#btn-humberger .close { background: transparent; }
#btn-humberger .close:before,
#btn-humberger .close:after { margin-top: 0; }
#btn-humberger .close:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#btn-humberger .close:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
#humberger-icon,
#humberger-icon:before,
#humberger-icon:after {
	display: block;
	position: absolute;
	width: 32px;
	height: 2px;
	background-color: #3399cc;
}
#humberger-icon { top: 45%; left: 10%; transition: .2s; }
#humberger-icon:before,
#humberger-icon:after { top: 50%; left: 0; transition: .3s; content: ''; }
#humberger-icon:before { margin-top: -6px; }
#humberger-icon:after { margin-top: 4px; }
#humberger-menu {
	display: none;
	float: none;
	width: 100%;
	position: absolute;
	top: 86px;
	left: 0;
	background-color: #3399cc;
    font-size: 120%;
	border-top: solid 1px #fff;
	z-index: 99;
}
#humberger-menu li { padding: 4px 0 4px 20px; border-bottom: solid 1px #fff; }
#humberger-menu li a { display: block; }
#humberger-menu li a:link, #humberger-menu li a:visited { text-decoration: none; color: #fff; }
#humberger-menu li a:hover, #humberger-menu li a:active { text-decoration: none; }
/* -------------------------------------------------- */
/* home */
.info-box { margin: 30px 0; }
.info-box .title { font-weight: bold; color: #3399cc; }
.info-box .left,
.info-box .right { float: left;  width: 44%; margin: 0 3%; }
.info-box .info td { border-bottom: solid 1px #ccc; padding: 8px 0; }
.info-box .info td.date { width: 100px; }
.info-box .goto-info { text-align: right; font-size: 90%; }
.app-info { text-align: center; line-height: 1.4;}
.app-info .name span { display: inline-block; margin-right: 4px; }
.app-info .name h1 { margin: 4px 0; color: #3399cc; font-size: 24px; font-weight: bold; }
.app-info .name h2 { color: #3399cc; font-size: 18px; }
.app-info .desc { font-size: 90%; }
.intro-top { margin-top: 20px; padding: 0 30px; color: #3399cc; font-size: 110%; }
.intro-top li { list-style: square; list-style-position: outside; }
.intro { margin-top: 10px; color: #fff; }
.intro .left { float: left; width: 26%; padding: 2%; }
.intro .left img { border-radius: 10px; }
.intro .right { float: left; width: 64%; padding: 3%; }
.intro .right .title .icon { float: left; width: 32px; }
.intro .right .title .text { float: left; margin-left: 10px; font-size: 140%; }
.intro .right ul { margin-top: 5px; font-size: 110%; }
.intro .right li { margin-left: 15px; list-style: disc; list-style-position: outside; }
.intro-news { background-color: #eaf4ff; color: #3399cc; }
.intro-note { background-color: #f8f4e6; color: #47885e; }
.intro-summary { background-color: #fef4f4; color: #c97586; }
.intro-pro { background-color: #ffe9a9; color: #d66a35  }
.intro-notes { margin-top: 20px; padding: 0 30px; font-size: 90%; }
.intro-notes .title { margin: 5px 0; font-weight: bold; font-size: 110%; }
.intro-notes ul { margin-bottom: 20px; margin-left: 20px; }
.intro-notes li { list-style-position: outside; }
.intro-notes .common li { list-style: circle; }
.intro-notes .notes li { list-style: decimal; }
.intro .bx-wrapper { margin-bottom: 0; box-shadow: none; border: none; background: transparent; }
.spec { margin: 10px 0; text-align: center; font-size: 140%; }
.in-page-navi { margin-top:10px;text-align:right; }
.sns { margin-bottom: 4px; }
.sns img { width: 64px; }
.sns .title { margin-top: 4px; color: #3399cc; font-size: 140%; }
.sns .text { font-size: 90%; }
#manual table {
	width: auto;
	margin: 20px auto;
	font-size: 110%;
	text-align: center;
}
#manual td { padding: 8px; border: solid 1px #ccc; }
/* news */
#obs-map { width: 100%; height: 500px; margin-top: 20px; z-index: 99; }
.map-navi { margin-top: 8px; text-align: right; }
.map-navi button { font-size: 14px; }
.search-navi input[type="text"],
.search-navi select { height: 38px; }
.search-navi .col { float: left; width: auto; height: 44px; }
.search-navi .col span { display: inline-block; margin-bottom: 4px; }
.search-navi .col .input { margin-right: 4px; }
.search-navi .navi { text-align: right; }
.obs-list th { text-align: center; border-top: solid 1px #3399cc; border-bottom: solid 1px #3399cc; }
.obs-list tr.row:nth-child(odd) { background-color: #eaf4ff; }
.obs-list tr.row:nth-child(odd):hover,
.obs-list tr.row:nth-child(odd):active { cursor: pointer; background-color: antiquewhite; }
.obs-list td { padding: 4px 2px; line-height: 1.5; }
.obs-list td.mmdd { width: 60px; text-align: center; }
.obs-list td.date { width: 90px; text-align: center; }
.obs-list table.sub td { padding: 2px; }
.obs-list table.sub td.icon { width: 46px; text-align: center; }
.obs-list .sub { font-size: 12px; }
/* statistics */
.statistics .obs-list tr:nth-child(odd) { background-color: #eaf4ff; }
.statistics .obs-list tr:nth-child(1) { background-color: transparent; }
/* observation */
h2.obs-title { margin-top: 20px; padding: 0 6px; background-color: skyblue; color: #fff; }
.obs-data table { margin: 10px 0; }
.obs-data th, .obs-data td { padding: 4px 10px; border: solid 1px #3399cc; }
.obs-data th { width: 70px; background-color: #3399cc; color: #fff; vertical-align: middle; border-bottom-color: #fff; }
.obs-data tr:last-child th { border-bottom-color: #3399cc; }
.obs-data td.msg { line-height: 1.5; }
.obs-data .user-icon { display: inline; margin-right: 8px; }
/* field note */
.fieldnote th, td { line-height: 1.4; }
.fieldnote .header th { width: 85px; }
.fieldnote .detail th { border-bottom-color: #3399cc; }
.fieldnote .detail td.spc-name { width: 200px; color: #3399cc; }
.fieldnote .detail span.title { color: #3399cc; }
/* sns responce list */
.sns-res-list .list { margin: 20px 0; border-top: solid 1px #ddd; }
.sns-res-list .list td { padding: 8px 4px; border-bottom: solid 1px #ddd; line-height: 1.6; }
.sns-res-list .list a:link, .sns-res-list .list a:visited { text-decoration: none; }
.sns-res-list .list a:hover, .sns-res-list .list a:active { cursor: pointer; }
.sns-res-list .list tr.row:hover,
.sns-res-list .list tr.row:active { background-color: transparent; }
/* user info */
.user-info .user { width: 300px; margin: 0 auto; }
.user-info .icon { text-align: center; }
.user-info .name { margin-top: 10px; text-align: center; color: #3399cc; }
.user-info .profile { margin-top: 10px; line-height: 1.6; }
.user-info .sns { width: 300px; margin: 20px auto 0; text-align: center }
.user-info .sns img { width: 24px; cursor: pointer; }
/* response */
.res span { display: inline-block; }
.res span.col { width: 60px; }
.res span.cnt { width: 10px; margin-left: 6px; font-size: 9px; }
.res img.icon { width: 16px; }
.res img.btn-icon { width: 20px; cursor: pointer; }
.res img.btn-icon.bookmark { width: 24px; }
.res img.btn-icon.edit { width: 20px; }
.res table { margin: 10px 0 20px; }
.res td { /*padding: 0;*/ border: none; }
.res .navi { width: auto; margin: 0 0 0 auto; }
.res .tree { width: 100%; background-color: #eaf4ff; border-radius: 8px; line-height: 1.5; }
/*.res .tree td { padding: 8px; }*/
.res .child { margin-top: 10px; border-top: solid 1px #fff; }
.res .child .tree { margin: 0; border: none; border-bottom: solid 1px #fff; }
/*.res .child .tree td { padding: 6px 4px; }*/
.res .tree td.icon { width: 50px; padding: 0; text-align: center; }
.res .tree td.meta { padding: 4px 0; font-size: 12px; color: #3399cc; }
.res .tree td.navi-edit { width: 50px; padding-right: 8px; text-align: right; }
.res .child td.navi-edit { padding-right: 4px;}
/*.res .tree td.body { padding: 0 8px 0 0; }*/
.res .tree td.reply { padding: 0 8px 8px; }
.res .navi-msg { margin: 10px 0 20px; text-align: right; }
.res .msg { line-height: 1.5; }
.res .edited { margin-top: 8px; text-align: right; font-size: 12px; color: orange; }
/* calendar */
.calendar .month { margin-top: 10px; }
.calendar .month h2.title { color: #3399cc; }
.calendar .contents th, .calendar .contents td { width: calc(90% / 7);  border: solid 1px #3399cc; }
.calendar .contents th { background-color: #3399cc; color: #fff; border-right-color: #fff; text-align: center; }
.calendar .contents th:last-child { border-right-color: #3399cc; }
.calendar .contents td { padding: 0 4px 4px;  vertical-align: top; }
.calendar .contents td.invalid { background-color: #bccddb; }
.calendar .contents td .d { font-weight: bold; color: #3399cc; text-align: right; }
.calendar .contents td .t { line-height: 1.4; font-size: 90%; }
.calendar .contents td .pref { color: dodgerblue; }
.calendar .contents td.today { background-color: #fac559; }
.calendar td.day:hover, .calendar td.day:active { cursor: pointer; background-color: antiquewhite; }
/* information */
.information .info-list { width: 96%; margin: 20px auto 0; padding-top: 30px; }
.app .information .info-list { margin: 0 auto; padding-top: 0; }
.information .info { margin-bottom: 30px; line-height: 1.6; }
.information .info .date,
.information .info h2.title { color: #3399cc; }
.information .info .body { padding: 10px 0; border-top: solid 1px #3399cc; border-bottom: solid 1px #3399cc; }
.information .info .body li { margin-left: 15px; list-style: disc; list-style-position: outside; }
.information .info .body img { width: 300px; box-shadow: 1px 1px 3px #999; }
.information .info .meta { margin-top: 4px; text-align: right; font-size: 80%; }
.information .info .meta span { display: inline-block; margin-left: 4px; }
.information .navi-cat { margin-top: 10px; text-align: right; }
/* about */
.about .contents { width: 96%; margin: 20px auto 0; }
.about .contents .desc { margin-top: 10px; }
.about .contents h2.title { margin-top: 20px; font-weight: bold; color: #3399cc; border-bottom: solid 1px #3399cc; }
.about .contents .body { margin-top: 10px; /*margin-left: 20px;*/ /*font-size: 13px;*/ }
.about .contents ul { margin-left: 20px; }
.about .contents p { text-indent: 1em; margin-bottom: 1em; }
.about ul.list1 { margin-bottom: 10px; margin-left: 30px; list-style: disc; list-style-position: outside; line-height: 1.6; font-weight: bold; }
.about ul.list2 { margin-left: 30px; list-style: circle; list-style-position: outside; line-height: 1.6; }
/* term of service */
/* privacy policy */
.terms .contents { width: 96%; margin: 20px auto 0; font-size: 13px; }
.terms p { text-indent: 1em; margin-bottom: 1em; }
.terms ul { margin: 10px; }
.terms li { list-style-position: outside; }
.terms li .title { font-weight: bold; font-size: 120%; }
.terms ul.list1 { margin-top: 10px; }
.terms ul.list1 li { margin-bottom: 10px; list-style-type: decimal; list-style-image: none; }
.terms ul.list2 li { margin-left: 20px; margin-bottom: 10px; list-style-type: lower-roman; list-style-image: none; }
.terms ul.list3 li { margin-left: 40px; margin-bottom: 10px; list-style-type: katakana-iroha; list-style-image: none; }
.terms .regulation { margin-top: 20px; text-align: right; }
/* contact */
.contact .contents { width: 80%; margin: 20px auto 0 }
.contact .bottom-navi { margin: 20px auto; text-align: center;}
/* login */
.login .contents { width: 360px; margin: 0 auto; }
.login .input-outer { margin-top: 10px; padding: 20px 20px 30px; background-color: #3399cc; border-radius: 8px; }
.login .input-outer .title { margin: 0; color: #fff; }
.login .input-outer input { background-color: #fff; border: none; }
/* account */
.account .profile { width: auto; margin: 0 auto 20px; }
.account .profile td { padding: 4px; border: none!important; }
.account .contents { width: 60%; margin: 20px auto; }
.account .ac-menu { margin-bottom: 20px; padding: 10px 20px; background-color: #eaf4ff; border-radius: 8px; }
.account .ac-menu td div { margin: 4px 0; padding: 8px; background-color: #3399cc; }
.account .ac-menu td.badge { width: 30px; text-align: center; color: red; }
.account .ac-menu .badge div { position: relative; }
.account .ac-menu .badge img { position: absolute; left: 0; width: 20px; }
.account .ac-menu a:link,
.account .ac-menu a:visited { text-decoration: none; color: #fff; }
.account .ac-menu a:hover,
.account .ac-menu a:active { opacity: 0.6; }
/* account edit */
.ac-edit .contents { width: 60%; margin: 20px auto; }
.ac-edit span.btn { display: inline-block; width: 100%; margin-top: 4px; text-align: right; }
.ac-edit span.btn button { font-size: 12px; }
.app .ac-edit span.btn button { font-size: 16px; }
.ac-edit span.btn-i { display: inline; margin-top: 0; margin-left: 10px; text-align: left; }
.ac-edit span.publish { font-size: 80%; }
/* group */
.group th, .group td { border: solid 1px #3399cc; }
.group th { background-color: #3399cc; color: #fff; border-right-color: #fff; text-align: center; }
.group th:last-child { border-right-color: #3399cc; }
.group td { padding: 4px; }
.group .sp td { padding: 8px; }
.group td.icon { text-align: center; }
.group td.icon img { /*width: 32px;*/ margin: 8px 0; }
.group td.desc { line-height: 1.5; }
.group .sp .desc { display: inline-block; margin: 8px 4px 0; padding: 4px; background-color: #eaf4ff; line-height: 1.5; }
.group-edit th { border-bottom: solid 1px #fff; vertical-align: middle; }
.group-edit th:last-child { border-bottom-color: #3399cc; }
.group-edit td { padding: 8px; }
.group-users .group { width: auto; margin: 0 auto 20px; }
.group-users .group td { border: none!important; }
.group-users td.icon { width: 50px; border-right: none; text-align: center; }
.group-users td.icon img { width: 32px; margin-right: 8px; }
.group-users td.name { border-left: none; line-height: 1.5; }
.group-users .invitation { background-color: dodgerblue; }
.group-users .cancel { background-color: #e83929; }
/* account group */
.ac-group .sp th { vertical-align: middle; border-bottom: solid 1px #fff; }
/* follow user list / follower list / block user list */
.ac-ff-list .list { margin: 20px 0; border-top: solid 1px #ddd; }
.ac-ff-list .list td { padding: 8px 4px; border-bottom: solid 1px #ddd; line-height: 1.6; }
.ac-ff-list .approval { background-color: dodgerblue; }
.ac-ff-list .list a:link, .ac-ff-list .list a:visited { text-decoration: none; }
.ac-ff-list .list a:hover, .ac-ff-list .list a:active { cursor: pointer; }
.ac-ff-list .list tr.row:hover,
.ac-ff-list .list tr.row:active { background-color: transparent; }
/* help */
.help ul.help-menu { width: 100%; margin-bottom: 20px; font-size: 110%; }
.help ul.help-menu li { width: 100%; padding: 3px 0; border-bottom: solid 1px #ccc; }
.help ul.help-menu li a { display: block; }
.help ul.help-menu a:link,
.help ul.help-menu a:visited { color: #3399cc; text-decoration: none; }
.help ul.list1, .help ul.list2,
.help ul.item-menu { margin-left: 30px; list-style-position: outside; line-height: 1.6; }
.help ul.list1, .help ul.item-menu { list-style: disc; }
.help ul.list2 { list-style: circle; }
.help .icon { text-align: center; }
.help .icon img { width: 48px; }
.help .sec-title {
	margin-top: 40px;
	padding: 2px 0 0 4px;
	border-top: solid 1px #3399cc;
	border-left: solid 8px #3399cc;
	color: #3399cc;
	font-weight: bold;
}
.help section { margin-bottom: 20px; }
.help .title { font-weight: bold; color: #3399cc; }
.help td.title { background-color: #3399cc; color: #fff; }
.help td.sub-title { font-weight: bold; color: #3399cc; border: solid 1px #3399cc; }
.help .text { padding: 10px; border: solid 1px #3399cc; }
.help .text p { text-indent: 1em; margin-bottom: 1em; }
.help table,
.help th,
.help td { border: solid 1px #3399cc; }
.help th { text-align: center; background-color: #eaf4ff; color: #3399cc; }
.help th.item-title { text-align: left; }
.help th,
.help td { padding: 2px 4px; vertical-align: middle; }
.help img.fig { width: 50%; max-width: 360px; margin: 20px auto; box-shadow: 2px 2px 5px #999; }
.help img.fig2 { width: 80%; max-width: 360px; margin: 8px auto; }
.help th.rq { width: 25px; font-size: 12px; }
.help td.rq { text-align: center; }
.help .item .name { font-weight: bold; color: #3399cc; }
/*.help .item .desc { }*/
.help .ref { font-size: 85%; /*color: royalblue;*/ }
.help .goto-item-menu,
.help table.csv-format { width: 98%; margin: 0 1% 10px; font-size:90%; }
.help .csv-format ul { margin-left: 15px; list-style: square; list-style-position: outside; line-height: 1.6; }
.goto-help { margin: 4px 0 10px; text-align: right; }
/* app guide */
/*.app-guide {}*/
.app-guide.app-update .title { color: #3399cc; }
.app-guide.app-update .body { color: #000; }
.app-guide.app-update .body li { margin-left: 15px; list-style: disc; list-style-position: outside; }
/* app funtion table */
.app-func-table table,
.app-func-table th,
.app-func-table td { border: solid 1px #3399cc; }
.app-func-table th,
.app-func-table td { padding: 2px 4px; text-align: center; }
.app-func-table th { background-color: #3399cc; color: #fff; }
.app-func-table td.left { text-align: left; }
.app-func-table td.right { text-align: right; }
.app-func-table .notes { line-height: 1.6; }
.app-func-table .notes.top { margin-bottom: 10px; }
.app-func-table .notes.bottom { margin-top: 10px; }
.app-func-table .notes .val { color: #3399cc; }
.app-func-table .red { color: red; }
/* purchase paid plan */
.purchase .contents { padding: 15px; }
.purchase .page-title { text-align: center; font-size: 120%; }
.purchase .page-title img { width: 64px; }
.purchase .page-title .main { background-color: #3399cc; color: #fff; }
.purchase .page-title .sub { margin-top: 10px; color: #3399cc; font-weight: bold; }
.purchase .desc { margin-top: 10px; font-size: 90%; line-height: 1.8; }
.purchase table { margin-top: 10px; }
.purchase td { padding: 4px; vertical-align: middle; /*border-bottom: solid 1px #3399cc;*/ }
.purchase td.icon img { width: 48px; margin: 4px; }
.purchase td.text { color: #3399cc; }
.purchase .notes { margin-top: 20px; }
.purchase .notes .title { margin-bottom: 4px; color: #3399cc; }
.purchase .notes ul { margin-left: 10px; list-style: disc; list-style-position: outside; line-height: 1.6; font-size: 85%; }
.purchase .notes li { margin-bottom: 8px; padding-bottom: 4px; border-bottom: solid 1px #ccc; }
.purchase .navi { text-align: center; }
.purchase .price { margin-top: 40px; color: #e83929; font-size: 120%; }
.purchase #btn-purchase { margin-top: 10px; font-size: 20px; }
.purchase #btn-restore { margin-top: 40px; background-color: #666; }
.purchase #btn-close { margin-top: 40px; }
/* app store */
.app-store { margin-bottom: 20px; }
.app-store table { width: 260px; margin: 0 auto; text-align: center; }
.app-store table,
.app-store td { border: none; line-height: 2; }
.app-store .ver { font-size: 90%; }
/* tips */
.tips .tips-tag { padding-top: 2px; border-top: solid 1px #3399cc; }
.tips .tips-tag span { display: inline-block; vertical-align: middle; }
.tips .tips-tag .icon { margin-right: 4px; padding-top: 6px; }
.tips .tips-tag img { width: 20px; }
.tips ul.tips-list { margin-left: 20px; }
.tips-detail .goto-tips { margin-top: 8px; text-align: right; }
.tips-detail .body { margin-top: 16px; line-height: 1.6; }
.tips-detail .body .sec { margin-bottom: 20px; }
.tips-detail .body .sec .title {
	margin-bottom: 16px;
	padding-top: 2px;
	padding-left: 8px;
	color: #3399cc;
	border-top: solid 1px #3399cc;
	border-left: solid 8px #3399cc;
}
.tips-detail .body .left,
.tips-detail .body .right { float: left; width: 50%; }
.tips-detail .body table { margin: 16px 0; }
.tips-detail .body table.cols1 { width: 300px; }
.tips-detail .body table.cols1w,
.tips-detail .body table.cols2 { width: 600px; }
.tips-detail .body td { padding: 8px; border: solid 1px #ddd; text-align: center; }
.tips-detail .body td.cap { text-align: center; font-size: 90%; }
.tips-detail .body img { width: 100%; box-shadow: #555 1px 1px 5px; }
.tips-detail.app-guide .body img { box-shadow: none; }
.tips-detail .body .img { text-align: center; }
.tips-detail .body .img img { width: 70%; }
.tips-detail .body li { margin-left: 20px; list-style: disc; list-style-position: outside; }
.tips-detail .body ul.none li { list-style: none; }
.tips-detail .body ul.dot li { list-style: circle; }
.tips-detail .body ul.num li { list-style: decimal; }
.tips-detail .body ul.abc li { list-style: upper-latin; }
/*.tips-detail .meta { margin-top: 16px; padding-top: 4px; border-top: solid 1px #3399cc; }
.tips-detail .meta span.tag {
	display: inline-block;
	margin-left: 4px;
	background-color: #3399cc;
	color: #fff;
	line-height: 1;
    padding: 4px 8px;
    border-radius: 12px;	
}
.tips-detail .meta span.tag.note { background-color: #aacf53; }
html.dark .tips-detail .meta span.tag.note { background-color: #47885e; }
.tips-detail .meta span.tag.summary { background-color: #eebbcb; }
html.dark .tips-detail .meta span.tag.summary { background-color: #c97586; }*/
/* -------------------------------------------------- */
/* dark mode */
html.dark, body.dark { background-color: #000; color: #fff; }
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark textarea,
html.dark select { background-color: #000; color: #efefef; }
html.dark ::placeholder { color: #444; }
html.dark .ui-widget-content { background-color: #000; color: #efefef; }
html.dark .ui-dialog .ui-dialog-buttonpane { background-color: #000; }
html.dark .account .ac-menu { background-color: #222; color: #efefef; }
html.dark form.edit .no-input { background-color: #222; color: #efefef; }
html.dark .group th { border-right: none; }
html.dark .group tr:last-child th { border-bottom-color: #3399cc; }
html.dark .res .tree { background-color: #222; color: #efefef; }
/* ui dialog */
html.dark .ui-widget-header,
html.dark .ui-widget.ui-widget-content { border: none; }
html.dark .ui-widget-content { border-color: #333; }
/* observation */
html.dark .obs-list tr.row:nth-child(odd) { background-color: #222; }
html.dark .obs-data th, html.dark .obs-data td { border-color: #fff; }
html.dark .obs-data th { background-color: transparent; }
html.dark .obs-data tr:last-child th { border-bottom-color: #fff; }
html.dark .res .tree td.meta { color: #fff; }
/* field note */
html.dark .fieldnote .detail span.title { color: #fff; }
/* group */
html.dark .group th { background-color: transparent; color: #3399cc; }
html.dark .group th,
html.dark .group td { border: solid 1px #3399cc; }
/*html.dark .group tr:last-child th { border-bottom-color: #fff; }*/
html.dark .group .sp .desc { color: #333; }
/* help */
html.dark .help th,
html.dark .help td { border: solid 1px #3399cc; }
html.dark .help th { background-color: #000; color: #3399cc; }
/* -------------------------------------------------- */
/* popup mode */
html.popup, body.popup { background-color: #f8f4e6; }
html.dark.popup, body.dark.popup { color: #fff; }
body.popup img { width: 100%; }
/* ================================================== */
/* CMS */
/* ================================================== */
/* header */
header.cms {
	position: fixed;
	width: 98%;
	padding: 10px 1%;
	background-color: #223a70;
	border: none;
	color: #fff;
	z-index: 99;
}
header.cms .left,
header.cms .right { float: left;  width: 50%; }
header.cms .right { text-align: right; }
header.cms a:link, header.cms a:visited,
header.cms a:hover, header.cms a:active { color: #fff; }
header.cms .title a { text-decoration: none; }
header.cms span.menu-link  { display: inline-block; margin-left: 8px; font-size: 90%; }
header.cms .login-name { text-align: right; }
/* -------------------- */
/* footer */
footer.cms {
	margin-bottom: 0;
	padding: 10px;
	background-color: #223a70;
	color: #fff;
	text-align: center;
	font-size: 90%;
	line-height: 1.4;
	/* for footer bottom line */
	position: fixed;
	bottom: 0;
	width: 100%;
}
footer.cms a:link, footer.cms a:visited,
footer.cms a:hover, footer.cms a:active { color: #fff; }
/* -------------------- */
/* main */
main.cms { margin-top: 60px; margin-bottom: 50px; }
.cms .wrapper { width: 90%; margin: 20px auto; }
.cms .top-navi { border-bottom: 10px; text-align: right; }
.cms td { padding: 2px; }
.cms td.center { text-align: center; }
.cms .bottom-navi { width: 100%; margin: 20px 0; text-align: center; }
.cms .bottom-navi input { margin-left: 10px; }
.cms .bottom-navi span { display: inline-block; margin: 0 4px; }
.cms .conditions td.navi { text-align: right; }
.cms .conditions td.navi input { margin-left: 4px; }
.cms .btn-upload { margin: 0!important; }
.cms .btn-upload label { padding: 6px; border-radius: 4px; background-color: #223a70; }
/* -------------------- */
/* list */
.cms .list { margin-top: 10px; border: solid 1px #223a70; }
.cms.alog .list { margin-top: 0; }
.cms .list th {
	background-color: #223a70;
	border-bottom: solid 1px #fff;
	border-left: solid 1px #fff;
	color: #fff;
	text-align: center;
}
.cms .list th:nth-child(1) { border-left: solid 1px #223a70; }
.cms .list th.navi { width: 60px; }
.cms .list td { border-bottom: solid 1px #223a70; border-left: solid 1px #223a70; }
.cms .list td.id, .cms .list td.navi { text-align: center; }
/*.cms .list :nth-child(even) td { background-color: #efefef; }*/
.cms .list .no-data { color: orangered; }
/* -------------------- */
/* edit */
.cms .edit { padding-top: 10px; }
.cms .edit th {
	background-color: #223a70;
	border-bottom: solid 1px #fff;
	color: #fff;
	text-align: center;
}
.cms .edit tr:last-child th { border-color: #223a70; }
.cms .edit td { border: solid 1px #223a70; }
.cms .edit th, .cms .edit td { padding: 6px; }
/* ************************************************** */
@media screen and (max-width: 767px) {
	.pc { display: none!important; }
	.sp { display: block!important; }
	.scroll-navi span { margin-right: 10px; }
	/* sns */
	.sns span img { width: 20px; }
	/* footer */
	/*footer .menu li { display: block; }*/
	footer .logo img { width: 80px; }
	/* home */
	.info-box .left { float: none; width: 92%; margin: 0 4%; }
	.info-box .right { float: none; width: 92%; margin: 4% 4% 0; }
	.intro .left,
	.intro .right { float: none; width: 90%; padding: 5%; }
	.intro .left img { width: 60%; }
	/* news */
	#obs-map { height: 240px; }
	.obs-list td { padding: 8px; }
	/* field note */
	.fieldnote .detail td.spc-name { width: 100px; }
	/* calendar */
	.calendar .contents td { font-size: 80%; }
	/* information */
	.information .info .body img { width: 240px; }
	/* contact */
	.contact .contents { width: 100%; }
	/* login */
	.login .contents { width: 90%; }
	/* account edit */
	.ac-edit .contents { width: 90%; }
	.ac-edit span.btn-i { display: block; width: 100%; margin-left: 0; }
	/* account */
	.account .contents,
	.ac-edit .contents { width: 100%; }
	.group-edit textarea { height: 200px; }
	/* help */
	.help img.fig { width: 80%; }
	.help img.fig2 { width: 80%; }
	/* app funtion table */
	.app-func-table { font-size: 80%; }
	/* tips */
	.tips-detail .body .left,
	.tips-detail .body .right { float: none; width: 100%; }
	.tips-detail .body table.cols1,
	.tips-detail .body table.cols1w,
	.tips-detail .body table.cols2 { width: 100%; }
	.tips-detail .body .img img { width: 100%; }
	/* ================================================== */
	/* CMS */
	/* ================================================== */
	/* main */
	main.cms { padding-bottom: 50px; }
	.cms .wrapper { width: 94%; margin-bottom: 0; }
	/* list */
	.cms .list th { text-align: left; }
	/* edit */
	.cms .edit th { border-bottom: none; text-align: left; }
	.cms .edit th,
	.cms .edit td { display: block; }
}
@media screen and (max-width: 1023px) {
	.wrapper { width: 100%; }
	.inner { width: 90%; margin: 0 auto; }
	/* footer */
	.scroll-top { margin-right: 10px; }
}