@charset "UTF-8";

/* ---------- mediaQuery  ---------- */


@media all and (max-width: 768px) {
.viewpc {
	display: none!important;
}
.viewtb {
	display: none;
}
.viewsp {
	display: block;
}
.inner {
	width: 94%;
	max-width: 900px;
	margin: 0 auto;
}

img {
	width: 100%;
	height: auto;
}

.btn_detaillink {
	display: flex;
  justify-content: flex-end;
  text-indent: -9999px;
}
.btn_detaillink a {
	display: inline-block;
	font-size: 1.4rem;
	padding: 4px 12px;
	background: url("../images/common/arrowmark_right_bl.40568c5a8a48.svg") no-repeat center center;
	background-size: 10px;
	border: 1px solid var(--texcolor02);
	border-radius: 5px;
	letter-spacing: -0.01em;
	transition: 0.2s all ease 0s;
	color: var(--texcolor01);
	margin-left: auto;
}
.btn_detaillink a:hover {
	background: url("../images/common/arrowmark_right_w.c2ea288eb221.svg") no-repeat center center var(--texcolor02);
	background-size: 12px;	
	color: #fff;
	text-decoration: none;
}

/* ===============
table関連
================*/
table.basic_table {
	border-collapse: collapse;
	width: 100%;
	margin: 20px auto 30px auto;
}
table.basic_table tr:nth-child(even) {
	background-color: var(--bgcolor01);
}
table.basic_table th {
	font-size: 1.2rem;
	padding: 8px 4px;
	background-color: var(--bgcolor03);
	text-align: center;
	font-weight: 700;
	border-bottom: 1px solid var(--bordercolor01);
}
table.basic_table td {
	font-size: 1.2rem;
	padding: 8px 4px;
	border-bottom: 1px solid var(--bordercolor01);
}
table.link_table tr:hover {
	background-color: var(--bgcolor02);
	cursor: pointer;
  }
table.link_table tr.current {
	border: 2px solid var(--texcolor02);
}
table.link_table tr.link_tr:hover {
	cursor: pointer;
	background-color: var(--bgcolor02);
}

table.civilprotec_table td.nowrap {
	white-space: nowrap;
}


/* ===============
header
================*/
header {
	width: 100%;
	height: 58px;
	background-color: rgba(255,255,255,0.9);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
}
header .inner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
header h1 {
	flex-basis: 30%;
	max-width: 280px;
	margin: 10px 10px 10px 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
header h1 a {
	font-weight: 700;
	color: #000;
}
header h1 a:hover {
	color: #000;
	text-decoration: none;
	opacity: 0.6;
}

header .reload_contents {
	flex-basis: 40px;
	margin-right: 6px;
	margin-left: auto;
}
header .reload_contents .btn_reload a {
	display: inline-block;
	width: 40px;
	height: 40px;
	padding: 0;
	background: url("../images/common/icon_reload.1aa8e23f1a32.svg") no-repeat 10px center;
	background-size: 20px;
	border: 1px solid var(--texcolor02);
	border-radius: 5px;
	transition: 0.2s all ease 0s;
	color: var(--texcolor01);
	text-indent: -9999px;
}
header .reload_contents .btn_reload a:hover {
	background: url("../images/common/icon_reload_w.28c931bc156e.svg") no-repeat 10px center var(--texcolor02);
	background-size: 20px;	
	color: #fff;
	text-decoration: none;
}

header .data_time {
	font-size: 1.0rem;
}
header .data_time span {
	font-size: 1.3rem;
	display: block;
}

header .logo_jed {
	width: 65px;
	margin: 0 50px 0 0;
}

/* ===============
#g-nav
================*/
#g-nav {
  position: fixed;
  z-index: 999;
  top: 57px;
  right: -120%;
  width: 270px;
  height: 100vh;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0px 3px 6px rgba(0,0,0,0.4);
  transition: all 0.6s;
}
 #g-nav-list {
  position: relative;
  z-index: 999;
  width: 100%;
}
#g-nav-list div {
	 border-bottom: 1px solid var(--texcolor02);
}
#g-nav-list div a {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	padding: 14px 10px 14px 40px;
	transition: 0.2s all ease 0s;
	color: var(--textcolor01);
}
#g-nav-list div a:hover {
	background-color: rgba(255,255,255,0.3);
}

#g-nav-list div a:active {
	cursor: pointer;
  background-color: var(--accentcolor);
  color: var(--texcolor);
}
#g-nav-list div a:hover {
		text-decoration: none;
}
#g-nav-list div.nav_home a {
	background: url("../images/common/icon_home.c40a7e940ad8.svg") no-repeat 13px center;
	background-size: 18px;
}
#g-nav-list div.nav_home a:hover,
#g-nav-list div.nav_home a:active {
	background: url("../images/common/icon_home_w.9bff4b91c9a5.svg") no-repeat 13px center var(--texcolor02);
	background-size: 18px;
	color: #fff;
}
#g-nav-list div.nav_earthquake a {
	background: url("../images/common/icon_earthquake.c9daaa23f04b.svg") no-repeat 10px center;
	background-size: 24px;
}
#g-nav-list div.nav_earthquake a:hover,
#g-nav-list div.nav_earthquake a:active {
	background: url("../images/common/icon_earthquake_w.af965ba37eab.svg") no-repeat 10px center var(--texcolor02);
	background-size: 24px;
	color: #fff;
}
#g-nav-list div.nav_tsunami a {
	background: url("../images/common/icon_tsunami.999de5a6a344.svg") no-repeat 10px center;
	background-size: 22px;
}
#g-nav-list div.nav_tsunami a:hover,
#g-nav-list div.nav_tsunami a:active {
		background: url("../images/common/icon_tsunami_w.ff3c26bfaed4.svg") no-repeat 10px center var(--texcolor02);
		background-size: 22px;
		color: #fff;
}
#g-nav-list div.nav_volcano a {
	background: url("../images/common/icon_volcano.c3a498e6718a.svg") no-repeat 10px center;
	background-size: 22px;
}
#g-nav-list div.nav_volcano a:hover,
#g-nav-list div.nav_volcano a:active {
		background: url("../images/common/icon_volcano_w.4a7b82e7c8c9.svg") no-repeat 10px center var(--texcolor02);
		background-size: 22px;
		color: #fff;
}
#g-nav-list div.nav_special a {
	background: url("../images/common/icon_special.7ba6ebfb39d6.svg") no-repeat 10px center;
	background-size: 22px;
}
#g-nav-list div.nav_special a:hover,
#g-nav-list div.nav_special a:active {
	background: url("../images/common/icon_special_w.65b2694bb35f.svg") no-repeat 10px center var(--texcolor02);
	background-size: 22px;
	color: #fff;
}
#g-nav-list div.nav_civilprotec a {
	background: url("../images/common/icon_civilprotec.d2e1c1a867a5.svg") no-repeat 12px center;
	background-size: 18px;
}
#g-nav-list div.nav_civilprotec a:hover,
#g-nav-list div.nav_civilprotec a:active {
		background: url("../images/common/icon_civilprotec_w.86edb2b8c610.svg") no-repeat 12px center var(--texcolor02);
		background-size: 18px;
		color: #fff;
}
#g-nav-list div.nav_lalert a {
	background: url("../images/common/icon_lalert.28cc469ddd18.svg") no-repeat 11px center;
	background-size: 20px;
}
#g-nav-list div.nav_lalert a:hover,
#g-nav-list div.nav_lalert a:active {
	background: url("../images/common/icon_lalert_w.4a7c8cab08a9.svg") no-repeat 11px center var(--texcolor02);
	background-size: 20px;
	color: #fff;
}
#g-nav.panelactive {
    right: 0;
}

.openbtn1 {
  position:fixed;
  z-index: 9999;
  top:0;
  right: 0;
  cursor: pointer;
  width: 56px;
  height: 56px;
	background-color: var(--texcolor02);
	transition: 0.2s all ease 0s;
}

.openbtn1 span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
	}

.openbtn1 span.line01 {
		top: 13px;
		width: 28px;
		height: 2px;
		background-color: #fff;
}
.openbtn1 span.line02 {
		top: 21px;
		width: 28px;
		height: 2px;
		background-color: #fff;
}
.openbtn1 span.line03 {
		top: 29px;
		width: 28px;
		height: 2px;
		background-color: #fff;
}
.openbtn1 span.btn_txt {
		top: 36px;
		color: #fff;
		font-size: 1rem;
		text-align: center;
}
.openbtn1.active span.line01 {
	  top: 13px;
		left: 16px;
		transform: translateY(6px) rotate(-45deg);
		width: 40%;
}
.openbtn1.active span.line02 {
		display: none;
}
.openbtn1.active span.line03 {
  top: 24px;
	left: 16px;
	transform: translateY(-6px) rotate(45deg);
	width: 40%;
}


/* ===============
main
================*/
main {
	width: 100%;
	padding-top: 70px;
	background-color: #F7F7F7;
}
main.index_main {
		padding-top: 80px;
}
main .inner {
	width: 100%;
	display: flex;
	flex-flow: column-reverse;
	justify-content: flex-start;
	flex-wrap: wrap;
}

main #nav_area {
	flex-basis: 100%;
	width: 100%;
	background-color: #fff;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	flex-flow: column-reverse;
}
main #maincontents_area {
	flex-basis: 100%;
}


main .bread_crumb {
	width: 96%;
	height: 42px;
	margin: 0 auto 14px auto;
	background-color: #fff;
	border-radius: 100px;
	padding: 13px 10px;
}
main .bread_crumb ul {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
main .bread_crumb ul li {
	margin-right: 20px;
	font-size: 1.4rem;
}
main .bread_crumb ul li a {
	text-decoration: underline;
	position: relative;
	display: block;
}
main .bread_crumb ul li a:hover {
	text-decoration: none;
}
main .bread_crumb ul li a::after {
	position: absolute;
	content: ">";
	right: -15px;
	top: 0;
}

/* ===============
#nav_area
================*/
#nav_area nav ul {
	border-top: 1px solid var(--texcolor02);
}
#nav_area nav ul li {
	border-bottom: 1px solid var(--texcolor02);	
}
#nav_area nav ul li a {
	width: 100%;
	height: 62px;
	padding-left: 54px;
	display: flex;
	color: #000;
	font-size: 1.7rem;
	font-weight: 700;
	align-items: center;
	justify-content: flex-start;
	letter-spacing: -0.01em;
	transition: 0.2s all ease 0s;
}
#nav_area nav ul li a:hover {
	background-color: var(--texcolor02);
	color: #fff;
	text-decoration: none;
}
#nav_area nav ul li a.current {
	background-color: var(--texcolor02);
	color: #fff;
}

#nav_area nav ul li.nav_home a {
	background: url("../images/common/icon_home.c40a7e940ad8.svg") no-repeat 20px center;
	background-size: 20px;
}
#nav_area nav ul li.nav_home a:hover,
#nav_area nav ul li.nav_home.current a {
	background: url("../images/common/icon_home_w.9bff4b91c9a5.svg") no-repeat 18px center var(--texcolor02);
	background-size: 21px;
	color: #fff;
}

#nav_area nav ul li.nav_earthquake a {
	background: url("../images/common/icon_earthquake.c9daaa23f04b.svg") no-repeat 14px center;
	background-size: 30px;
}
#nav_area nav ul li.nav_earthquake a:hover,
#nav_area nav ul li.nav_earthquake.current a {
	background: url("../images/common/icon_earthquake_w.af965ba37eab.svg") no-repeat 14px center var(--texcolor02);
	background-size: 30px;
	color: #fff;
}
#nav_area nav ul li.nav_tsunami a {
	background: url("../images/common/icon_tsunami.999de5a6a344.svg") no-repeat 14px center;
	background-size: 28px;
}
#nav_area nav ul li.nav_tsunami a:hover,
#nav_area nav ul li.nav_tsunami.current a {
	background: url("../images/common/icon_tsunami_w.ff3c26bfaed4.svg") no-repeat 14px center var(--texcolor02);
	background-size: 28px;
	color: #fff;
}
#nav_area nav ul li.nav_volcano a {
	background: url("../images/common/icon_volcano.c3a498e6718a.svg") no-repeat 14px center;
	background-size: 28px;
}
#nav_area nav ul li.nav_volcano a:hover,
#nav_area nav ul li.nav_volcano.current a {
	background: url("../images/common/icon_volcano_w.4a7b82e7c8c9.svg") no-repeat 14px center var(--texcolor02);
	background-size: 28px;
	color: #fff;
}
#nav_area nav ul li.nav_special a {
	background: url("../images/common/icon_special.7ba6ebfb39d6.svg") no-repeat 14px center;
	background-size: 28px;
}
#nav_area nav ul li.nav_special a:hover,
#nav_area nav ul li.nav_special.current a {
	background: url("../images/common/icon_special_w.65b2694bb35f.svg") no-repeat 14px center var(--texcolor02);
	background-size: 28px;
	color: #fff;
}
#nav_area nav ul li.nav_civilprotec a {
	background: url("../images/common/icon_civilprotec.d2e1c1a867a5.svg") no-repeat 16px center;
	background-size: 22px;
}
#nav_area nav ul li.nav_civilprotec a:hover,
#nav_area nav ul li.nav_civilprotec.current a {
	background: url("../images/common/icon_civilprotec_w.86edb2b8c610.svg") no-repeat 16px center var(--texcolor02);
	background-size: 22px;
	color: #fff;
}
#nav_area nav ul li.nav_lalert a {
	background: url("../images/common/icon_lalert.28cc469ddd18.svg") no-repeat 16px center;
	background-size: 22px;
}
#nav_area nav ul li.nav_lalert a:hover,
#nav_area nav ul li.nav_lalert.current a {
	background: url("../images/common/icon_lalert_w.4a7c8cab08a9.svg") no-repeat 16px center var(--texcolor02);
	background-size: 22px;
	color: #fff;
}

#nav_area .twitter_area {
	margin: 30px 0;
}
#nav_area .twitter_area h2 {
	text-align: center;
	font-weight: 700;
	letter-spacing: -0.01em;
}
#nav_area .twitter_area p {
	text-align: center;
	margin: 10px auto;
}
#nav_area .twitter_area .twitter_embedarea {
	width: 100%;
	padding-right: 26px;
	padding-left: 26px;
	margin: 0 auto;
}
#nav_area .twitter_area .btn_link {
	width: 233px;
	margin-top: 14px;
	margin-left: auto;
	margin-right: 28px;
}

#nav_area .socialaccount_area {
	margin: 10px 0 30px 0;
}
#nav_area .socialaccount_area h2 {
	font-size: 1.4rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: -0.01em;
}
#nav_area .socialaccount_area ul {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 14px;
}
#nav_area .socialaccount_area ul li {
	margin-bottom: 2px;
	flex-basis: 86px;
}
#nav_area .socialaccount_area ul li a {
	width: 100%;
	font-size: 1.3rem;
	letter-spacing: -0.005em;
	display: block;
	text-align: center;
	padding-left: 0;
	color: var(--texcolor01);
}
#nav_area .socialaccount_area ul li a span {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 4px;
}
#nav_area .socialaccount_area ul li a span img {
	width: 16px;
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#nav_area .socialaccount_area ul li.link_weibo a span img {
	width: 20px;
}
#nav_area .socialaccount_area ul li a:hover img {
	text-decoration: none;
}
#nav_area .socialaccount_area ul li a:hover span img {
	opacity: 1;
}

/* ===============
#maincontents_area
================*/

.main_article {
	width: 100%;
	background-color: #fff;
	padding: 25px 20px;
	margin: 0 auto 30px auto;
}
.main_article h2 {
	font-size: 2rem;
	font-weight: 700;
	position: relative;
	line-height: 25px;
	padding-left: 4px;
	margin-bottom: 16px;
}
.main_article h2:before {
	display: block;
	content: "";
	width: 25px;
	height: 14px;
	background-color: var(--texcolor02);
	position: absolute;
	left: -25px;
	top: 30%;
}
.main_article h2.h2_em:before {
	display: block;
	content: "";
	width: 25px;
	height: 14px;
	background-color: var(--emergencycolor);
	position: absolute;
	left: -25px;
	top: 30%;
}
.main_article .btn_question {
	display: inline-block;
	margin-left: 6px;
}
.main_article .btn_question a {
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 1px solid var(--texcolor02);
	border-radius: 5px;
	display: flex;
	align-items: center;
	text-align: center;
	background: url("../images/common/icon_question_bl.8f2639880822.svg") no-repeat center center #fff;
	background-size: 9px;
	text-indent: -9999px;
 	transition: all .2s ease;
}
.main_article .btn_question a:hover {
	background: url("../images/common/icon_question_w.585ad19a1647.svg") no-repeat center center var(--texcolor02);
	background-size: 12px;	
}

.main_article h3 {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 20px;
	position: relative;
 	padding: 10px 0 4px 0px;
 	border-bottom: 2px solid #c7c7c7;
}
.main_article h3 span {
	display: inline-block;
 position: relative;
 font-weight: 700;
	font-size: 1.8rem;
}
.main_article h3 span::after {
	content: "";
 position: absolute;
 left: 0;
 bottom: -6px;
 width: 100%;
 height: 2px;
 background: #6795EB;
}

.main_article h4 {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: #516cb0;
}


/* emergency_article */
.emergency_item {
	margin-bottom: 20px;
}
.emergency_category {
	display: inline-block;
	background-color: var(--emergencycolor);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 4px 12px;
	margin-right: 0;
	margin-bottom: 4px;
}
.emergency_place {
	display: block;
	color: #000;
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 4px;
}
dl.emergency_detail {
	width: 100%;
	display: block;
}
dl.emergency_detail dt {
	width: 100%;
	display: block;
	text-align: left;
	color: #000;
	border-right: none;
	border-bottom: 1px solid var(--bordercolor02);
	margin-right: 20px;
	line-height: 1.3;
	font-size: 1.2rem;
}
dl.emergency_detail dd {
	line-height: 1.3;
	display: block;
}



/* currentlocation_article */
.map_nav {
	width: 92%;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.map_nav .location_menu {
	flex-basis: 100%;
	width: 100%;
	height: 240px;
	display: flex;
	justify-content: flex-start;
}
.map_nav .location_menu .locmenu_title {
	color: var(--texcolor02);
	display: block;
	background-color: transparent;
	width: 60px;
	height: 22px;
	text-align: center;
	padding: 4px 6px;
	border-radius: 4px 4px 0 0;
	font-size: 1.2rem;
}

.map_menu {
	display: block;
	flex-basis: 100%;
}
.map_menu li.menu_top {
	width: 100%;
  border-radius: 0;
  border-top: 1px solid var(--texcolor02);
  border-bottom: 1px solid var(--texcolor02);
  margin-bottom: 8px;
  z-index: 10;
}
.map_menu li.menu_top > a {
	font-weight: 700;
  border-radius: 0;
}
.map_menu > li {
   position: relative;
}
.map_menu li > a {
  width: 100%;
  height: 36px;
  display: flex;
  transition: 0.2s all ease 0s;
  border-left: 1px solid var(--texcolor02);
  border-right: 1px solid var(--texcolor02);
  align-items: center;
  background-color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--texcolor01);
	font-size: 1.3rem;
}
.map_menu li a:hover {
	background-color: #e2e9ff;
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.map_menu li:hover > ul {
	visibility: visible;
	top: 36px;
	opacity: 1;
	transition: all .2s ease;
	border-top: 1px solid var(--texcolor02);
	background-color: var(--bgcolor02);
}
.map_menu ul {
   visibility: visible;
   position: absolute;
   top: 36px;
   width: 100%;
    opacity: 1;
    z-index: 1;
}

ul.map_menu li.menu_earthquake_on a {
	background-image: url("../images/common/icon_earthquake_on.318482f6ee07.svg"),
	url("../images/common/arrow_down_bl.7d437d618f1a.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: 8px center, 97% center;
	background-size: 30px, 16px;
  padding-left: 45px;
 	transition: all .2s ease;
}


ul.map_menu li.menu_earthquake_on a:hover,
ul.map_menu li.menu_current a,
ul.second-level li.menu_tsunami.menu_on a:hover,
ul.second-level li.menu_volcano.menu_on a:hover,
ul.second-level li.menu_special.menu_on a:hover,
ul.second-level li.menu_civilprotec.menu_on a:hover,
ul.second-level li.menu_lalert.menu_on a:hover {
	background-color: var(--bgcolor02);
}
ul.second-level li.menu_tsunami a {
	background: url("../images/common/icon_tsunami.999de5a6a344.svg") no-repeat 9px center #fff;
	background-size: 22px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_tsunami.menu_on a {
	background: url("../images/common/icon_tsunami_on.fc75172ab8ca.svg") no-repeat 9px center #fff;
	background-size: 22px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_volcano a {
	background: url("../images/common/icon_volcano.c3a498e6718a.svg") no-repeat 9px center #fff;
	background-size: 23px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_volcano.menu_on a {
	background: url("../images/common/icon_volcano_on.4c9fc0813ba0.svg") no-repeat 9px center #fff;
	background-size: 23px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_special a {
	background: url("../images/common/icon_special.7ba6ebfb39d6.svg") no-repeat 11px center #fff;
	background-size: 23px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_special.menu_on a {
	background: url("../images/common/icon_special_on.8359dea3bf13.svg") no-repeat 11px center #fff;
	background-size: 23px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_civilprotec a {
	background: url("../images/common/icon_civilprotec.d2e1c1a867a5.svg") no-repeat 11px center #fff;
	background-size: 18px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_civilprotec.menu_on a {
	background: url("../images/common/icon_civilprotec_on.b8428fe3ca4a.svg") no-repeat 11px center #fff;
	background-size: 18px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_lalert a {
	background: url("../images/common/icon_lalert.28cc469ddd18.svg") no-repeat 12px center #fff;
	background-size: 18px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}
ul.second-level li.menu_lalert.menu_on a {
	background: url("../images/common/icon_lalert_on.536d7c112d02.svg") no-repeat 12px center #fff;
	background-size: 18px;
  padding-left: 45px;
  border-bottom: 1px solid var(--texcolor02);
}


.prefecture_menu {
  position: relative;
  width: calc(100% - 50px);
  display: flex;
  align-items: center;
  border-left: 1px solid var(--texcolor02);
  border-top: 1px solid var(--texcolor02);
  border-right: 1px solid var(--texcolor02);
  border-radius: 5px 5px 0 0;
  margin-left: 0;
}
.station_menu {
  position: relative;
  width: calc(100% - 50px);
  display: flex;
  align-items: center;
  border-left: 1px solid var(--texcolor02);
  border-top: 1px solid var(--texcolor02);
  border-right: 1px solid var(--texcolor02);
  border-radius: 0;
}
.prefecture_menu select,
.station_menu select {
	width: 100%;
	padding: 10px 35px 10px 4px;
	color: var(--texcolor01);
	cursor: pointer;
	z-index: 1;
	border: none;
	appearance: none;
	outline: none;
	background: transparent;
	font-size: 1.3rem;
	font-weight: 700;
	background: url("../images/common/arrow_down_bl.7d437d618f1a.svg") no-repeat 98% center;
	background-size: 10px;
}


.location_current {
	flex-basis: 44px;
	width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 36px;
	margin-left: auto;
}
.location_current .btn_mapcurrent {
	display: inline-block;
}
.location_current .btn_mapcurrent a {
	display: inline-block;
	width: 44px;
	height: 36px;
	border-top: 1px solid var(--texcolor02);
	border-right: 1px solid var(--texcolor02);
	border-left: 1px solid var(--texcolor02);
	border-radius: 5px 5px 0 0;
	display: flex;
	align-items: center;
	text-align: center;
	background: url("../images/common/icon_current_bl.6daaa9c2d19f.svg") no-repeat center center #fff;
	background-size: 26px;
	text-indent: -9999px;
 	transition: all .2s ease;
}
.location_current .btn_mapcurrent a:hover {
	background: url("../images/common/icon_current_w.ac839ecb2840.svg") no-repeat center center var(--texcolor02);
	background-size: 26px;	
}

.index_maparea {
	width: 92%;
	max-width: 480px;
	border: 1px solid var(--texcolor02);
	position: relative;
	margin: 0 auto 20px auto;
	overflow: hidden;
}
.index_maparea .map_detail {
	width: 100%;
	position: relative;
}

.index_maparea .map_sample {
	width: 100%;
	margin: 10px 10px 10px auto;
}
.index_maparea .map_part {
	width: 40%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.index_maparea .map_part img {
		border-right: 1px solid var(--texcolor02);
		border-bottom: 1px solid var(--texcolor02);
}
.index_maparea .map_attention p {
	font-size: 1.4rem;
}

/* Map Popup */

.index_maparea .map_marker {
	position: absolute;
	width: 36px;
	height: auto;
	z-index: 3;
	cursor: pointer;
}
.index_maparea .map_alert_sample {
	position: absolute;
	width: 54px;
	height: auto;
	z-index: 3;
	cursor: pointer;	
}

.index_maparea .map_popup {
	position: relative;
	width: calc(100% - 20px);
	background-color: rgba(255,255,255,0.95);
	border-radius: 6px;
	display: inline-block;
	margin: -10px 10px 0 10px;
	padding: 0;
	box-shadow: none;
}
.index_maparea .map_popup.popup_specialalert01 {
	display: none;
	left: auto;
	top: auto;
}
.index_maparea .map_popup.popup_volcano01 {
	display: none;
	left: auto;
	top: auto;	
}
.index_maparea .map_popup.popup_volcano02 {
	display: none;
	left: auto;
	top: auto;
}
.index_maparea .map_popup:before {
	display: none;
}
.index_maparea .map_popup:after {
	display: none;
}

.index_maparea .map_popup.active_popup {
	display: block;
}


.earthquake_level_sample {
	margin: 10px auto 0 auto;
}
.earthquake_level_sample ul {
	display: flex;
	gap: 0;
	justify-content: flex-end;
	margin-right: 4px;
}
.earthquake_level_sample ul li {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 6px;
	flex-basis: 22px;
}
.earthquake_level_sample ul li:last-child {
	margin-bottom: 0;
}
.earthquake_level_sample .mark_level07 {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #aa01aa;
}
.earthquake_level_sample .mark_level06-p {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #A50021;
}
.earthquake_level_sample .mark_level06-m {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #FF2900;
}
.earthquake_level_sample .mark_level05-p {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #FF9900;
}
.earthquake_level_sample .mark_level05-m {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #FFE600;
}
.earthquake_level_sample .mark_level04 {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #F9E695;
}
.earthquake_level_sample .mark_level03 {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #0041FF;
}
.earthquake_level_sample .mark_level02 {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #05AAFF;
}
.earthquake_level_sample .mark_level01 {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid var(--bordercolor01);
	border-radius: 30px;
	background-color: #F2F2FF;
}
.earthquake_level_sample .sample_rightmargin {
	margin-right: 4px;
}
.earthquake_level_sample .mark_detail {
	flex-basis: auto;
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
}


.response_img {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.response_img img {
	max-width: 550px;
	display: block;
	margin: 0 auto;
}
.response_img img.responseimg_s {
	max-width: 550px;
	margin: 0 auto;
	display: block;
}



/* contactlist_article */

.contact_item {
	margin-bottom: 10px;
}
.contact_item label {
    display: block;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2rem; 
}

.contact_item label p {
  padding: 10px 40px 10px 20px;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 700;
  background: url("../images/common/icon_plus.a2b3b078f6a2.svg") no-repeat 98% center var(--bgcolor02);
  background-size: 20px;
  margin: 0;
  transition: 0.2s all ease 0s;
}
.emergency_item label p {
  padding: 8px 20px 8px 20px;
  font-size: 1.4rem;
  font-weight: 700;
  background: url("../images/common/icon_plus_r.2ee44f18ec22.svg") no-repeat 98% center var(--bgcolor05);
  background-size: 20px;
  margin: 0;
  transition: 0.2s all ease 0s;
  border: 2px solid var(--emergencycolor);
  color: var(--emergencycolor);
}
.contact_item label p:hover {
  background-color: var(--bgcolor04);
  transition: 0.2s all ease 0s;
}
.emergency_item label p:hover {
  background-color: var(--bgcolor06);
  transition: 0.2s all ease 0s;
}

.contact_item .cssacc:checked + label p {
  background: url("../images/common/icon_minus.6c48243adc2f.svg") no-repeat 98% center var(--bgcolor02);
  background-size: 20px;
  margin: 0;  
}
.emergency_item .cssacc:checked + label p {
  background: url("../images/common/icon_minus_r.e55e1f26d4cd.svg") no-repeat 98% center var(--bgcolor05);
  background-size: 20px;
  margin: 0;  
}

.contact_item input {
    display: none;
}
.contact_item .accshow {
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
  margin: 4px 0 0 0;
}
.contact_item .cssacc:checked + label + .accshow {
  height: auto;
  opacity: 1;
  margin: 4px 0 0 0;
}
.contact_item .accshow h3 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 14px;
}
.contact_item .accshow p {
  margin: 16px 0 16px 0;
}
.contact_item .accshow p a {
	color: var(--texcolor02);
	text-decoration: underline;
}
.contact_item .accshow p a:hover {
	text-decoration: none;
}
.contact_item .accshow .contact_link {
	text-align: right;
	margin-bottom: 10px;
}
.contact_item .accshow .contact_link a {
	display: inline-block;
	margin-left: auto;
	background-image: url("../images/common/icon_whindowopen.1f62326d2275.svg"),
	url("../images/common/arrow_right_bl.2dcd56c6eb61.svg");
	background-size: 16px, 8px;
	background-repeat: no-repeat, no-repeat;
	background-position: right center ,left center;
	color: var(--texcolor02);
	padding: 0 24px 0 16px;
	text-decoration: underline;
	font-size: 1.4rem;
}
.contact_item .accshow .contact_link a:hover {
	text-decoration: none;
}

/* ===================
.totop_area
====================== */
.totop_area {
	width: 150px;
	margin: 0 auto;
}
.totop_area .totop a {
	display: block;
	font-size: 1.4rem;
	margin: 0 0 0 auto;
	width: 100%;
	height: 40px;
	padding: 12px 8px 4px 40px;
	background: url("../images/common/arrowmark_top_w.48d8e7a31744.svg") no-repeat 14px center var(--texcolor02);
	background-size: 12px;
	letter-spacing: -0.01em;
	color: #fff;
	border-radius: 4px 4px 0 0;
	transition: 0.2s all ease 0s;
}
.totop_area .totop a:hover {
	text-decoration: none;
	height: 50px;
	margin-top: -10px;
}


/* ===================
footer
====================== */
footer {
	width: 100%;
	min-width: 300px;
	background-color: var(--bgcolor01);
}
footer .footerlink_area {
	background-color: #E0EBFF;
	border-top: 2px solid var(--texcolor02);
}
footer .footerlink_area .inner {
	min-width: 200px;
	margin: 0 auto;
	padding: 30px 0 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
footer .footerlink_area .ftr_logo {
	flex-basis: 100%;
	margin: 0 auto 20px auto;
}
footer .footerlink_area .ftr_logo img {
	width: 85px;
	display: block;
	margin: 0 auto;
}
footer .footerlink_area .ftr_linkpart {
	flex-basis: 210px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
footer .footerlink_area .ftr_linkpart .link_item {
	margin-left: auto;
}
footer .footerlink_area .ftr_linkpart .link_item h3 {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 10px;
	margin-top: 16px;
	letter-spacing: -0.01em;
}
footer .footerlink_area .ftr_linkpart .link_item ul li {
	list-style-type: disc;
	margin-left: 20px;
	margin-bottom: 10px;
}
footer .footerlink_area .ftr_linkpart .link_item ul li a {
	font-size: 1.3rem;
	color: var(--texcolor01);
	text-decoration: underline;
	transition: 0.2s all ease 0s;
}
footer .footerlink_area .ftr_linkpart .link_item ul li a:hover {
	text-decoration: none;
}

footer .footerlink_area .ftr_linkpart .sns_link {
	flex-basis: 100%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
footer .footerlink_area .ftr_linkpart .sns_link ul {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
footer .footerlink_area .ftr_linkpart .sns_link ul li.link_facebook a,
footer .footerlink_area .ftr_linkpart .sns_link ul li.link_insta a,
footer .footerlink_area .ftr_linkpart .sns_link ul li.link_youtube a {
	display: inline-block;
	width: 54px;
	height: 54px;
}

footer .footersublink_area {
	width: 100%;
	background-color: var(--texcolor02);
	padding: 14px 0;
}
footer .footersublink_area ul {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
footer .footersublink_area ul li {
	flex-basis: auto;
	padding: 0 18px;
	border-right: 1px solid #fff;
}
footer .footersublink_area ul li:first-child {
	border-left: 1px solid #fff;
}
footer .footersublink_area ul li a {
		color: #fff;
		font-size: 1.3rem;
		line-height: 1.8;
		text-decoration: underline;
		font-weight: 400;
		transition: 0.2s all ease 0s;
}
footer .footersublink_area ul li a:hover {
	text-decoration: none;
}

footer .copyright_area p {
	text-align: center;
	font-size: 1rem;
	color: #fff;
	line-height: 1;
	margin: 0 auto;
}


/* ==================
modal parts
===================== */
.modal-overlay {
	z-index:1000;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
}

.modal-content {
	width: 80%;
	height: auto;
	overflow-y: scroll;
	padding: 0 20px 20px 20px;
	top: 50%;
	position: fixed;
	display:none;
	z-index:1003;
	margin: 0;
	background-color: #fff;
	border-radius: 18px;
}

.modal-content h3 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 30px;
	border-left: 8px solid var(--texcolor02);
	padding-left: 12px;
	padding-top: 20px;
}
.modal-content p {
	font-size: 1.6rem;
}

.modal-close {
	position: absolute;
	vertical-align: middle;
	zoom: 1;
	top: 10px;
	right: 12px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 9999;
}
.modal-close:before,
.modal-close:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 3px;
	background-color: var(--texcolor02);
}
.modal-close:before {
	transform: rotate(45deg);
}
.modal-close:after {
	transform: rotate(-45deg);
}





}