@charset "utf-8";



/********************************************
  reset処理
********************************************/

html,body{
  margin: 0;
  padding: 0;
}

#header a:hover{
  opacity: 0.5;
}

/********************************************
  header処理
********************************************/

/* 広告範囲 */
.prAreaWrapper {
	background: url(../img/bg_header.gif);
	border-bottom: 1px solid #bdbdbd;
}
div[class$="PrArea"],.headerTitle,.globalNavi,.topicNavi,.topics,.sitemapList,.searchWindow {
	width:968px;
	margin: 0 auto;
}
.topicNavi{
  height: 36px;
}

.prlinkBox {
	float: right;
  font-size:90%;
	width: 412px;
}
.prlinkBox ul li {
	float: left;
	line-height: 110%;
	padding: 0 5px;
	border-right: 1px solid #b2b2b2;
}
.prlinkBox ul li.last {
	border: none;
}
.prlinkBox ul li a {
	color: #003366;
	text-decoration: none;
}
.prlinkBox ul li a:hover {
	text-decoration: underline;
}

.prlinkBox ul::after{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

#prBox {
	float: left;
	display: inline-block;
	color: #003366;
	font-size: 90%;
}
#prBox .prChk {
	color: #cc3300;
}
#prBox a {
	color: #003366;
	text-decoration: none;
}
#prBox a:hover {
	text-decoration: underline;
}

/********************************************
  prlinkBox
********************************************/

div[class$="PrArea"] {
  background: url(../img/bg_header.gif);
  border-bottom: 1px solid #bdbdbd;
}

.topPrArea{
  height:11px;
	padding: 5px 0;
}

.bottomPrArea{
  height: 100%;
  padding:10px 0;
}

.adInleft{
	float:left;
  width:888px;
}

.adInright{
	float:right;
	background-color:#003366;
	width:65px;
  padding: 3.5px 5px;
	overflow:hidden;
	margin-top:-5px;
	margin-bottom:-5px;
	text-align:center;
}
.adInright img{
  height: 100%;
}

.prArea::after{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.prAreaWrapper .bottomPrArea > div::after{
  content:"";
  display:block;
  clear: both;
}

/********************************************
  hContents
********************************************/
/* グローバルコンテンツ */
.headerTitle .hContents {
	display: inline-block;
}
.headerTitle .logo {
	float: left;
  padding: 17px 5px 17px 0px;
}
.headerTitle .date {
	display: inline-block;
  height: 45px;
  line-height: 45px;
  padding: 17px 0px;
	color: rgb(153, 153, 153);
  letter-spacing: -1px;
}
.headerTitle .date span{
  font-size: 14px;
}
.headerTitle::after{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}


/********************************************
  会員情報
********************************************/

.memberContents{
  display: inline-block;
  float: right;
  position: relative;
}

.memberContents::before{
  content:url("../img/icn_user.png");
  display: block;
  position:absolute;
  left: -30px;
  top: 30px;
}


.memberMenu,.memberClub{
  display: inline-block;
  height: 64px;
  border: solid 2px rgb(204,204,204);
  border-radius: 5px;
}

.memberMenu{
  width: 480px;
  margin: 8px 0px;
  position: relative;
}

.memberMenu:before {
	content: "";
	position: absolute;
	top: 50%;
  left: -9px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 9px 0;
	border-color: transparent white transparent transparent;
	z-index: 0;
}
.memberMenu:after {
	content: "";
	position: absolute;
	top: 50%;
  left: -12px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent rgb(204,204,204) transparent transparent;
	z-index: -1;
}

.memberMenu ul{
  width: 100%;
  height: 44px;
  padding-top: 3px;
  padding-right: 2px;
}

.memberMenu ul li{
  display: table-cell;
  text-align: center;
  line-height: 40px;
  position: relative;
}

.memberMenu .message{
  background-color: rgb(237,237,237);
  text-align: center;
  padding:3px 0px;
}

.memberMenu .message p{
  color: rgb(36,100,179);
  font-weight: bold;
  font-size: 12.5px;
}

.memberMenu .message .labelLogin{
  font-weight: normal;
}

.memberMenu .message .userName{
  font-weight: bold;
}

.memberMenu .message p .accent{
  color: rgb(255,0,0);
  font-size: 100%;
}

.memberMenu a,.memberClub a{
  display: block;
  text-decoration: none;
  font-weight: bold;
}

.memberMenu .login a,.memberMenu .logout a{
  width: 74px;
}


.memberMenu .register a,.memberMenu .edit a{
  width: 85px;
  margin-left: 18px;
  margin-right: 6px;
}

.memberMenu .register a::before{
  content:url("../img/icn_register.png");
  display: block;
  position:absolute;
  left: 5px;
  top: 7px;
}

.memberMenu .edit a::before{
  content:url("../img/icn_edit.png");
  display: block;
  position:absolute;
  left: 5px;
  top: 7px;
}

.memberMenu .login a,.memberMenu .register a,.memberMenu .logout a,.memberMenu .edit a{
  color: rgb(36,100,179);
  font-size: 13px;
}

.memberMenu .paper,.memberMenu .search{
  background-color: rgb(36,100,179);
  margin-top: 2px;
  position: relative;
}

.memberMenu .paper a,.memberMenu .search a{
  color: white;
  width: 126px;
  font-size: 15px;
  margin-left: 20px;
}

.memberMenu .paper{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: solid 1px rgb(80,131,194);
}

.memberMenu .paper a::before{
  content:url("../img/icn_paper.png");
  display: block;
  position:absolute;
  left: 23px;
  top: 7px;
}

.memberMenu .search{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

}

.memberMenu .search a::before{
  content:url("../img/icn_past.png");
  display: block;
  position:absolute;
  left: 10px;
  top: 7px;
}

.memberMenu .userName{
  font-size: 100%;
  margin:0 10px;
}

.memberClub{
  width: 46px;
  margin: 8px 0px 8px 6px;
  vertical-align: top;
}

.memberClub a{
  display: block;
  color: rgb(0,105,53);
  font-size: 80%;
  text-align: center;
  font-weight: normal;
  line-height: 120%;
  padding: 18px 0;
  position: relative;
}

.memberClub a::after{
  content:url("../img/icn_other.png");
  display: block;
  position:absolute;
  right: 2px;
}



/********************************************
  globalMenu
********************************************/

.globalMenu{
  position: relative;
}

.globalMenu ul{
  display: block;
}

.globalMenu ul li{
  display: inline-block;
}

.globalMenu a{
  font-weight: bold;
  text-decoration: none;
}

.globalNavi {
  position: relative;
  text-align: left;
}

.globalNavi ul li{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
}

.globalNavi ul li a{
  display: block;
  padding:10px 18px;
  color: rgb(0,51,102);
}

.globalNavi ul li.active,.topicNaviWrapper{
  background: rgb(36,100,179);
}

.globalNavi ul li.active a,.topicNaviWrapper ul li a{
  color: white;
}

.globalNavi div{
  position: absolute;
  right:0;
  top:0;
}

.globalNavi .sitemap,.globalNavi .search{
  display: inline-block;
  padding: 12px 12px 12px 14px;
  position: relative;
}

.globalNavi .search{
  padding-left: 30px;
}

.globalNavi span a{
  display: block;
  color: rgb(0,51,102);
  font-size: 90%;
  font-weight: normal;
}

.globalNavi .sitemap::after,.globalNavi .search::after{
  content:"";
  display: block;
  position: absolute;
  left:50%;
  bottom:0px;
  width: 0;
  height: 0;
  border:5px solid;
  border-color:transparent;
  border-top-color:rgb(0,51,102);
}

.globalNavi .sitemap.active,.globalNavi .search.active{
  background-color: rgb(0,51,102);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
}

.globalNavi .sitemap.active a,.globalNavi .search.active a{
  color: white;
}

.globalNavi .sitemap.active::after,.globalNavi .search.active::after{
  content:"";
  display: block;
  position: absolute;
  left:50%;
  bottom:3px;
  width: 0;
  height: 0;
  border:5px solid;
  border-color:transparent;
  border-bottom-color:white;
}

.globalNavi .search a::before{
  content:url("../img/icn_search.png");
  display: block;
  position: absolute;
  left: 10px;
  top:30%;
}

.globalNavi .search.active a::before{
  content:url("../img/icn_search_active.png");
  display: block;
  position: absolute;
  left: 10px;
  top:30%;
}

.topicNaviWrapper .topicNavi .topicNaviIn{
  display: none;
}

.topicNaviWrapper .topicNavi .topicNaviIn.active{
  display: block;
}

.topicNaviWrapper .topicNavi .topicNaviIn ul li{
  padding:11px 12px;
}

.topicNaviWrapper .topicNavi .topicNaviIn ul li.active{
  background-color: white;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 7px 12px;
}

.topicNaviWrapper .topicNavi .topicNaviIn ul li.active a{
  color: rgb(36,100,179);
}

.globalNavi ul:after, .topicNavi ul:after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

/********************************************
  ドロップダウンメニュー
********************************************/

.sitemapListWrapper{
  display: none;
  position: absolute;
  top:34px;
  width: 100%;
  background-color: rgb(0,51,102);
  z-index: 10000;
}

.sitemapList dt,.sitemapList a{
  color: white;
}

.sitemapList dt{
  display: inline-block;
  width: 145px;
  vertical-align: top;
  margin-top: 10px;
}

.sitemapList dd{
  display: inline-block;
  padding:5px 0;
  border-collapse: separate;
  border-spacing:0 10px;
}

.sitemapList dd li{
  display: table-cell;
  width: 135px;
  vertical-align: middle;
  position: relative;
}
.sitemapList dd li a{
  display: block;
  width: 100%;
  margin-left: 10px;
}

.sitemapList dd li a::before{
  content:"";
  display: block;
  position: absolute;
  left:0;
  width: 0;
  height: 0;
  border:5px solid;
  border-color:transparent;
  border-left-color:white;
}

.sitemapList .partition{
  width: 100%;
  height: 0;
  border-bottom: solid 1px rgb(26,72,118);
}


/********************************************
  検索フォーム
********************************************/
.searchWindowWrapper{
  display: none;
  position: absolute;
  top:34px;
  right: 0px;
  width: 100%;
  height: 36px;
  background-color: rgb(0,51,102);
  z-index: 9;
  float: right;
}

.searchWindow{
  text-align: right;
}

.searchWindow span{
  display: inline-block;
  height: 100%;
  margin:0 10px;
  vertical-align: middle;
}
.searchWindow span img{
  width: 100%;
  height: auto;
}

.searchWindow .searchForm form{
  display: inline-block;
  height: 30px;
  background-color: white;
  padding: 0px 8px;
  margin: 3px 0;
  vertical-align: middle;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.searchWindow .searchForm .inputArea{
  border: none;
  height: 24px;
  width: 180px;
  margin: 2px 0px;
}

.searchWindow .searchForm .submitBtn{
  vertical-align: middle;
}

/********************************************
  トピックス
********************************************/
#contentsWrapper {
    padding: 20px 0 20px;
    background: url("../img/bg_contents.gif");
}

#contentsWrapper .topics{
  background-color: white;
  border: solid 1px rgb(160,174,190);
  border-radius: 3px;
}

#contentsWrapper .topics ul{
  display: block;
  text-align: center;
  padding: 14px 0;
}

#contentsWrapper .topics li{
  display: inline-block;
  padding:0 15px;
}

#contentsWrapper .topics .new::before{
  content:"NEW";
  color: red;
  display: inline-block;
  font-size: 90%;
}

#contentsWrapper .topics a{
  color: rgb(0,51,102);
  text-decoration: none;
}

#contentsWrapper .topics a:hover{
  text-decoration: underline;
}

/********************************************
  以下神戸新聞社様修正分
********************************************/

/* ▼▼▼▼▼▼▼▼▼▼▼▼ 読者クラブを太字に そしてちょっと目立たせる */
.memberClub a {
    font-weight: bold;
}

.memberClub {
    background: #E0EED5;
}


/* ▼▼▼▼▼▼▼▼▼▼▼▼ サイトマップ・検索の文字についても太字に */

.globalNavi span a {
    font-weight: bold;
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼ ログイン領域　ボタン類など余白を調整 */

/* 会員登録…の上下に余白をすこしあける */

.memberMenu .message {
    background-color: rgb(237,237,237);
    text-align: center;
    padding: 5px 0px;
}

/* 青色ボタンの上下をすこし小さくして余白をつくる**右側の余白が調節できていない */
.memberMenu ul {
    width: 100%;
    height: 40px;
    padding-top: 5px;
    padding-right: 2px;
}

.memberMenu ul li {
    line-height: 32px;
    margin-top:2px;

}

/* あわせて初心者マークをちょっとだけ下げる */
.memberMenu .register a:before {
/*    top: 3px;	*/
}


/* ▼▼▼▼▼▼▼▼▼▼▼▼ トピック部分の余白を調整 */
/* 上付きにするのではなく、上下の余白を均等の幅で細くする・コンテンツ領域が少しでも上がるようにする */

#contentsWrapper {
    padding: 10px 0 20px;
}

#contentsWrapper .topics {
    margin-top:0px;
    margin-bottom:10px;
    border-radius: 3px;
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼ スーパーバナー下に入っている下線を削除(この部分は自社の問題) */

.prAreaWrapper {
    border-bottom:none!important;
}

div[class$="PrArea"] {
    background: url(../img/bg_header.gif);
    border-bottom: none;
}


/* ▼▼▼▼▼▼▼▼▼▼▼▼ ドロップダウン　サイトマップ */

/* 上下の余白調整 */

.sitemapListWrapper {
    padding: 15px 0px;
}

/* 見た目の雰囲気　左端のコラムをそろえ、１列目の縦方向を中央揃え */

.sitemapList dt {
    display: inline-block;
    width: 143px;
    margin-top: 13px;
    margin-left: 2px;
}


/* ▼▼▼▼▼▼▼▼▼▼▼▼ ナビゲーションバー */

/* メーンカテゴリーの調整 */

.globalNavi ul li a {
    display: block;
    padding: 10px 15px 7px 15px;
    font-size:16px;
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼ 時計の文字 */

/* 色を濃くする */

.headerTitle .date {
    color: rgba(100,100,100,1);
}


/********************************************
  IE8対応
********************************************/


.prAreaWrapper {
    overflow: hidden;
}

.headerTitle{
    overflow: hidden;
}


/********************************************
  HTML5対応　2021.03修正分
********************************************/

.memberMenu ul {
    height: 40px;
    padding-top: 5px;
    overflow: hidden;
}

.memberMenu ul li {
    height: 32px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    line-height: 0;
}

.memberMenu .paper, .memberMenu .search {
    width: 146px;
}
.memberMenu .paper, .memberMenu .search {
    margin-top: 0px;
}