/***************************
 *
 * 投稿・カテゴリーページ
 * ★ページ中身用★
 *
 **************************/

/* コンテナーにイージングを設定 */
.barba-leave-active,
.barba-enter-active {
	transition: 0.3s ease-out;
}

/* //ページを離れる時の初期状態 */
.barba-leave {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* //ページ表示時の初期状態 */
.barba-enter {
	opacity: 0;
	visibility: hidden;
}

/* //ページを離れるアニメーション */
.barba-leave-to {
	opacity: 0;
	visibility: hidden;
}

/* //ページ表示時のアニメーション */
.barba-enter-to {
	opacity: 1;
	visibility: visible;
	transform: none;
}
@media all and (min-width: 737px) {
	/*--------------------------------
カテゴリ
---------------------------------*/
	.cat-wrap {
		display: flex;
		justify-content: space-between;
		/* border-bottom: 1px solid #eeeeee; */
		padding-bottom: 30px;
	}
	.cat-wrap .cat-l {
		order: 1;
		width: 240px;
	}
	.cat-wrap .cat-r {
		width: 730px;
		order: 2;
	}
	/*--------------------------------
シングル
---------------------------------*/
	.post-wrap {
		position: relative;
	}
	.post-header {
		padding: 95px 0px 0;

		margin: 0 auto;
	}
	.post-header .post-cat {
		display: inline-block;
		margin-right: 20px;
	}
	.post-header .post-cat a {
		display: block;
		text-decoration: none;
		color: #d8928d;
		font-size: 1.6rem;
	}
	.post-header .post-cat a:before {
		content: "[";
	}
	.post-header .post-cat a:after {
		content: "]";
	}
	.post-header .post-time {
		display: inline-block;
		font-size: 1.6rem;
		color: #d8928d;
		line-height: 26px;
		vertical-align: middle;
	}
	.post-header .post-title {
		margin-top: 25px;
		font-size: 2rem;
		line-height: 1.8em;
		color: #444444;
		font-weight: 500;
		letter-spacing: 0.05em;
		margin-bottom: 40px;
		border-bottom: 1px solid #eeeeee;
		padding-bottom: 40px;
	}
	.post .box-content {
		margin: 0 auto;
	}
	.blog-wrap {
		padding-top: 0;
	}
	.blog-wrap .post-header {
		padding-top: 0;
	}
	.blog-wrap .post-header .box-content {
		padding-top: 0;
	}
	.post-header .post-cat {
		position: absolute;
		right: 0;
		top: 0;
	}
	/*
RELATED
*/
	.relate-wrap {
		padding-top: 50px;
		margin-top: 50px;
		border-top: 1px solid #eeeeee;
	}
	.relate-title {
		text-align: center;
		font-size: 1.8rem;
		color: #d8928d;
		font-weight: 500;
		margin-bottom: 50px !important;
	}
	.list-relate {
		grid-template-columns: repeat(1, 1fr);
	}
	.list-relate .entry {
		position: relative;
		min-height: 165px;
	}
	.list-relate .entry .entry-pic {
		position: absolute;
		left: 0;
		top: 0;
		width: 220px;
	}
	.list-relate .entry .entry-content {
		padding-left: 245px;
	}
	/*--------------------------------
ページ送り
---------------------------------*/
	.pagenavi {
		text-align: center;
		padding: 95px 20px;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		position: relative;
	}
	ul.page-numbers {
		position: relative;
		text-align: center;
	}
	ul.page-numbers > li {
		display: inline-block;
		letter-spacing: normal;
		margin: 0 4px;
		vertical-align: top;
	}
	ul.page-numbers > li > a,
	ul.page-numbers > li > span {
		text-align: center;
		display: inline-block;

		box-sizing: border-box;
		font-size: 1.8rem;
		color: #787471;
		padding: 0 4px 3px;
		transition: all 0.3s ease;
		text-decoration: none;
		font-weight: 500;
	}
	ul.page-numbers > li:first-child > a {
	}
	ul.page-numbers > li:last-child > a {
	}
	ul.page-numbers > li > a:hover {
		z-index: 2;
		text-decoration: none;
		transition: none;
		color: #89796d;
		/* border-bottom: 1px solid #e5be04; */
	}
	ul.page-numbers .current {
		color: #d8928d;
		cursor: default;
		z-index: 2;
		font-weight: 500;
		/* border-bottom: 1px solid #e5be04; */
	}
	.page-numbers .next {
		position: absolute;
		right: 0;
		top: -10px;
		width: 160px;
		border-radius: 45px;
		display: block;
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 50px;
		background: #f0b3a2;
		background: -moz-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: -webkit-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: linear-gradient(to bottom, #f0b3a2 0%, #e48985 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b3a2', endColorstr='#e48985',GradientType=0 );
		transition: opacity 0.3s ease;
		text-decoration: none !important;
	}

	.page-numbers .next:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		text-decoration: none;
		opacity: 0.7;
	}
	.page-numbers .prev {
		position: absolute;
		right: 0;
		top: -10px;
		width: 160px;
		border-radius: 45px;
		display: block;
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 50px;
		background: #f0b3a2;
		background: -moz-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: -webkit-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: linear-gradient(to bottom, #f0b3a2 0%, #e48985 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b3a2', endColorstr='#e48985',GradientType=0 );
		transition: opacity 0.3s ease;
		text-decoration: none !important;
	}

	.page-numbers .prev:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		text-decoration: none;
		opacity: 0.7;
	}

	/*--------------------------------
前の記事・次の記事
---------------------------------*/
	.prev-next {
		padding: 95px 0;
		border-top: 1px solid #eeeeee;
		position: relative;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	.prev-next .box-content {
		text-align: center;
		margin: 0 auto;
	}
	.prev-next .home {
		display: block;
		font-size: 1.4rem;
		font-weight: bold;
		color: #fff;
		border: 1px solid white;
		border-radius: 23px;
		width: 200px;
		line-height: 46px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.prev-next .home a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.prev-next .home:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		background: #89796d;
		border: 1px solid #89796d;
	}
	.prev-next .next {
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
		font-size: 1.4rem;
		width: 50%;
		color: #444444;
		padding: 0;
		text-align: left;
		box-sizing: border-box;
		padding-left: 45px;
		/* padding-right: 175px; */
		line-height: 1.95em;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		border-left: 1px solid #eeeeee;
	}
	/* .prev-next .next:before {
		content: "";
		display: block;
		background: url(../img/post/next.png) 0 0 no-repeat;
		background-size: contain;
		width: 160px;
		height: 50px;
		position: absolute;
		right: 0;
		top: 0;
	} */
	.prev-next .next:hover {
		text-decoration: underline;
	}
	.prev-next .prev {
		display: block;
		position: absolute;
		left: 0px;
		top: 0px;
		font-size: 1.4rem;
		width: 50%;
		color: #444444;
		padding: 0;
		text-align: left;
		box-sizing: border-box;
		padding-right: 45px;
		/* padding-left: 175px; */
		line-height: 1.95em;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	/* .prev-next .prev:before {
		content: "";
		display: block;
		background: url(../img/post/prev.png) 0 0 no-repeat;
		background-size: contain;
		width: 160px;
		height: 50px;
		position: absolute;
		left: 0;
		top: 0;
	} */
	.prev-next .prev:hover {
		text-decoration: underline;
	}

	.relate {
		width: 100%;
		order: 4;
		margin-top: 40px;
		background: url(../img/border.png) left top no-repeat;
		background-size: 1000px 1px;
	}
	.relate .relate-title {
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		color: #e8785a;
		padding-top: 35px;
		margin-bottom: 40px;
	}

	/*
*		
*
  POST CONTENT
*
*	
*/
	.post {
		word-break: break-all;
		font-size: 1.5rem;
		line-height: 2em;
		padding: 1px 0 5px;
	}
	.post p {
		margin-bottom: 40px;
	}
	.post p a {
		color: #d8928d;
		text-decoration: underline;
	}
	.box-black {
		background: #2a2a2a;
		margin: 50px auto;
		padding: 25px;
	}
	.box-black p:last-child {
		margin-bottom: 0;
	}
	.post .notice {
		font-size: 1.3rem;
		color: #bbbbbb;
		line-height: 1.8em;
	}
	.post ol {
		margin-bottom: 30px;
		counter-reset: number;
	}
	.post ol > li {
		font-weight: normal;
		font-size: 1.6rem;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 55px;

		position: relative;
	}
	.post ol > li:before {
		counter-increment: number;
		content: counter(number) ".";
		position: absolute;
		left: 5px;
		top: 5px;
		font-size: 1.6rem;
		color: #fff;
		background: #222222;
		width: 36px;
		height: 36px;
		line-height: 36px;
		border-radius: 100%;
		text-align: center;
	}
	.post hr {
	}
	.post ul {
		margin-bottom: 30px;
	}
	.post ul > li {
		font-weight: normal;
		padding-left: 30px;
		position: relative;
		font-size: 1.6rem;
		margin-bottom: 5px;
	}
	.post ul > li:before {
		content: "・";
		position: absolute;
		left: 0px;
		top: 1px;
		color: #222;
		font-size: 3rem;
	}
	blockquote {
		position: relative;
		padding: 25px;
		box-sizing: border-box;

		margin: 25px auto;
		background: #333333;
	}

	blockquote:before {
		display: inline-block;
		position: absolute;
		top: -5px;
		left: -5px;
		vertical-align: middle;
		content: "\f10d";
		font-family: FontAwesome;
		font-weight: bold;
		color: white;
		font-size: 26px;
		line-height: 1;

		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
	}

	blockquote:after {
		display: inline-block;
		position: absolute;
		bottom: -5px;
		right: -5px;
		vertical-align: middle;
		text-align: center;
		content: "\f10e";
		font-family: FontAwesome;
		font-weight: bold;
		color: white;
		font-size: 26px;
		line-height: 1;

		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
	}
	blockquote a {
		display: block;
		margin-top: 15px;
	}
	blockquote p:last-child {
		margin-bottom: 0;
	}
}
/***************************
 *
 * 投稿・カテゴリーページ
 * ★ページ中身用★
 *
 **************************/

/* コンテナーにイージングを設定 */
.barba-leave-active,
.barba-enter-active {
	transition: 0.3s ease-out;
}

/* //ページを離れる時の初期状態 */
.barba-leave {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* //ページ表示時の初期状態 */
.barba-enter {
	opacity: 0;
	visibility: hidden;
}

/* //ページを離れるアニメーション */
.barba-leave-to {
	opacity: 0;
	visibility: hidden;
}

/* //ページ表示時のアニメーション */
.barba-enter-to {
	opacity: 1;
	visibility: visible;
	transform: none;
}
@media all and (max-width: 736px) {
	/*--------------------------------
カテゴリ
---------------------------------*/
	.cat-wrap {
		display: flex;
		justify-content: space-between;
		/* border-bottom: 1px solid #eeeeee; */
		padding-bottom: 30px;
		flex-wrap: wrap;
	}
	.cat-wrap .cat-l {
		order: 2;
		width: 100%;
	}
	.cat-wrap .cat-r {
		width: 100%;
		order: 1;
	}
	/*--------------------------------
シングル
---------------------------------*/
	.post-wrap {
		position: relative;
	}
	.post-wrap .box-content {
		padding: 0 15px;
	}
	.post-header {
		padding: 25px 0px 0;

		margin: 0 auto;
	}
	.post-header .post-cat {
		display: inline-block;
		margin-right: 20px;
	}
	.post-header .post-cat a {
		display: block;
		text-decoration: none;
		color: #d8928d;
		font-size: 1.6rem;
	}
	.post-header .post-cat a:before {
		content: "[";
	}
	.post-header .post-cat a:after {
		content: "]";
	}
	.post-header .post-time {
		display: inline-block;
		font-size: 1.6rem;
		color: #d8928d;
		line-height: 26px;
		vertical-align: middle;
	}
	.post-header .post-title {
		margin-top: 25px;
		font-size: 2rem;
		line-height: 1.8em;
		color: #444444;
		font-weight: 500;
		letter-spacing: 0.05em;
		margin-bottom: 20px;
		border-bottom: 1px solid #eeeeee;
		padding-bottom: 20px;
	}
	.post .box-content {
		margin: 0 auto;
	}
	.blog-wrap {
		padding-top: 0;
	}
	.blog-wrap .post-header {
		padding-top: 0;
	}
	.blog-wrap .post-header .box-content {
		padding-top: 0;
	}
	.post-header .post-cat {
		position: absolute;
		right: 0;
		top: 0;
	}
	/*
RELATED
*/
	.relate-wrap {
		padding-top: 50px;
		margin-top: 50px;
		border-top: 1px solid #eeeeee;
	}
	.relate-title {
		text-align: center;
		font-size: 1.8rem;
		color: #d8928d;
		font-weight: 500;
		margin-bottom: 50px !important;
	}
	.list-relate {
		grid-template-columns: repeat(1, 1fr);
	}
	.list-relate .entry {
		position: relative;
		min-height: 90px;
	}
	.list-relate .entry .entry-pic {
		position: absolute;
		left: 0;
		top: 0;
		width: 110px;
	}
	.list-relate .entry .entry-content {
		padding-left: 125px;
	}
	/*--------------------------------
ページ送り
---------------------------------*/
	.pagenavi {
		text-align: center;
		padding: 45px 20px;
		width: 100%;

		margin: 0 auto;
		position: relative;
	}
	ul.page-numbers {
		position: relative;
		text-align: center;
		padding: 0 100px;
	}
	ul.page-numbers > li {
		display: inline-block;
		letter-spacing: normal;
		margin: 0;
		vertical-align: top;
	}
	ul.page-numbers > li > a,
	ul.page-numbers > li > span {
		text-align: center;
		display: inline-block;

		box-sizing: border-box;
		font-size: 1.8rem;
		color: #787471;
		padding: 0 4px 3px;
		transition: all 0.3s ease;
		text-decoration: none;
		font-weight: 500;
	}
	ul.page-numbers > li:first-child > a {
	}
	ul.page-numbers > li:last-child > a {
	}
	ul.page-numbers > li > a:hover {
		z-index: 2;
		text-decoration: none;
		transition: none;
		color: #89796d;
		/* border-bottom: 1px solid #e5be04; */
	}
	ul.page-numbers .current {
		color: #d8928d;
		cursor: default;
		z-index: 2;
		font-weight: 500;
		/* border-bottom: 1px solid #e5be04; */
	}
	.page-numbers .next {
		position: absolute;
		right: 0;
		top: -10px;
		width: 90px;
		border-radius: 45px;
		display: block;
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 50px;
		background: #f0b3a2;
		background: -moz-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: -webkit-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: linear-gradient(to bottom, #f0b3a2 0%, #e48985 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b3a2', endColorstr='#e48985',GradientType=0 );
		transition: opacity 0.3s ease;
		text-decoration: none !important;
	}

	.page-numbers .next:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		text-decoration: none;
		opacity: 0.7;
	}
	.page-numbers .prev {
		position: absolute;
		right: 0;
		top: -10px;
		width: 90px;
		border-radius: 45px;
		display: block;
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 50px;
		background: #f0b3a2;
		background: -moz-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: -webkit-linear-gradient(top, #f0b3a2 0%, #e48985 100%);
		background: linear-gradient(to bottom, #f0b3a2 0%, #e48985 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b3a2', endColorstr='#e48985',GradientType=0 );
		transition: opacity 0.3s ease;
		text-decoration: none !important;
	}

	.page-numbers .prev:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		text-decoration: none;
		opacity: 0.7;
	}

	/*--------------------------------
前の記事・次の記事
---------------------------------*/
	.prev-next {
		padding: 65px 0;
		border-top: 1px solid #eeeeee;
		position: relative;

		margin: 0 15px;
	}
	.prev-next .box-content {
		text-align: center;
		margin: 0 auto;
	}
	.prev-next .home {
		display: block;
		font-size: 1.4rem;
		font-weight: bold;
		color: #fff;
		border: 1px solid white;
		border-radius: 23px;
		width: 200px;
		line-height: 46px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.prev-next .home a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.prev-next .home:hover {
		text-decoration: none;
		opacity: 0.7;
		color: white !important;
		background: #89796d;
		border: 1px solid #89796d;
	}
	.prev-next .next {
		display: block;
		position: absolute;
		right: 0px;
		top: 10px;
		font-size: 1.4rem;
		width: 50%;
		color: #444444;
		padding: 0;
		text-align: left;
		box-sizing: border-box;
		padding-left: 45px;
		/* padding-right: 175px; */
		line-height: 1.95em;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		border-left: 1px solid #eeeeee;
	}
	/* .prev-next .next:before {
		content: "";
		display: block;
		background: url(../img/post/next.png) 0 0 no-repeat;
		background-size: contain;
		width: 160px;
		height: 50px;
		position: absolute;
		right: 0;
		top: 0;
	} */
	.prev-next .next:hover {
		text-decoration: underline;
	}
	.prev-next .prev {
		display: block;
		position: absolute;
		left: 0px;
		top: 10px;
		font-size: 1.4rem;
		width: 50%;
		color: #444444;
		padding: 0;
		text-align: left;
		box-sizing: border-box;
		padding-right: 45px;
		/* padding-left: 175px; */
		line-height: 1.95em;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	/* .prev-next .prev:before {
		content: "";
		display: block;
		background: url(../img/post/prev.png) 0 0 no-repeat;
		background-size: contain;
		width: 160px;
		height: 50px;
		position: absolute;
		left: 0;
		top: 0;
	} */
	.prev-next .prev:hover {
		text-decoration: underline;
	}

	.relate {
		width: 100%;
		order: 4;
		margin-top: 40px;
		background: url(../img/border.png) left top no-repeat;
		background-size: 1000px 1px;
	}
	.relate .relate-title {
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		color: #e8785a;
		padding-top: 35px;
		margin-bottom: 40px;
	}

	/*
*		
*
  POST CONTENT
*
*	
*/
	.post {
		word-break: break-all;
		font-size: 1.5rem;
		line-height: 2em;
		padding: 1px 0 5px;
	}
	.post p {
		margin-bottom: 40px;
	}
	.post p a {
		color: #d8928d;
		text-decoration: underline;
	}
	.box-black {
		background: #2a2a2a;
		margin: 50px auto;
		padding: 25px;
	}
	.box-black p:last-child {
		margin-bottom: 0;
	}
	.post .notice {
		font-size: 1.3rem;
		color: #bbbbbb;
		line-height: 1.8em;
	}
	.post ol {
		margin-bottom: 30px;
		counter-reset: number;
	}
	.post ol > li {
		font-weight: normal;
		font-size: 1.6rem;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 55px;

		position: relative;
	}
	.post ol > li:before {
		counter-increment: number;
		content: counter(number) ".";
		position: absolute;
		left: 5px;
		top: 5px;
		font-size: 1.6rem;
		color: #fff;
		background: #222222;
		width: 36px;
		height: 36px;
		line-height: 36px;
		border-radius: 100%;
		text-align: center;
	}
	.post hr {
	}
	.post ul {
		margin-bottom: 30px;
	}
	.post ul > li {
		font-weight: normal;
		padding-left: 30px;
		position: relative;
		font-size: 1.6rem;
		margin-bottom: 5px;
	}
	.post ul > li:before {
		content: "・";
		position: absolute;
		left: 0px;
		top: 1px;
		color: #222;
		font-size: 3rem;
	}
	blockquote {
		position: relative;
		padding: 25px;
		box-sizing: border-box;

		margin: 25px auto;
		background: #333333;
	}

	blockquote:before {
		display: inline-block;
		position: absolute;
		top: -5px;
		left: -5px;
		vertical-align: middle;
		content: "\f10d";
		font-family: FontAwesome;
		font-weight: bold;
		color: white;
		font-size: 26px;
		line-height: 1;

		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
	}

	blockquote:after {
		display: inline-block;
		position: absolute;
		bottom: -5px;
		right: -5px;
		vertical-align: middle;
		text-align: center;
		content: "\f10e";
		font-family: FontAwesome;
		font-weight: bold;
		color: white;
		font-size: 26px;
		line-height: 1;

		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
	}
	blockquote a {
		display: block;
		margin-top: 15px;
	}
	blockquote p:last-child {
		margin-bottom: 0;
	}
}