@charset "utf-8";
/*
 * =======================================================
 *
 * [writer]
 *
 * =======================================================
 */
#txtSearch {
	display: none;
}
#writer {}
	#writer .writerVox {
		padding: 0 0 0 50px;
		max-width: 1280px;
	}
	#writer .writerList {
		display: flex;
		flex-wrap: wrap;
	}
		#writer .writerList li {
			width: 470px;
			margin-bottom: 78px;
		}
			#writer .writerList li a {
				display: block;
				text-decoration: none;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			#writer .writerList li .portrait {}
				#writer .writerList li .portrait img {
					border-radius: 50%;
				}
			#writer .writerList li .detail {
				padding-left: 25px;
			}
				#writer .writerList li .detail .name {
					font-size: 2.2rem;
					font-weight: bold;
				}
				#writer .writerList li .detail span {
					display: block;
					line-height: 1.8;
				}
				#writer .writerList li .detail .pos {
					font-size: 1.6rem;
					font-weight: bold;
					color: #E61F4E;
				}
				#writer .writerList li .detail .prof {
					font-weight: bold;
				}
/**
 * profile
 */
#profile {}
	#profile .profileVox {
		position: relative;
		margin-left: 50px;
		margin-bottom: 60px;
	}
		#profile .profileVox .titleWrap {}
			#profile .profileVox .titleWrap .portrait {
				position: absolute;
				top: 0;
				left: 0;
			}
				#profile .profileVox .titleWrap .portrait img {
					border-radius: 50%;
				}
			#profile .profileVox .titleWrap h1 {
				padding: 0 18% 0 220px;
				margin-bottom: 25px;
			}
				#profile .profileVox .titleWrap h1 .name,
				#profile .profileVox .titleWrap h1 .pos,
				#profile .profileVox .titleWrap h1 .prof {
					display: block;
				}
				#profile .profileVox .titleWrap h1 .name {
					font-size: 3.2rem;
					font-weight: bold;
					line-height: 1.3;
					margin-bottom: 5px;
				}
				#profile .profileVox .titleWrap h1 .pos {
					font-size: 1.8rem;
					font-weight: bold;
					color: #E61F4E;
					margin-bottom: 5px;
				}
				#profile .profileVox .titleWrap h1 .prof {
					font-size: 1.4rem;
					font-weight: bold;
				}
		#profile .profileVox .intro {
			line-height: 2;
			padding: 0 18% 0 220px;
		}
/**
 * latest
 */
#latestArea {
	background: #00A496;
	padding: 10px;
	color: #FFF;
	overflow: hidden;
	position: relative;
	min-height: 220px;
}
	#latestArea .intro {
		width: 200px;
		padding: 20px 1em 0 0;
		float: left;
	}
	html:lang(zh-tw) #latestArea .intro {
		padding: 40px 1em 0 0;
	}
		#latestArea .intro h2 {
			font-size: 2.8rem;
			line-height: 1.4;
			font-weight: bold;
			margin-bottom: 20px;
		}
		#latestArea .intro p {
			font-size: 1.4rem;
		}
	#latestArea .itemWrapper {
		width: 830px;
		position: absolute;
		top: 5px;
		left: 210px;
		float: left;
	}
	#latestArea .entry {
		/*width: 200px !important;*/
		margin: 5px;
	}
#latestControls {}
	#latestControls button {
		background-color: transparent;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}
	#latestControls .slick-arrow {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		text-indent: -9999px;
		width: 24px;
		height: 24px;
		border: 1px solid #FFF;
		background: #00A496;
		text-align: center;
	}
	#latestControls .slick-arrow::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -6px 0 0 -4px;
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 6px 6px 0;
		border-color: transparent #FFF transparent transparent;
	}
	#latestControls .slick-prev {
		left: -12px;
	}
	#latestControls .slick-next {
		right: -12px;
	}
	#latestControls .slick-next::before {
		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);
		margin-left: -2px;
	}
/**
 * entry
 */
.entry {
	position: relative;
	width: 200px;
	margin-bottom: 10px;
}
	.entry a {
		display: block;
		color: #FFF;
	}
	.entry a::before,
	.entry a::after {
		content: '';
		position: absolute;
		z-index: 10;
		top: 0;
		left: 10px;
		width: 40px;
		height: 60px;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.entry a::after {
		left: 54px;
	}
	.entry.stay a::before {
		background-image: url(../../images/content/content/label_stay.png);
	}
	.entry.sightseeing a::before {
		background-image: url(../../images/content/content/label_sightseeing.png);
	}
	.entry.shopping a::before {
		background-image: url(../../images/content/content/label_shopping.png);
	}
	.entry.eating a::before {
		background-image: url(../../images/content/content/label_eating.png);
	}
	.entry.new a::after {
		background-image: url(../../images/content/content/label_new.png);
	}
	.entry figure {
		width: 200px;
		height: 200px;
	}
		.entry figure img {
			width: 100%;
		}
	.entry .content {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 10px 15px;
		background : -ms-linear-gradient(-90deg, rgba(2, 2, 2, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#020202', endColorstr='#000000' ,GradientType=0)";
		background : -webkit-gradient(linear, left top, left bottom, from(rgba(2, 2, 2, 0)), to(rgba(0, 0, 0, 0.8)));
		background : linear-gradient(180deg, rgba(2, 2, 2, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020202',endColorstr='#000000' , GradientType=0);
	}
	.entry .info {
		display: inline-block;
		font-size: 1.1rem;
	}
		.entry .info time,
		.entry .info .like {
			display: inline-block;
		}
		.entry .info time {
			margin-right: 10px;
		}
		.entry .info .like {
			background: url(../../images/content/content/ico_like.svg) no-repeat left center;
			padding-left: 20px;
		}
		.entry .info .like.active {
			background-image: url(../../images/content/content/ico_like_on.svg);
		}
	.entry .entryTtl {
		font-size: 1.6rem;
		line-height: 1.4;
		max-height: 4em;
		overflow: hidden;
	}
/**
 * Other Writers
 */
#otherVox {
	text-align: center;
	padding: 80px 0 130px;
}
	#otherVox h3 {
		font-size: 2.4rem;
		font-weight: bold;
		margin-bottom: 30px;
	}
	#otherVox .writerList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
		#otherVox .writerList li {
			width: 33.3333333%;
			max-width: 300px;
			margin-bottom: 40px;
		}
			#otherVox .writerList li a {
				display: block;
				text-decoration: none;
			}
			#otherVox .writerList li .portrait {
				margin-bottom: 15px;
			}
				#otherVox .writerList li .portrait img {
					border-radius: 50%;
				}
			#otherVox .writerList li .detail {
			}
				#otherVox .writerList li .detail .name {
					font-size: 2.2rem;
					font-weight: bold;
					margin-bottom: 5px;
				}
				#otherVox .writerList li .detail .pos {
					display: block;
					font-size: 1.8rem;
					font-weight: bold;
					color: #E61F4E;
					margin-bottom: 5px;
				}
				#otherVox .writerList li .detail .prof {
					display: block;
					font-size: 1.4rem;
					font-weight: bold;
				}
/**
 ****************************************************
 *
 * screens smaller than 1025
 *
 ****************************************************
 */
@media screen and (max-width: 1024px) {
	.entry {
		width: calc(50% - 5px);
		margin: 0 0 10px 0;
	}
		.entry a::before,
		.entry a::after {
			width: 30px;
			height: 50px;
		}
		.entry a::after {
			left: 45px;
		}
		.entry figure {
			width: 100%;
			height: auto;
		}
		.entry .content {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.entry .entryTtl {
			font-size: 1.4rem;
		}
		.entry .info time {
			margin-right: 7px;
		}
	#writer {}
		#writer .writerVox {
			padding: 0 2.67% 90px;
		}
		#writer .writerList {
			display: block;
		}
			#writer .writerList li {
				width: 100%;
				margin-bottom: 15px;
			}
				#writer .writerList li a {
				}
				#writer .writerList li .portrait {}
					#writer .writerList li .portrait img {
						width: 100px;
					}
				#writer .writerList li .detail {
					width: calc(100% - 100px);
					padding-left: 6%;
				}
					#writer .writerList li .detail .name {
						font-size: 1.6rem;
					}
					#writer .writerList li .detail .pos {
						font-size: 1.4rem;
					}
	#profile {}
		#profile .profileVox {
			padding: 0 2.67%;
			margin-left: 0;
			margin-bottom: 35px;
		}
			#profile .profileVox .titleWrap {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
			}
				#profile .profileVox .titleWrap .portrait {
					position: static;
					top: inherit;
					left: inherit;
				}
					#profile .profileVox .titleWrap .portrait img {
						width: 100px;
					}
				#profile .profileVox .titleWrap h1 {
					width: calc(100% - 100px);
					padding: 0 0 0 5%;
					margin-bottom: 0;
				}
					#profile .profileVox .titleWrap h1 .name {
						font-size: 2.0rem;
					}
					#profile .profileVox .titleWrap h1 .pos {
						font-size: 1.4rem;
					}
			#profile .profileVox .intro {
				padding: 0 1%;
			}
	/**
	 * latest
	 */
	#latestArea {
		padding: 20px 5px 10px;
		min-height: auto;
	}
		#latestArea .intro {
			width: 100%;
			padding: 0;
			float: none;
			text-align: center;
			margin-bottom: 20px;
		}
		html:lang(zh-tw) #latestArea .intro {
			padding: 0;
		}
			#latestArea .intro h2 {
				font-size: 2.4rem;
				margin-bottom: 10px;
			}
		#latestArea .itemWrapper {
			width: 100%;
			position: relative;
			top: inherit;
			left: inherit;
			float: none;
		}
		#latestArea .entry {
			width: 49%;
			height: auto;
			margin: 0 5px;
		}
			#latestArea .entry img {
				width: 100%;
			}
	#latestControls .slick-prev {
		left: -5px;
	}
	#latestControls .slick-next {
		right: -5px;
	}
	#otherVox {
		margin-top: 30px;
		padding: 30px 2.67%;
		background: #F2F2F2;
	}
		#otherVox h3 {
			text-align: center;
		}
		#otherVox .writerList {
			display: block;
		}
			#otherVox .writerList li {
				width: 100%;
				max-width: 100%;
			}
			#otherVox .writerList li:not(:last-child) {
				margin-bottom: 30px;
			}
				#otherVox .writerList li a {
					display: flex;
					align-items: center;
				}
				#otherVox .writerList li .portrait {
					margin-bottom: 0;
				}
					#otherVox .writerList li .portrait img { width: 100px; }
				#otherVox .writerList li .detail {
					padding-left: 5%;
				}
					#otherVox .writerList li .detail .name {
						font-size: 2.0rem;
					}
					#otherVox .writerList li .detail .pos {
						font-size: 1.4rem;
					}
}
/**
 ****************************************************
 *
 * screens 769 - 1024
 *
 ****************************************************
 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	#writer .writerList {
		display: flex;
	}
		#writer .writerList li {
			width: 50%;
			margin-bottom: 35px;
		}
			#writer .writerList li .portrait {}
				#writer .writerList li .portrait img {
					width: 90px;
				}
			#writer .writerList li .detail {
				padding-left: 25px;
			}
				#writer .writerList li .detail .name {
					font-size: 2.2rem;
					font-weight: bold;
				}
				#writer .writerList li .detail .pos {
					font-size: 1.6rem;
					font-weight: bold;
					color: #E61F4E;
				}
}