@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/

/* 全般
-----------------------------------------------*/
.topics .inner h2 {
	text-align: center;
	letter-spacing: 0.2em;
}
.topics .flexBox,
.topicsSelect .flexBox {
	display: flex;
	flex-wrap: wrap;
}
.topics #mainImage .imgWrap {background: url("../../images/topics/main01.jpg") no-repeat center center / cover;}
.topicsSelect #mainImage .imgWrap {background: url("../../images/topics/main02.jpg") no-repeat center center / cover;}

/* 画像
-------------------------------*/
.flex-control-thumbs {
	display: flex;
	padding: 0 0 1em;
	justify-content: center;
}
.flex-control-thumbs li {
	padding-top:15%;
	width: 20%;
	margin-right: 2%;
	position: relative;
}
.flex-control-thumbs li img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.flex-control-thumbs li:last-child {margin-right: 0;}
.highslide-full-expan,
.flex-direction-nav {display: none;}

#mainSlide .owl-dots .active {background-color: #0052a4;}

/* slideMainBox
----------------------------------*/
.topicsMainImg {
	display: flex;
	margin-bottom: 1em;
}
.topicsMainImg .slideMainBox {
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 600px;
}
.topicsMainImg .slideMainBox img {
	margin: auto;
	max-width:100%;
	max-height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

/* highslide用ダミーデータ */
#dummyImage {
	position: absolute;
	z-index: -1;
	opacity: 0;
	max-width:100%;
}

/* naviBox
-----------------------------------------------*/
#naviBox .flexBox {justify-content: center;}
#naviBox li a {color: #778288;}
#naviBox li span {
	display: block;
	text-align: center;
}
#naviBox li.current {border-bottom: 1px solid #778288;}

/* topicsList
-----------------------------------------------*/
#topicsList #listBox li a {
	display: flex;
	color: #778288;
}
#topicsList .imgBox {
	margin-right: 7%;
	overflow: hidden;
}
#topicsList .imgBox img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#topicsList .txtBox time,
#topicsList .txtBox div {font-family: "adobe-garamond-pro", serif;}
#topicsList .txtBox time {display: block;}
#topicsList .txtBox div {text-decoration: underline;}
#topicsList .txtBox h3 {
	overflow: hidden;
	word-break: break-all;
	-webkit-box-orient: vertical;
}
#topicsList .pager ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
#topicsList .pager ul li a {
	font-family: "adobe-garamond-pro", serif;
	color: #778288;
}
#topicsList .pager ul li .liArrow {
	display: block;
	padding-bottom: 0.2em;
}
#topicsList .pager ul li.currentpage {border-bottom: 1px solid #000000;}

/* topicsSelectWrap
-----------------------------------------------*/
#topicsSelectWrap #topicsHead,
#topicsSelectWrap #topicsMainImg {text-align: center;}
#topicsSelectWrap #topicsHead h3 {
	line-height: 1.75;
}
#topicsSelectWrap #topicsHead time {display: block;}
#topicsSelectWrap #topicsHead div {
	margin-bottom: 2.5em;
	text-decoration: underline;
}
#topicsSelectWrap .flexBox {justify-content: space-between;}
#topicsSelectWrap #topicsSubImg,
#topicsSelectWrap #topicsTxt {
	width: 100%;
	max-width: 600px;
	line-height: 1.75;
}
#topicsSelectWrap #topicsTxt {
	word-break: break-all;
	letter-spacing: 0.2em;
}
#topicsSelectWrap #topicsTxt a {text-decoration: underline;}
#topicsSelectWrap .linkBtn a span {padding-left: 0;}
#topicsSelectWrap #topicsTxt .linkArea {margin:1em 0;}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px) {
	
	/* 全般
	-----------------------------------------------*/
	.topics .inner h2 {
		font-size: 1.3em;
		margin-bottom: 3em;
	}
	
	/* naviBox
	-----------------------------------------------*/
	#naviBox {margin-bottom: 5.8em;}
	#naviBox li {letter-spacing: 0.1em;}
	#naviBox li:not(:last-child) {margin-right: 8%;}
	
	/* topicsList
	-----------------------------------------------*/
	#topicsList {margin-bottom: 6.5em;}
	#topicsList #listBox {margin-bottom: 2.5em;}
	#topicsList #listBox li:not(:last-child) {margin-bottom: 2.9em;}
	#topicsList .imgBox {
		position: relative;
		width: 50%;
		padding-top: 30%;
	}
	#topicsList .txtBox {width: 43%;}
	#topicsList .txtBox time {
		font-size: 1.1em;
		margin: 0.7em 0 0.3em;
	}
	#topicsList .txtBox div {
		font-size: 1.2em;
		margin-bottom: 1em;
	}
	#topicsList .txtBox h3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 1.15em;
		line-height: 1.75;
		overflow: hidden;
	}
	#topicsList .pager ul li {
		font-size: 1.15em;
	}
	#topicsList .pager ul li:not(:last-of-type) {margin-right: 3%;}

	/* topicsSelectWrap
	-----------------------------------------------*/
	#topicsSelectWrap #topicsHead time {margin-bottom: 0.5em;}
	#topicsSelectWrap #topicsHead div {
		font-size: 1.2em;
	}
	#topicsSelectWrap #topicsHead h3 {
		font-size: 1.3em;
		padding: 0 10px;
		margin-bottom: 5em;
	}
	#topicsSelectWrap #topicsMainImg {
		width: 100%;
		max-width: 600px;
		margin-bottom: 2.5em;
	}
	#topicsSelectWrap #topicsSubImg {margin: 0 auto 3em;}
	#topicsSelectWrap #topicsSubImg img {
		width: 18%;
		max-width: 100px;
		height: 13%;
		max-height: 80px;
	}
	#topicsSelectWrap #topicsTxt {
		font-size: 1.15em;
		margin: 0 auto 5.8em;
	}
	#topicsSelectWrap #topicsTxt p {margin-bottom: 1em;}
	#topicsSelectWrap .linkBtn {margin-bottom: 5.8em;}

	/* photoBox
	----------------------------------*/
	#photoBox {
		position: relative;
		max-width: 100%;
	}
	#mainSlide li {width: 15%;}
	#mainSlide li img {
		width: 100%;
		max-width: 60px;
	}
	.topicsMainImg .slideMainBox {margin: 0 auto;}
	.flex-control-thumbs {
		max-width: 600px;
		margin: 0 auto 3em;
	}
	
	/* dummyImage
	----------------------------------*/
	#dummyImage {
		bottom: 62.5%;
		right: 50%;
		left: 50%;
	}
	#dummyImage img {
		max-width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	
	/* 全般
	-----------------------------------------------*/
	.topics .inner h2 {
		font-size: 1.4em;
		margin-bottom: 5em;
	}
	
	/* naviBox
	-----------------------------------------------*/
	#naviBox {margin-bottom: 12.5em;}
	#naviBox li {
		font-size: 1.16em;
		letter-spacing: 0.2em;
	}
	#naviBox li:not(:last-child) {margin-right: 7%;}
	#naviBox li span {margin-top: 0.5em;}
	
	/* topicsList
	-----------------------------------------------*/
	#topicsList {margin-bottom: 12em;}
	#topicsList #listBox {
		max-width: 630px;
		margin: 0 auto 5em;
	}
	#topicsList #listBox li:not(:last-child) {margin-bottom: 4.4em;}
	#topicsList .txtBox {letter-spacing: 0.2em;}
	#topicsList .txtBox time,
	#topicsList .txtBox div {
		font-size: 1.3em;
	}
	#topicsList .txtBox time {margin: 1.3em 0;}
	#topicsList .txtBox h3 {
		min-height: 90px;
		display: -webkit-box;
		align-items: center;
		font-size: 1.2em;
		margin: 1em 0;
		line-height: 1.75;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
	}
	#topicsList .pager ul li:not(:last-of-type) {margin-right: 1.2%;}
	#topicsList .pager ul li {
		font-size: 1.2em;
		line-height: 1.75;
	}
	#topicsList .imgBox {
		height: 200px;
		width: 300px;
		min-width: 50%;
		position: relative;
	}
	
	/* topicsSelectWrap
	-----------------------------------------------*/
	#topicsSelectWrap #topicsHead {
		max-width: 600px;
		margin: 0 auto;
	}
	#topicsSelectWrap #topicsHead time {
		font-size: 1.33em;
	}
	#topicsSelectWrap #topicsHead div {
		font-size: 1.4em;
	}
	#topicsSelectWrap #topicsHead time {margin-bottom: 1em;}
	#topicsSelectWrap #topicsHead h3 {
		font-size: 1.6em;
		margin-bottom: 5em;
	}
	#topicsSelectWrap #topicsMainImg {
		max-width: 600px;
		margin: auto;
		margin-bottom: 3em;
	}
	#topicsSelectWrap .topicsMainImg {max-height: 400px;}
	#topicsSelectWrap #topicsSubImg {margin: 0 auto 5em;}
	#topicsSelectWrap #topicsSubImg img {
		width: 110px;
		height: 80px;
	}
	#topicsSelectWrap #topicsTxt {
		font-size: 1.2em;
		margin: 0 auto 7em;
	}
	#topicsSelectWrap #topicsTxt p {
		margin-bottom: 2em;
		line-height: 1.5em;
	}
	#topicsSelectWrap .linkBtn {margin-bottom: 12.5em;}
	
	/*photoBox
	---------------------------------------- */
	#photoBox {
		position: relative;
		max-width: 600px;
		margin: 0 auto;
		margin-bottom: 1em;
	}
	#mainSlide li {
		width: 15%;
		max-height: 400px;
	}
	#mainSlide li img {
		width: 100%;
		max-width: 60px;
		max-height: 400px;
	}
	.topicsMainImg .slideMainBox {
		height: 400px;
		margin: 0 auto 3em auto;
	}
	.flex-control-thumbs {margin: 0 auto 5em;}
	
	/* dummyImage
	---------------------------------------- */
	#dummyImage {
		max-height: 400px;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	#dummyImage img {
		max-width : 600px;
		max-height: 400px;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}
}