/* =====================================
   投稿（ニュース／トピックス）共通  single.css
===================================== */

/* ------------------------------
   全体レイアウト
------------------------------ */

/* 記事ページ全体の余白（SPとPCでヘッダー分を考慮） */
.single {
  padding-top: calc((var(--header-h-sp, 80px) + clamp(35px, 1.5vw, 12px)) * 0.65);
}
@media (min-width: 1024px) {
  .single {
    padding-top: calc((var(--header-h-pc, 80px) + clamp(8px, 1vw, 12px)) * 1);
  }
}
/* 本文とサイドバーの2カラム */
.single__inner {
  display: flex;
  max-width: 1350px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-direction: column;
  gap: 70px;
}

.single__sidebar {
  margin-bottom: 60px;
} 

@media (min-width: 1024px) {
  .single__inner {
    margin-bottom: 120px;
    flex-direction: row; 
    justify-content: center;
  }
  
  .single__content {
    max-width: 1000px;
    width: 100%;
  } /* 左側：本文を広く */
  
  .single__sidebar {
    width: 300px;
    flex-shrink: 0;
  } /* 右側：サイドバー固定幅 */
}

/* 新着トピックスpadding初期化 */
.has-global-padding {
  padding: 0;
}

/* ------------------------------
   タイトル・メタ情報
------------------------------ */

/* 記事タイトル */
.single__title {
  font-family: var(--wp--preset--font-family--merged-yaku-han-jp);
  font-size: clamp(22px, 4.2vw, 28px);
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--wp--preset--color--custom-h-2, #222);
}

/* メタ情報（カテゴリ・日付・更新日・著者などをまとめる枠） */
.single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0;
  color: #667085;
  font-size: 14px;
  margin-bottom: clamp(12px, 2.5vw, 18px);
}

/* WPのblock-gap起因のマージン打消し */
.single__meta > * {
  margin: 0 !important;
}



/* ------------------------------
   カテゴリ表示
------------------------------ */

/* カテゴリ全体 */
body .single__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* カテゴリアイコン（タグ） */
.single__cat::before {
  font-family: 'icomoon';
  content: "\e935"; /* タグアイコン */
  font-size: 1em;
  line-height: 1;
  color: #dc8452;
}
/* カテゴリのピル型デザイン */
.single__cat a {
  margin-right: 6px;
  padding: 1px 10px 2px;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
}


/* ------------------------------
   日付・更新日・著者
------------------------------ */

/* 公開日・更新日・著者 → 統一した見た目にする */
.single__date,
.single__update,
.single__author {
  font-size: 14px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  color: #667085;
  gap: 4px;
  padding-bottom: 0; /* 公開日の余白リセット */
}

/* 公開日アイコン */
.single__date::before {
  font-family: 'icomoon';
  content: "\e900"; /* 時計アイコン */
  font-size: 1em;
  line-height: 1;
  color: #666;
}

/* 更新日アイコン */
.single__update::before {
  content:"\21bb"; /* ↻ */
  font-size:1em;
  line-height:1;
  color:#667085;
}


/* ------------------------------
   アイキャッチ
------------------------------ */

/* アイキャッチ画像（16:9、最大1000px、中央寄せ） */
.single__thumb {
  max-width: 1000px;
  margin: 12px auto 16px;
  border-radius: 4px;
  overflow: hidden;
}
.single__thumb img {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}


/* ------------------------------
   リード文（抜粋）
------------------------------ */
.single__lead {
  background: #f9fbff;
  border-left: 4px solid var(--wp--preset--color--custom-h-3, #5bc0de);
  padding: clamp(12px, 2.4vw, 18px);
  margin-bottom: clamp(14px, 2.5vw, 20px);
  color: #3a302c;
  line-height: 1.9;
  font-size: clamp(16px, 2.5vw, 18px);
}


/* ------------------------------
   本文エリア
------------------------------ */
.single__body p {
  line-height: 1.9;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}
.single__body img {
  max-width: 100%;
  height: auto;
}
.single__body figure {
  margin: 1.2em 0;
}
.single__body ul,
.single__body ol {
  margin: 1em 0 1.2em 1.2em;
}

/* 見出し */
.single__body h2{
  position:relative;
  margin: 2.8em 0 1em;
  padding: .6em .8em;
  font-family: var(--wp--preset--font-family--merged-yaku-han-jp);
  font-weight:600;
  font-size: clamp(1.375rem, 3vw, 1.5rem);
  color: #3a302c;
  background: #fcfcfc;
  border-left:6px solid #79bd9a;
}
.single__body h3{
  margin: 2.4em 0 .8em;
  padding-bottom:.3em;
  font-weight:600;
  font-size: clamp(18px,2.6vw,22px);
  border-bottom: 2px solid #79bd9a;
  color: #3a302c;
}

/* 箇条書きの幅調整 */
.single__body ul,
.single__body ol {
  margin: 1em 0 1.2em 0;
}

/* 目次横幅調整 */
body .rtoc-mokuji-content {
	max-width: 850px;
}
/* ------------------------------
   サイドバー:会社情報カード
------------------------------ */
.sidebar__company{
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:4px;
  padding: 16px 16px 30px;
  margin:0 0 90px;
}

@media (min-width: 1024px) {
  .sidebar__company{
    margin:0 0 50px;
  }
}

.sidebar__company-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:#556270;
  text-align: center;
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.sidebar__company-thumb img{ 
  border-radius:4px; 
  display:block; 
  width: 70%;
  object-fit: cover;
  margin: 0 auto;
  border:solid 0.5px #c9c9c9;
}

@media (min-width: 768px) {
  .sidebar__company-thumb img{ 
	height: 250px;
  }
}

@media (min-width: 1024px) {
  .sidebar__company-thumb img{ 
    width: 100%;
	height: 130px;
  }
}

.sidebar__company-desc{
  color:#475467;
  line-height:1.8;
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.sidebar__company-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#005caa;
}

.wp-block-buttons>.wp-block-button {
	margin: 0 auto;
}

.wp-block-button__link, .btn {
	background: #224b37;
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

/* ------------------------------
   サイドバー:新着トピックス
------------------------------ */
.sidebar__title{
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--wp--preset--color--custom-h-2, #222);
  text-align: center;
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.sidebar__latest{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:4px;
  padding:8px 12px;
}

.sidebar__item {
  display:grid;
  grid-template-columns:64px 1fr;
  column-gap:12px;
  row-gap:4px;
  padding:23px 0;
  margin:0;
  border-bottom:1px solid #eef2f7;
  align-items: center;
}

.sidebar__latest .wp-block-post-template > *:last-child .sidebar__item{
  border-bottom:none;
}

.sidebar__item .wp-block-post-featured-image{
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:4px;
}

.sidebar__item .wp-block-post-featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sidebar__item-title{
  font-size:15px;
  line-height:1.5;
  margin:0;
}

/* 新着トピックス1件目の親要素の余白をリセット */
.sidebar__latest .wp-block-post-template > *:first-child * {
  margin-block-start: 0 !important;
}

/* 新着トピックスの記事タイトルをゴシック体・font-weight: 500に */
.sidebar__item-title,
.sidebar__item .wp-block-post-title,
.sidebar__item .wp-block-post-title a {
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
}

/* 新着トピックスの記事タイトルリンクにホバー時の下線を消す */
.sidebar__item .wp-block-post-title a {
  text-decoration: none;
}

.sidebar__item .wp-block-post-title a:hover {
  text-decoration: none;
}

.sidebar__item-date{
  grid-column: 2 / -1;
  font-size:12px;
  color:#667085;
  margin-top:2px;
}


/* WPブロック既定の余白をリセット */
.sidebar__item .wp-block-post-date{
  margin:0;
  padding:0;
  border:0;
}
.sidebar__item .wp-block-post-title{
  margin:0;
}

.sidebar__item .wp-block-post-featured-image{
  margin:0;
}
.sidebar__item .wp-block-group.sidebar__text{
  margin:0;
}

/* ホバー演出 */
.sidebar__item{
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  border-radius: 4px;
}
.sidebar__item .wp-block-post-featured-image img{
  transition: transform 0.5s ease;
}
.sidebar__item:hover{
  background-color:#f8fbff;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.sidebar__item:hover .wp-block-post-featured-image img{
  transform:scale(1.03);
}
.sidebar__item:focus-within{
  background-color:#f8fbff;
  box-shadow:0 0 0 3px rgba(0,106,194,.18);
  outline:none;
}
@media (prefers-reduced-motion: reduce){
  .sidebar__item,
  .sidebar__item .wp-block-post-featured-image img{
    transition:none !important;
  }
}


/* 関連記事セクションの上部余白 */
.sidebar__related {
  margin-top: 50px;
}


/* ▼ 単一記事のページネーション（前／一覧／次） */
.single__pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 80px;  /* 上部余白 */
}

.single__pager a,
.single__pager .wp-block-post-navigation-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
  color: #3a302c;
  font-family: "YakuHanMPs", "Noto Sans JP", "Hiragino Sans", 
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.single__pager a:hover,
.single__pager .wp-block-post-navigation-link a:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* 「記事一覧」ボタン専用 */
.single__pager-list {
  background: #224b37;
  color: #fefefe !important;
}

.single__pager-list:hover {
  background: #1a3a2b;
}





/* 空のナビゲーションリンクを非表示 */
.single__pager a:empty,
.single__pager .page-numbers:empty {
  display: none !important;
}

/* WordPress 6.x の post-navigation-link は無効時 aria-disabled=true が付与される */
.single__pager .page-numbers[aria-disabled="true"] {
  display: none !important;
}

.wp-block-post-content{ 
  	width: 98%;
	margin: 0 auto;
  }

@media (min-width: 768px) {
  .wp-block-post-content{ 
  	width: 95%;
  }
}

@media (min-width: 1024px) {
  .wp-block-post-content{ 
  	width: 90%;
  }
}

/* 本文の始まりの上部に余白 */
.single-news .wp-block-post-content {
  margin-top: 60px;
}

/* NEWS限定：サムネを使わない前提の1カラムに */
body.single-news .sidebar__item{
  grid-template-columns: 1fr;
}

/* NEWS限定：日付は1列目（＝本文下）に回す */
body.single-news .sidebar__item-date{
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* 念のため：WPが出すサムネブロックが残っていても非表示に */
body.single-news .sidebar__item .wp-block-post-featured-image{
  display: none !important;
}

/* NEWS限定：新着ニュース欄の上下余白を調整 */
body.single-news .sidebar__item {
  padding: 12px 0;
}

/* アイキャッチの角丸設定 */
:root :where(.wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay) {
	border-radius: 4px;
}



/* =====================================
   リストカード装飾
===================================== */

/* リスト全体：1つのカード（デフォルト:SP） */
.single__body .wp-block-list {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 1.5em 0;
  list-style: none;
}

/* リスト項目：下線で区切る（デフォルト:SP） */
.single__body .wp-block-list > li {
  padding: 14px 14px 14px 44px;
  margin: 0;
  position: relative;
  line-height: 1.8;
  font-size: clamp(15px, 2.2vw, 16px);
  color: #475467;
  border-bottom: 1px solid #eef2f7;
}

/* 最後の項目は下線なし */
.single__body .wp-block-list > li:last-child {
  border-bottom: none;
}

/* チェックマークアイコン（疑似要素）（デフォルト:SP） */
.single__body .wp-block-list > li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #79bd9a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* 太字の材料名（strong） */
.single__body .wp-block-list > li strong {
  color: #3a302c;
  font-weight: 600;
  font-size: clamp(15px, 2.3vw, 16px);
}

/* ネストされたリスト（子要素のul/ol）への対応 */
.single__body .wp-block-list > li ul,
.single__body .wp-block-list > li ol {
  margin: 8px 0 0 20px;
  padding: 0;
}

.single__body .wp-block-list > li ul li,
.single__body .wp-block-list > li ol li {
  background: transparent;
  border: none;
  padding: 4px 0;
  margin: 0;
  position: static;
}

.single__body .wp-block-list > li ul li::before,
.single__body .wp-block-list > li ol li::before {
  content: "・";
  position: static;
  transform: none;
  color: #79bd9a;
  font-size: 16px;
  font-weight: 400;
  margin-right: 4px;
}