@charset "utf-8";

/*------------------------------------------------------------------------------
  .newmagazine-block
------------------------------------------------------------------------------*/

.newmagazine-block {
	padding: 80px 0;
}

.newmagazine-block #newmagazine {
	margin: 0 auto 22px;
	transform: translateX(12px);
	width: 820px;
}

.newmagazine-block #newmagazine ul li {
	position: relative;
}

.newmagazine-block #newmagazine ul li img {
	display: block;
	margin-bottom: 10px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.newmagazine-block #newmagazine ul li a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.newmagazine-block #newmagazine ul li span.outer {
	display: block;
	float: left;
}

.newmagazine-block #newmagazine ul li span.outer span.ttl {
	color: #00a0e7;
	display: block;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.1em;
	text-align: left;
}

.newmagazine-block #newmagazine ul li a:hover span.outer span.ttl {
	text-decoration: underline;
}

.newmagazine-block #newmagazine ul li span.outer span.genre {
	color: #6f6f6f;
	display: block;
	font-size: 11px;
	text-align: left;
}

.newmagazine-block #newmagazine ul li span.icon {
	float: left;
}

.newmagazine-block #newmagazine ul li span.icon img {
	width: 40px;
}

.newmagazine-block #newmagazine .swiper-slide img {
  max-height: 220px;
}

.newmagazine-block #newmagazine .swiper-button-next,
.newmagazine-block #newmagazine .swiper-container-rtl .swiper-button-prev {
  right: -64px;
}

.newmagazine-block #newmagazine .swiper-button-prev,
.newmagazine-block #newmagazine .swiper-container-rtl .swiper-button-next {
  left: -88px;
}

.newmagazine-block .topic-outer {
	padding: 0;
}

.newmagazine-block dl.topic {
	border: solid 2px #eeeeee;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: hidden;
	padding: 30px 50px;
	width: 842px;
}

.newmagazine-block dl.topic dt {
	clear: left;
	color: #6f6f6f;
	font-size: 16px;
	font-weight: bold;
	float: left;
}

.newmagazine-block dl.topic dd {
	font-size: 16px;
	margin-left: 195px;
}

.newmagazine-block dl.topic dd a {
	color: #00a0e7 !important;
	font-size: 16px;
}

.newmagazine-block dl.topic dd a:hover {	
	text-decoration: underline !important;
}

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

.newmagazine-block {
	padding: 20px 0 50px;
}

.newmagazine-block #newmagazine {
	transform: translateX(0);
	width: 96vw;
}

.newmagazine-block #newmagazine ul li span.outer span.ttl {
	font-size: 14px;
}

.newmagazine-block #newmagazine ul li span.outer span.genre {
	font-size: 11px;
}

.newmagazine-block #newmagazine .swiper-slide img {
  max-height: 345px;
}

.newmagazine-block #newmagazine ul li span.icon {
	width: 38px;
}

.newmagazine-block #newmagazine .swiper-button-next,
.newmagazine-block #newmagazine .swiper-container-rtl .swiper-button-prev {
  right: 0;
  right: -2vw;
}

.newmagazine-block #newmagazine .swiper-button-prev,
.newmagazine-block #newmagazine .swiper-container-rtl .swiper-button-next {
  left: 0;
  left: -2vw;
}

.newmagazine-block .topic-outer {
	padding: 0 15px;
}

.newmagazine-block dl.topic {
	box-sizing: border-box;
	padding: 20px 22px;
	width: 100%;
}

.newmagazine-block dl.topic dt {
	font-size: 13px;
	float: none;
}

.newmagazine-block dl.topic dd {
	font-size: 13px;
	margin-left: 0;
}

.newmagazine-block dl.topic dd a {
	color: #00a0e7 !important;
	font-size: 16px;
}

.newmagazine-block dl.topic dd a:hover {	
	text-decoration: underline !important;
}
}

@media screen and (max-width: 450px) {
.newmagazine-block #newmagazine .swiper-slide img {
  max-height: 185px;
}
}