/*
 * サイトのデザイン — single（投稿・固定ページ）
 *
 *  1 記事の頭（題・メタ・PR 表記・最終確認・記事上のハブ帯）
 *  2 本文 → content.css
 *  3 記事の下（lib/nettoge/design/inc/article.php: 次に読む・まとめ・〇〇の記事・シェア・書いた人）
 *  4 コメント
 * 値は build/css/tokens-nettoge.css の --ntg2-*。本文の部品（表・アコーディオン・ブロック）の CSS は styles-front.php の表で読む。
 */

/* ==========================================================================
   1 記事の頭
   ========================================================================== */

#body_wrap .p-articleHead {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap .p-articleHead .c-postTitle__ttl {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-text);
  font-size: var(--ntg2-title-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

#body_wrap .p-articleHead .c-postTitle__date {
  display: none;
}

#body_wrap .p-articleMetas.-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-sub);
  font-size: 13px;
}

#body_wrap .p-articleMetas__termList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

#body_wrap .p-articleMetas__termList::before {
  content: none;
}

#body_wrap .p-articleMetas .c-postTimes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--ntg2-sub);
  font-size: 13px;
}

#body_wrap .p-articleMetas .c-postTimes__posted::before,
#body_wrap .p-articleMetas .c-postTimes__modified::before {
  content: none;
}

#body_wrap .p-articleMetas .c-postTimes__modified::before {
  content: "更新 ";
}

#body_wrap .p-articleMetas .c-postAuthor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ntg2-sub);
  font-size: 13px;
  text-decoration: none;
}

#body_wrap .p-articleMetas .c-postAuthor:hover {
  color: var(--ntg2-teal);
}

#body_wrap .p-articleMetas .c-postAuthor__figure {
  width: 22px;
  height: 22px;
  margin: 0;
}

#body_wrap .p-articleMetas .c-postAuthor__figure img {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
}

/* PR 表記（ステマ規制の表示。消さずに小さい1行にする） */
#body_wrap .c-prNotation[data-style="big"] {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 4px 10px;
  background: var(--ntg2-paper);
  background-image: none;
  border: 0;
  border-radius: var(--ntg2-radius-sm);
  box-shadow: none;
  color: var(--ntg2-muted);
  font-size: 12px;
  line-height: 1.6;
}

#body_wrap .c-prNotation[data-style="big"]::before,
#body_wrap .c-prNotation[data-style="big"]::after {
  content: none;
}

#body_wrap .c-prNotation > i {
  font-size: 13px;
}

#body_wrap .c-prNotation[data-style="small"] {
  border-color: var(--ntg2-line);
  color: var(--ntg2-muted);
}

/* 記事上のハブ帯: PC はサイドバーの攻略メニューと重なるので出さず、スマホだけ出す */
@media (min-width: 960px) {
  #body_wrap.-sidebar-on .l-mainContent__inner > .c-nettogeHubLink:not(.-bottom) {
    display: none;
  }
}

/* 検証チップ（content.php。対象バージョン・最終確認日） */
#body_wrap .c-nettogeVerificationChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
}

/* アイキャッチ */
#body_wrap .p-articleThumb {
  margin: 20px 0 0;
}

#body_wrap .p-articleThumb__img {
  border-radius: var(--ntg2-radius);
}

/* 記事の頭と本文の間 */
#body_wrap .l-mainContent__inner > .post_content {
  margin-top: 24px;
}

/* ==========================================================================
   2 本文 → build/css/design/content.css（本文の土台。全ページで読む）
   ========================================================================== */

/* ==========================================================================
   3 記事の下
   ========================================================================== */

#body_wrap .ntg2-foot {
  margin: 48px 0 0;
}

#body_wrap .ntg2-foot__sec + .ntg2-foot__sec {
  margin-top: 40px;
}

#body_wrap .ntg2-foot__next + .ntg2-foot__hub {
  margin-top: 16px;
}

#body_wrap .ntg2-foot__hub .c-nettogeHubLink {
  margin: 0;
}

#body_wrap .ntg2-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--ntg2-muted);
  font-size: 12px;
}

#body_wrap .ntg2-terms__label {
  margin-right: 2px;
}

/* 記事下のカテゴリ（SWELL）は記事下の並び（〇〇の記事）に入れたので出さない */
#body_wrap.single .p-articleFoot {
  display: none;
}

/* シェア（share.php のカードを1行に並べる） */
#body_wrap .ntg2-foot__share .ntg-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 18px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ntg2-line);
  border-bottom: 1px solid var(--ntg2-line);
  border-radius: 0;
  box-shadow: none;
}

#body_wrap .ntg2-foot__share .ntg-share__head {
  margin: 0 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap .ntg2-foot__share .ntg-share__title {
  margin: 0;
  color: var(--ntg2-text);
  font-size: 13px;
  font-weight: 700;
}

#body_wrap .ntg2-foot__share .ntg-share__title::before,
#body_wrap .ntg2-foot__share .ntg-share__title::after {
  content: none;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__body, .ntg-share__actions, .ntg-share__sub) {
  display: contents;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__lead, .ntg-share__preview) {
  display: none;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__actions, .ntg-share__sub) > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__actions, .ntg-share__sub) > li::before {
  content: none;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__actions, .ntg-share__sub) > li[hidden] {
  display: none;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__btn, .ntg-share__sub a) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  background: var(--ntg2-surface);
  border: 1px solid var(--ntg2-line);
  border-radius: 18px;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transform: none;
  cursor: pointer;
}

#body_wrap .ntg2-foot__share :is(.ntg-share__btn, .ntg-share__sub a):hover {
  border-color: var(--ntg2-teal);
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-x {
  background: var(--ntg2-brand-x);
  border-color: var(--ntg2-brand-x-border);
  color: var(--ntg2-brand-on);
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-line {
  background: var(--ntg2-brand-line);
  border-color: var(--ntg2-brand-line);
  color: var(--ntg2-brand-on);
}

#body_wrap .ntg2-foot__share :is(.ntg-share__btn.-x, .ntg-share__btn.-line):hover {
  opacity: 0.85;
}

#body_wrap .ntg2-foot__share .snsicon,
#body_wrap .ntg2-foot__share .ntg-share__svg {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

/* リンクをコピーは右端 */
#body_wrap .ntg2-foot__share .ntg-share__actions > li:has(.-copy) {
  order: 9;
  margin-left: auto;
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-copy .ntg-share__label.-done,
#body_wrap .ntg2-foot__share .ntg-share__btn.-copy .ntg-share__svg.-done {
  display: none;
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-copy.is-done .ntg-share__label.-done,
#body_wrap .ntg2-foot__share .ntg-share__btn.-copy.is-done .ntg-share__svg.-done {
  display: inline;
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-copy.is-done .ntg-share__label.-idle,
#body_wrap .ntg2-foot__share .ntg-share__btn.-copy.is-done .ntg-share__svg.-idle {
  display: none;
}

#body_wrap .ntg2-foot__share .ntg-share__btn.-copy.is-done {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

@media (max-width: 599px) {
  #body_wrap .ntg2-foot__share .ntg-share__head {
    flex: 1 1 100%;
  }

  #body_wrap .ntg2-foot__share .ntg-share__actions > li:has(.-copy) {
    margin-left: 0;
  }
}

/* 書いた人（SWELL の著者欄を記事下の並びで） */
#body_wrap .ntg2-foot__author .l-articleBottom__section {
  margin: 0;
  padding: 0;
}

#body_wrap .ntg2-foot__author .l-articleBottom__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#body_wrap .ntg2-foot__author .p-authorBox {
  display: grid;
  grid-template-columns: 56px auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  text-align: left;
}

#body_wrap .ntg2-foot__author .p-authorBox__l {
  display: contents;
}

#body_wrap .ntg2-foot__author .p-authorBox .avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 56px;
  height: 56px;
  margin: 0 8px 0 0;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  box-shadow: none;
}

#body_wrap .ntg2-foot__author .p-authorBox__name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--ntg2-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#body_wrap .ntg2-foot__author .p-authorBox__name:hover {
  color: var(--ntg2-teal);
}

#body_wrap .ntg2-foot__author .p-authorBox__position {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  text-align: left;
  color: var(--ntg2-muted);
  font-size: 12px;
}

#body_wrap .ntg2-foot__author .p-authorBox__r {
  grid-column: 2 / span 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
}

#body_wrap .ntg2-foot__author .p-authorBox__desc {
  margin: 4px 0 0;
  color: var(--ntg2-sub);
  font-size: 13px;
  line-height: 1.75;
}

#body_wrap .ntg2-foot__author .p-authorBox__iconList {
  justify-content: flex-start;
  margin: 8px 0 0;
}

#body_wrap .ntg2-foot__author .p-authorBox__more {
  margin: 8px 0 0;
  text-align: left;
}

#body_wrap .ntg2-foot__author .p-authorBox__moreLink {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-teal);
  font-size: 12px;
}

/* SWELL の記事下（CTA・ウィジェット欄だけ残る）の余白 */
#body_wrap .l-articleBottom {
  margin: 0;
}

/* ==========================================================================
   4 コメント（comments-nettoge.css の中身はそのまま。見出しと余白だけここで）
   ========================================================================== */

#body_wrap .l-articleBottom__section.-comment {
  margin-top: 48px;
}

#body_wrap .l-articleBottom__title,
#body_wrap #comments .c-secTitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0 0 0 12px;
  background: none;
  border: 0;
  border-left: 4px solid var(--ntg2-accent);
  border-radius: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: var(--ntg2-sec-h-size);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* 投稿フォームの見出しは小さく（「コメント」の見出しと二重にしない） */
#body_wrap #comments .comment-reply-title,
#body_wrap .comment-respond .comment-reply-title {
  margin: 20px 0 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

#body_wrap .comment-respond .comment-reply-title::before,
#body_wrap .comment-respond .comment-reply-title::after {
  content: none;
}

#body_wrap .l-articleBottom__title {
  border-bottom: 0;
}

#body_wrap .l-articleBottom__title::before,
#body_wrap .l-articleBottom__title::after,
#body_wrap #comments .c-secTitle::before,
#body_wrap #comments .c-secTitle::after {
  content: none;
}

/* ==========================================================================
   スマホ
   ========================================================================== */

@media (max-width: 599px) {
  #body_wrap .p-articleHead .c-postTitle__ttl {
    font-size: var(--ntg2-title-size-sp);
    line-height: 1.55;
  }

}