@charset "UTF-8";
.single_wrapper .breadcrumb_nav {
    margin-bottom: 120px;
}

.single_title {
    font-size: 4.375rem;
    font-weight: 700;
    line-height: 1.15;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere; /* はみ出し防止（どこでも改行OK） */
    word-break: break-word;  /* 互換性用 */
    hyphens: auto;           /* 英語の見た目を自然に */
}

.single_hero {
    margin-bottom: 120px;
}

.single_body_inner {
    display: flex;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
    align-items: flex-start;
    padding-bottom: 80px;
    border-bottom: 1px solid #E3E3E3;
}

.single_meta {
    display: flex;

}
.single_label_text {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.meta_right {
    font-family: 'Overpass', sans-serif;
    font-size: 1.375rem;
    font-weight: 300;
}

.single_meta {
  display: flex;
  align-items: center; /* ← 縦方向を中央揃えに */
  gap: 20px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.meta_right {
  display: flex;
  align-items: center; /* ← ここがポイント！ */
  gap: 5px;
}

.post_meta_dash {
  line-height: 1;
  position: relative;
  top: 1px;
}

.single_date {
  line-height: 1; /* ← 数字が上にズレるのを防ぐ */
  position: relative;
  top: 2.65px;
}

.single_content {
    flex: 0 1 880px;
    min-width: 0; /* はみ出し防止 */
}

/* ─ タイトル：2行まで表示 ─ */
.single_related_ttl a {  
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─ 抜粋（本文）：2行まで表示 ─ */
.single_related_desc {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.7;
    color: #222222;
    letter-spacing: 0.28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;   
}

/* 白丸アイコン */
.btn-back_icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;  
}

.btn-back_icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト部分 */
.btn-back_label {
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* ここまで一覧に戻るボタン */

/* シングルページ ボタンの上余白 */
.single_back {
    margin-top: 60px;
}

/* 最新投稿 */
.single_related_head {
    padding-top: 80px;
    margin-bottom: 34px;
}

.single_related_label {
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.single_related_title {
    font-size: 2.375rem;
    font-weight: 700;
}

.single_related_list {
    display: flex;
}

/* 関連投稿リスト（グリッド配置） */
.single_related_list {
  display: flex;          /* 横並び */
  flex-wrap: nowrap;      /* 折り返し禁止 */
  gap: clamp(20px, 3.2vw, 50px);
}

.single_related_item {
  flex: 1 1 420px;
}

/* サムネイル（16:9 比率で可変） */
.single_related_thumb {
  width: 100%;
  aspect-ratio: 420 / 225; /* ← 比率で自動計算 */
  overflow: hidden;
}

.single_related_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* テキスト部分 */
.single_related_text {
  display: flex;
  flex-direction: column;
}

/* メタ情報（カテゴリ・日付） */
.single_related_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding-bottom: 17px;
}

/* タイトル */
.single_related_ttl {
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 10px;
}

.single_related {
    margin-bottom: 120px;
}

.single_related_item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single_related_terms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.single_related_datebox {
    display: flex;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 300;
}

.single_related_term a {
    font-size: 1rem;
    font-weight: 700;
    color: #864C2B;
}

/* The Vision OfficeページのCareer Storiesの記事の場合に表示する内容 */
.single_author {
  font-family: 'Noto_Sans_JP' !important;
  color: #333333 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
}
.single_career {
  margin-bottom: 30px;
}
.single_career_employment,
.single_career_period {
  font-family: 'Noto_Sans_JP' !important;
  color: #333333 !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  margin-bottom: 0 !important;
}
.single_career_employment {
  margin-left: 15px;
}

/* flex内で折り返し可能に */
.single_related_text {
  min-width: 0;
}

/* タイトル：2行省略＋英語折り返し */
.single_related_ttl,
.single_related_ttl a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 2行まで表示 */
  overflow: hidden;

  overflow-wrap: anywhere; /* ★英単語が長くても途中で改行OK */
  word-break: break-word;  /* ★互換性用 */
  hyphens: auto;           /* ★自然なハイフン分割（英語のみ） */
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: #333;
}

/* 抜粋：2行省略＋英語折り返し */
.single_related_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* ここまで最新投稿 */

/* ここから個別投稿のスタイル設定 */
/* ===============================
   個別投稿（single）共通：ベース余白
   =============================== */
.single_content {
  --space-s: 12px;
  --space-m: 20px;  /* 段落間（ご指定） */
  --space-l: 40px;
  --space-xl: 60px;
  --space-xxl: 100px; /* 動画など大きめ余白用 */
}

/* ===============================
   タイポグラフィ（本文・見出し）
   =============================== */
.single_content p {
  font-size: 1.125rem;   /* 18px */
  font-weight: 400;
  line-height: 1.44;
  margin-bottom: var(--space-m);
}

.single_content li {
    margin-bottom: var(--space-s);
}


/* h1（使う場合） */
.single_content h1 {
  font-size: 2rem;       /* 32px */
  font-weight: 700;
  line-height: 1.25;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-l);
}
.single_content > h1:first-child { margin-top: 0; }

/* h2（基準） */
.single_content h2 {
  font-size: 1.75rem;    /* 28px */
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-l);
}
.single_content > h2:first-child { margin-top: 0; }

/* h3〜h6 */
.single_content h3 {
  font-size: 1.5rem;     /* 24px */
  font-weight: 700;
  line-height: 1.35;
  margin-top: 50px;
  margin-bottom: 24px;
}
.single_content h4 {
  font-size: 1.25rem;    /* 20px */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 40px;
  margin-bottom: 22px;
}
.single_content h5 {
  font-size: 1.125rem;   /* 18px */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 32px;
  margin-bottom: 20px;
}
.single_content h6 {
  font-size: 1rem;       /* 16px */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* 最初の要素が h3〜h6 のときは上余白ゼロ */
.single_content > h3:first-child,
.single_content > h4:first-child,
.single_content > h5:first-child,
.single_content > h6:first-child {
  margin-top: 0;
}

/* 特定要素の直後に見出しが来たときはやや詰める */
.single_content :is(.post-title, h1, .lead, p, img, figure, .wp-caption,
                    .wp-block-image, .wp-block-paragraph, .eyecatch) + h2 {
  margin-top: var(--space-l);
}
.single_content :is(.lead, p, img, figure, .wp-caption) + :is(h3, h4, h5, h6) {
  margin-top: var(--space-l);
}

/* 見出しが連続するときはさらに詰める */
.single_content :is(h2,h3,h4,h5,h6) + :is(h3,h4,h5,h6) {
  margin-top: var(--space-s);
}

/* ===============================
   リスト（ul / ol / li）
   =============================== */
/* ul / ol のベース */
.single_content ul {
  list-style: disc;
  list-style-position: outside; /* 左側に出す（insideでもOK） */
  padding-left: 1.2em;
  margin-bottom: var(--space-m);
}
.single_content ol {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 1.5em; /* margin-left ではなく padding-left に統一 */
  margin-bottom: var(--space-m);
}
/* 共通CSSの li{list-style:none;} を上書き */
.single_content ul > li { list-style: disc; }
.single_content ol > li { list-style: decimal; }
/* li のテキスト設定 */
.single_content li {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.44;
}

.single_content li::marker {
  color: #333333;
  font-size: 0.6em;
}

/* ===============================
   画像・キャプション・ギャラリー
   =============================== */
.single_body_inner figure,
.single_body_inner img {
  max-width: 100%;
  height: auto;
}

/* wp-caption のインライン幅を打ち消し */
.single_body_inner .wp-caption {
  max-width: 100% !important;
  width: auto !important;
}
.single_body_inner .wp-caption img {
  max-width: 100%;
  height: auto;
  display: block;
}
.single_body_inner .wp-caption-text {
  font-size: 0.9em;
  text-align: center;
}

/* 画像・キャプションの下余白（本文のリズムに合わせる） */
.single_body_inner img,
.single_body_inner .wp-caption {
  display: block;
  margin: 0 auto var(--space-m);
}

/* 画像が連続するときだけ少し広く感じさせる */
.single_body_inner :is(img, .wp-caption) + :is(img, .wp-caption) {
  margin-top: 8px; /* 下の var(--space-m) と合わせて体感＋8px */
}

/* visionアイキャッチ */
.single_eyecatch {
  margin: 0 0 var(--space-l);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}

.single_eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文内の画像は全部 10px */
.single_content img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
}

/* p直下の画像（古い投稿やテストデータ対策） */
.single_content p > img {
  display: block;
}

/* キャプション付き（.wp-caption） */
.single_content .wp-caption {
  border-radius: 10px;
  overflow: hidden;
}
.single_content .wp-caption img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   埋め込み（YouTube など）
   =============================== */
.single_content .wp-block-embed.is-type-video {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xl);
}

/* iframe は幅フィットのみ（高さはWP側の比率維持に任せる） */
.single_content iframe {
  max-width: 100%;
  display: block;
}

/* ===============================
   本文中リンクの下線
   =============================== */
.single_content :where(p, li, blockquote, figcaption) a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  color: #333;
  font-weight: 700;
}
/* 例外：ボタンや画像リンクは下線なし */
.single_content .btn-back,
.single_content .wp-block-button__link,
.single_related_thumb a,
.single_content figure a {
  text-decoration: none;
}

/* ===============================
   英文の折返し（見出し・本文・リスト・リンク）
   =============================== */
.single_content :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,a) {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto; /* 日本語には影響ほぼ無し／英語に有効 */
}

/* pre/code も折返し許可（先に宣言：後段で見た目上書き） */
.single_content :is(pre, code, kbd, samp) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* ===============================
   追加テスト（blockquote / hr）
   =============================== */
.single_content blockquote {
  border-left: 4px solid #ddd;
  padding: 12px 16px;
  background: #fafafa;
  border-radius: 6px;
  color: #444;
}
.single_content hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 32px 0;
}

/* ===============================
   テーブル（表）のはみ出し対策
   =============================== */
.single_content table { width: 100%; border-collapse: collapse; }
.single_content th,
.single_content td { padding: 12px; border: 1px solid #ddd; }
.single_content .table-wrap { overflow-x: auto; }
.single_content .table-wrap table { min-width: 600px; }

/* ===============================
   コード表示（最終見た目：後勝ち）
   =============================== */
.single_content pre,
.single_content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.single_content pre {
  background: #f7f7f7;
  padding: 14px;
  border-radius: 8px;
}

/* ここからボタン */
/* === レイアウト（CSSでは動かさない） ===================== */

/* ボタン本体 */
.btn-back{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 40px;
  width: 280px;
  height: 70px;
  padding: 0 10px;
  border-radius: 70px;
  background: #493932;     /* ベース背景（黒帯） */
  color: #fff;
  overflow: hidden;
  isolation: isolate;       /* レイヤ順の独立 */
}

.btn-back.is-career {
  width: 360px;
}

/* テキスト */
.btn-back_label{
  z-index: 2;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 白丸アイコン */
.btn-back_icon{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  z-index:2;
}
.btn-back_icon img{
  width: 100%;
  height: 100%;
  display: block;
  transform: translate3d(0,0,0); /* GPUのり */
}

/* 帯レイヤー（配置だけ。transition/animationは書かない） */
.bg, .bg.-color{
  position: absolute;
  inset: -2px;
  border-radius: 70px;
  transform: translateZ(0);
}
.bg{          background:#493932; z-index:1; }                   /* 黒帯（上面） */
.bg.-color{   background: var(--background-color, #B08D57);       /* 色帯（下面） */
              z-index:0; }

/* 動きを控えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce){
  .btn-back, .btn-back *{ transition:none !important; animation:none !important; }
}
/* ここまでボタン */

/* ===============================
   SP用（800px以下）
   =============================== */
@media screen and (max-width: 800px) {
  /* 最新の投稿：抜粋を非表示 */
  .single_related_desc {
    display: none;
  }

  .single_wrapper .breadcrumb_nav {
    margin-bottom: 43px;
  }

  .single_title {
    font-size: 1.6875rem;
  }

  .single_hero {
    margin-bottom: 7px;
    padding: 0 calc((20 / 390) * 100%);
  }
  
  .single_body_inner {
    flex-direction: column;
    gap: 0;
  }

  .single_body.section__inner__1 {
    padding: 0;
  }

  .single_meta {
    padding: 0 calc((20 / 390) * 100%);
  }

  .single_label_text {
    font-size: 0.8125rem;
  }

  .single_meta {
    gap: 15px;
    margin-bottom: 28px;
    position: relative;
  }

  .single_meta::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #D0D0D0;
  }

  .meta_right {
    font-size: 0.75rem;
  }

  .single_date {
    top: 0.65px;
  }

  .single_meta {
    padding: 0 calc((20 / 390) * 100%) 28px;
    gap: 15px;
    margin-bottom: 40px;
    position: relative; /* 疑似要素の基準にする */
    width: 100%;
  }

  .single_meta::after {
    content: "";
    position: absolute;
    left: calc((20 / 390) * 100%);
    width: calc(100% - ((20 / 390) * 100%) * 2);
    bottom: 0;
    border-bottom: 1px dashed #D0D0D0;
  }

  .single_content {
    flex: 0 0 auto;
    padding: 0 calc((40 / 390) * 100%);
  }

  .single_related {
    padding: 0 calc((20 / 390) * 100%) 34px;
    background-color: #F7F3EF;
  }

  /* 最新の投稿：SPでは2カラムにする */
  .single_related_list {
    display: flex;
    flex-wrap: wrap;
    gap: 19px;
  }

  .single_related_item {
    flex: 0 0 calc(50% - 9.5px);  /* 2カラム用の幅（50% - すき間半分） */
    gap: 14px;
  }

  /* 3件目以降は非表示 → 1・2件だけ表示 */
  .single_related_item:nth-child(n + 3) {
    display: none;
  }

  .single_body_inner {
    border-bottom: none;
  }

  .single_related_head {
    padding-top: 32px;
    margin-bottom: 17px;
  }

  .single_related {
    margin-bottom: 60px;
  }

  .single_related_label {
    font-size: 0.8125rem;
    margin-bottom: 4px;
    color: #634A3C;
    font-weight: 700;
  }

  .single_related_title {
    font-size: 1.1875rem;
  }

  .single_related_term a {
    font-size: 0.75rem;
  }

  .single_related_datebox {
    font-size: 0.75rem;
    position: relative;
    top: 1.5px;
  }

  .single_related_meta {
    gap: 10px;
    padding-bottom: 14px;
  }

  .single_related_ttl a {
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .single_content h2 {
    font-size: 1.3125rem;
    margin-bottom: 20px;
  }

  .single_content p {
    font-size: 0.9375rem;
  }

  .single_content .wp-block-embed.is-type-video {
    margin-top: 25px;
    margin-bottom: 20px;
  }

  .single_content li {
    font-size: 0.9375rem;
  }

  .single_back {
    margin-top: 34px;
    text-align: center;
  }

  .single_body_inner {
    padding-bottom: 40px;
  }

  .btn-back_label {
    font-size: 0.9375rem;
  }

  .btn-back_icon {
    width: 32px;
    height: 32px;
  }

  .btn-back {
    width: 183px;
    height: 46px;
    gap: 28px;
  }

  .btn-back.is-career {
    width: 250px;
  }

  /* 余白（少しだけ小さめに） */
  .single_content {
    --space-s: 8px;
    --space-m: 16px;   /* 段落間：PCより少し狭く */
    --space-l: 28px;
    --space-xl: 40px;
    --space-xxl: 60px; /* 動画まわりの大きめ余白 */
  }

  /* 本文・リスト：XD指定 */
  .single_content p {
    font-size: 0.9375rem;   /* 15px */
    line-height: 1.7;       /* SPは少し行間広め */
    margin-bottom: var(--space-m);
  }

  .single_content li {
    margin-bottom: var(--space-s);
  }

  /* h1（あまり大きくしすぎない） */
  .single_content h1 {
    font-size: 1.5rem;      /* 24px くらい */
    line-height: 1.35;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-l);
  }
  .single_content > h1:first-child {
    margin-top: 0;
  }

  /* h2：XD指定を優先 */
  .single_content h2 {
    font-size: 1.3125rem;   /* XD指定：21px */
    font-weight: 700;
    line-height: 1.4;
    margin-top: var(--space-xl);
    margin-bottom: 20px;    /* XD指定 */
  }
  .single_content > h2:first-child {
    margin-top: 0;
  }

  /* h3〜h6：SP用に一段ずつ小さく */
  .single_content h3 {
    font-size: 1.25rem;     /* 20px */
    font-weight: 700;
    line-height: 1.4;
    margin-top: 32px;
    margin-bottom: 18px;
  }
  .single_content h4 {
    font-size: 1.125rem;    /* 18px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 28px;
    margin-bottom: 16px;
  }
  .single_content h5 {
    font-size: 1rem;        /* 16px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 14px;
  }
  .single_content h6 {
    font-size: 0.9375rem;   /* 15px：本文と同じサイズで強調 */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 12px;
  }

  /* 動画（XD指定） */
  .single_content .wp-block-embed.is-type-video {
    margin-top: 25px;     /* XD指定 */
    margin-bottom: 20px;  /* XD指定 */
  }


  /* The Vision OfficeページのCareer Storiesの記事の場合に表示する内容 */
  .single_author {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
  }
  .single_career {
    margin-bottom: 15px;
  }
  .single_career_employment,
  .single_career_period {
    font-size: 0.875rem !important;
  }
  .single_career_employment {
    margin-left: 10px;
  }
}

/* ② 480px以下：1件ずつ縦並びにする */
@media screen and (max-width: 480px) {
  .single_related_item {
    flex: 0 0 100%;   /* 横幅いっぱい（1カラム） */
  }
}