/* topics */
#topics {
	background-color: #f8f8f8;
	border-top: 1px solid #edecec;
	padding: 20px 0;
}
#topics .wrap {
	box-sizing: border-box;
	display: flex;
}

/* side nav */
#topics .menu {
	width: 240px;
	margin-left: 20px;
}
#topics .menu > dl > dt {
	margin: 0 0 10px;
	padding: 0;
}
#topics .menu > dl > dt img {
	display: block;
}
#topics .menu .category,
#topics .menu .tag {
	padding-bottom: 38px;
}
#topics .menu .category dd > ul > li,
#topics .menu .tag dd > ul > li {
	background-color: #000;
	margin-bottom: 2px;
	padding: 2px 3px 2px 2px;
}
/*
#topics .menu .category dd > ul > li.business > dl {
	border-left: 4px solid #ff0000;
}
#topics .menu .category dd > ul > li.vision > dl {
	border-left: 4px solid #3dabf0;
}
#topics .menu .category dd > ul > li.global-news > dl {
	border-left: 4px solid #32b24a;
}
#topics .menu .category dd > ul > li.talk > dl {
	border-left: 4px solid #ec9e2e;
}
#topics .menu .category dd > ul > li.benefit > dl {
	border-left: 4px solid #ec467d;
}
*/
#topics .menu .category dd > ul > li dl dt,
#topics .menu .category dd > ul > li dl dd,
#topics .menu .tag dd > ul > li dl dt,
#topics .menu .tag dd > ul > li dl dd {
	margin-left: 3px;
	padding-left: 7px;
}
#topics .menu .category dd > ul > li dl dt,
#topics .menu .tag dd > ul > li dl dt {
	color: #fff;
	font-size: 18px;
	border-bottom: 1px solid #575757;
	padding-top: 5px;
	padding-bottom: 5px;
}
#topics .menu .category dd > ul > li dl dt span,
#topics .menu .tag dd > ul > li dl dt span {
	font-size: 16px;
	display: block;
}
#topics .menu .category dd > ul > li dl dd,
#topics .menu .tag dd > ul > li dl dd {
	padding-top: 5px;
	padding-bottom: 5px;
}
#topics .menu .category dd > ul > li dl dd ul li a,
#topics .menu .tag dd > ul > li dl dd ul li a {
	color: #fff;
	font-size: 16px;
	text-decoration: underline;
	line-height: 1.846;
}

	
#topics .menu .tag dd > ul > li dl dd ul li a　[href="tags/career"] {
	display: none;
}

#topics .menu .category dd > ul > li dl dd ul li a:hover,
#topics .menu .tag dd > ul > li dl dd ul li a:hover {
	text-decoration: none;
}
#topics .menu .mail-magazine {
	padding-bottom: 40px;
}
#topics .menu .mail-magazine dd {
	border: 2px solid #000;
	padding: 0 10px;
}
#topics .menu .mail-magazine dd iframe {
	width: 100%;
	height: 376px;
	border: none;
}
#topics .menu .mail-magazine dd p {
	font-size: 14px;
	line-height: 1.2;
	margin: 0 0 7px;
}
#topics .menu .mail-magazine dd input[type="email"] {
	display: block;
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid #cecece;
	padding: 7px 10px;
	margin-bottom: 10px;
}
#topics .menu .mail-magazine dd input[type="submit"] {
	width: 140px;
	display: block;
	margin: 0 auto;
	background: #000 url("images/top/mail_magazine_icon.png") 20px center no-repeat;
	border: none;
	color: #fff;
	font-size: 16px;
	text-align: left;
	padding: 0 0 0 50px;
}
#topics .menu .mail-magazine dd input[type="submit"]:hover {
	cursor: pointer;
}
#topics .menu .ranking {
	padding-bottom: 40px;
}
#topics .menu .ranking ol li {
	background-color: #000;
	margin-bottom: 2px;
	padding: 32px 10px 20px;
	position: relative;
}
#topics .menu .ranking ol li:first-child:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -11px;
	width: 58px;
	height: 42px;
	background: url("images/common/ranking1_pc.png") left top no-repeat;
	background-size: contain;
}
#topics .menu .ranking ol li:nth-child(2):after {
	content: "";
	position: absolute;
	top: -2px;
	left: -11px;
	width: 63px;
	height: 42px;
	background: url("images/common/ranking2_pc.png") left top no-repeat;
	background-size: contain;
}
#topics .menu .ranking ol li:nth-child(3):after {
	content: "";
	position: absolute;
	top: -2px;
	left: -11px;
	width: 63px;
	height: 42px;
	background: url("images/common/ranking3_pc.png") left top no-repeat;
}
#topics .menu .ranking ol li:nth-child(4):after {
	content: "";
	position: absolute;
	top: 4px;
	left: 5px;
	width: 45px;
	height: 24px;
	background: url("images/common/ranking4_pc.png") left top no-repeat;
}
#topics .menu .ranking ol li:nth-child(5):after {
	content: "";
	position: absolute;
	top: 4px;
	left: 5px;
	width: 45px;
	height: 24px;
	background: url("images/common/ranking5_pc.png") left top no-repeat;
}
#topics .menu .ranking ol li dl {
	display: flex;
	justify-content: space-between;
}
#topics .menu .ranking ol li dl dt {
	width: 85px;
	height: 64px;
	overflow: hidden;
	position: relative;
}
#topics .menu .ranking ol li dl dt img {
	display: block;
	position: absolute;
	z-index: 100;
	top: 0;
	width: 100%;
}
#topics .menu .ranking ol li.left dl dt img {
	left: 0;
}
#topics .menu .ranking ol li.center dl dt img {
	right: -50%;
	left: -50%;
	margin: 0 auto;
}
#topics .menu .ranking ol li.right dl dt img {
	right: 0;
}
#topics .menu .ranking ol li dl dd {
	color: #fff;
	font-size: 16px;
	text-align: right;
	line-height: 1.2;
	width: 125px;
}
#topics .menu .ranking ol li dl dd p {
	margin: 0;
	text-align: left;
}
#topics .menu .ranking ol li dl dd a {
	color: #fff;
	font-size: 13px;
	text-decoration: underline;
	padding-left: 16px;
	background: url("images/common/list_arrow_sp.png") left center no-repeat;
	background-size: 15%;
}
#topics .menu .ranking ol li dl dd a:hover {
	text-decoration: none;
}
#topics .menu .backnumber label {
	position: relative;
	height: 30px;
	display: block;
}
#topics .menu .backnumber label:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border-left: 1px solid #cecece;
	background: url("images/top/select_btn_pc.png") center center no-repeat;
	pointer-events: none;
}
#topics .menu .backnumber select {
	border: 1px solid #cecece;
	width: 100%;
	padding: 1px 10px;
	height: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}
#topics .menu .backnumber select:hover {
	cursor: pointer;
}


/* topics list */
#topics .list {
	/*width: 1319px;*/
	width: 85%;
	margin-left: 14px;
}
#topics .thumbnail li {
	width: 273px;
	height: 290px;
	overflow: hidden;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	z-index: 100;
	background-color: #ccc;

	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	transition-property: transform;
}
#topics .thumbnail li:hover,
#topics .thumbnail li:focus,
#topics .thumbnail li:active {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	z-index: 1000;
}
#topics .thumbnail li a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#topics .thumbnail li a .new-badge {
	background-color: #f2f92a;
	box-sizing: border-box;
	width: 68px;
	height: 68px;
	border: 2px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2000;
	padding-top: 18px;
}
#topics .thumbnail li a .new-badge img {
	display: block;
	width: 35px;
	margin: 0 auto;
}
#topics .thumbnail li a .new-badge p {
	text-align: center;
	color: #000;
	font-size: 10px;
	margin: 0;
}
#topics .thumbnail li a > dl {
	text-align: right;
	color: #fff;
	text-align: right;
	position: relative;
	z-index: 100;
	margin-right: 10px;
	padding-top: 10px;
	line-height: 1.5;
}
#topics .thumbnail li a > dl dt {
	font-size: 16px;
	margin-bottom: 3px;
}
#topics .thumbnail li a > dl dt span > span {
	font-size: 13px;
	padding-right: 7px;
}
#topics .thumbnail li a > dl dt > span,
#topics .thumbnail li a > dl dd > span {
	padding: 0 9px;
	display: inline-block;
}
/*
#topics .thumbnail li.business a > dl dt > span,
#topics .thumbnail li.business a > dl dd > span {
	background-color: #f00;
}
#topics .thumbnail li.vision a > dl dt > span,
#topics .thumbnail li.vision a > dl dd > span {
	background-color: #3dabf0;
}
#topics .thumbnail li.global-news a > dl dt > span,
#topics .thumbnail li.global-news a > dl dd > span {
	background-color: #32b24a;
}
#topics .thumbnail li.talk a > dl dt > span,
#topics .thumbnail li.talk a > dl dd > span {
	background-color: #ec9e2e;
}
#topics .thumbnail li.benefit a > dl dt > span,
#topics .thumbnail li.benefit a > dl dd > span {
	background-color: #ec467d;
}
*/
#topics .thumbnail li a > img {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
}
#topics .thumbnail li.left a > img {
	left: 0;
}
#topics .thumbnail li.center a > img {
	left: -50%;
	right: -50%;
	margin: 0 auto;
}
#topics .thumbnail li.right a > img {
	right: 0;
}
#topics .thumbnail li p.title {
	position: absolute;
	left: 0;
	top: 205px;
	margin: 0;
	color: #fff;
	font-size: 16px;
	width: 100%;
	height: 86px;
	padding: 8px;
	box-sizing: border-box;
	text-align: left;
	z-index: 100;
	background-color: rgba(0,0,0,1.0)!important;
}
/*
#topics .thumbnail li.business p.title {
	background-color: rgba(255,0,0,0.45);
}
#topics .thumbnail li.vision p.title {
	background-color: rgba(61,171,240,0.40);
}
#topics .thumbnail li.global-news p.title {
	background-color: rgba(50,178,74,0.40);
}
#topics .thumbnail li.talk p.title {
	background-color: rgba(236,158,46,0.45);
}
#topics .thumbnail li.benefit p.title {
	background-color: rgba(236,70,125,0.45);
}
*/


@media only screen and ( max-width: 768px ){

	/* topics */
	#topics {
		padding: 0;
		border-top: none;
	}

	/* Side nav */
	#topics .menu {
		display: none;
	}

	/* Topics list */
	#topics .list {
		width: 100%;
		margin-left: 0;
	}
	#topics .thumbnail li {
		width: 90%;
		height: auto;
		margin: 0 auto 20px;
		background-color: #000;
		display: block;
		float: none;
	}
	#topics .thumbnail li a .new-badge {
		display: none;
	}
	#topics .thumbnail li a > img {
		width: 100%;
		height: auto;
		display: block;
		position: relative;
	}
	#topics .thumbnail li.left a > img {
		transform-origin: left;
	}
	#topics .thumbnail li.center a > img {
		transform-origin: center;
	}
	#topics .thumbnail li.right a > img {
		transform-origin: right;
	}
	#topics .thumbnail li:hover,
	#topics .thumbnail li:focus,
	#topics .thumbnail li:active {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
	#topics .thumbnail li a .new-badge p {
		font-size: 1.0rem;
	}
	#topics .thumbnail li a > dl {
		/*margin-right: 2.906%;
		padding-top: 2.906%;
		*/
		top: 0;
		right: 0;
		position: absolute;
	}
	#topics .thumbnail li a > dl dt,
	#topics .thumbnail li a > dl dd {
		font-size: 1.3rem;
	}
	#topics .thumbnail li a > dl dt span > span {
		display: none;
	}
	#topics .thumbnail li.new a > dl dt span > span {
		display: inline;
		font-size: 1.3rem;
	}
	#topics .thumbnail li p.title {
		font-size: 1.6rem;
		padding: 2.616%;
		line-height: 1.5;
		position: relative;
		height: auto;
		top: 0;
	}
}