/*
  記事のページの見た目（site-spec.md §3.1・§6）: 本文の列と右のサイドの組み方、記事の頭（ラベル・題・執筆者のカード・ページ更新日と
  後ろの白い飾り）・PR 表記・目次・共有・執筆者の紹介・サイド（IFAの記事を読む・バナー）・「更新内容」（dialog）。本文の中の
  12 種のブロックなどは content.css、土台と枠は ../style.css。値の変数は content.css の :root。決まり（大きさの式・境）は style.css の頭
*/

/* 画像の丸で見せるボタンとリンク: 名前（文字）は読み上げに残し、画面には出さない */
:is(.history__close, .share__link, .share__copy) {
  padding: 0;
  border: 0;
  background: transparent center / contain no-repeat;
  font-size: 0;
  cursor: pointer;
}

/* ---------- 列（本文の列と右のサイド） ---------- */

.article-page {
  padding-inline: 60px;
}
.article-page__inner {
  display: flex;
  width: min(100%, 1200px);
  margin-inline: auto;
}
.article {
  flex: 1;
  min-width: 0;
  padding-right: min(calc(100 * var(--unit)), 100px);
}
/* サイドは列の下端にそろえ、読み進める間は窓の下に付いてくる */
.side {
  position: sticky;
  bottom: 30px;
  z-index: 2;
  flex: none;
  align-self: flex-end;
  width: clamp(220px, calc(300 * var(--unit)), 300px);
  min-height: 100vh;
  padding-top: min(calc(59 * var(--unit)), 59px);
}

/* ---------- 記事の頭（ラベル・題・執筆者のカード・ページ更新日）と、後ろの白い飾り ---------- */

.article-head {
  position: relative;
  z-index: 1;
  padding: min(calc(66 * var(--unit)), 66px) 0 min(calc(30 * var(--unit)), 30px);
}
.article-head::before,
.article-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  height: calc(100% + 140px);
  min-height: 461px;
  pointer-events: none;
}
.article-head::before {
  left: -50vw;
  width: 70vw;
  background: var(--color-surface);
}
.article-head::after {
  right: calc(-1 * (min(calc(100 * var(--unit)), 100px) + 142px));
  width: 1150px;
  background: url(images/bg_white_rug_01.svg) right top / cover no-repeat;
}
.article-head__label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 13px;
  border-radius: 32px;
  background: var(--color-dark);
  color: var(--color-surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.article-head__title {
  margin-top: min(calc(11 * var(--unit)), 11px);
  font-size: clamp(22px, calc(38 * var(--unit)), 38px);
  font-weight: 700;
  line-height: 1.5;
}
.article-head__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
  margin-top: min(calc(36 * var(--unit)), 36px);
}
.people-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px min(calc(26 * var(--unit)), 26px);
}
.people-card {
  display: flex;
  align-items: center;
  gap: 6px;
}
.people-card__photo {
  flex: none;
  width: clamp(22px, calc(38 * var(--unit)), 38px);
  height: auto;
}
.people-card__text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.people-card__role {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
}
.people-card__name {
  font-size: 14px;
  font-weight: 700;
}
.article-head__updated {
  display: flex;
  flex: none;
}
.updated {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 1px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.updated::after {
  content: "";
  width: 12px;
  height: 10px;
  margin-left: 5px;
  background: url(images/icn_modal_01.svg) center / contain no-repeat;
}

/* ---------- PR 表記・目次 ---------- */

.article-pr {
  margin-top: clamp(12px, calc(18 * var(--unit)), 18px);
  color: var(--color-gray);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}
/* 目次は本文の中（本文の左右の余白 20px の外まで広げる）。前に要素があれば上を空ける。本文の CSS の余白の規則に勝つよう、
   class を 2 つ重ねる */
.entry-content > .toc {
  margin-inline: -20px;
}
.entry-content > .toc:not(:first-child) {
  margin-top: 48px;
}
.toc .toc__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(80px, calc(100 * var(--unit)), 100px);
  height: clamp(34px, calc(42 * var(--unit)), 42px);
  margin-top: 4px;
  border: var(--line);
  border-radius: clamp(10px, calc(12 * var(--unit)), 12px) clamp(10px, calc(12 * var(--unit)), 12px) clamp(10px, calc(12 * var(--unit)), 12px) clamp(2px, calc(4 * var(--unit)), 4px);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: clamp(14px, calc(18 * var(--unit)), 18px);
  font-weight: 700;
  line-height: 1.2;
}
.toc .toc__list {
  margin-top: 10px;
  counter-reset: toc;
}
.toc .toc__list > li {
  margin-top: 0;
  background: url(images/line_dot_01.png) left bottom / 800px 4px repeat-x;
  counter-increment: toc;
}
/* 目次のリンクには、本文のリンクの見た目（主色の字・点線の下線・字の色の動き。content.css）を付けない。題は本文の色、番号は主色 */
.toc .toc__list a {
  display: flex;
  padding: 14px 0 18px;
  background: none;
  color: var(--color-text);
  font-size: clamp(14px, calc(16 * var(--unit)), 16px);
  font-weight: 700;
  line-height: 1.8;
  transition: none;
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  margin: -2px min(calc(17 * var(--unit)), 17px) 0 8px;
  color: var(--color-primary);
  font-size: clamp(15px, calc(18 * var(--unit)), 18px);
  font-weight: 700;
}

/* ---------- 共有（X・Facebook・LINE・リンクのコピー） ---------- */

.share {
  display: flex;
  justify-content: flex-end;
  margin-top: min(calc(40 * var(--unit)), 40px);
}
.share__list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share__list li {
  line-height: 0;
}
:is(.share__link, .share__copy) {
  display: block;
  width: 44px;
  height: 44px;
}
.share__link--x {
  background-image: url(images/icn_single_sns_01.svg);
}
.share__link--facebook {
  background-image: url(images/icn_single_sns_02.svg);
}
.share__link--line {
  background-image: url(images/icn_single_sns_03.svg);
}
.share__copy {
  background-image: url(images/icn_single_sns_04.svg);
}
/* 「コピーしました」の知らせ: ボタンの上に出す（狭い窓でも画面の外へはみ出さない） */
.share__copy-item {
  position: relative;
}
.share__notice {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 10;
  padding: 5px 8px;
  border-radius: 2px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%);
}
.share__notice:empty {
  display: none;
}

/* ---------- 執筆者の紹介 ---------- */

.profiles {
  display: grid;
  gap: min(calc(32 * var(--unit)), 32px);
  margin-top: min(calc(80 * var(--unit)), 80px);
}
.profile {
  position: relative;
  padding: min(calc(30 * var(--unit)), 30px);
  border-radius: min(calc(30 * var(--unit)), 30px);
  background: var(--color-surface);
}
.profile__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 120px;
}
.profile__photo {
  flex: none;
  align-self: flex-start;
  width: 54px;
  height: auto;
}
.profile__heading {
  line-height: 1.5;
}
.profile__name {
  margin-right: 18px;
  font-size: 16px;
  font-weight: 700;
}
.profile__role {
  font-size: 14px;
}
.profile__affiliation {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.5;
}
.profile__bio {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}
/* 記事内の紹介文だけに印と本文と同じリンクを戻す。 */
.profile__bio > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 10px;
}
.profile__bio ul > li {
  position: relative;
  padding-left: 18px;
}
.profile__bio ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.profile__bio ol {
  padding-left: 2em;
  list-style: decimal;
}
.profile__bio a {
  background: url(images/line_dot_link_01.svg) repeat-x 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}
.profile__link {
  position: absolute;
  top: 35px;
  right: min(calc(30 * var(--unit)), 30px);
  display: block;
  height: 26px;
  padding: 3px 34px 0 0;
  background: url(images/icn_link_02.svg) right center / 26px 26px no-repeat;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.person-links a {
  overflow-wrap: anywhere;
  text-decoration: underline;
}

/* ---------- サイド（IFAの記事を読む・バナー） ---------- */

.side .reading__title {
  position: relative;
  padding: 0 0 18px 14px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.side .reading__title::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.side .reading__list {
  border-top: 1px solid var(--color-line);
}
.side .reading__list li {
  border-bottom: 1px solid var(--color-line);
}
.side .reading__list a {
  display: block;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.side .reading__list a[aria-current="page"] {
  color: var(--color-primary);
}
.side__banners {
  margin-top: 40px;
  text-align: center;
}
.side__ad {
  line-height: 1.5;
  text-align: center;
}
.side__ad + .side__ad {
  margin-top: 20px;
}
.side__ad img {
  display: block;
  margin-inline: auto;
  max-width: min(100%, 300px);
  height: auto;
}

/* ---------- 「更新内容」（dialog） ---------- */

.history {
  width: min(800px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 200px);
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: var(--color-surface);
  color: var(--color-text);
  overflow: visible;
}
.history::backdrop {
  background: rgb(0 0 0 / 60%);
}
.history__box {
  max-height: inherit;
  padding: 50px;
  border-radius: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.history__close {
  position: absolute;
  right: -5px;
  bottom: calc(100% + 20px);
  width: 66px;
  height: 66px;
  background-image: url(images/btn_close_02.svg);
}
.history__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.history__list {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.history__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
}
.history__item + .history__item {
  margin-top: 15px;
}
/* 日付の形に合わない行は、内容を 2 列ぶんに広げる */
.history__text:only-child {
  grid-column: 1 / -1;
}

/* ---------- hover（マウスの時だけ） ---------- */

@media (hover: hover) {
  .profile__bio a:hover {
    background-image: url(images/line_dot_link_01_on.svg);
    color: var(--color-text);
  }
  .history__close:hover {
    background-image: url(images/btn_close_02_on.svg);
  }
  .side .reading__list a:hover,
  .toc__list a:hover,
  .profile__link:hover {
    color: var(--color-primary);
  }
  .share__link--x:hover {
    background-image: url(images/icn_single_sns_01_on.svg);
  }
  .share__link--facebook:hover {
    background-image: url(images/icn_single_sns_02_on.svg);
  }
  .share__link--line:hover {
    background-image: url(images/icn_single_sns_03_on.svg);
  }
  .share__copy:hover {
    background-image: url(images/icn_single_sns_04_on.svg);
  }
  .profile__link:hover {
    background-image: url(images/icn_link_02_on.svg);
  }
}

/* ---------- 動き（動きを減らす設定の人には、動かさない） ---------- */

@media (prefers-reduced-motion: no-preference) {
  .history[open],
  .history[open]::backdrop {
    animation: fin-d-pro-fade-in 0.3s ease;
  }
  :is(.side .reading__list a, .toc__list a, .profile__link) {
    transition: color 0.3s ease;
  }
}

/* ---------- PC の狭い幅（1100px 以下。769〜1100px は 2 列のままで本文の列が狭い） ---------- */

@media (max-width: 1100px) {
  /* 題の下の行を縦に積む */
  .article-head__info {
    display: block;
    margin-top: 22px;
  }
  .article-head__updated {
    margin-top: 22px;
  }
  .updated {
    top: 0;
    font-size: 12px;
  }
  /* 共有のボタンを中央に寄せる */
  .share {
    justify-content: center;
    margin-top: 70px;
  }
  /* 執筆者の紹介の「記事一覧」を紹介文の下へ回す */
  .profile__head {
    padding-right: 0;
  }
  .profile__link {
    position: static;
    width: fit-content;
    margin: 7px 0 0 auto;
  }
}

/* ---------- SP（768px 以下） ---------- */

@media (max-width: 768px) {
  /* ヘッダーの地を白に（記事のページ） */
  body:has(main.article-page) .site-header {
    background: var(--color-surface);
  }

  /* 本文の列 → サイドの縦積み。左右の余白はページの枠で取る */
  .article-page {
    padding-inline: 20px;
  }
  .article-page__inner {
    display: block;
  }
  .article {
    padding-right: 0;
  }
  .side {
    position: static;
    width: auto;
    min-height: 0;
    padding-top: 59px;
  }

  /* 記事の頭: 画面の端まで白い飾りを敷く。白い面の高さは PC と同じ（箱 + 140px、最小 461px）、右の飾りは 339px */
  .article-head {
    margin-inline: -20px;
    padding: 40px 20px 20px;
    overflow: hidden;
  }
  .article-head::before {
    left: 0;
    width: 100%;
  }
  .article-head::after {
    right: 0;
    width: 100%;
    height: 339px;
    min-height: 0;
    background-image: url(images/bg_white_rug_01_sp.svg);
    background-position: right bottom;
    background-size: 390px 339px;
  }
  .article-head__label {
    height: 29px;
    border-radius: 29px;
    font-size: 12px;
  }
  .article-head__title {
    margin-top: 12px;
  }
  .people-cards {
    gap: 10px 25px;
  }
  .people-card {
    gap: 5px;
  }
  .people-card__photo {
    width: 30px;
  }
  .people-card__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .people-card__role {
    font-size: 10px;
  }
  .people-card__name {
    font-size: 12px;
  }

  /* PR 表記・目次 */
  .article-pr {
    font-size: 11px;
    text-align: left;
  }
  .entry-content > .toc {
    margin-inline: 0;
  }
  .entry-content > .toc:not(:first-child) {
    margin-top: 38px;
  }
  .toc .toc__list {
    margin-top: 5px;
  }
  .toc .toc__list a {
    padding: 17px 0 19px;
    font-size: 14px;
    line-height: 2;
  }
  .toc__list a::before {
    margin: 0 7px 0 0;
    font-size: 14px;
  }

  /* 執筆者の紹介 */
  .profiles {
    gap: 16px;
    margin-top: 48px;
  }
  .profile {
    padding: 24px;
    border-radius: 20px;
  }
  .profile__photo {
    width: 48px;
  }
  .profile__bio {
    font-size: 14px;
  }

  /* サイド */
  .side .reading__title {
    font-size: 13px;
  }
  .side .reading__list a {
    font-size: 14px;
  }

  /* 「更新内容」 */
  .history {
    max-height: calc(100dvh - 120px);
    border-radius: 15px;
  }
  .history__box {
    padding: 20px;
  }
  .history__close {
    right: 0;
    bottom: calc(100% + 12px);
    width: 32px;
    height: 32px;
  }
  .history__title {
    font-size: 16px;
  }
  .history__item {
    grid-template-columns: 1fr;
    row-gap: 5px;
  }
}