@charset "UTF-8";

/* シングルページ ==================================================================================================== */
/* ================================================== */

/* シングル用パンクズ調整 */
.single_post .breadcrumb-wrapper {
	margin: 20px 4%;
}

.single_box a {
  color: var(--2cc);
  transition: color 0.3s ease;
}
.single_box a:hover {
  color: var(--2cch);
  text-decoration: underline;
}

/* 全体では下線なし */
.single_post a {
  text-decoration: none;
transition: color 0.3s ease;
}


/* 投稿シングルページ ================================================== */
/* ================================================== */
/* 親：タイトルと本文を同じ列設計で並べる */
.single_content-wrap{
  display: grid;
  grid-template-columns: 2% 200px 1fr 8%;
  grid-auto-rows: auto;
  width: 100%;
}

/* タイトル行：今までの .single_content-title をネストGridのまま使う */
.single_content-title{
  grid-column: 1 / -1;      /* タイトル行は横いっぱいを確保 */
  display: grid;
  grid-template-columns: 3% 200px 1fr 8%;
  grid-auto-rows: auto;
  column-gap: 0;
  row-gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0 0 20px 0;
  border-bottom: dotted 1px var(--4cc30);
}

/* 既存指定そのまま（必要部分だけ再掲） */
.single_content-title .content-date{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 8px;
  border-right: solid 5px var(--4cc);
  padding: 20px;
min-width: 160px;
}

.single_content-title .single_category {
  color: var(--4cc);
  display: inline-block;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--4cc);
  border-radius: 4px;
	transition: all 0.3s ease;
}
.single_content-title .single_category:hover {
	color: #fff;
	background-color: var(--4cc);
}


.single_content-title .content-title{
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.single_content-title h2{
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.5;
  font-weight: 700;
}

/* 本文：左端を「列3の開始（= content-date の右ボーダー位置）」に揃える */
.single_content-body{
  grid-column: 3;           /* ← これで左端が列3開始に一致 */
  grid-row: auto;
	padding: 30px 0 0 0;
}

.single_eyecatch {
		width: 100%;
	height: auto;
	margin:0;
}
.single_eyecatch img {
	width: 100%;
	height: auto;
	  border-radius: 10px;
  display: block;
}
.single_box{
	margin: 30px 0 60px; }

.single_box img {
  border-radius: 5px;
}


@media (max-width: 699px) {
  .single_content-wrap {
    display: grid;
    grid-template-columns: 5% 90% 5%; /* 左右5%余白＋本文90% */
    grid-auto-rows: auto;
    width: 100%;
	  padding-top: 30px;
  }

  .single_content-title {
    grid-column: 1 / -1; /* 横幅いっぱい使う */
    display: grid;
    grid-template-columns: 5% 90% 5%; /* 同じ列構成 */
    grid-auto-rows: auto;
    row-gap: 10px; /* 縦積み間隔 */
    border-bottom: dotted 1px var(--4cc30);
    padding-bottom: 15px;
  }

  /* content-date を中央カラムに */
  .single_content-title .content-date {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左寄せ */
    align-items: center;
    gap: 12px 15px;
    border-right: none;
    padding: 0;
	  margin-bottom: 10px;
    width: 100%;
  }

  /* カテゴリを先頭、日付を最後に */
  .single_content-title .single_category { order: 0; } /* 既定のままでOK */
  .single_content-title .single_day { order: 99; }     /* 日付を後ろへ */
  
  .single_content-title .content-title {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
    display: block;
  }

  .single_content-body {
    grid-column: 2;
  }
}




/* ===== 前後記事ナビ（常に1行2列） ===== */
.adjacent-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px)); /* 各列 最大500px */
  gap: clamp(15px, 2.5vw, 30px);
  justify-content: center; /* グリッド全体を中央寄せ */
  border-top: 1px solid var(--cg07);
  padding-top: clamp(60px, 4vw, 80px);
  margin-bottom: 120px;
}

/* 片方しかないときは中央寄せで1枚表示 */
.adjacent-nav > .adjacent-card:only-child{
  grid-column: 1 / -1;
  max-width: 500px; /* 片方しかないときのサイズ */
  justify-self: center;
}

/* 各カード */
.adjacent-card{
  position: relative;
  display: grid;
 grid-template-rows: auto auto 1fr;  /* ← これに変更（ラベル / サムネ / タイトル可変） */
  gap: 8px;
  padding: clamp(12px, 1.6vw, 16px);
  text-decoration: none;
  border: 1px solid var(--cg07);
  border-radius: calc(var(--info-radius, 16px) - 6px);
  background: #fff;
  transition: 
    transform .25s ease,
    border-color .25s ease,
    background-color .25s ease;
  overflow: hidden;
	max-width: 500px;
  align-content: start;               /* 中身は上詰めのまま */
}

/* ラベル（前の記事 / 次の記事） */
.adjacent-card__label{
  display: inline-block;
  align-self: start;
  font-size: .95rem;
  letter-spacing: .1em;
    color: var(--bcg5);
  background: transparent;
  border-radius: 4px;
  padding: 2px 10px;
	transition: all 0.3s ease;
}

/* サムネ領域：16:9固定でカバー */
.adjacent-card__thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc((var(--info-radius, 16px) - 6px) / 2);
  overflow: hidden;
  background: rgba(255,255,255,0.12);
}
.adjacent-card__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

/* タイトル（2行で省略） */
.adjacent-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.5;
  font-weight: 500;
  font-size: clamp(15px, 2.3vw, 18px);
  color: var(--bcg);
  transition: all .25s ease;
	padding: 2px 8px;
	border-left: solid 3px #fff;
	
}

/* ホバー */
.adjacent-card:hover,
.adjacent-card:focus-visible{
	border: 1px solid var(--cg05);
  background: var(--cg10);
}
.adjacent-card:hover .adjacent-card__label {
color: var(--2cc);
	text-decoration: none;
}
.adjacent-card:hover .adjacent-card__thumb img,
.adjacent-card:focus-visible .adjacent-card__thumb img{
  transform: scale(1.06);
}
.adjacent-card:hover .adjacent-card__title,
.adjacent-card:focus-visible .adjacent-card__title{
  color: var(--2cc);
	border-left: solid 3px var(--2cc);
}

/* キーボード操作の可視化 */
.adjacent-card:focus{
  outline: 5px solid #fff;
  outline-offset: 4px;
}

/* 前後記事ラベルの位置 */
.adjacent-card.prev .adjacent-card__label{ justify-self: start; }
.adjacent-card.next .adjacent-card__label{ justify-self: end;  }

.adjacent-card:hover.prev .adjacent-card__label{ padding-left: 0px; }
.adjacent-card:hover.next .adjacent-card__label{ padding-right: 0px;  }

/* きっちり2列を強制（他のメディアクエリに負けない対策） */
@media (max-width: 799px){
  .adjacent-nav{
    grid-template-columns: 1fr 1fr; /* ここでも2列維持 */
    gap: 12px;
  }
}








.single_box a:hover {
text-decoration: underline;
}
.single_box h2 {
padding: 5px 0 25px 0;
}
.single_box h3 {
padding: 0 0 25px 0;
}
.single_box h4 {
padding: 0 0 20px 0;
}
.single_box h5 {
padding: 0 0 15px 0;
}
.single_box p {
padding: 5px 0 25px 0;
}

.single_box ol.wp-block-list li {
	font-size: 1.1em;
    padding: 0 0 20px 0;
}