@charset "utf-8";

/**********************************************/
/* A-PLAT　気候変動の観測・予測データ　将来予測
/**********************************************/

body {
    padding:30px 0 0 0;
}

section {
    background-color: #Fff;
}
#header>header {
    height:70px;/*50px*/
}
.logo {
    top:10px;
    height:30px;
}


/*外枠*/
/*
.outbox {
    min-width:1200px;
}
*/

.container {
    width:100%;
    max-width:1600px;
    min-width:1200px;
    padding: 0 20px;
    margin: 0 auto;
    overflow: hidden;
}

h2 {
    background-color: transparent;
	padding: 0;
	margin: 20px 0 0 0;
}
/*
h2 {
    background-color: transparent;
	background-image: none;
	padding: 0;
	margin: 20px 0 0 0;
}
h2:before {
	content:none;
}
*/

/**********************/
/*内部ヘッダー
/**********************/
#maphead {
    overflow: hidden;
}


/*サブタイトル*/
.ptitle {
    height:40px;
    display:block;
    margin-top: 15px;
}

/*都道府県情報へ戻るボタン*/
.pback img {
    float:right;
    margin-top: 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px; 
	border-radius: 4px;
}

/*S8ロゴ*/
.s8logo img {
    float:none;
    height: 40px;
    margin: 0 0 10px;
}





/**********************/
/*表示地域ヘッダー
/**********************/
.displaybox {
    padding: 30px 40px 0;
    background-color: #fff;
    overflow: hidden;
    padding-bottom: 30px;
}

/*地域名*/
h1 {
/*    display:inline-block;*/
    font-size: 46px;
    font-size:4.6rem;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 20px;
    margin-top: 0px;
}
h1 span {
    font-weight: 500;
    font-size: 80%;
}

h1 a {
    font-weight: 500;
    font-size: 14px;
    font-size:1.4rem;
    margin-left: 30px;
    background: url("../../../map/img/info.png") no-repeat left center;
    padding:5px 5px 5px 28px;
    background-size: 25px;
    color:#0a81bc;
    text-decoration: none;
}




/*****************/
/*左カラム
/*****************/
#datasource {
    width:68%;
    float: left;
    border-right: 1px #ddd solid;
    padding-right: 25px;
    margin-bottom:40px;
}

/*注意事項*/
.cautionbox {
    /*background-color: #ffeaea;*/   
    background-color: #e5f6c8;
	border: 3px #66CC33 solid;
    padding: 15px 20px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    font-size: 14px;
    font-size:1.4rem;
}
.cautionbox ul {
    margin-top:5px;
    margin-bottom: 5px;
    margin: 5px 0 5px 2em;
    padding: 0;
}
.cautionbox .caution {
    line-height: 140%;
    background: url("../../../map/img/caution.png") no-repeat left top;
    padding-left: 50px;
}
.cautionbox p {
    margin: 0;

}


/*S8ページ用*/
#s8caution {
    background-color: #e5f6c8;
    border:3px #66CC33 solid;
}


/*注意マーク*/
.caution {
    color: red;
    font-size: 105%;
}
.caution a {
    cursor:pointer;
}
.caution a:hover {
    text-decoration: none;
}


/*マーカー装飾*/
.maeker {
    font-weight: bold;
    display:inline-block;
    padding:0 0.3em;
    background: linear-gradient(transparent 60%, #eaff00 60%); 
    color:#ff0000;
    text-decoration: underline;
	background: url("../../../map/img/help.png") no-repeat right center;
    padding-right: 23px;
}
.maeker:hover {
    text-decoration: none;
}

/*地域情報*/
.datainfo {
    clear: both;
    margin-top: 20px;
    border-top: 3px #ddd solid;
    padding: 10px 20px;

}



/******************/
/*右カラム
/******************/
#guidebox {
    width:32%;
    float: right;
    margin-bottom:20px;
    /*padding-left: 10px;*/
}
/******************/
/*右カラム
/******************/
#guidebox2 {
	width: 25%;
	float: right;
	margin-bottom: 20px;
	margin-right: 30px;
    /*padding-left: 10px;*/
}


/*データ無し用*/
.nodata {
    font-size: 26px;
    font-size:2.6rem;
}


/*サブメニューボタン*/
.subnavi {
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0px;
    table-layout: fixed;
    margin: 0 auto;
}
.subnavi li {
    display: table-cell;
    vertical-align: top;
    
    font-size: 16px;
    font-size:1.6rem;
    font-weight:bold;
    text-align: center;
    line-height:140%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	border-radius: 5px;
	border: 1px #ddd solid;
  	-webkit-box-shadow: 0 0 5px rgba(83,135,162,.3);
	-moz-box-shadow: 0 0 5px rgba(83,135,162,.3);
    box-shadow: 0 0 5px rgba(83,135,162,.3);
}
.subnavi li a {
    display: block;
    height:100%;
    cursor:pointer;
    padding:70px 5px 10px 5px;
    background-size: 44px;
    text-decoration: none;
}
.subnavi li:hover {
  	-webkit-box-shadow: none;
	-moz-box-shadow: none;
    box-shadow: none;

}



/*ポップアップ用ボタン*/
.guide {
    background: url("../../../map/img/question.png") no-repeat center 15px;
    background-color: #fae6e7;
}
.guide a {
    color: #CF2027;
}

.download {
    background: url("../../../map/img/download.png") no-repeat center 15px;
    background-color: #e0f2f8;
}
.download a {
    color: #059CCF;
}



/*表の中のボタン*/
.guidein {
    font-size: 14px;
    font-size:1.4rem;
    margin: 30px 0 0;
}
.guidein a {
    padding:5px 5px 5px 28px;
    background: url("../../../map/img/question.png") no-repeat left center;
    background-size: 22px;
    cursor:pointer;
    color: #CF2027;
}




/**************************/
/*コントロールボタン
/**************************/
/*タブメニュー*/
.tabmenu {
    display: table;
    border-collapse: separate;
    border-spacing: 10px 0; 
    margin:0;
    padding: 0;
    list-style: none;
    line-height: 100%;
}
.tabmenu li {
    display: table-cell;
}
.tabmenu li a {
    display:block;
    text-align: center;
    text-decoration: none;
}
.tabmenu li a.selected {
    background-color: #ddd;
    color:#fff;
}



/**********************/
/*コンテンツ
/**********************/
/*操作パネル*/
.controlbox {
    margin: 0 40px 15px;
    overflow: hidden;
}
.controlbox label {
    font-weight: bold;
    font-size: 26px;
    font-size:2.6rem;
}


/*タブボタン*/
.tabmenu {
    display: inline;
}
.tabmenu li a {
    border: 1px #ddd solid;
    color:#000;
}


/*************************/
/*図表
/*************************/
/*タブボタン*/
.category1 {
    margin-bottom: 20px;
}
.category1 li {
    font-size: 18px;
    font-size:1.8rem;
    font-weight: bold;
}
.category1 li a {
    min-width:200px;
    border: 1px #ddd solid;
    padding: 20px 20px;
    font-size: 18px;
    font-size:1.8rem;
    margin: 5px;
    background-color:#ddd;
}
.category1 li a:hover {}
.category1 li a.selected {
    position: relative;
    background-color: #047CBB;
    border: 1px #047CBB solid;
    color:#fff;
}

/*チェックマーク*/
.category1 li a.selected::after {
    display: block;
    content: '';
    position: absolute;
    top: 1em;
    left: 1.5em;
    width: 20px;
    height: 10px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #eee;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}




/*************************/
/*分野
/*************************/
.figuration {
    height:100%;
    overflow:auto;
}

/*タブボタン*/
.category2 li {
    font-size: 16px;
    font-size:1.6rem;
    font-weight: 550;
}
.category2 li a {
    position:relative;
    min-width:140px;
    padding: 15px 20px;
    margin: 5px 5px 12px 5px;
    background-color: #ddd;
    color: #fff;
}

/*吹き出し▼ボタン*/
.category2 li a.selected::after {
    border-top: 11px solid #ddd;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    content: '';
    margin-left: -14px;
    position: absolute;
    bottom: -12px;
    left: 50%;
}


.reportbox h2 {
    background-color: transparent;
	background-image: none;
	padding: 0;
	margin: 20px 0 0 0;
}
.reportbox h2:before {
	content:none;
}


/*データ用*/
.reportbox .item {
    height:100%;
    overflow:auto;

    width:100%;
    display: table;
    border-collapse: collapse;
    border-spacing: 0px 0px;
    table-layout: fixed;
    margin-bottom: 20px;
    border: 3px #ddd solid;
    min-height: 280px;
    text-align: center;
}
.reportbox .column {
    display: table-cell;
    vertical-align: top;
    padding: 0px 20px;
    background-color: #F7F6EE;
}
.reportbox .column ul {
    margin: 0;
	padding: 0;
	list-style-type: none;
}

/*左側の列*/
.reportbox .item .column:first-child {
    color:#fff;    
    width: 23%;
    padding: 20px 20px 20px 15px;
    line-height: 140%;
    text-align: left;
    font-size: 80%;
}
.reportbox .item .column:first-child p {
    border-top:1px #fff dotted;
    padding-top:20px;
}
.reportbox .item .column:first-child dd {
    margin: 0;
}

/*見出し初期化*/
.reportbox .item .column h2 {
    clear: both;
}
.reportbox .item .column:nth-child(2) h2 {
	border-top:3px #000 solid;
	border-bottom: 1px #000 dotted;
	padding: 15px 0;
	text-align: center;
}


.reportbox .item .column:first-child h2 {
    margin:0;
    padding: 0;
    background-color: trnasprent;
    background-image: none;
    border-width: 0;
    line-height: 100%;
    margin:20px 0 30px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 32px;
    font-size:3.2rem;
    font-weight: 500;
}
.reportbox .item .column:first-child h2 span {
    font-size: 80%;
}

    
.reportbox .item .column:first-child .guidein a {
   border:1px #fff solid;
   background-color: #fff;
   padding:5px 10px 5px 33px;
   background-position: 5px center;
}



/*******************/
/*グラフ
/*******************/
#chartbox {}
#chartbox .reportbox .column figure {
    width: 46%;
    float:left;
    margin: 20px 1% 30px;
    vertical-align: top;
}
#chartbox .reportbox .column figcaption {
    font-weight: bold;
    font-size: 24px;
    font-size:2.4rem;
    margin: 0px 0;
}
#chartbox .reportbox .column figcaption span {
    font-weight: normal;
    margin: 0 1em;
    font-size: 80%;
}
#chartbox .reportbox .column img {
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
}





/*******************/
/*マップ
/*******************/
#mapbox {}

.section-map {
    margin: 30px auto;
}
.section-map ul {
    clear: both;
    margin: 0 0 5px -5px;
    padding: 0;
    list-style-type: none;
    width:100%;
    display:table; 
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 5px 0;
}
.section-map li {
    width:6%;
    display:table-cell;
    vertical-align:middle;
    color:#fff;
    font-size:0.9em;
    line-height: 120%;
}
.section-map li:first-child {
    width:5%;
    text-align: center;
}

/*見出し：MODEL*/
.map-header {
    margin: 0 0 5px 0;
}
.map-header li {
    padding: 3px 0 0 5px;
    background-color: #343434;
    text-align: left;
    width: 20.5%;
    font-weight: bold;
}
.map-header li:first-child {
    width:5.5%;
    padding:3px 0;
    text-align: center;
}


/*見出し：YEAR*/
.map-year {
    margin: 0 0 10px 0;
}
.map-year li {
    padding: 2px 0;
    text-align: center;
}
.map-year li.y00 {
	background-color: #ABC2C2;
}
.map-year li.y01 {
    background-color: #97b5bf;
}
.map-year li.y02 {
    background-color: #93cbca;
}

/*地図画像*/
.thumbnail {
    margin: 0 0 8px 0;
}
.thumbnail img {
    display: block;
    width:100%;
    max-width: 85px;
}
.thumbnail li:first-child {
    font-weight: bold;
}


/*見出し：RCP*/
.rcp85 {
    background-color:#ff339a;
}
.rcp45 {
    background-color:#ff9935;
}
.rcp26 {
    background-color:#00ccff;
}





/*************************/
/*色
/*************************/
/*気候 #0099CC*/
#chart_climate {}
.category2 li.btn-climate a {
    background-color: #0099CC;
    border-color: #0099CC;
}
.category2 li.btn-climate a.selected::after {
    border-top: 11px solid #0099CC;
}
.climate .item {
    border-color:#0099CC;
}
.climate .item>div:first-child {
    background-color: #0099CC;
}
#chart_climate .item .column img {
    width: 100%;
    max-width: 500px;
}



/*農業・林業・水産業 #a7df6c*/
#chart_agri {}
.category2 li.btn-agri a {
    background-color: #7fbd3d;
    border-color: #7fbd3d;    
}

.category2 li.btn-agri a.selected::after {
    border-top: 11px solid #7fbd3d;
}
.agri .item {
    border-color:#7fbd3d;
}
.agri .item>div:first-child {
    background-color: #7fbd3d;
}
.agri .item .column:nth-child(2) h2 {
    border-color:#7fbd3d;
	color:#7fbd3d;
}


/*水環境・水資源 #1F66C6*/
#chart_water {}
.category2 li.btn-water a {
    background-color: #1F66C6;
    border-color: #1F66C6;
}
.category2 li.btn-water a.selected::after {
    border-top: 11px solid #1F66C6;
}
.water .item {
    border-color:#1F66C6;
}
.water .item>div:first-child {
    background-color: #1F66C6;
}
.water .item .column:nth-child(2) h2 {
    border-color:#1F66C6;
	color:#1F66C6;
}

/*自然生態系 #30AD8F*/
#chart_eco {}
.category2 li.btn-eco a {
    background-color: #30AD8F;
    border-color: #30AD8F;
}
.category2 li.btn-eco a.selected::after {
    border-top: 11px solid #30AD8F;
}
.eco .item {
    border-color:#30AD8F;
}
.eco .item>div:first-child {
    background-color: #30AD8F;
}
.eco .item .column:nth-child(2) h2 {
    border-color:#30AD8F;
	color:#30AD8F;
}


/*自然災害・沿岸域 #F3557A*/
#chart_disaster {}
.category2 li.btn-disaster a {
    background-color: #F3557A;
    border-color: #F3557A;
}
.category2 li.btn-disaster a.selected::after {
    border-top: 11px solid #F3557A;
}
.disaster .item {
    border-color:#F3557A;
}
.disaster .item>div:first-child {
    background-color: #F3557A;
}
.disaster .item .column:nth-child(2) h2 {
    border-color:#F3557A;
	color:#F3557A;
}


/*健康 #F76C3E*/
#chart_health {}
.category2 li.btn-health a {
    background-color: #F76C3E;
    border-color: #F76C3E;
}
.category2 li.btn-health a.selected::after {
    border-top: 11px solid #F76C3E;
}
.health .item {
    border-color:#F76C3E;
}
.health .item>div:first-child {
    background-color: #F76C3E;
}
.health .item .column:nth-child(2) h2 {
    border-color:#F76C3E;
	color:#F76C3E;
}


/*マップ*/
#map_climate {}
#map_agri {}
#map_water {}
#map_eco {}
#map_disaster {}
#map_health {}




/*******************************/
/*観測データ（過去データ）
/*******************************/
#past {}

#past h2 {
    font-size: 32px;
    font-size:3.2rem;
    margin-left: 40px;
}

.item-past {
    overflow: hidden;
}

.column-past {
    width: 31%;
    margin: 0px 1% 40px;
    padding: 0px 20px;
    float:left;
    background-color: #F7F6EE;
}
.column-past img {
    width: 100%;
    max-width: 500px;
    margin: 0px auto 10px;
}

#past .column-past figure {
    margin: 0px;
}
#past .column-past figcaption {
    margin:20px 0 10px;
    padding: 0;
    background-color: trnasprent;
    background-image: none;
    border-width: 0;
    line-height: 100%;
    text-align: center;
    letter-spacing: 1px;
    font-size: 32px;
    font-size:3.2rem;
    font-weight: 500;
}

#past .column-past .note {
    text-align: left;
    font-size: 75%;
}
#past .column-past .note p {
    border-top:1px #000 dotted;
    padding-top:20px;
}









/**********************/
/*ポップアップ機能
/**********************/
.remodal {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px; 
	border-radius: 6px;
    font-size: 12px;
    font-size:1.2rem;
    overflow: hidden;
}
.remodal dt {
    font-size: 16px;
    font-size:1.6rem;
    font-weight: bold;
}
.remodal dd {
    margin: 1em 0 0 0;
}
.remodal h2 {
    margin:10px 0 20px 0;
    padding: 0;
    background-color: trnasprent;
    background-image: none;
    border-width: 0;
    line-height: 100%;
}

/**「気象観測データの長期変化の傾向」ページについて**/
/*文字色*/
.aka{
	color: #CE2F2F;	
}
/*太文字*/
.mb{
	font-weight: bold;
}

/*右カラム*/
.rbox {
    width: 60%;
    float: left;
    margin-right: 3%;
}

/*RCPシナリオとは*/
.RCP {
    margin-top: 30px;
}
.RCP img {
    width: 100%;
    max-width: 500px;
    display: block;
}
.RCP dl {
    margin-top: 0;
}

.RCP dt span {
    margin-right: 5px;
}
.RCP .reference {
    font-size: 90%;
}

span.caption {
    display: block;
    font-size: 90%;
    margin: 1em 0 0 1em;
}

/*左カラム*/
/*（表）モデルの概要*/
.tbl-guide {
    width: 37%;
    float: left;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 90%;
}
.tbl-guide th {
    border:1px #ddd solid;
    padding: 5px;
}
.tbl-guide th:nth-child(1) {
    width:25%;
}
.tbl-guide th:nth-child(2) {
    width:35%;
}
.tbl-guide th:nth-child(3) {
    width:auto;
}
.tbl-guide td {
    border:1px #ddd solid;
    padding: 5px;
}
.tbl-guide caption {
    font-size: 12px;
    font-size:1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}


/*グラフの見方*/
#graphguide dl {
    margin-top: 20px;
}

#graphguide figure {
    margin: 20px 0;
    padding: 0;
}
#graphguide figure img {
    display: block;
    margin: 0;
}





/****************************/
/*レスポンシブ
/****************************/
/*x-large*/
/*  1200px 以下 */
@media screen and (max-width: 1200px) {
}

/*large*/
/*  980px 以下 */
@media screen and (max-width: 980px) {

}


/*normal*/
/*  768px 以下 */
@media screen and (max-width: 768px) {
}


/*small*/
/*  624px 以下 */
@media screen and (max-width: 624px) {
}



/*x-small*/
/*  520px 以下 */
@media screen and (max-width: 520px) {
}


/*small*/
/*  320px 以下 */
@media screen and (max-width: 320px) {
}