/*台風/天気図PC用*/
div.imglayer{
  /* 背景の余白（top, right, bottom, left） */
  background: #FFFFFF;
	color: #393939;
}

.imglayer .realcontents{
	width: auto;
	max-width: 500px;
	position: relative;
  font-size: 14px;
  font-weight: bold;
}

.imglayer .weeklycontents{
	width: auto;
	max-width: 500px;
	position: relative;
  font-size: 14px;
  font-weight: bold;
}

.imglayer .typhoonandweather_update_time{
  padding: 15px 0px;
}

img#WeatherImage{
  max-width:100%;
  width: 100%;
}

.typhoon_figure hr{
  margin: 0px;
  background: #527798;
  border: 0;
  height: 1px;
}

div.typhoon_type{
  display: flex;
  justify-content: center;
}
 
.typhoon_type_tab{
  width:  168px;
  height: 30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.typhoon_type_tab .cell{
  padding: 5px;
}

div.typhoon_state{
  width:500px;
  text-align: left;
}

table.none_type{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}

table.none_type tbody tr td div{
  width:100%;
  margin:100px;
  text-align:center;
}

#img-box{
  width: auto;
  max-width: 500px;
  position: relative;
  margin: 0 auto;
}

#img-box img{
  width: 100%;
  max-width: 500px;
}

#img-box p{
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 0px;
  margin: 0;
}

.typhoonandweatherfigure_header{
  width: 100%;
	margin: 0;
	color: #000000;
	background: #FD7E39;

	font-size: 14px;
	font-weight: bold;
	font-style: normal;

	text-align: center;
	vertical-align: middle;

	/* 背景の余白（top, right, bottom, left） */
	padding: 2.5px 0px 2.5px 0px;
}

/*上タブ*/
ul.upperTabs{
    margin:0;
    padding:10px 0px 5px 0px;
    display: flex;
    justify-content: center;
    text-align: center;
    /* background-color: #f4f4f4; */
}

ul.upperTabs li{
  width: 208px;
  height: 37px;
	font-size:13px;
  padding: 0px;
  margin:-1px;
  list-style:none;
  background:#527798;
  color: #ffffff;
  cursor:pointer;
  display: flex;
}

ul.upperTabs li div{
  margin: auto;
}

ul.upperTabs li.upperTab-left {
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}

ul.upperTabs li.upperTab-right {
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}

ul.upperTabs li.upperTab-active{
    background:#FD7E39;
    color : #FFFFFF;
    position:relative;
    font-weight: bold;
}

/*実況/予想天気図上タブ*/
.real-tabs {
	width: 100%;
	color: #000000;
	text-align: center;
	font-size: 12px;
  display: flex;
  justify-content: center;
}

.real-tabs .real-tab {
  width: 207px;
	border-radius: 5px 5px 0px 0px;	/* 角丸 */
  background: #527798;
  padding-bottom: 0px;
  margin: 0px 1px;
}

.real-tabs .cell {
	padding: 7.5px;		/* 上下の余白 */
  color: #FFFFFF; 			/* 文字の色 */
  font-size: 13px;
  cursor:pointer;
}

img#realimg{
  width: 100%;
  max-width: 500px;
}

/* アクティブなタブだけ色が異なる */
.real-tabs .real-tab.active {
	background: #FD7E39;
  font-weight: bold;
}

/*週間予報天気図上タブ*/
.weekly-tabs {
	width: 100%;
	height: 35px;
  display: flex;
  justify-content: center;
	color: #FFFFFF;
	text-align: center;
}

.weekly-tabs .weekly-tab {
	/* コンテンツ間の余白（top, right, bottom, left） */
  width: 103px;
  height: 35px;
	margin: 0px 0.5px;
	border-radius: 5px 5px 0px 0px;	/* 角丸 */
  background: #527798;
}

.weekly-tabs .cell {
  margin: 2.5px 0px;
  font-size: 10px;
  cursor:pointer;
}

img#weeklyimg{
  width: 100%;
  max-width: 500px;
}

/* アクティブなタブだけ色が異なる */
.weekly-tabs .active {
	background: #FD7E39;
  font-weight: bold;
}

/*台風進路図上タブ*/
.typhoon-tabs {
	width: 100%;
	height: 35px;		/* この２つの値を揃えないと、 */

	text-align: center;
	font-size: 12px;
  display: flex;
  justify-content: center;
}

.typhoon-tabs .typhoon-tab {
	margin: 0px 1px;
  width: 310px;
	border-radius: 5px 5px 0px 0px;	/* 角丸 */
  background: #527798;
}

.typhoon-tabs .cell {
	padding: 7px;		/* 上下の余白 */
  color: #FFFFFF; 			/* 文字の色 */
  font-size: 14px;
  cursor:pointer;
}

/* アクティブなタブだけ色が異なる */
.typhoon-tabs .active {
	background: #FD7E39;
  font-weight: bold;
}