@charset "utf-8";

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

body {
    padding:60px 0 0 0;
}

section {
    background-color: #Fff;
}
#header>header {
    height:50px;
}

.logo {
    top:10px;
    height:30px;
}

.mapmenu {
    padding:2px 0;
}
.mapmenu a {
    background: url("../img/menu.png") no-repeat left center;
    background-size: 30px;
    padding:0px 0 0px 35px;
    cursor: pointer;
    
}


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


/*地域名*/
h1 {
    font-size: 44px;
    font-size:4.4rem;
    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("../img/info.png") no-repeat left center;
    padding:5px 5px 5px 28px;
    background-size: 25px;
    color:#0a81bc;
    text-decoration: none;
}

h2 {
    background-color: transparent;
	padding: 0;
	margin: 0 0 30px 0;
}



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










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





/*****************/
/*左カラム
/*****************/
#datasource {
    padding-right: 25px;
    margin-bottom:40px;
}

/*注意事項*/
.cautionbox {
    background-color: #ffeaea;
    border:3px #f8cccc 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("../img/caution.png") no-repeat left top;
    background-size: contain;
    padding-left: 30px;
}
.cautionbox p {
    margin: 0;
}
.cautionbox a {
    background: url("../img/help.png") no-repeat right center;
    padding-right:23px;
}


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

}








/*******************/
/*グラフ
/*******************/
#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;
}









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

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


.item-past {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;


    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}


.column-past {
    width: 31%;
    margin: 0px 1% 40px; 
    padding: 0px 20px;
    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: 90%;
}
#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%;
}



/*右カラム*/
.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) {
}