@charset "utf-8";

/* ===================================================================
汎用
=================================================================== */
/* 共通 */
a:hover {
	text-decoration: none;
}

a:hover img {
	opacity: .6;
}

/* レイアウト */
#wrapper {
	width: 100%;
	min-width: 1000px;
	margin: 0 auto;
	background: #fff;
}

.inner {
	width: 1000px;
	margin: 0 auto;
}

.inlineP {
	font-size: 0;
	letter-spacing: -0.4em;
	word-spacing: -1em;
}

.inlineC {
	display: inline-block;
	letter-spacing: normal;
	word-spacing: normal;
}

.grid3 {}

.grid3Col {
	margin: 0 0 26.5px 16px;
	float: left;
}

.grid3Col:nth-child(3n+1) {
	margin: 0 0 26.5px;
}

/* クリア */
.clearfix::after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
}

/* 見出し */
.headlineL1 {
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	background: #f1f1f1;
}

.headlineL1 span {
	padding: 7px 10px;
	line-height: 1;
	border-left: solid 6px #d20067;
	display: block;
}

.headlineL2 {
	padding: 0 0 8px;
	color: #d20067;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.08em;
	line-height: 1;
	border-bottom: solid 2px #d20067;
}

/* 記事 */
.post {
	width: 216px;
	color: #333;
	display: block;
}

.postInfoDesc a:link,
.postInfoDesc a:visited,
.postInfoDesc a:active {
	color: #333;
}

.post.month {
	background: url(/images/n/wol/201711/bg_border.png) repeat top left;
}

.post.month .postInfo {
	padding: 17px 10px 6.5px;
}

.postImg {
	width: 216px;
	height: 149px;
	border: solid 1px #ddd;
	overflow: hidden;
	box-sizing: border-box;
}

.postImg a {
	display: block;
}

.postImg img {
	width: 214px;
	height: auto;
}

.postInfo {
	padding: 17px 0 0;
}

.postInfoTag {}

.postInfoTag li {
	color: #666;
	font-size: 12px;
	letter-spacing: 0.08em;
	vertical-align: middle;
}

.postInfoTag li + li {
	margin: 0 0 0 10px;
}

.postInfoDesc {
	margin: 4.5px 0 0;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.postInfoDesc a:hover {
	text-decoration: underline;
}

/* ボタン */
.btnLink {
	width: 160px;
	margin: 0 auto;
}

.btnLink a {
	width: 100%;
	height: 35px;
	color: #000;
	font-size: 12px;
	line-height: 35px;
	text-align: center;
	border: solid 1px #000;
	border-radius: 4px;
	display: block;
}

.btnLink a:link,
.btnLink a:visited,
.btnLink a:active {
	color: #333;
}

.btnLink a:hover {
	background: #ddd;
}

/* ===================================================================
ヘッダー
=================================================================== */
#wrapper .gnav-201601 {
	width: 100%;
}

#header {
	width: 100%;
	margin: 0;
	background: none;
}

.headeBody {}

.headerLogo {
	margin: 14px 0;
	float: left;
}

#header .headerLogo h1,
#header .headerLogo p {
	width: auto;
	height: auto;
	float: none;
	background: none;
}

#header .headerLogo h1 a,
#header .headerLogo p a {
	height: auto;
	text-indent: inherit;
	display: block;
}

.headerLinks {
	margin: 30px 0 0;
	float: right;
}

.headerSub {
	padding: 0 5px 0 0;
	border-right: solid 1px #ccc;
	vertical-align: middle;
}

.headerSub ul {}

.headerSub ul li {
	margin: 0 15px;
	display: inline-block;
}

.headerSub ul li a {
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
	display: block;
}

.headerSub ul li a span {
	margin: 8px 0 0;
	display: block;
}

.headerSub ul li a:hover span {
	opacity: .6;
}

.headerSns {
	padding: 0 0 0 20px;
	vertical-align: middle;
}

.headerSns ul {}

.headerSns ul li {
	margin: 0 12px 0 0;
	font-size: 12px;
}

/* グロナビ */
.headeNav {
	background: #d20067;
}

.headeNavMenu {
	float: left;
}

.headeNavMenuList {}

.headeNavMenuItem {
	position: relative;
	float: left;
}

.headeNavMenuItem.is-open a {
	background: #a80254;
}

.headeNavMenuItem a.headeNavMenuLink {
	height: 60px;
	padding: 0 20px;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 60px;
	display: block;
}

a.headeNavMenuLink:hover {
	color: #fff;
	background: #a80254;
}

.headeNavMenuItem.active a.headeNavMenuLink {
	background: #a80254;
}

.headeNavMenuSub {
	position: absolute;
	width: 215px;
	background: #a80254;
	display: none;
	z-index: 20;
}

.headeNavMenuSub li {}

.headeNavMenuSub li + li {
	border-top: solid 1px #d20067;
}

.headeNavMenuSub li a {
	padding: 6.5px 22px 6.5px 10px;
	color: #fff;
	font-size: 14px;
	display: block;
}

.headeNavMenuSub li a:hover {
	background: #d20067;
}

.headeNavOther {
	width: 440px;
	height: 60px;
	display: table;
	float: right;
}

.headeNavOtherText {
	display: table-cell;
	vertical-align: middle;
}

#header .headeNavOther a {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.headeNavOther a:hover {
	color: #fff;
	opacity: .6;
}

.headeNavOther a:link,
.headeNavOther a:visited,
.headeNavOther a:active {
	color: #fff;
}

.headeNavOther a span {
	border-bottom: solid 2px #de6796;
}


/* ===================================================================
フッター
=================================================================== */
#footer {
	width: 100%;
	padding: 0 0 47px;
}

.footerInner {}

.footerHead {
	padding: 0 0 8px;
	text-align: center;
	border-bottom: solid 5px #d20067;
}

.footerHead a {
	color: #333;
	font-size: 12px;
}
.footerHead a span {
	color: #d20067;
	border-bottom: solid 1px #d20067;
}

.footerHead a:hover {
	color: #d20067;
	border-bottom: solid 1px #d20067;
}

.footerBody {
	padding: 20px 0 0;
}

.footerBodyTop {
	position: relative;
	margin: 0 0 27px;
}

.footerNav {
	float: left;
}

#footer .footerNav ul {
	width: auto;
	margin: 0 !important;
	float: none;
}

.footerNav ul + ul {
	margin: 8px 0 0;
}

.footerNav ul li {
	line-height: 1;
	float: left;
}

.footerNav ul li + li {
	padding: 0 0 0 5px;
	margin: 0 0 0 5px;
	border-left: solid 1px #e6e6e6 !important;
}

.footerNav ul li a {
	color: #333;
	font-size: 10px;
	letter-spacing: 0.08em;
}

.footerNav ul li a:link,
.footerNav ul li a:visited,
.footerNav ul li a:active {
	color: #333;
}

.footerNav ul li a:hover {
	text-decoration: underline;
}

.footerBodyBottom {}

.globalFooter {
	padding: 0 !important;
}
.globalFooter ul li {
	height: auto;
}
#bpGlobalFooter .globalCopyright {
	margin: 20px 0 0;
	font-size: 10px;
	line-height: 1;
}
#bpGlobalFooter .corporateLogo {
	top: 0;
	width: 109px;
	height: 20px;
	padding: 0;
}
#bpGlobalFooter .corporateLogo a {
	width: 109px;
	height: 20px;
	background: url(/images/n/wol/201711/logo_ftr_nikkeibp.png) no-repeat;
}

#mobSelArea {
	padding: 0;
	font-size: 12px;
	font-weight: bold;
}

#mobSelArea a {
	color: #333;
	font-weight: normal;
}

#mobSelArea a:link,
#mobSelArea a:visited,
#mobSelArea a:active {
	color: #333;
}

#mobSelArea a:hover {
	font-weight: bold;
}

/* ===================================================================
コンテンツ部分
=================================================================== */
#contents {
	margin: 0 auto 50px;
}


/* ===================================================================
サブカラム サイト内記事検索
=================================================================== */
#articleSearch {
	margin-bottom: 20px;
}

#articleSearch ul li.field {
	width: 240px;
	margin-right: 6px;
	box-sizing: border-box;
}

#articleSearch ul li.field input {
	width: 240px;
	padding: 4px 5px;
	border: solid 1px #666;
	box-sizing: border-box;
}

#articleSearch ul li.btn {
	width: 54px;
}

#articleSearch ul li.btn input:hover {
	opacity: .6;
}


/* ===================================================================
サブカラム 人気記事ランキング
=================================================================== */
.sRanking {
	margin: 0 0 24px;
}

.sRankingHead {
	margin: 0 0 7.5px;
}

.sRankingbody {}

.sRankingbody ul {}

.sRankingbody ul li {}

.sRankingbody ul li + li {
	border-top: dotted 1px #999;
}

.sRankingbody ul li a {
	padding: 9.5px 10px;
	color: #333;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	display: block;
}

.sRankingbody ul li a:hover span {
	text-decoration: underline;
}

.sRankingbody ul li a span {
	position: relative;
	padding: 0 0 0 30px;
	display: block;
}

.sRankingbody ul li a span::before {
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	text-indent: 2px;
	border-radius: 50%;
	display: block;
	box-sizing: border-box;
}

.sRankingbody ul li:nth-child(1) a span::before {
	background: #b69b1b;
	content: "1";
}

.sRankingbody ul li:nth-child(2) a span::before {
	background: #9d9c97;
	content: "2";
}

.sRankingbody ul li:nth-child(3) a span::before {
	background: #9e7225;
	content: "3";
}

.sRankingbody ul li:nth-child(4) a span::before {
	color: #666;
	background: #fff;
	border: solid 1px #9b9b9b;
	content: "4";
}

.sRankingbody ul li:nth-child(5) a span::before {
	color: #666;
	background: #fff;
	border: solid 1px #9b9b9b;
	content: "5";
}

.sRankingbody ul li:last-child {
	text-align: right;
}

.sRankingbody ul li:last-child a {
	padding: 0;
	margin: 17px 0 0;
	display: inline-block;
}

.sRankingbody ul li:last-child a span {
	position: relative;
	padding: 0 0 0 14px;
	display: inline-block;
}

.sRankingbody ul li:last-child span::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 7px;
	height: 12px;
	margin: auto;
	background: url(/images/n/wol/201711/icon_arrow_l.png) no-repeat top left;
	display: block;
	content: "";
}


/* ===================================================================
サブカラム WOL会員への今月のプレゼント
=================================================================== */
.sMonthPresent {
	padding: 3px;
	margin: 0 0 30px;
	background: url(/images/n/wol/201711/bg_border.png) repeat top left;
}

.sMonthPresentInner {
	padding: 10px;
	background: #fff;
}

.sMonthPresentImg {
	width: 150px;
	float: left;
	overflow: hidden;
}

.sMonthPresentImg a {
	width: 150px;
	text-align: center;
	display: block;
	overflow: hidden;
}

.sMonthPresentImg a img {
	width: auto;
	height: 104px;
}

.sMonthPresentInfo {
	width: 115px;
	float: right;
}

.sMonthPresentInfo h3 {
	margin: 0 0 8.5px;
	color: #d20067;
	font-size: 14px;
	line-height: 1.3;
}

.sMonthPresentInfo h3 a {
	display: block;
	color: #d20067;
}

.sMonthPresentInfo h3 a:hover,
.sMonthPresentInfo h3 a:link,
.sMonthPresentInfo h3 a:visited,
.sMonthPresentInfo h3 a:active {
	color: #d20067;
}

.sMonthPresentInfo h3 a:hover {
	text-decoration: underline;
}

.sMonthPresentInfo h3 span {
	margin: 5.5px 0 0;
	font-size: 12px;
	display: block;
}

.sMonthPresentInfoLink {}

.sMonthPresentInfoLink a {
	font-size: 12px;
}

.sMonthPresentInfoLink a:hover span {
	text-decoration: underline;
}

.sMonthPresentInfoLink a span {
	position: relative;
	padding: 0 0 0 12px;
	display: block;
}

.sMonthPresentInfoLink a span::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 7px;
	height: 12px;
	margin: auto;
	background: url(/images/n/wol/201711/icon_arrow_l.png) no-repeat top left;
	display: block;
	content: "";
}


/* ===================================================================
サブカラム PICK UP
=================================================================== */
#sidePickup201310 {
	margin-bottom: 20px;
}


/* ===================================================================
サブカラム バナー
=================================================================== */
.l-sub .banner {
	margin-bottom: 20px;
}


/* ===================================================================
サブカラム 最新刊のご案内
=================================================================== */
.sNewMagInfo {
	padding: 16px 0 0;
	margin: 0 0 35px;
}

.sNewMagInfoHead {}

.sNewMagInfoBody {}

.sNewMagPnl {
	padding: 20px 0;
	border-bottom: dotted 1px #999;
}

.sNewMagPnlImg {
	width: 110px;
	height: 146px;
	float: left;
	overflow: hidden;
}

.sNewMagPnlImg a {}

.sNewMagPnlImg a img {
	width: 110px;
	height: auto;
}

.sNewMagPnlInfo {
	width: 182px;
	float: right;
}

.sNewMagPnlInfoH {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: bold;
}

.sNewMagPnlInfoH span {
	font-size: 12px;
	font-weight: normal;
	display: block;
}

.sNewMagPnlInfoLinks {}

.sNewMagPnlInfoLinks li {}

.sNewMagPnlInfoLinks li + li {
	margin: 5px 0 0;
}

.sNewMagPnlInfoLinks li a {
	width: 160px;
	height: 25px;
	margin: 0 auto;
	color: #333;
	font-size: 12px;
	line-height: 25px;
	text-align: center;
	border: solid 1px #000;
	border-radius: 4px;
	display: block;
	box-sizing: border-box;
}

.sNewMagPnlInfoLinks li a:link,
.sNewMagPnlInfoLinks li a:visited,
.sNewMagPnlInfoLinks li a:active {
	color: #333;
}

.sNewMagPnlInfoLinks li a:hover {
	background: #ddd;
}

.sNewMagInfoFoot {
	margin: 17px 0 0;
	text-align: right;
}

.sNewMagInfoFoot a {
	color: #333;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.sNewMagInfoFoot a:link,
.sNewMagInfoFoot a:visited,
.sNewMagInfoFoot a:active {
	color: #333;
}

.sNewMagInfoFoot a:hover span {
	text-decoration: underline;
}

.sNewMagInfoFoot a span {
	position: relative;
	padding: 0 0 0 14px;
	display: inline-block;
}

.sNewMagInfoFoot a span::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 7px;
	height: 12px;
	margin: auto;
	background: url(/images/n/wol/201711/icon_arrow_l.png) no-repeat top left;
	display: block;
	content: "";
}


/* ===================================================================
サブカラム 毎月プレゼントが当たる！
=================================================================== */
#magRegist a {
	height: 30px;
	background: url(/images/n/wol/201711/mail_regist_btn.png) no-repeat top left;
}

#magRegist a:hover {
	background: url(/images/n/wol/201711/mail_regist_btn.png) no-repeat top left;
	opacity: .6;
}

/* ===================================================================
サブカラム ログイン
=================================================================== */
.leaflogin_02 {
	padding: 10px 23px 13px;
	background: #fff;
}

.leaflogin_02 p {
	text-align: center;
}

.leaflogin_02 li:first-child {
	margin-right: 10px;
}

/* ===================================================================
ページトップ
=================================================================== */
.toTop a {
	padding-left: 16px;
	font-size: 12px;
	background: url(/images/n/wol/201711/icon_pagetop.png) no-repeat top 4px left;
}

.toTop a:hover {
	background: url(/images/n/wol/201711/icon_pagetop.png) no-repeat top 4px left;
	opacity: .6;
}

/* ===================================================================
下層ページ おすすめサイト
=================================================================== */
#contents + iframe {
	width: 1000px;
	margin: 0 auto 40px;
}