/* LAYUP 拡張：固定バナー＋執筆/監修プロフィール */

/* ---- パンくず（TOP以外・全ページ共通） ---- */
/* .c-page-header(ロゴバー)が position:absolute のため、上クリアランスを確保して
   絶対配置ヘッダーの下に表示。直後の .c-page-title は上余白を縮小して二重余白を防ぐ。 */
.layup-breadcrumb{ margin:0 auto; padding:6.5rem 0 0; font-size:12px; line-height:1.6; position:relative; z-index:80; }
.layup-breadcrumb + .c-page-title{ padding-top:2.5rem !important; }
@media (max-width:767px){
  .layup-breadcrumb{ padding-top:5rem; }            /* SPの固定ヘッダー(ロゴ)の下に出す */
  .layup-breadcrumb + .c-page-title{ padding-top:1.5rem !important; }
}
.layup-breadcrumb__list{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:0; }
.layup-breadcrumb__item{ display:inline-flex; align-items:center; color:#8a939d; }
.layup-breadcrumb__item:not(:last-child)::after{ content:"\203A"; margin:0 .55em; color:#c2c8cf; }
.layup-breadcrumb__item a{ color:#8a939d; text-decoration:none; }
.layup-breadcrumb__item a:hover{ color:var(--base-color-orange,#eb791b); text-decoration:underline; }
.layup-breadcrumb__item.is-current span{ color:#41484f; }
@media (max-width:600px){ .layup-breadcrumb{ font-size:11px; } }

/* ---- 旧記事の強調ルール踏襲：strong=オレンジ太字 / u=下線 ---- */
.l-post-content strong{ color: var(--base-color-orange, #eb791b); font-weight: 700; }
.l-post-content u{ text-decoration: underline; text-underline-offset: 0.12em; }

/* ---- アイキャッチを記事先頭にコンテンツ幅100%で表示 ---- */
.l-post-content .layup-eyecatch{ margin: 0 0 36px; width: 100%; }
.l-post-content .layup-eyecatch__img{ width: 100%; height: auto; display: block; border-radius: 8px; }

/* ---- 本文画像をコンテンツ幅100%に（旧サイト踏襲。テーマの margin-inline:-6.4% と併せて横いっぱい） ---- */
.l-post-content .wp-block-image{ width: auto; }
.l-post-content .wp-block-image img{ width: 100%; height: auto; }
.l-post-content .wp-block-image figure{ width: 100%; }

/* ---- YouTube等の埋め込みもコンテンツ幅100%・16:9（テーマがresponsive-embeds未対応のため自前で） ---- */
.l-post-content .wp-block-embed{ width: auto; margin-inline: 0; }
.l-post-content .wp-block-embed__wrapper{ position: relative; width: 100%; }
.l-post-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper{ aspect-ratio: 16 / 9; }
.l-post-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper{ aspect-ratio: 4 / 3; }
.l-post-content .wp-block-embed__wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---- 固定バナー ---- */
.layup-banner{ margin: 32px 0; text-align: center; }
.layup-banner__link{ display:inline-block; transition: opacity .2s, transform .2s; }
.layup-banner__link:hover{ opacity:.9; transform: translateY(-2px); }
.layup-banner__img{ max-width:100%; height:auto; border-radius:10px; box-shadow:0 4px 18px rgba(0,0,0,.10); }
.layup-banner--placeholder{ border:2px dashed #b9c2cc; border-radius:10px; padding:28px 16px; color:#7a8794; background:#f5f8fb; font-size:14px; line-height:1.7; }
/* 記事内に自動挿入するバナー（各見出し前＋末尾） */
.l-post-content .layup-banner--incontent{ margin:40px 0; }

/* ---- サービスページ：スキルセットのカードをリンク化（カテゴリー最新記事へ） ---- */
a.p-service-content__slide-card{ display:block; text-decoration:none; color:#000; transition:opacity .2s, transform .2s; }
a.p-service-content__slide-card:hover{ opacity:.78; transform:translateX(2px); }

/* ---- 執筆者・監修者カード（旧サイト準拠） ---- */
.layup-credit{ margin: 56px 0 8px; display: flex; flex-direction: column; gap: 24px; }
.layup-credit--top{ margin: 8px 0 40px; }
.layup-credit__card{
  display: flex; align-items: center; gap: 32px;
  border: 1px solid #d9dee4; border-radius: 6px;
  padding: 28px 36px; background: #fff;
}
.layup-credit__figure{ position: relative; flex: none; width: 132px; text-align: center; }
.layup-credit__avatar{
  width: 132px; height: 132px; border-radius: 50%;
  object-fit: cover; background: #f1f3f5; display: block;
  border: 1px solid #e6e9ed;
}
.layup-credit__avatar--ph{ display:inline-block; }
.layup-credit__badge{
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  background: #2b2b2b; color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; padding: 6px 18px; border-radius: 999px; white-space: nowrap;
}
.layup-credit__main{ flex: 1; min-width: 0; }
.layup-credit__role{
  display: block; font-size: 14px; font-weight: 700; color: #8a939d;
  letter-spacing: .04em; margin-bottom: 4px;
}
.layup-credit__name{
  font-size: 22px; font-weight: 700; color: #1f2430; line-height: 1.4; margin: 0 0 12px;
}
.layup-credit__comment{ font-size: 15px; line-height: 1.85; color: #444b55; }

@media (max-width: 600px){
  .layup-credit__card{ flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 28px 20px; }
  .layup-credit__name{ font-size: 19px; }
  .layup-credit__comment{ text-align: left; }
}

/* ---- 追従バナー（全ページ右下・×で閉じる） ---- */
.layup-floating{ position:fixed; right:16px; bottom:16px; z-index:9999;
  width:min(var(--lf-maxw,320px), calc(100vw - 24px)); animation:lf-in .4s ease both; }
.layup-floating.is-closing{ animation:lf-out .25s ease forwards; }
.layup-floating__link,.layup-floating__img,.layup-floating picture{ display:block; }
.layup-floating__img{ width:100%; height:auto; border-radius:10px; box-shadow:0 10px 34px rgba(0,0,0,.24); }
.layup-floating__close{ position:absolute; top:-13px; right:-13px; width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid #e0e0e0; color:#333; font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; padding:0; z-index:1; }
.layup-floating__close:hover{ background:#f2f2f2; }
@keyframes lf-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes lf-out{ to{ opacity:0; transform:translateY(14px); } }
@media (max-width:767px){
  .layup-floating{ right:10px; bottom:10px; }
  .layup-floating--pc{ display:none !important; }
  /* スマホ用画像があるとき：画面下に全幅バー表示 */
  .layup-floating--has-sp{ left:0; right:0; bottom:0; width:100%; max-width:none; }
  .layup-floating--has-sp .layup-floating__img{ width:100%; border-radius:0; box-shadow:0 -4px 16px rgba(0,0,0,.16); }
  .layup-floating--has-sp .layup-floating__close{ top:-15px; right:10px; }
}
@media (min-width:768px){ .layup-floating--sp{ display:none !important; } }

/* ---- タグ一覧アーカイブ：タグ群の折りたたみ ---- */
.news-archive__tag.lf-tagcloud{ padding-bottom:34px; }   /* 下の白余白を広めに（ボタンが重なる余白） */
.lf-tagcloud__inner{ transition:max-height .3s ease; }
.lf-tagcloud__inner::-webkit-scrollbar{ width:6px; }
.lf-tagcloud__inner::-webkit-scrollbar-thumb{ background:#d6d6d6; border-radius:3px; }
/* もっと見る/閉じるボタン：中央寄せ＋白box下端に重ねる */
.lf-tagcloud__toggle{ display:block; margin:-18px auto 0; position:relative; z-index:2;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:#eb791b; background:#fff; border:1px solid #eb791b; border-radius:999px; padding:8px 26px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06); transition:background .2s,color .2s; }
.lf-tagcloud__toggle:hover{ background:#eb791b; color:#fff; }

/* ---- SP記事本文タイポ調整：vw肥大を抑え一段締める 2026-06-27 ---- */
/* style.cssがlayup-ext.cssより後に読まれるため body 前置で詳細度を上げて勝たせる */
@media screen and (max-width: 767px){
  body .l-post-content{ font-size: clamp(12.5px, 3.2vw, 14px); line-height: 1.72; }
  body .l-post-content p{ font-size: clamp(12.5px, 3.2vw, 14px); }
  body .l-post-content h2.wp-block-heading{ font-size: clamp(18px, 4.4vw, 23px); }
  body .l-post-content h3.wp-block-heading{ font-size: clamp(15px, 4.0vw, 18px); }
}

/* ==== SP本文・説明文の級数を全ページで抑える（vw肥大の上限化）2026-06-27 ==== */
/* ヒーロー見出し/大型数字などデザイン表現は対象外（維持）。読み物テキストのみcap。 */
/* style.cssが後に読まれるため html body / body 前置で詳細度を上げて勝たせる。 */
@media screen and (max-width: 767px){
  /* 基底：継承テキストの肥大を抑制（明示vwを持つ要素は各自override） */
  html body{ font-size: clamp(12.5px, 3.62vw, 15px); }

  /* リード/説明文（やや大きめcap でヒエラルキー維持） */
  body .c-page-hero__description,
  body .p-about-content__hero-description, body .p-about-content__message-description,
  body .p-contact-hero__description,
  body .top-approach__description{ font-size: clamp(13px, 3.6vw, 15px); }

  /* 本文・回答・リスト・フォーム・規約など読み物（記事本文と同サイズ） */
  body .top-process__slide-text,
  body .p-service-content__slide-description, body .p-service-content__slide-card,
  body .team-member__description,
  body .p-contact-hero__note,
  body .p-contact-form__question, body .p-contact-form .wpcf7-list-item label,
  body .p-contact-form__privacy-note,
  body .p-faq-content__toggle, body .p-faq-content__answer,
  body .p-legal-body,
  body .c-contact-done__description, body .c-contact-done__attention,
  body .ez-toc-heading-level-2, body .ez-toc-heading-level-3,
  body .c-single-header__info,
  body .not-found__description{ font-size: clamp(12.5px, 3.2vw, 14px); }
}