@charset "utf-8";

.detail {
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.detail-inner {
	
}

/* -------------------- */

.article {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 40px;
}

.article__header {
	margin-bottom: 40px;
	text-align: center;
}

.article__img {
	
}

.article__img img {
	display: block;
	width: 100%;
}

.object-fit .article__img img {
	object-fit: cover;
}

.article__ttl {
	width: 90%;
	margin: 0 auto;
	padding-top: 60px;
	font-size: 2.0rem;
	font-weight: 600;
}

.article__ttl:first-child {
	padding-top: 100px;
}

.article__body {
	max-width: 720px;
	margin: 0 auto 100px;
}

.section__header-ttl {
	font-size: 1.8rem;
	margin-bottom: 40px;
}

.article__footer {
	margin: 0 auto;
	line-height: 1.5;
}

/* share */

.share {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-items: center;
	font-weight: 500;
}

.share-items {
	display: flex;
	align-items: center;
	margin: 0 20px;
	padding: 0;
	list-style: none;
}

.share-item {
	margin: 1em;
	line-height: 1;
}

.share-item a {
	
}

.share-item a:hover {
	color: #000;
}

.share .facebook a:hover  { color: #3b5998; }
.share .twitter a:hover   { color: #32a7e0; }
.share .pinterest a:hover { color: #bd081c; }

/* article nav */

.article__nav {
	position: absolute;
	display: block;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.article__nav-inner {
	position: sticky;
	position: -webkit-sticky;
	top: 50%;
	height: calc(50vh - 10px);
}

.article__nav-inner a {
	display: block;
	pointer-events: auto;
	transform: translateY(-50%);
}

.article__nav .prev {
	position: absolute;
	left: 10px;
	bottom: 0;
}

.article__nav .next {
	position: absolute;
	right: 10px;
	bottom: 0;
}

/* -------------------- */

.not-found {
	text-align: center;
	padding: 100px 0 !important;
	background-color: transparent !important;
	margin-bottom: 0 !important;
}
.not-found .article__body {
	margin-bottom: 0 !important;
}
.not-found .article__body > *:last-child {
	margin-bottom: 0;
}

/* -------------------- */

.searchform {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 300px;
	margin: auto;
	background-color: #fff;
}

.searchform__text-input {
	border: 1px solid rgba(0,0,0,0.15);
	border-right: none;
	width: calc(100% - 40px);
	height: 40px;
}

.searchform__btn {
	width: 40px;
}


/* ---------------------------------------------------------------------------------------------- */
/* SmartPhone                                                                                     */

/* iPhone 6 over */
@media screen and (min-width: 374px) {
	
}

/* ---------------------------------------------------------------------------------------------- */
/* Tablet                                                                                         */

@media screen and (min-width: 541px) {
	.share {
		flex-direction: row;
	}
	.share-items {
		margin-right: -15px;
	}
}


/* iPad */
@media screen and (min-width: 768px) {
	.article__nav-inner {
		top: 50%;
		height: 50vh;
	}
	.article__nav .prev {
		bottom: auto;
	}
	
	.article__nav .next {
		bottom: auto;
	}
	.article__ttl {
		font-size: 2.6rem;
	}
	
}

/* ---------------------------------------------------------------------------------------------- */
/* Desktop                                                                                        */

@media screen and (min-width: 1024px) {
	
	.detail {
		
	}
	
	.detail-inner {
		margin-bottom: 80px;
		padding-top: 60px;
		padding-bottom: 60px;
		background-color: #f2f2f2;
	}
	
	.detail .article {
		width: calc(100% - 200px);
		background-color: #fff;
	}
	
	.article {
		margin-top: 0;
		padding-bottom: 60px;
	}
	
	.article__footer {
		margin-bottom: 40px;
	}
	
	.article__nav .prev {
		left: -70px;
		bottom: auto;
	}
	
	.article__nav .next {
		right: -70px;
		bottom: auto;
	}
}

@media screen and (min-width: 1281px) {
	
}