.single-post {
  padding-top: 100px;
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.single-post article {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  margin-bottom: 3rem;
}

.post-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid #f0f0f0;
  position: relative;
}

.post-header::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #FFD100 0%, #FFA800 100%);
}

.post-header h1 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #212529;
  margin-bottom: 1.5rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  color: #6c757d;
  font-size: 1rem;
  font-weight: 500;
}

.post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.post-meta span:hover {
  background-color: #FFF8E1;
}

.post-meta i {
  color: #FFD100;
  font-size: 1.1rem;
}

.post-meta a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-meta a:hover {
  color: #FFD100;
}

.post-thumbnail {
  margin-bottom: 2.5rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.post-thumbnail:hover img {
  transform: scale(1.03);
}

.post-content {
  line-height: 1.9;
  font-size: 1.1rem;
  color: #333;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-weight: 700;
  color: #212529;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid #FFD100;
}

.post-content h2 {
  font-size: 2rem;
}

.post-content h3 {
  font-size: 1.5rem;
}

.post-content h4 {
  font-size: 1.25rem;
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content img {
  max-width: 100%;
  height: auto;
  margin: 2.5rem 0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.post-content ul,
.post-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.post-content li {
  margin-bottom: 0.75rem;
  line-height: 1.8;
}

.post-content blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #FFF8E1 0%, #f8f9fa 100%);
  border-left: 5px solid #FFD100;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #495057;
}

.post-content a {
  color: #FFD100;
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.3s ease;
}

.post-content a:hover {
  color: #FFA800;
  text-decoration: none;
}

.post-content code {
  background-color: #f8f9fa;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9em;
  color: #e83e8c;
  font-family: 'Courier New', monospace;
}

.post-content pre {
  background-color: #2d2d2d;
  color: #f8f8f2;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
}

.post-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.post-tags {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.post-tags i {
  color: #FFD100;
  font-size: 1.2rem;
}

.post-tags a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #FFF8E1 0%, #f8f9fa 100%);
  color: #212529;
  text-decoration: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.post-tags a:hover {
  background: linear-gradient(135deg, #FFD100 0%, #FFA800 100%);
  border-color: #FFD100;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 209, 0, 0.3);
}

.post-navigation {
  margin-top: 3rem;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.post-navigation a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #212529;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #e9ecef;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-navigation a:hover {
  background: linear-gradient(135deg, #FFD100 0%, #FFA800 100%);
  border-color: #FFD100;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 209, 0, 0.3);
}

.post-navigation a i {
  color: #FFD100;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.post-navigation a:hover i {
  color: #212529;
}

.post-navigation .col-md-6:first-child a:hover i {
  transform: translateX(-4px);
}

.post-navigation .col-md-6:last-child a:hover i {
  transform: translateX(4px);
}

/* TOC+ */
#toc_container{
	margin:20px auto 30px;
	background-color:rgba(44,153,181,.04); /* 目次全体の背景カラー */
	border:3px solid rgba(64,105,144,.2); /* 目次全体の枠線 */
	border-radius:3px;
	box-sizing:border-box;
	padding:38px 52px;
	display:table;
	min-width: 68%;
	counter-reset:li;
}
 
/* テーマによるリストの装飾を一旦無効化 */
#toc_container ul.toc_list li::before{
	content:none;
	padding:0;
	margin:0;
	width:0;
	height:0;
	background:none;
	box-shadow:none;
}
 
/* 目次の見出しタイトル */
#toc_container .toc_title{
	text-align:center;
	font-weight:bold;
	font-size:118%;
	padding:0;
}
 
/* 見出しタイトル左のアイコン */
#toc_container .toc_title::before{
	position:relative;
	font-size:28px;
	content:"\2254";
	display:inline-block;
	width:40px;
	height:40px;
	line-height:34px;
	margin-right:8px;
	border-radius:50%;
	vertical-align:baseline;
	speak:none;
	-webkit-font-smoothing:antialiased;
	color:#fff;
	background-color:#5f7b96;
}
 
/* 表示／非表示トグル */
#toc_container .toc_toggle a{
	font-size:13px;
	font-weight:normal;
	padding:2px 4px;
}
 
/* 目次エリア */
#toc_container p.toc_title + ul.toc_list{
	padding:20px 0 0;
	margin:20px 0 0;
	border-top:1px solid rgba(0,0,0,.1);
}
 
/* リスト共通スタイル */
#toc_container ul.toc_list li{
	position:relative;
	padding:0;
	margin:0;
}
 
/* 目次リンク共通スタイル */
#toc_container ul.toc_list li a{
	position:relative;
	font-size:94%;
	font-weight:normal;
	text-decoration:none;
	display:inline-block;
	line-height:1.6;
	padding:3px 0;
	margin:5px 0;
	transition:all .3s ease;
}
#toc_container ul.toc_list a,
#toc_container ul.toc_list a:visited{
	color:#5f7b96; /* リンクカラー */
}
/* マウスオーバー時 */
#toc_container ul.toc_list li a:hover{
	text-decoration:none;
	box-shadow:0 2px;
}
 
/* 親の目次 */
#toc_container ul.toc_list > li > a{
	font-size:104%;
	font-weight:bold;
	margin-left:40px;
}
 
/* 親の目次(左側の連番) */
#toc_container ul.toc_list > li::before,
#toc_container ul.toc_list > li::after{
	position:absolute;
	top:3px;
	left:0;
}
/* 連番背景 */
#toc_container ul.toc_list > li::before{
	content:'';
	display:inline-block;
	vertical-align:bottom;
	width:32px;
	height:32px;
	margin-right:7px;
	border-radius:16px;
	background-color:rgba(125,157,188,0.66);
}
/* 連番 */
#toc_container ul.toc_list > li::after{
	counter-increment:li;
	content:counter(li);
	width:32px;
	line-height:32px;
	font-family:'Avenir Next', 'Helvetica Neue', Arial, 'Meiryo','Yu Gothic', san-serif;
	font-weight:400;
	text-align:center;
	color:#fff;
}
 
/* 子の目次 */
#toc_container ul.toc_list > li > ul{
	margin-left:40px;
}
 
/* 子の目次の左側のアイコン */
#toc_container ul.toc_list > li ul li::before{
	position:absolute;
	top:3px;
	left:0;
	content:'\2023';
	display: inline-block;
	width:14px;
	height:28px;
	line-height:28px;
	font-size:18px;
	color:#5f7b96;
}
#toc_container ul.toc_list > li ul li a{
	font-weight: normal;
	margin-left:16px;
}
 
/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
	#toc_container{
		padding:20px 3vw;
		min-width:auto;
		width:100%!important;
	}
	#toc_container p.toc_title + ul.toc_list{
		padding:20px 0 0;
	}
	#toc_container ul.toc_list > li > ul{
		margin-left:30px;
	}
}

@media (max-width: 992px) {
  .single-post article {
    padding: 2rem;
  }
  
  .post-header h1 {
    font-size: 2.25rem;
  }
  
  .post-content {
    font-size: 1rem;
  }
  
  .post-content h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .single-post article {
    padding: 1.5rem;
  }
  
  .post-header h1 {
    font-size: 1.85rem;
  }
  
  .post-meta {
    gap: 1rem;
  }
  
  .post-navigation a {
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
  }
}