@charset "utf-8";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. 共通
　02. メインコンテンツ
　03. サイド
　04. ソーシャル
　05. リンクスタイル
　06. 汎用スタイル

******************************************************************************* */


/* ==

　01. 共通

=============================================================================== */

/* 画像可変
------------------------------------------------------------------------------- */

@media only screen and (max-width: 1020px) {
	#relationWrapper img {
		max-width: 100%;
		width: auto\9;
		height: auto;
	}
	#relationWrapper .liquidL img {
		width: 100%;
		height: auto;
	}
}


/* 大枠
------------------------------------------------------------------------------- */
#relationWrapper {
	width: 950px;
	margin: 0 auto 50px;
	text-align: left;
}
#relationWrapper #rtMain {
	float: left;
	width: 625px;
}
#relationWrapper #rtSub {
	float: right;
	width: 300px;
}
#relationWrapper p,
#relationWrapper li,
#relationWrapper dt,
#relationWrapper dd,
#relationWrapper th,
#relationWrapper td {
		font-size: 117%;
}
@media only screen and (max-width: 600px) {
	#relationWrapper {
		font-size: 114.5%;
	}
}

/* 固定ヘッダ
------------------------------------------------------------------------------- */

/* トグルナビ
------------------------------------------------------------------------------- */

/* メインビジュアル
------------------------------------------------------------------------------- */

/* カテゴリ用見出し
------------------------------------------------------------------------------- */

/* 見出し
------------------------------------------------------------------------------- */
#relationWrapper .heading01 {
	margin: 0 0 15px;
	padding: 6px 0 6px 15px;
	border: none;
	border-left: 6px solid #dc0022;
	background: none;
	color: #000;
	font-size: 12px;
}
#relationWrapper .heading02 {
	line-height: 1.4;
	margin: 0 0 15px;
	padding: 4px 0 4px 15px;
	border: none;
	border-left: 6px solid #dc0022;
	background: none;
	color: #000;
	font-size: 134%;
	font-weight: bold;
}
#relationWrapper .heading03 {
	line-height: 1.3;
	margin: 0 0 7px;
	padding: 4px 0 5px 16px;
	border-left: 6px solid #dc0022;
	color: #333;
	font-size: 200%;
	font-weight: bold;
}
#relationWrapper #rtSub .heading02 {
	line-height: 1.5;
	padding-left: 10px;
	font-size: 117%;
}

/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1020px) {
	#relationWrapper {
		width: auto;
		margin-bottom: 35px;
	}
	#relationWrapper #rtMain,
	#relationWrapper #rtSub {
		float: none;
		width: auto;
		margin: 0 20px;
		padding-bottom: 0;
	}
	#relationWrapper #rtMain {
		margin: 0 0 30px;
	}
	#relationWrapper #rtMain .heading01,
	#relationWrapper #rtMain .heading02 {
		margin-right: 15px;
		margin-left: 15px;
	}
}
@media only screen and (max-width: 600px) {
	#relationWrapper #rtSub {
		margin-right: 10px;
		margin-left: 10px;
	}
	#relationWrapper #rtMain .heading01,
	#relationWrapper #rtMain .heading02 {
		margin-right: 10px;
		margin-left: 10px;
	}
	#relationWrapper .heading03 {
		font-size: 174.67%;
	}
}


/* ==

　02. メインコンテンツ

=============================================================================== */

/* カラムスタイル共通
------------------------------------------------------------------------------- */
#relationWrapper #articleArea,
#relationWrapper .categoryArea,
#relationWrapper .columnArea {
	width: 609px;
	margin-bottom: 30px;
	padding: 3px 8px 10px;
	background-color: #f2f2f2;
}
#relationWrapper .colBox {
	float: left;
	width: 304px;
	margin: 10px 0 0;
	background: #e8e8e8 url(/column/images/rn01/column_bg01.gif) left top repeat-y;
}
#relationWrapper .colBox .boxBg {
	padding: 1px 7px;
	background: url(/column/images/rn01/column_bg02.gif) right top repeat-y;
	zoom: 1;
}
#relationWrapper .colBox .boxIn {
	padding: 9px;
	border: 1px solid #dfdfdf;
	background-color: #fff;
}
* html #relationWrapper .colBox .boxIn { zoom: 1; } /* ie6 */

/* カラム機能
------------------------------------------------------------------------------- */ 
#relationWrapper .fnBoxLink { cursor: pointer; }
.d_hover #relationWrapper .fnBoxLink {
  -ms-filter: "alpha( opacity=100 )";	
}
.d_hover #relationWrapper .fnBoxLink.uiHover {
  opacity:0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha( opacity=75 )";
}

/* 最新コラム
------------------------------------------------------------------------------- */
#relationWrapper #articleArea .areaIn {
	width: 100%;
	padding-bottom: 3px;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn {
	overflow: hidden;
	padding-bottom: 10px;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn .opFill {
	display: block;
	margin-bottom: 10px;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn .linkTxt {
	line-height: 1.5;
	margin-bottom: 9px;
	font-size: 150%;
	font-weight: bold;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn .linkTxt a {
	text-decoration: underline;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn ul {
	margin-left: -5px;
	zoom: 1;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn li {
	display: inline;
	float: left;
	line-height: 25px;
	margin: 5px 0 0 5px;
	padding: 0 7px;
	background-color: #666;
	color: #fff;
	font-size: 100%;
	white-space: nowrap;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn .opMainCat {
	background-color: #666;
}
#relationWrapper #articleArea .areaIn .colBox .boxIn .opSubCat {
	background-color: #999;
}
#relationWrapper #articleArea .moreBtn {
	display: none;
	padding: 14px 0 15px;
	text-align: center;
}
#relationWrapper #articleArea .moreBtn span {
	display: inline-block;
	width: 200px;
	line-height: 35px;
	background-color: #474748;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
#relationWrapper #articleArea .uiHide { display: none; }
#relationWrapper #articleArea .uiActive { display: block; }

/* カテゴリーから探す
------------------------------------------------------------------------------- */
#relationWrapper .categoryArea {
	padding-top: 1px;
	padding-bottom: 15px;
}
#relationWrapper .categoryArea li {
	float: left;
	width: 203px;
	line-height: 1.5;
	margin: 15px 0 0;
}
#relationWrapper .categoryArea li a {
	display: block;
	margin: 0 7px;
	padding: 61px 5px 8px;
	background-position: center 10px;
	background-repeat: no-repeat;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
* html #relationWrapper .categoryArea li a {
	zoom: 1;
} /* ie6 */
*:first-child+html #relationWrapper .categoryArea li a {
	zoom: 1;
} /* ie7 */

.d_hover #relationWrapper .categoryArea li a  {
	-ms-filter: "alpha(opacity=100)";
	color: #fff;
	text-decoration: none;
}
.d_hover #relationWrapper .categoryArea li a:hover {
  opacity:0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha( opacity=75 )";
}
#relationWrapper .categoryArea .opCategory1 a {
	background-color: #e9a402;
	background-image: url(/column/images/rn01/ico_money01.gif);
}
#relationWrapper .categoryArea .opCategory2 a {
	background-color: #1bbc9b;
	background-image: url(/column/images/rn01/ico_tochi01.gif);
}
#relationWrapper .categoryArea .opCategory3 a {
	background-color: #9b5ab8;
	background-image: url(/column/images/rn01/ico_flow01.gif);
}
#relationWrapper .categoryArea .opCategory4 a {
	background-color: #3598dc;
	background-image: url(/column/images/rn01/ico_plan01.gif);
}
#relationWrapper .categoryArea .opCategory5 a {
	background-color: #34495e;
	background-image: url(/column/images/rn01/ico_tech01.gif);
}
#relationWrapper .categoryArea .opCategory6 a {
	background-color: #e94c3d;
	background-image: url(/column/images/rn01/ico_hint01.gif);
}
#relationWrapper .categoryArea .opCategory7 a {
	background-color: #bdcf47;
	background-image: url(/column/images/rn01/ico_voice01.gif);
}
#relationWrapper .categoryArea .opCategory8 a {
	background-color: #99b222;
	background-image: url(/column/images/rn01/ico_hint01.gif);
}
#relationWrapper .categoryArea .opCategory9 a {
	background-color: #3174ad;
	background-image: url(/column/images/rn01/ico_hint01.gif);
}

/* 関連コラムコンテンツ
------------------------------------------------------------------------------- */
#relationWrapper .columnArea .colBox .boxIn {
	padding-bottom: 10px;
}
#relationWrapper .columnArea .colBox .boxIn h3 {
	margin: -10px -9px -4px;
	border: none;
}
#relationWrapper .columnArea .colBox .boxIn h3 a {
	display: block;
	background-position: left bottom;
	background-repeat: repeat-x;
	text-align: center;
}
#relationWrapper .columnArea .opLetter .boxIn h3 a {
	background-image: url(/column/images/rn01/column_bg03.gif);
}
#relationWrapper .columnArea .opSumai .boxIn h3 a {
	background-image: url(/column/images/rn01/column_bg04.gif);
}
.d_hover #relationWrapper .columnArea .colBox .boxIn h3 a { -ms-filter: "alpha(opacity=100)"; }
.d_hover #relationWrapper .columnArea .colBox .boxIn h3 a:hover {
  opacity:0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha( opacity=75 )";
}
#relationWrapper .columnArea .colBox .boxIn li {
	margin-top: 14px;
	font-size: 109%;
}
#relationWrapper .columnArea .colBox .boxIn .colImg {
	display: block;
	float: left;
	width: 56px;
	vertical-align: top;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt {
	float: right;
	width: 200px;
	line-height: 1.4;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt p {
	font-size: 100%;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt a {
	text-decoration: none;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt a:hover {
	text-decoration: underline;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt .linkTxt {
	background-position: left 0.45em;
	font-weight: bold;
}
#relationWrapper .columnArea .colBox .boxIn .colTxt .new {
	padding: 2px 5px 0;
	background-color: #e33050;
	color: #fff;
	font-weight: bold;
	font-size: 85%;
}
* html #relationWrapper .columnArea .colBox .boxIn li { zoom: 1; } /* ie6 */
*:first-child+html #relationWrapper .columnArea .colBox .boxIn li { zoom: 1; } /* ie7 */
#relationWrapper .columnArea .colBox .boxIn li:after { content: ''; display: block; clear: both; height: 0; }

/* 汎用エリア
------------------------------------------------------------------------------- */

/* 記事詳細
------------------------------------------------------------------------------- */

/* 会員募集中
------------------------------------------------------------------------------- */
#relationWrapper .memberArea {
	margin-bottom: 20px;
	padding: 16px 15px 17px;
	border: none;
	background: url(/column/images/rn01/column_bg06.jpg) left top repeat;
}
#relationWrapper #rtSub .memberArea {
	padding: 16px 15px 17px;
	border: none;
	background: url(/column/images/rn01/column_bg06.jpg) left top repeat;
}
#relationWrapper .memberArea h2 {
	margin-bottom: 11px;
	font-size: 12px;
}
#relationWrapper #rtSub .memberArea h2 {
	margin-bottom: 11px;
}
#relationWrapper .memberArea p {
	line-height: 1.6;
	margin-bottom: 7px;
	color: #333;
}
#relationWrapper .memberArea .leadTxt {
	margin-bottom: 16px;
	color: #333;
}
#relationWrapper .memberArea div {
	margin: 10px 0;
	padding: 10px 10px 7px;
	background-color: #fff;
}
#relationWrapper .memberArea h4 {
	margin: 2px 0 4px;
	color: #e33050;
	font-size: 117%;
	font-weight: bold;
}
#relationWrapper .memberArea h3 {
	margin: -10px -10px 7px;
	font-size: 12px;
	background-color: #e0e9db;
}
#relationWrapper .memberArea .catchTxt {
	margin-bottom: 0;
}
#relationWrapper .memberArea .downloadTit {
	line-height: 1.4;
	margin: 16px 0 7px;
	padding: 5px 0 5px 27px;
	border-bottom: 1px dotted #ccc;
	background: url(/column/images/rn01/column_ico08.gif) 5px 0.3em no-repeat;
	color: #333;
	font-size: 117%;
	font-weight: bold;
}
#relationWrapper #rtSub .memberArea .downloadTit {
	font-size: 100%;
}
#relationWrapper .memberArea li {
	line-height: 1.6;
	margin-bottom: 2px;
	padding-left: 28px;
	background: url(/column/images/rn01/column_ico06.gif) 5px 0.3em no-repeat;
	color: #333;
}
#relationWrapper #rtSub .memberArea p,
#relationWrapper #rtSub .memberArea li {
	font-size: 100%;
}
#relationWrapper .memberArea .downloadList li {
	line-height: 1.6;
	margin-bottom: 2px;
	padding-left: 23px;
	background: url(/column/images/rn01/column_ico09.gif) 7px 0.6em no-repeat;
}
#relationWrapper #rtSub .memberArea .downloadList li {
	background-position: 7px 0.45em;	
}
#relationWrapper .memberArea .registerBtn {
	margin-bottom: 0;
	text-align: center;
}
#relationWrapper .memberArea .registerBtn a {
	display: block;
	width: 256px;
	margin: 0 auto;
	padding: 10px 5px 9px;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	background: #e33050;
	text-align: center;
}
.d_hover #relationWrapper .memberArea .registerBtn a { -ms-filter: "alpha(opacity=100)"; }
.d_hover #relationWrapper .memberArea .registerBtn a:hover {
  opacity:0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha( opacity=75 )";
}

/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1020px) {
	#relationWrapper #articleArea,
	#relationWrapper .categoryArea,
	#relationWrapper .columnArea {
		width: auto;
	}
	#relationWrapper #articleArea .colBox {
		width: 49.9%;
	}
	#relationWrapper .categoryArea li {
		width: 33.2%;
	}
	#relationWrapper .columnArea .colBox {
		width: 49.9%;
	}
	#relationWrapper .columnArea .colBox .boxIn .colImg {
		margin-right: 14px;
	}
	#relationWrapper .columnArea .colBox .boxIn .colTxt {
		float: none;
		width: auto;
		overflow: hidden;
	}
	#relationWrapper .memberArea {
		margin-right: 20px;
		margin-left: 20px;
	}
	#relationWrapper #rtSub .memberArea {
		margin-right: 0;
		margin-left: 0;
	}
	#relationWrapper .memberArea {
		padding: 15px;
	}
	#relationWrapper #rtSub .memberArea {
		padding: 15px;
	}
	#relationWrapper #rtSub .memberArea p,
	#relationWrapper #rtSub .memberArea p.downloadTit,
	#relationWrapper #rtSub .memberArea li,
	#relationWrapper #rtSub .memberArea h4 {
		font-size: 117%;
	}
	#relationWrapper #rtSub .memberArea .downloadList li {
		background-position: 7px 0.6em;	
	}
	#relationWrapper .memberArea .registerBtn a {
		width: auto;
	}
}
@media only screen and (max-width: 600px) {
	#relationWrapper #articleArea,
	#relationWrapper .categoryArea,
	#relationWrapper .columnArea {
		padding-right: 3px;
		padding-left: 3px;
	}	
	#relationWrapper .colBox {
		margin-top: 8px;
	}
	#relationWrapper #articleArea .colBox {
		float: none;
		width: 100%;
	}
	#relationWrapper .categoryArea li {
		width: 49.9%;
	}
	#relationWrapper #articleArea .colBox .boxIn {
		height: auto !important;
	}	
	#relationWrapper #articleArea .areaIn .colBox .boxIn .linkTxt {
		font-size: 131%;
	}
	#relationWrapper .columnArea .colBox {
		float: none;
		width: 100%;
	}
	#relationWrapper .memberArea {
		margin-right: 10px;
		margin-left: 10px;
		padding: 11px 10px 12px;
	}
	#relationWrapper #rtSub .memberArea {
		padding: 11px 10px 12px;
	}
	#relationWrapper .memberArea .downloadList li,
	#relationWrapper #rtSub .memberArea .downloadList li {
		background-position: 7px 0.6em;	
	}
	#relationWrapper .memberArea .downloadTit {
		padding-top: 3px;
	}
}


/* ==

　03. サイド

=============================================================================== */

/* ピックアップバナー
------------------------------------------------------------------------------- */
#relationWrapper .pickupArea {
	margin-bottom: 20px;
}

/* お知らせ
------------------------------------------------------------------------------- */
#relationWrapper .newsArea {
	margin-bottom: 20px;
}
#relationWrapper .newsArea li {
	margin-bottom: 20px;
	color: #333;
}

/* 最新記事ランキング
------------------------------------------------------------------------------- */
#relationWrapper .rankArea {
	padding-bottom: 20px;
}
#relationWrapper .rankArea li {
	padding: 15px;
}
#relationWrapper .rankArea .opRank1,
#relationWrapper .rankArea .opRank3,
#relationWrapper .rankArea .opRank5 {
	background-color: #f2f2f2;
}
#relationWrapper .rankArea .opRank2,
#relationWrapper .rankArea .opRank4 {
	background-color: #fff;
}


#relationWrapper .rankArea .colRank {
	float: left;
	width: 70px;
}
#relationWrapper .rankArea .colTxt {
	float: right;
	width: 190px;
}
#relationWrapper .rankArea li p {
	font-size: 100%;
}
#relationWrapper .rankArea li .linkTxt {
	font-weight: bold;
}
#relationWrapper .rankArea .colRank .numTxt {
	line-height: 22px;
	margin-bottom: 4px;
	padding-top: 2px;
	font-weight: bold;
	background-position: left top;
	background-repeat: no-repeat;	
}
#relationWrapper .rankArea .opRank1 .numTxt,
#relationWrapper .rankArea .opRank2 .numTxt,
#relationWrapper .rankArea .opRank3 .numTxt {
	margin-bottom: 11px;
}
#relationWrapper .rankArea .opRank1 .colRank .numTxt {
	padding-left: 32px;
	background-image: url(/column/images/rn01/column_ico03.gif);
}
#relationWrapper .rankArea .opRank2 .colRank .numTxt {
	padding-left: 32px;
	background-image: url(/column/images/rn01/column_ico04.gif);
}
#relationWrapper .rankArea .opRank3 .colRank .numTxt {
	padding-left: 32px;
	background-image: url(/column/images/rn01/column_ico05.gif);
}
#relationWrapper .rankArea .opRank4 .colRank .numTxt,
#relationWrapper .rankArea .opRank5 .colRank .numTxt {
	padding-left: 32px;
}


* html #relationWrapper .rankArea li { zoom: 1; } /* ie6 */
*:first-child+html #relationWrapper .rankArea li { zoom: 1; } /* ie7 */
#relationWrapper .rankArea li:after { content: ''; display: block; clear: both; height: 0; }


/* フェイスブック
------------------------------------------------------------------------------- */
#relationWrapper .facebookArea img{ 
	border: 1px solid #f00;
}

/* バナーエリア
------------------------------------------------------------------------------- */
#relationWrapper .bnrArea li {
	margin-bottom: 15px;
}

/* バナーエリア
------------------------------------------------------------------------------- */
#relationWrapper .changeBtn {
	line-height: 1.4;
	margin-bottom: 15px;
	font-size: 100%;
}
#relationWrapper .changeBtn a{
	display: block;
	padding: 10px 10px 10px 40px;
	border: 4px solid #dedede;
	background: url(/column/images/rn01/column_ico07.gif) 7px center no-repeat;
	color:#333;
	text-decoration:none;
}
.d_hover #relationWrapper .changeBtn a:hover {
	border: 4px solid #e5e5e5;
}
/* 登録訴求
------------------------------------------------------------------------------- */
.rgstBlk{
	width:290px;
	margin:0 auto 20px;
	padding:15px 0;	
	border:5px solid #ddd;
}
.rgstBlk ul{
	padding:20px 0;
}
.rgstBlk p,
.rgstBlk ul li{
	margin:0;
	padding:0;
	text-align:center;
}
/* WEBマガジン
------------------------------------------------------------------------------- */
.magazineBlk{
	width:300px;
	margin:0 auto 20px;
}
.magazineBlk .inner{
	border:5px solid #ddd;
	border-top:0;
	padding: 0 9px 9px
}
.magazineBlk .inner .andBlk{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}
/* おうちアプリ
------------------------------------------------------------------------------- */
.oaBnrBlk{
	width:300px;
	margin:0 auto 20px;
	padding:0;	
}
.oaBnrBlk p{
	margin:0;
	padding:0;
	text-align:center;
}
/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1020px) {
	#relationWrapper .rankArea .colImg {
		margin-right: 14px;
	}
	#relationWrapper .rankArea .colTxt {
		float: none;
		width: auto;
		overflow: hidden;
	}	
	#relationWrapper .bnrArea li {
		text-align: center;
	}
	#relationWrapper .changeBtn {
		width: 300px;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 600px) {
	#relationWrapper .rankArea li {
		padding: 10px;
	}
}


/* ==

　04. ソーシャル

=============================================================================== */

/* ==

　05. リンクスタイル

=============================================================================== */
#relationWrapper .linkTxt {
	padding-left: 10px;
	background: url(/column/images/rn01/ico_arw01.gif) left 0.55em no-repeat;
}
#relationWrapper span.linkTxt,
#relationWrapper a.linkTxt {
	display: inline-block;
	margin-left: 5px;
	background-position: left 0.6em;
}
#relationWrapper .linkExternal {
	padding-left: 18px;
	background: url(/column/images/rn01/ico_arw02.gif) left 0.45em no-repeat;
}
#relationWrapper span.linkExternal,
#relationWrapper a.linkExternal {
	display: inline-block;
	margin-left: 5px;
	background-position: left 0.4em;
}

/* ==

　06. 汎用スタイル

=============================================================================== */

/* 画像周り
------------------------------------------------------------------------------- */

/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1020px) {
	#relationWrapper .opFill {
		display: block;
		text-align: center;
		background-color: #efefef;
	}
	#relationWrapper .opBoxC {
		text-align: center;
	}
}