/*
Theme Name:   Twenty Fourteen Child
Template:     twentyfourteen
Description:  Twenty Fourteen 1.9 に直接加えていたカスタマイズを移した子テーマ
Version:      1.0.0
Text Domain:  twentyfourteen-child
*/

/* ==========================================================================
   1. 基本の文字・見出し
   ========================================================================== */

/* 行間を広めに（button / input は親テーマが後で normal に戻しているので対象外） */
body,
select,
textarea {
	line-height: 1.9;
}

h3 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
	border-color: #36f;
	border-width: 0 0 1px 10px;
	border-style: solid;
	background: #fff;
	padding: 7px 10px 5px 10px;
}

/* 吹き出し風の h4 */
h4 {
	position: relative;
	margin: 10px 15px;
	padding: 8px 15px;
	font: bold 12px/1.6 Arial, Helvetica, sans-serif;
	color: #333;
	border: #333 solid 2px;
	border-radius: 14px;
	background: #fff;
	box-shadow:
		-7px -5px 0 0 #e8e8e8 inset,
		2px 3px 0 0 #000;
}

h4:before {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 14px;
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #333;
}

h4:after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 19px;
	width: 0;
	height: 0;
	border-width: 14px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #fff;
}

/* オレンジ帯の h5（トップの「新着記事」など） */
h5 {
	padding: 0.2em;
	font-size: 0.9rem;
	line-height: inherit; /* 親テーマの line-height 指定を打ち消す */
	color: #ffffff;
	background: #e95404;
	border-left: solid 5px #ffaf58;
	margin-top: -1px;
	margin-bottom: 0;
}

/* ==========================================================================
   2. 英字の大文字変換（uppercase）をすべて解除
   ========================================================================== */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.site-navigation a,
.entry-title,
.entry-meta,
.cat-links,
.entry-meta .tag-links a,
.entry-content th,
.comment-content th,
.entry-content .edit-link,
.page-links,
.post-navigation .meta-nav,
.paging-navigation .page-numbers,
.comment-reply-title,
.comments-title,
.comment-list .reply,
.comment-metadata,
.no-comments,
.comment-navigation,
.widget .widget-title,
.widget_calendar caption,
.widget_twentyfourteen_ephemera .post-format-archive-link,
.content-sidebar .widget .widget-title,
.featured-content .entry-title {
	text-transform: none;
}

@media screen and (min-width: 783px) {
	.primary-navigation {
		text-transform: none;
	}
}

/* ==========================================================================
   3. 画像
   ========================================================================== */

img.size-large,
.wp-post-image,
.post-thumbnail img {
	width: 100%;
}

#site-header img {
	max-width: 100%;
	width: 100%;
}

/* ==========================================================================
   4. レイアウト（全幅化・余白の調整）
   ========================================================================== */

.site,
.site-header {
	max-width: 100%;
}

.content-area {
	padding-top: 3px;
}

.hentry {
	max-width: 100%;
}

/* 親テーマの「margin: 0 auto」は外し、幅を 80% に */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin-right: 0;
	margin-left: 0;
	max-width: 80%;
}

.entry-header {
	max-width: 100%;
}

.entry-title {
	font-size: 20px;
	font-weight: 700;
}

.comment-reply-title small a:before {
	font-size: 20px;
}

@media screen and (min-width: 673px) {
	.content-sidebar {
		padding-top: 20px;
	}
}

@media screen and (min-width: 846px) {
	.content-area {
		padding-top: 3px;
	}

	.content-sidebar {
		padding-top: 20px;
	}
}

@media screen and (min-width: 1080px) {
	.site-content,
	.site-main .widecolumn {
		margin-left: 225px;
	}
}

@media screen and (min-width: 1218px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		margin: 0 auto;
	}
}

/* ==========================================================================
   5. スマホ表示
   親テーマのスマホ用ブレークポイントは 400px。
   元のカスタマイズではこれを 430px に広げていたので、
   401〜430px でも「400px 以下」と同じ見た目になるようにしている。
   ========================================================================== */

/* 修正03 */
@media screen and (max-width: 500px) {
	.site-content .entry-header,
	.site-content .entry-content {
		max-width: 100%;
	}
}

/* 401〜430px：親テーマの「401px 以上」用スタイルを打ち消す */
@media screen and (min-width: 401px) and (max-width: 430px) {
	a.post-thumbnail:hover img {
		opacity: 1;
	}

	/* 区切りの「 | 」を戻す */
	.full-size-link:before,
	.parent-post-link:before,
	.site-content span + .byline:before,
	.site-content span + .comments-link:before,
	.site-content span + .edit-link:before,
	.site-content span + .entry-date:before {
		content: "\0020\007c\0020";
	}

	/* メタ情報のアイコンを消す */
	.entry-content .edit-link a:before,
	.entry-meta .edit-link a:before,
	.site-content .byline a:before,
	.site-content .comments-link a:before,
	.site-content .entry-date a:before,
	.site-content .featured-post:before,
	.site-content .full-size-link a:before,
	.site-content .parent-post-link a:before,
	.site-content .post-format a:before,
	.site-content .format-video .post-format a:before,
	.site-content .format-audio .post-format a:before,
	.site-content .format-image .post-format a:before,
	.site-content .format-quote .post-format a:before,
	.site-content .format-gallery .post-format a:before,
	.site-content .format-aside .post-format a:before,
	.site-content .format-link .post-format a:before {
		content: none;
	}

	.attachment span.entry-date:before,
	.attachment .site-content span.entry-date:before {
		-webkit-font-smoothing: auto;
		display: inline;
		font: inherit;
		text-decoration: none;
		vertical-align: baseline;
		margin-right: 0;
		position: static;
		top: auto;
	}

	.attachment .site-content span.entry-date:before {
		content: none;
	}

	.attachment .site-content span + span.entry-date:before {
		content: "\0020\007c\0020";
	}

	.site-content .entry-meta > span {
		margin-right: 0;
	}

	.list-view .site-content .hentry {
		border-top: 0;
	}

	.list-view .site-content .hentry:first-of-type,
	.list-view .site-content .hentry.has-post-thumbnail {
		padding-top: 12px;
	}

	.archive-header,
	.page-header {
		padding: 0;
	}
}

/* 430px 以下：親テーマの「400px 以下」用スタイルと同じ内容 */
@media screen and (max-width: 430px) {
	.list-view .site-content .post-thumbnail {
		background: none;
		width: auto;
		z-index: 2;
	}

	.list-view .site-content .post-thumbnail img {
		float: left;
		margin: 0 10px 3px 0;
		width: 84px;
	}

	.list-view .site-content .entry-header {
		background-color: transparent;
		padding: 0;
	}

	.list-view .content-area {
		padding: 0 10px;
	}

	.list-view .site-content .hentry {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin: 0;
		min-height: 60px;
		padding: 12px 0 9px;
	}

	.list-view .site-content .cat-links,
	.list-view .site-content .type-post .entry-content,
	.list-view .site-content .type-page .entry-content,
	.list-view .site-content .type-post .entry-summary,
	.list-view .site-content .type-page .entry-summary,
	.list-view .site-content footer.entry-meta {
		display: none;
	}

	.list-view .site-content .entry-title {
		clear: none;
		font-size: 15px;
		font-weight: 900;
		line-height: 1.2;
		margin-bottom: 6px;
		text-transform: none;
	}

	.list-view .site-content .format-aside .entry-title,
	.list-view .site-content .format-link .entry-title,
	.list-view .site-content .format-quote .entry-title {
		display: block;
	}

	.list-view .site-content .entry-meta {
		background-color: transparent;
		clear: none;
		margin: 0;
		text-transform: none;
	}

	.archive-header,
	.page-header {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin: 24px auto 0;
		padding-bottom: 24px;
	}

	.error404 .page-header {
		border-bottom: 0;
		margin: 0 auto 24px;
		padding: 0 10px;
	}

	/* 修正01・02 */
	.site-content .entry-header,
	.site-content .entry-content {
		max-width: 100%;
	}
}

/* ==========================================================================
   6. その他の追加分
   ========================================================================== */

/* 「次の投稿」「前の投稿」を非表示 */
.nav-links {
	display: none;
}

/* トップページのスライダー（MetaSlider） */
.home .metaslider {
	max-width: 100% !important;
	margin-bottom: 30px;
}

@media screen and (max-width: 430px) {
	.home .metaslider .slides li {
		height: 180px;
	}
}

/* AmazonJS で見出しが出てしまうバグの修正 */
.sgwu1_ajs_title {
	font-size: 20px;
	font-weight: bold;
}

/* ==========================================================================
   7. 記事下の SNSシェアボタン・関連記事
   ========================================================================== */

.tfc-share,
.tfc-related {
	clear: both;
	margin: 36px 0 0;
}

.tfc-share-title,
.tfc-related-title {
	margin: 0 0 12px;
	padding: 0.2em 0.5em;
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	background: #e95404;
	border-left: solid 5px #ffaf58;
}

.entry-content .tfc-share-buttons,
.entry-content .tfc-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* シェアボタン */
.tfc-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tfc-share-buttons li {
	flex: 1 1 160px;
	margin: 0;
}

.entry-content .tfc-share-buttons a {
	display: block;
	padding: 10px 12px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.entry-content .tfc-share-buttons a:hover {
	color: #ffffff;
	opacity: 0.85;
}

.entry-content a.tfc-share-x {
	background: #000000;
}

.entry-content a.tfc-share-line {
	background: #06c755;
}

/* 関連記事 */
.tfc-related-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.tfc-related-item {
	margin: 0;
}

.entry-content .tfc-related-item a {
	display: block;
	color: #2b2b2b;
	text-decoration: none;
}

.entry-content .tfc-related-item a:hover .tfc-related-name {
	color: #41a62a;
	text-decoration: underline;
}

.tfc-related-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eeeeee;
}

.entry-content .tfc-related-thumb img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.tfc-related-name {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

/* スマホでは関連記事を縦並び（サムネイル左・タイトル右）に */
@media screen and (max-width: 600px) {
	.tfc-related-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.entry-content .tfc-related-item a {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.tfc-related-thumb {
		flex: 0 0 110px;
	}

	.tfc-related-name {
		margin-top: 0;
	}
}