/* ============================================================
   嬢プラス 公開ページ共通レイアウト
   対象：制作実績一覧・お知らせ一覧・コラム一覧／3種の詳細ページ
   調整はこのファイルのみで行い、既存エディタ・ADMINには影響させない。
   ============================================================ */

/* 一覧ページの見出しと余白を3ページで揃える */
[data-page="portfolio"] .works-index,
[data-page="news"] > .container.section,
[data-page="blog"] > .container.section {
  width: min(1100px, calc(100% - 48px));
  padding-top: clamp(42px, 5vw, 68px);
  padding-bottom: clamp(70px, 7vw, 104px);
}
[data-page="portfolio"] .works-index-head,
[data-page="news"] > .container.section,
[data-page="blog"] > .container.section { color: #302329; }
[data-page="portfolio"] .works-index-head,
[data-page="news"] > .container.section > .lead,
[data-page="blog"] > .container.section > .lead { margin-bottom: 30px; }
[data-page="portfolio"] .works-index-head h1,
[data-page="news"] > .container.section > h1,
[data-page="blog"] > .container.section > h1 {
  font: 700 clamp(30px, 3.2vw, 42px)/1.35 "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .015em;
  margin: 8px 0 12px;
}
[data-page="portfolio"] .works-index-head .lead,
[data-page="news"] > .container.section > .lead,
[data-page="blog"] > .container.section > .lead {
  color: #715c67;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.85;
}
[data-page="portfolio"] .works-index-head .eyebrow,
[data-page="news"] > .container.section > .eyebrow,
[data-page="blog"] > .container.section > .eyebrow {
  color: #b3185e;
  letter-spacing: .15em;
  font-weight: 800;
}

/* コラムの一覧カード */
[data-page="blog"] [data-collection="blog"].grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}
[data-page="blog"] .card.blog {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #f1dbe4;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(116, 52, 80, .04);
  transition: transform .2s ease, box-shadow .2s ease;
}
[data-page="blog"] .card.blog:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(116, 52, 80, .09);
}
[data-page="blog"] .card.blog > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #fff2f7;
}
[data-page="blog"] .card.blog .card-copy { padding: 19px 20px 21px; }
[data-page="blog"] .card.blog h3 {
  margin: 0 0 14px;
  font: 700 clamp(16px, 1.5vw, 20px)/1.5 "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
[data-page="blog"] .card.blog .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
[data-page="blog"] .card.blog .tag {
  border-radius: 999px;
  padding: 3px 9px;
  background: #fff0f6;
  color: #ad1457;
  font-weight: 700;
}

/* お知らせの一覧：日付が認識しやすい2カラム */
[data-page="news"] .news-list { border-bottom: 1px solid #f1d9e3; }
[data-page="news"] .news-list li { border-top: 1px solid #f1d9e3; }
[data-page="news"] .news-list a {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  gap: 12px 24px;
  min-height: 78px;
  padding: 22px 12px;
  border-radius: 6px;
  transition: background-color .15s ease;
}
[data-page="news"] .news-list a:hover { background: #fff7fa; }
[data-page="news"] .news-list time {
  color: #b3185e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .035em;
}
[data-page="news"] .news-list a span {
  color: #302329;
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 700;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* 制作実績一覧：見出し・カードとの間隔を統一 */
[data-page="portfolio"] .jo-portfolio-tabs { margin-top: 5px; }
[data-page="portfolio"] .works-catalog .card h3 {
  font: 700 clamp(16px, 1.5vw, 19px)/1.5 "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: 0;
}
[data-page="portfolio"] .works-catalog .card-meta { line-height: 1.6; }

/* 詳細ページ共通（制作実績は既存の戻り先・情報表示・下部導線を維持） */
#detail.detail-blog,
#detail.detail-news {
  width: min(920px, calc(100% - 48px));
  max-width: none;
  padding-top: clamp(34px, 4.5vw, 60px);
  padding-bottom: clamp(64px, 7vw, 92px);
}
#detail .public-detail-wrap { width: 100%; }
#detail .public-detail-header { max-width: 860px; margin: 0 auto 30px; }
#detail .public-detail-back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  margin: -7px 0 28px -10px;
  border-radius: 7px;
  color: #ad1457;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
#detail .public-detail-back:hover,
#detail .public-detail-back:focus-visible { color: #f50565; background: #fff0f6; text-decoration: none; }
#detail .public-detail-date {
  display: block;
  margin: 0 0 15px;
  color: #ad1457;
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#detail .public-detail-header h1 {
  margin: 0;
  color: #302329;
  font: 700 clamp(29px, 3.3vw, 44px)/1.45 "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}
#detail .public-detail-excerpt {
  margin: 20px 0 0;
  color: #665763;
  font-size: clamp(14px, 1.35vw, 16px);
  font-weight: 500;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
#detail .public-detail-cover {
  max-width: 860px;
  margin: 0 auto 33px;
  padding: 10px;
  border-radius: 17px;
  background: #fff3f8;
}
#detail .public-detail-cover .blog-cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  border-radius: 10px;
  object-fit: contain;
}
#detail .public-detail-content {
  max-width: 800px;
  margin: 0 auto;
  color: #433840;
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 400;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
#detail .public-detail-content > :first-child { margin-top: 0; }
#detail .public-detail-content > :last-child { margin-bottom: 0; }
#detail .public-detail-content.news-article-body { white-space: normal; }
#detail.detail-news .public-detail-content { margin-top: 25px; }
#detail .public-detail-content.blog-article-body h2,
#detail .public-detail-content.blog-article-body h3 { text-wrap: wrap; }

/* 詳細ページ下部：コラムは「コラム一覧に戻る」、お知らせは「お知らせ一覧に戻る」 */
#detail .public-detail-footer {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: clamp(36px, 5vw, 60px) auto 0;
  padding-top: 27px;
  border-top: 1px solid #f2dbe4;
}
#detail .public-detail-list-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 285px);
  min-height: 50px;
  padding: 11px 21px;
  border: 1px solid #edb3cb;
  border-radius: 999px;
  background: #fff4f8;
  color: #ad1457;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
#detail .public-detail-list-button:hover,
#detail .public-detail-list-button:focus-visible {
  color: #fff;
  background: #ad1457;
  border-color: #ad1457;
  text-decoration: none;
  transform: translateY(-2px);
}
/* 制作実績詳細の下部ボタンと余白は既存のまま維持し、タイトルだけ調整 */
#detail.work-detail .work-head h1 { font-size: clamp(29px, 3.3vw, 43px); }

@media (max-width: 900px) {
  [data-page="blog"] [data-collection="blog"].grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  [data-page="portfolio"] .works-index,
  [data-page="news"] > .container.section,
  [data-page="blog"] > .container.section { width: calc(100% - 32px); padding-top: 27px; padding-bottom: 62px; }
  [data-page="blog"] [data-collection="blog"].grid.three { grid-template-columns: 1fr; gap: 17px; }
  [data-page="news"] .news-list a { grid-template-columns: 1fr; min-height: 0; gap: 5px; padding: 17px 8px; }
  [data-page="news"] .news-list time { font-size: 13px; }
  [data-page="news"] .news-list a span { font-size: 15px; }
  #detail.detail-blog, #detail.detail-news { width: calc(100% - 32px); padding-top: 24px; padding-bottom: 58px; }
  #detail .public-detail-back { margin-bottom: 19px; font-size: 13px; }
  #detail .public-detail-date { margin-bottom: 11px; }
  #detail .public-detail-header { margin-bottom: 21px; }
  #detail .public-detail-excerpt { margin-top: 14px; }
  #detail .public-detail-cover { padding: 7px; margin-bottom: 22px; border-radius: 12px; }
  #detail .public-detail-cover .blog-cover { border-radius: 7px; }
  #detail .public-detail-content { font-size: 15px; }
  #detail .public-detail-footer { margin-top: 34px; padding-top: 22px; }
  #detail .public-detail-list-button { width: min(100%, 290px); min-height: 48px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #detail .public-detail-list-button, [data-page="blog"] .card.blog { transition: none; }
  #detail .public-detail-list-button:hover, [data-page="blog"] .card.blog:hover { transform: none; }
}


/* ============================================================
   公開サイトのフォント統一（2026-11-08）
   ・明朝体（Yu Mincho / Hiragino Mincho / Georgia）を使用しない
   ・制作実績・お知らせ・コラムの見出しは太めのゴシック体
   ・フォントのみ変更。画像・画像内のロゴ、配置・余白等は維持
   ※ public-pages.css を他のスタイルシートの後で読み込む。
   ============================================================ */
:root {
  --jo-public-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

body.home,
body.home .logo,
body.home :is(h1, h2, h3, h4, h5, h6),
body.home :is(button, input, select, textarea),
body.home .jo-mv2026 .jo-mv2026__intro,
body.home .jo-mv2026 .jo-mv2026__signature,
body.home .jo-mv2026 .jo-mv2026__taglines,
body.home .jo-mv2026 .jo-mv2026__taglines :is(p, h1, span) {
  font-family: var(--jo-public-gothic) !important;
}

/* 詳細ページのタイトル：添付カンプのように太く、読みやすい字形 */
#detail.detail-news .public-detail-header h1,
#detail.detail-blog .public-detail-header h1,
#detail.work-detail .work-head h1 {
  font-family: var(--jo-public-gothic) !important;
  font-weight: 800 !important;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

/* 記事・制作実績一覧のタイトルも同じ書体に揃える */
[data-page="portfolio"] .works-index-head h1,
[data-page="news"] > .container.section > h1,
[data-page="blog"] > .container.section > h1,
[data-page="portfolio"] .works-catalog .card h3,
[data-page="blog"] .card.blog h3 {
  font-family: var(--jo-public-gothic) !important;
  font-weight: 800 !important;
}


/* ============================================================
   TOP以外の共通パンくず（2026-11-08）
   ヘッダー下の1か所に表示。記事の戻るリンクは置かない。
   ============================================================ */
#jo-breadcrumbs.jo-breadcrumbs {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(15px, 2.5vw, 30px) 0 0;
  font-family: var(--jo-public-gothic, "Noto Sans JP", "Yu Gothic", sans-serif);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .015em;
  position: relative;
  z-index: 1;
}
#jo-breadcrumbs[hidden] { display: none !important; }
#jo-breadcrumbs .jo-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
#jo-breadcrumbs .jo-breadcrumbs__list li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: #81727b;
}
#jo-breadcrumbs .jo-breadcrumbs__list li + li::before {
  content: '›';
  margin: 0 11px;
  color: #bcb1b8;
  font-size: 17px;
  font-weight: 400;
}
#jo-breadcrumbs a,
#jo-breadcrumbs [aria-current="page"] {
  font: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#jo-breadcrumbs a { color: #766871; transition: color .18s ease; }
#jo-breadcrumbs a:hover,
#jo-breadcrumbs a:focus-visible { color: #ad1457; text-decoration: underline; }
#jo-breadcrumbs [aria-current="page"] { color: #ad1457; font-weight: 700; }
/* 詳細ページでは記事幅に合わせて配置 */
body[data-jo-page="detail"] #jo-breadcrumbs { width: min(880px, calc(100% - 48px)); }
/* 利用規約とプライバシーポリシー */
body.jo-legal-view #jo-breadcrumbs { width: min(850px, calc(100% - 40px)); }
body.jo-legal-view .jo-legal-page { padding-top: clamp(28px, 3.5vw, 45px); }
/* 下層ページ本文との縦方向の間隔を統一 */
[data-page="portfolio"] .works-index,
[data-page="news"] > .container.section,
[data-page="blog"] > .container.section { padding-top: clamp(26px, 3.4vw, 44px); }
#detail.detail-blog, #detail.detail-news { padding-top: clamp(24px, 3.3vw, 40px); }
#detail.work-detail { padding-top: clamp(26px, 3.4vw, 45px); }
@media (max-width: 600px) {
  #jo-breadcrumbs.jo-breadcrumbs,
  body[data-jo-page="detail"] #jo-breadcrumbs,
  body.jo-legal-view #jo-breadcrumbs {
    width: calc(100% - 32px);
    padding-top: 14px;
    font-size: 12px;
  }
  #jo-breadcrumbs .jo-breadcrumbs__list li + li::before { margin: 0 8px; }
  [data-page="portfolio"] .works-index,
  [data-page="news"] > .container.section,
  [data-page="blog"] > .container.section { padding-top: 20px; }
  #detail.detail-blog, #detail.detail-news, #detail.work-detail { padding-top: 22px; }
}


/* ==============================================================
   公開下層ページ：パンくずは共通の左基準、本文は中央配置
   パンくず幅と本文幅を結び付けない（以前の左寄せ修正を置き換える）
   ============================================================= */
:root {
  --jo-subpage-max: 1100px;
  --jo-subpage-gutter: 24px;
}

/* パンくずだけ、共通レールの左端に揃える */
#jo-breadcrumbs.jo-breadcrumbs,
body[data-jo-page="detail"] #jo-breadcrumbs,
body.jo-legal-view #jo-breadcrumbs {
  width: min(var(--jo-subpage-max), calc(100% - 2 * var(--jo-subpage-gutter)));
  margin-inline: auto;
}

/* 一覧全体の領域は中央に置く（記事は狭め・制作実績はグリッド幅を維持） */
[data-page="portfolio"] .works-index,
[data-page="blog"] > .container.section {
  width: min(1100px, calc(100% - 2 * var(--jo-subpage-gutter)));
  margin-inline: auto;
}
[data-page="news"] > .container.section {
  width: min(920px, calc(100% - 2 * var(--jo-subpage-gutter)));
  margin-inline: auto;
}

/* 詳細記事はパンくずの左に寄せず、ページ中央に配置 */
#detail.detail-blog,
#detail.detail-news {
  width: min(920px, calc(100% - 2 * var(--jo-subpage-gutter)));
  max-width: none;
  margin-inline: auto;
}
#detail:is(.detail-blog, .detail-news) .public-detail-header {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#detail:is(.detail-blog, .detail-news) .public-detail-cover,
#detail:is(.detail-blog, .detail-news) .public-detail-content,
#detail:is(.detail-blog, .detail-news) .public-detail-footer {
  margin-left: auto;
  margin-right: auto;
}

/* 制作実績詳細：タイトル・作品画像・情報欄を同じ中央軸に置く */
#detail.work-detail {
  width: min(960px, calc(100% - 2 * var(--jo-subpage-gutter)));
  max-width: none;
  margin-inline: auto;
}
#detail.work-detail .work-head,
#detail.work-detail .work-stage,
#detail.work-detail .work-info-list,
#detail.work-detail .work-summary,
#detail.work-detail .work-navigation {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  :root { --jo-subpage-gutter: 16px; }
  /* SPはパンくずも本文もそれぞれ画面左右16pxを確保 */
  #detail.detail-blog,
  #detail.detail-news,
  #detail.work-detail,
  [data-page="portfolio"] .works-index,
  [data-page="blog"] > .container.section,
  [data-page="news"] > .container.section {
    width: calc(100% - 32px);
  }
}