@charset "utf-8";

/*---------------------------------------
 details （地震情報/NEWS取得のスタイル）
=======================================*/

#details {
}

#details .title-image {
    display: block;
    width: 720px;
    height: 100%;
    margin-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#details h1.title {
    position: relative;
    font-size: 25px;
    line-height: 28px;
    color: #000000;
    background: #ffffff;
    border: 4px solid #455a85;
    margin: 5px 10px 5px 10px;
    padding: 15px 5px 15px 5px;
    border-radius: 4px;
}


#details .post_datetime_jp {
    font-size: 16px;
    margin-left: 20px;
}

#details .title-image h2.title {
    font-size: 25px;
    line-height: 30px;
    padding-left: 20px;
    padding-bottom: 10px;
    background: url("../imgs/news/icon-title.jpg") no-repeat left 5px;
    border-bottom: solid 3px #CCCCCC;
}


#details .btn-rss{
    display: block;
    width: 70px;
    height: 17px;
    float: right;
}

#details .btn-rss a{
    width: 50px;
    height: 17px;
}

#details .btn-rss a:hover img{
    opacity:0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

#details .box-details{
    display: block;
    width: 700px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

*:first-child+html #details .box-details{
    padding-top: 10px;
}

#details .box-details .txt-center{
    font-size: 17px;
    display: block;
    width: 700px;
}

#details .box-details .txt-left{
    font-size: 17px;
    display: block;
    width: 410px;
    float: left;
}

#details .box-details .txt-right{
    font-size: 17px;
    display: block;
    width: 410px;
    float: right;
}

#details .box-details .txt-center2{
    display: block;
    width: 700px;
}

#details .box-details .txt-left2{
    display: block;
    width: 410px;
    float: left;
}

#details .box-details .txt-right2{
    display: block;
    width: 410px;
    float: right;
}

#details .box-details .txt-left-float{
    font-size: 17px;
}

#details .box-details .txt-right-float{
    font-size: 17px; 
}

#details .box-details .txt-left2-float{
    
}

#details .box-details .txt-right2-float{
    
}

#details .box-details .img-right{
    display: block;
    float: right;
}

#details .box-details .img-left{
    display: block;
    float: left;
}

#details .box-details .img-center{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/*-----ここからIE7用記述-----*/
*:first-child+html #details .box-details .img-right{
    width: 280px;
}

*:first-child+html #details .box-details .img-left{
    width: 280px;
}
/*-----IE7用記述ここまで-----*/

#details .box-details .img-left-contents-float {
    display: block;
    float: left;
    margin-right: 20px;
}

#details .box-details .img-right-contents-float {
    display: block;
    float: right;
    margin-left: 20px;
}

#details .box-details h3 {
    font-size: 30px;
    color: #668BB8;
    line-height: 30px;
    margin-bottom: 10px;
}

#details .box-details h4{
    font-size: 24px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 15px;
}

#details .box-details h4{
    font-size: 24px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 15px;
}

#details .box-details-s .txt-details,
#details .box-details   .txt-details {
    margin-bottom: 15px;
}

#details #banner_inline {
    float: left;
    padding-right: 20px;
    width: 100%;
}

#details .txt-center #banner_inline {
    width: 230px;
}

#details .img-right-contents-float #banner_inline {
    padding-right: 0px;
}


#details #banner_inline a {
    display: block;
    width: 230px;
    height: 230px;
    margin: 20px auto;
}

#details .box-details-s .txt-details p,
#details .box-details   .txt-details p {
    line-height: 1.8;
}

#details .box-details-s{
    display: block;
    width: 690px;
    padding: 13px 15px;
    background-color: #f2f2f2;
    margin-bottom: 15px;
}

#details .box-details-s .box-details-s-inner{
    display: block;
    width: 690px;
    margin-bottom: 15px;
}

#details .box-details-s .txt-left{
    display: block;
    width: 390px;
    float: left;
}

#details .box-details-s .img-right{
    display: block;
    width: 280px;
    float: right;
}

#details .box-details-s .img-left{
    display: block;
    width: 280px;
    float: left;
}

#details .box-details-s .img-center{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#details .box-details-s .txt-right{
    display: block;
    width: 390px;
    float: right;
}

#details .box-details-s .txt-left2{
    display: block;
    width: 390px;
    float: left;
}

#details .box-details-s .txt-right2{
    display: block;
    width: 390px;
    float: right;
}

#details .box-details-s .img-left-contents-float {
    display: block;
    float: left;
    margin-right: 20px;
}

#details .box-details-s .img-right-contents-float {
    display: block;
    float: right;
    margin-left: 20px;
}

#details h5{
    font-size: 16px;
    color: #666666;
    margin-bottom: 15px;
}

#details .last-margin{
    margin-bottom: 0px !important;
}

#details h2.tit-details,p.tit-details{
    display: block;
    width: 100%;
    height: 22px;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 5px;
    background: url("../imgs/common/border.jpg") repeat-x left bottom;
    margin-bottom: 10px;
}

#details .box-relative {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding-left: 30px;
    padding-rignt: 20px;
}

#details .box-relative li {
    width: 100%;
    margin-bottom: 10px;
    list-style: disc outside;
    padding: 0px;
}


#details .box-relative li a {
    text-decoration: underline;
    font-size: 16px;
}

#details .box-relative li .myself{
   padding-left: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #0000FF;
    background: url("../imgs/news/icon-link.jpg") no-repeat left center;
}


#details .box-relative li.last{
    margin-bottom: 0px;
}



#details .box-backnumber{
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

#details .box-backnumber li{
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

#details .box-backnumber li a{
    display: block;
    height: 30px;
    text-decoration: underline;
    padding-left: 40px;
    background: url("../imgs/news/icon-backnumber.jpg") no-repeat left center;
}

#details .box-backnumber li.last-li{
    margin-bottom: 0px;
}

#details .btn-news{
    display: block;
    width: 276px;
    height: 40px;
    margin: 0px 222px 15px;
}

#details .btn-news a{
    display: block;
    width: 276px;
    height: 40px;
}

#details .btn-news a:hover img{
    opacity:0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

#details .box-twitter {
    display: block;
    width: 540px;
    height: 430px;
    padding-top: 5px;
    background: url("../imgs/news/bg-twitter-top.jpg") no-repeat left top;
    margin: 0 auto 0 0;
}

#details .box-twitter .tw-base {
    padding: 5px 10px;
    background: url("../imgs/news/bg-twitter-base.jpg") repeat-y left top;
}

#details .box-twitter .tw-base iframe{
    min-width: 687px;
    max-height: 350px;
}

#details .box-twitter .tw-bottom {
    height: 5px;
    background: url("../imgs/news/bg-twitter-bottom.jpg") no-repeat left bottom;
    font-size: 1px;
    line-height: 1px;
}

#details .box-twitter .tw-base .area-twitter {
    display: block;
    width: 110px;
    height: 20px;
    margin-bottom: 5px;
}

#details .box-twitter .tw-base .btn-twitter {
    display: block;
    width: 213px;
    height: 38px;
    margin: 10px auto 0;
}

#details .box-twitter .tw-base .btn-twitter a{
    display: block;
    width: 213px;
    height: 38px;
}

#details .box-twitter .tw-base .btn-twitter a:hover img{
    opacity:0.9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha( opacity=90 )";
}

#details .btn-return-series{
    display: block;
    width: 126px;
    height: 21px;
    float: left;
}
#details .btn-return-series a{
    display: block;
    width: 126px;
    height: 21px;
}

#details .btn-return-new{
    display: block;
    width: 110px;
    height: 21px;
    float: left;
}

#details .btn-return-new a{
    display: block;
    width: 100px;
    height: 21px;
}

#details .btn-return-topics{
    display: block;
    width: 175px;
    height: 21px;
    float: left;
}

#details .btn-return-topics a{
    display: block;
    width: 175px;
    height: 21px;
}

#details .btn-return-topics a:hover img,
#details .btn-return-new    a:hover img,
#details .btn-return-series a:hover img{
    opacity:0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}


#details .sns-caption-column{
    display:inline;
    font-size: 14px;
    text-align: left;
    margin-left: 243px;
    width: 400px;
}

#details .sns-caption-news{
    display:inline;
    font-size: 14px;
    text-align: left;
    margin-left: 243px;
    width: 400px;
}

#details .sns-footer-caption{
    font-size: 14px;
    text-align: left;
}

#details .box-sns{
    padding-top: 10px;
}

#details .box-sns-underline{
    padding-bottom: 10px;
    background: url("../imgs/common/border.jpg") repeat-x left bottom;
}

#details .box-sns .btn-facebook{
    display: block;
    width: 110px;
    height: 20px;
    float: right;
}

#details .box-sns .btn-twitter{
    display: block;
    width: 95px;
    height: 20px;
    text-align: right;
    float: right;
}

#header .h-inner .box-btn .btn-twitter {
    display: block;
    width: 110px;
    height: 20px;
    float: right;
}

#details .box-sns .btn-pocket{
    display: block;
    width:  66px;
    height: 22px;
    float: right;
    text-align: center;
}

#details .box-sns .btn-g-plusone{
    display: block;
    width:  42px;
    height: 20px;
    float: right;
    text-align: center;
}

#details .box-sns .btn-mixi{
    display: block;
    width:  70px;
    height: 20px;
    float: right;
}

#details .box-sns .btn-hatena{
    display: block;
    width:  30px;
    height: 20px;
    float: right;
    text-align: center;
}

#details .box-sns .btn-yahoo{
    display: block;
    width: 130px;
    height: 17px;
    float: right;
}

#details .box-sns-footer{
    padding-top: 10px;
    padding-bottom: 20px;
}

#details .box-sns-footer .btn-facebook{
    display: block;
    width: 110px;
    height: 20px;
    float: left;
}

#details .box-sns-footer .btn-twitter{
    display: block;
    width: 95px;
    height: 20px;
    text-align: right;
    float: left;
}

#details .box-sns-footer .btn-pocket{
    display: block;
    width:  66px;
    height: 22px;
    float: left;
    text-align: center;
}

#details .box-sns-footer .btn-g-plusone{
    display: block;
    width:  42px;
    height: 20px;
    float: left;
    text-align: center;
}

#details .box-sns-footer .btn-mixi{
    display: block;
    width:  70px;
    height: 20px;
    float: left;
}

#details .box-sns-footer .btn-hatena{
    display: block;
    width:  30px;
    height: 20px;
    float: left;
    text-align: center;
}

#details .box-sns-footer .btn-yahoo{
    display: block;
    width: 130px;
    height: 17px;
    float: left;
}

/*-- 一覧リンクボタン ここまで --*/
#details .box-button-top{
	font-size: 15px;
	text-align: right;
	padding-bottom: 7px;
	margin-bottom: 7px;
}

#details .box-button-bottom{
	font-size: 15px;
	text-align: right;
	padding-top: 7px;
	border-top: 1px solid #cccccc;
	margin-top: 7px;
}

#details .box-button-bottom li,
#details .box-button-top li{
	display: inline;
    margin-left: 3px;
    margin-right: 3px;
}

#details .box-button-bottom li a,
#details .box-button-top li a{
	color: #172E5E;
	text-decoration: underline;
}

#details .box-button-bottom li a:hover,
#details .box-button-top li a:hover{
	color: #ff6600;
}

/*-- 一覧リンクボタン ここまで --*/

.caption {
    width: 280px;
    text-align: left;
    margin:0px auto;
}

.caption2 {
    width: 220px;
    text-align: left;
    margin:0px auto;
}

a.thickbox img {
    border: solid 1px #EDEDED;
}

#details .contents-inner .box-details .txt-details .column-caption {
    display: block;
    width: 100%;
    height: 20px;
    margin-bottom: 0px;
}

#details .contents-inner .box-details .txt-details .column-caption li {
    display: block;
    height: 20px;
    line-height: 20px;
    float: left;
}

#details .contents-inner .box-details .txt-details .column-caption li.category {
    display: block;
    height: 16px;
    line-height: 16px;
    width: 75px;
    text-align: center;
    margin-right: 5px;
}

#details .contents-inner .box-details .txt-details .column-caption li.category a {
    color: white;
}

#details .contents-inner .box-details .txt-details .column-caption li.category a:hover {
    color: #002244;
}

#details .series_caption {
    display: block;
    width: 80px;
    text-align: center;
    color: white;
    margin-right: 10px;
    background-color: #D37356;
}

#details .post-date {
    display: block;
    width: 200px;
    font-size: 14px;
    color: #999999;
    margin-right: 10px;
}

#details .button {
    display: block;
    width: 405px;
}

#details .column-button {
    display: block;
    width: 315px;
    margin-left: auto;
    margin-right: 0px;
}

#details .column-button li {
	display: inline;
    margin-left: 3px;
    margin-right: 3px;
}

#details .column-button-bottom {
    display: block;
    width: 720;
    margin-left: auto;
    margin-right: 0px;
}

#details .column-button-bottom li {
	display: block;
    margin-left: 3px;
    margin-right: 3px;
    float: right;
}

#details .subtitle {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 0px;
}

#details h3#series_title_jp {
    width: 640px;
    font-size: 18px;
    padding-left: 20px;
    background: url("/imgs/news/icon-title.jpg") no-repeat left top;
    margin-top: 2px;
    font-size: 20px;
}

#details h3#series_title_image {
    padding-top: 10px;
}

#details .backnumber {
    font-size: 15px;
    font-weight: bold;
    padding-left: 20px;
    background: url("/imgs/index/icon-text.png") no-repeat left 2px;
}

#details .prolog-header {
    margin-bottom: 0px;
}

#details .series-title-jp {
    margin-top: 12px;
}

#details .prolog {
    margin-bottom: 30px;
}

#details .paginate {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 200px;
}

#details .paginate ul {
    text-align: center;
    padding-top: 30px;
}

#details .paginate li {
    display: inline;

}

#details .paginate li {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 1.2em;
}

#details .paginate .current {
    margin-left: 3px;
    margin-right: 3px;
    padding: 2px 6px;
    font-weight: bold;
    vertical-align: top;
    color: #F7A62A;
}

#details .paginate a {
    margin: 0 1px;
    padding: 6px;
    border: solid 1px #DDD;
    text-decoration: none;
    background: white;
}

#details .paginate a:hover {
    color: #FFFFFF;
    background-color: #fcd72d;
    border-color: #F7991c;
    text-decoration: none;
}

#details .header-banner {
    width: 728px;
    margin: 0px auto;
    padding: 15px 0px;
}

#details .header-banner3 {
    width: 728px;
    height: 60px;
    margin: 0px auto;
    padding: 15px 0px;
}

#details .header-banner3 div {
    float: left;
    padding: 3px;
}

#details .title-image {
    clear: both;
}

#details .box-details h4.question,
#details .box-details-s h4.question {
    display: block;
    width: 629px;
    font-size: x-large;
    font-weight: bold;
    color: #0033FF;
    padding-left: 30px;
    background: url("../imgs/faq/q.png") no-repeat left 2px;
}

#details .box-details-s h4.question {
    margin-bottom: 10px;
}

#details .box-details div.answer,
#details .box-details-s div.answer {
    display: block;
    font-size: x-large;
    font-weight: bold;
    line-height: 24px;
    color: #FF3300;
    padding-left: 30px;
    background: url("../imgs/faq/a.png") no-repeat left 2px;
    margin-bottom: 10px;
}

#details .base .main-banner {
    display: block;
    width: 100%;
    height: 80px;
    margin-top: 40px;
    margin-bottom: 40px;
}

#details .base .main-banner div {
    width: 320px;
    height: 70px;
    background:#FFF;
    margin-left: 18px;
    float: left;
}

#details .base #banner_footer {
    display: block;
    width: 728px;
    margin: 0 auto;
    clear: both;
}

#details .base #banner_amazon {
    display: block;
    clear: both;
    width: 728px;
    margin: 0px auto 20px auto;
}

#details .base #banner_bottom {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-direction: row;
    flex-direction: row;
}

#details .base #banner_bottom div {
    margin: 10px;
}


#details .base .text-banner {
    display: block;
    margin: 5px;
}

/* 
    地図情報詳細
*/
#details .base .box-info {
    width: 720px;
    height: 410px;
}

#details .base .box-info .bi-left{
    display: block;
    width: 420px;
    height: 420px;
    float: left;
}

#details .box-info .bi-right{
    display: block;
    width: 300px;
    float: right;
}

#details .box-info .bi-right .update_date{
    display: block;
    width: 300px;
    height: 20px;
    padding: 3px 0 5px;
}

#details .box-info .bi-right .update_date p {
    display: block;
    width: 260px;
    color: #999999;
    font-size: 18px;
    background: url("../imgs/common/icon-text.jpg") no-repeat left 2px;
    padding-left: 20px;
}

#details .box-info .bi-right .box-list dl {
    padding: 20px 0px;
}

#details .box-info .bi-right .box-list dt {
    font-size: 14px;
}

#details .box-info .bi-right .box-list dd {
    font-size: 18px;
    margin-top: 5px;
}

#details .box-info .bi-right .box-list .period dd {
    color: #0033FF;
}

#details .banner_text_under_news {
    margin-bottom: 30px;
}

#details .banner_text_under_news .text-banner-caption {
    display: block;
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    background-color: #EDEDED;
}

#details .banner_text_under_news .text-banner a {
    display: block;
    text-align: left;
    width: 700px;
    font-size: 100%;
    line-height: 30px;
    text-decoration: underline;
    margin-left: 30px;
}

#details .text-banner {
    margin-top: 20px;
    margin-bottom: 10px;
}

#details .text-banner a {
    display: block;
    text-align: left;
    width: 750px;
    font-size: 18px;
    line-height: 30px;
    text-decoration: underline;
}

#details .btn_more {
    width: 100%;
}

#details .btn_more a {
    width: 250px;
    margin: 10px auto;
    padding: 15px;
    background: DarkOrange;
    color: #ffffff;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 5px;
    font-size: 22px;
}

#details .btn_more a:hover {
    text-decoration: none;
    background: Orange;
}

#details #news_contents_area {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#details #news_contents_area #news_contents {
    margin-top: 10px;
}

#details #column_contents_area {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#details #column_contents_area .left {
    width: 492px;
    float: left;
}

#details #column_contents_area .left #column_contents {
    margin-top: 10px;
}

#details #column_contents_area .right {
    width: 234px;
    float: left;
    padding-left: 10px;
}

#details .map_link a {
    color: #0000FF;
    text-decoration: underline;
}

#details #imageEx td {
    vertical-align: top;
}

#details .top_sns_icons {
    float: right;
    width: 300px;
    margin: 0 auto;
}

#details .bottom_sns_icons {
    width: 300px;
    margin: 0 auto;
}

#details #recommend_list {
    margin-top: 20px;
}