@charset "UTF-8";

/* ▼▼▼ トピックス
=====================================*/
body > #wrapper {
	overflow: visible;
}
/* ▼ 一覧
-------------------------------------*/
section {
	padding-bottom: 100px;
}
section .article_list {
	margin-bottom: 0;
}
.pagenav {
	width: 405px;
	margin: 0 auto 100px;
	line-height: 30px;
	position: relative;
	overflow: hidden;
	}
	.pagenav ol {
		width: 285px;
		margin: 0 auto;
		overflow: hidden;
	}
	.pagenav ol li {
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 20px 10px 0;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
	.pagenav ol li.now a {
		pointer-events: none;
	}
	.pagenav ol li:last-child {margin-right: 0;}
	.pagenav ol li a,
	.pagenav .prev a,
	.pagenav .next a {
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #ccc;
		font-family: 'Spartan', sans-serif;
		position: relative;
	}
	.pagenav ol li.now a,
	.pagenav ol li a:hover,
	.pagenav .prev a:hover,
	.pagenav .next a:hover {
			border: 1px solid #000;
			opacity: 1;
	}
	.pagenav ol li.now a::after,
	.pagenav ol li a:hover::before,
	.pagenav .prev a:hover::before,
	.pagenav .next a:hover::before,
	.pagenav ol li a:hover::after,
	.pagenav .prev a:hover::after,
	.pagenav .next a:hover::after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 5px;
		bottom: -5px;
	}
	.pagenav ol li.now a::before,
	.pagenav ol li.now a::after {
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
	}
	.pagenav ol li a:hover::before,
	.pagenav .prev a:hover::before,
	.pagenav .next a:hover::before {
		border-bottom: 1px solid #000;
		animation: boderBtn01 .2s ease-in-out;
	}
	@keyframes boderBtn01 {
		from{
			width: 0;
		}
		to {
			width: 100%;
		}
	}
	.pagenav ol li a:hover::after,
	.pagenav .prev a:hover::after,
	.pagenav .next a:hover::after {
		border-right: 1px solid #000;
		animation: boderBtn02 .4s ease-in-out;
	}
	@keyframes boderBtn02 {
		from{
			height: 0;
		}
		50% {
			height: 0;
		}
		to {
			height: 100%;
		}
	}

	.pagenav .prev,
	.pagenav .next {
		position: absolute;
		top: 0;
		left: 0;
		}
		.pagenav .next {
			left: inherit;
			right: 5px;
		}
		.pagenav .prev:before,
		.pagenav .next:before {
			display: block;
			content: "";
			width: 40px;
			height: 40px;
			background: url(../img/icon_arrow.svg)no-repeat center 17px/15px 3px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.pagenav .prev:before {
			transform: scale(-1, 1);
		}

/* ▼ 詳細
-------------------------------------*/
/* コンテンツ
-------------------------------------*/
.detail .flex_box.container {
	overflow: visible;
	justify-content:space-between
}
.detail section {
	padding-bottom: 0;
}
.detail #sec01 a,
.detail #sec02 a {
	text-decoration: underline;
}

article {
	width: 64%;
	margin: 0 5% 100px 0;
	}
	article section p{
		font-size: 14px;
		line-height: 2;
		letter-spacing: .1em;
	}
#main_sec{
	padding-bottom: 38px;
	margin-bottom: 0;
	}
	#main_sec .main_img{
		margin-bottom: 40px;
	}
	#main_sec .cat {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40px;
	}
	#main_sec .cat > p.spartan{
		position: relative;
	}
	#main_sec .cat > p.spartan::after {
		content: "";
		width: 20px;
		height: 1px;
		background: #000;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#main_sec .cat ul.share_sns {
		margin-right: 0;
	}
	#main_sec h1 {
		margin-bottom: 20px;
		font-size: 30px;
	}
	#main_sec p.data {
		margin-bottom: 20px;
		color: #AAA;
		font-size: 12px;
		font-family: 'Spartan', sans-serif;
		font-weight: 500;
		letter-spacing:0;
	}
/* タブ */
ul.tag {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	}
	ul.tag li{
		margin: 0 20px 15px 0;
	}
	ul.tag li a{
		background: #E2E2E2;
		padding: 0 2px;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
	}
	ul.tag li a::before {
		content: "＃";
	}

/* エディタ入力箇所
-------------------------------------*/
/* 共通 */
/* common-tinymce.cssへ */
/* sec01 */
#sec01 .article_title{
	/* margin: 80px 0 60px; */
	}
	#sec01 .photo {
		margin-bottom: 35px;
		text-align: center;
	}
	#sec01 p {
		margin-bottom: 20px;
	}
/* h3 */
.article_title_h3 {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 1.7;
}
/* sec02 */
	#sec02 ul li {
		width: 46%;
		margin-bottom: 40px;
	}
	#sec02 ul li .photo{
		margin-bottom: 20px;
	}
	#sec02 ul li p{
		margin-bottom: 10px;
	}
	#sec02 a {text-decoration: underline;}
/* スタッフbox */
.staff_box {
	border: 1px solid #000;
	padding: 60px;
	margin: 40px 0;
	position: relative;
	}
	.staff_box > p {
		line-height: 2;
	}
	.staff_box::after {
		content: "";
		width: 100%;
		height: 100%;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		position: absolute;
		right: -7px;
		bottom: -7px;
		z-index: -1;
	}
	.staff_box .flex_box {
		margin-bottom: 20px;
		align-items: center;
		justify-content: center;
	}
	.staff_box .flex_box .staff_photo{
		flex: 1;
		text-align: center;
	}
	.staff_box .flex_box .staff_photo img{
		max-height: 200px;
	}
	.staff_box .flex_box .staff_txt{
		flex: 1.5;
	}
	.staff_box .flex_box .staff_txt p{
		text-align: center;
		position: relative;
	}
	.staff_box .flex_box .staff_txt p.kana{
		padding-bottom: 30px;
		margin-bottom: 30px!important;
		position: relative;
	}
	.staff_box .flex_box .staff_txt p.kana::after{
		content: "";
		width: 1px;
		height: 20px;
		background: #000;
		margin: auto;
		position: absolute;
		bottom: -10px;
		right: 0;
		left: 0;
	}
	.staff_box .flex_box .staff_txt p.spartan {
		margin-bottom: 0!important;
		font-size: 26px;
		line-height: 1.3;
	}
	.staff_box .flex_box .staff_txt p.spartan + p{
		color: #aaa;
		font-size: 14px;
	}
/* sns */
article ul.share_sns.large{
	margin-top: 50px;
}
article ul.share_sns.large li {
	font-size: 30px;
	}
	article ul.share_sns.large li.share {
		font-size: 14px;
	}
	article ul.share_sns.large li.share::after {
		width: 26px;
		margin: 5px 25px;
	}

/* サイド
-------------------------------------*/
aside {
	width: 26%;
	}
	aside ul.tag{
		padding-bottom: 20px;
		margin-bottom: 0;
	}
	aside .aside_title{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 105px;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		margin-bottom: 40px;
	}
	aside .aside_title h3{
		font-size: 22px;
		font-family: 'Spartan', sans-serif;
		text-align: center;
		font-weight: 500;
	}
	aside .aside_title h3 span{
		display: block;
		font-size: 12px;
		text-align: center;
	}
	/* リスト */
	.recommend_list {
		margin-bottom: 40px;
	}
	.recommend_list li {
		margin-bottom: 40px;
	}
	.recommend_list li:last-child {
		margin-bottom: 0;
	}
	.recommend_list li a {
		display: block;
	}
	.recommend_list li .photo{
		margin-bottom: 15px;
	}
	.recommend_list li .txt > div{
		display: flex;
		margin-bottom: 5px;
	}
	.recommend_list li .txt > div p.cat::after {
		content: "｜";
		margin: 0 5px;
	}
	.recommend_list li .txt > div p {
		color: #AAA;
		font-size: 10px;
		font-family: 'Spartan', sans-serif;
		font-weight: 500;
	}
	.recommend_list li .txt p {
		font-size: 14px;
		display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
	}

/* 目次
-------------------------------------*/
section#mokuji {
	padding-right: 5px;
	padding-bottom: 5px;
	position: relative;
}
section#mokuji:before {
	content: "";
	display: block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
	position: absolute;
	right: 0;
	bottom: 0;
	pointer-events: none;

}
section#mokuji .mokuji_inner {
	border: solid 1px #000000;
	padding: 6px 22px;
}
section#mokuji .mokuji_inner ol {
	counter-reset: count 0;
}
section#mokuji .mokuji_inner ol li {
		border-bottom: dotted 1px #000000;
}
section#mokuji .mokuji_inner ol li:last-of-type {
	border-bottom: none;
}
section#mokuji .mokuji_inner ol li a {
	font-size: 13px;
	display: flex;
	padding: 15px 0;
	line-height: 1.6;
}
section#mokuji .mokuji_inner ol li a span.num {
	font-size: 14px;
	font-family: 'Spartan', sans-serif;
	display        : inline-block;
	color          : #ffffff;
	letter-spacing : 2px;
	width: 16px;
	margin-right: 14px;
	text-align: center;
	padding-top: 1.5px;
	text-shadow    : 
		 1px  1px 0px #333,
		-1px  1px 0px #333,
		 1px -1px 0px #333,
		-1px -1px 0px #333,
		 1px  0px 0px #333,
		 0px  1px 0px #333,
		-1px  0px 0px #333,
		 0px -1px 0px #333;
}
ul.tag.tag_detail {
	margin-top: 100px;
}
/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {
	/* h3 */
	.article_title_h3 {
		font-size: 17px;
	}

	/* ▼ 一覧
	-------------------------------------*/
	section {
		padding-bottom: 60px;
	}
	.pagenav {
		width: 280px;
		margin: 0 auto 60px;
		}
		.pagenav ol {
			width: 200px;
		}
		.pagenav ol li {
			width: 30px;
			height: 30px;
			margin: 0 10px 10px 0;
			line-height: 30px;
		}
		.pagenav ol li a,
		.pagenav .prev a,
		.pagenav .next a {
			width: 30px;
			height: 30px;
		}
		.pagenav ol li.now a::before,
		.pagenav ol li.now a::after {
			border-right: 1px solid #000;
			border-bottom: 1px solid #000;
			left: 3px;
	    bottom: -4px;
		}
		.pagenav ol li a:hover::before,
		.pagenav .prev a:hover::before,
		.pagenav .next a:hover::before,
		.pagenav ol li a:hover::after,
		.pagenav .prev a:hover::after,
		.pagenav .next a:hover::after {
			display: none;
		}
		.pagenav .prev:before,
		.pagenav .next:before {
			width: 30px;
			height: 30px;
			background: url(../img/icon_arrow.svg)no-repeat center 14px/15px 3px;
		}

/* ▼ 詳細
-------------------------------------*/
/* コンテンツ
-------------------------------------*/
article {
	width: 100%;
	margin: 0 auto 60px;
	}
	article section p{
		font-size: 14px;
	}
#main_sec{
	padding-bottom: 40px;
	}
	#main_sec .main_img{
		margin-bottom: 40px;
	}
	#main_sec .cat {
		margin-bottom: 25px;
	}
	#main_sec h1 {
		margin-bottom: 15px;
		font-size: 22px;
	}
	#main_sec p.data {
		margin-bottom: 20px;
		font-size: 12px;
	}

/* エディタ入力箇所
-------------------------------------*/
/* 共通 */
/* common-tinymce.cssへ */
/* sec01 */
	#sec01 .photo {
		margin-bottom: 25px;
	}
/* sec02 */
	#sec02 ul li {
		width: 100%;
		margin-bottom: 50px;
	}


/* スタッフbox */
.staff_box {
	padding: 40px 45px 20px;
	}
	.staff_box .flex_box .staff_photo{
		width: 100%;
		margin-bottom: 20px;
	}
	.staff_box .flex_box .staff_photo img{
		max-height: 280px;
	}
	.staff_box .flex_box .staff_txt{
		width: 100%;
	}
	.staff_box .flex_box .staff_txt p.kana{
		padding-bottom: 25px;
		margin-bottom: 25px!important;
	}
/* sns */
article ul.share_sns.large {
	justify-content: center;
	margin-right: 0;
	}

/* サイド
-------------------------------------*/
aside {
	width: 100%;
	margin-bottom: 60px;
	}
	aside ul.tag{
		padding-bottom: 0;
	}
	/* リスト */
	.recommend_list {
		margin-bottom: 40px;
		display: flex;
		flex-wrap: wrap;
	}
	.recommend_list li {
		margin-bottom: 20px;
		width: calc(50% - 20px);
		margin: 0 10px 20px;
	}
	.recommend_list li a {
		display: block;
	}
	.recommend_list li .photo{
		width: 100%;
		margin: 0;
	}
	.recommend_list li .txt {
		width: 100%;
	}
	.recommend_list li .txt p {
		font-size: 12px;
	}
	.recommend_list li .txt > div {
		margin-top: 10px;
	}
	.recommend_list li .txt > div p.cat::after {
		margin: 0 2px;
	}

	/* 目次 */
	ul.tag.tag_detail {
		margin-top: 45px;
	}
	section#mokuji .mokuji_inner ol li a span.num {
		margin-right: 12px;
	}
	
}