/*
Theme Name: fin-d-pro
*/

/*
  ページの土台と枠の見た目（site-spec.md §3・§6）: 下地・ヘッダー・メニュー・フッターと、一覧と人のページで共に使う記事のカード・
  ページ送り。画面ごとの見た目は assets/ の article.css（記事）・list.css（一覧）・person.css（人のページ）・404.css、本文の中
  （div.entry-content の 12 種のブロックなど）は assets/content.css。値の変数（色・--unit など）は assets/content.css の :root。
  今の IFA の値を使い、CSS は新しく書いた（Find の CSS は写していない）

  - 大きさ: 1400px を基準に幅に比べて縮み、1400px で止まる（clamp(SP の値, 1400px での値 × --unit, 1400px での値)）。式だけで
    SP の値にならない所は、最後の SP の @media で入れ直す
  - 境: SP は 768px 以下。PC の狭い幅は 1100px 以下（769〜1100px は 2 列のままで本文の列が狭いため。site-spec §6）
  - hover は @media (hover: hover)、動きは @media (prefers-reduced-motion: no-preference) の中だけ
  - 画像: 今の IFA のロゴとアイコン（assets/images/。Find のテーマの物をそのまま写した。ロゴはテーマの部品の中の SVG をファイルにした）
*/

/* ---------- 下地 ---------- */

*,
::before,
::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
/* メニューと「更新内容」を開いている間は、後ろのページを動かさない */
html:has(dialog[open]) {
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: YakuHanJP, Inter, "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
}
/* 枠と画面の部品のリセット。本文（.entry-content）の中には効かせない（本文の見た目は content.css だけで作り、style.css を読まない
   エディターと同じにする。blocks.md §1）。本文に入れる目次（.toc）は画面の部品なので、リセットを効かせる。詳細度は 0 */
:where(a:not(.entry-content *), .toc a) {
  color: inherit;
  text-decoration: none;
}
:where(h1, h2, p, ul, ol):where(:not(.entry-content *), .toc *) {
  margin: 0;
}
:where(ul, ol):where(:not(.entry-content *), .toc *) {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
/* 画像の丸で見せるボタンとリンク: 名前（文字）は読み上げに残し、画面には出さない */
.site-header__menu,
.site-menu__close,
.pagination a {
  border: 0;
  padding: 0;
  background: transparent center / contain no-repeat;
  font-size: 0;
  cursor: pointer;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 55px 55px 0;
}
.site-header__logo {
  display: block;
  line-height: 0;
}
.site-header__logo img {
  width: 224px;
  height: 56px;
}
/* Menu の丸は今の IFA と同じ段で変える: 1400px 以上 66px・769〜1399px 55px・SP 44px */
.site-header__menu {
  flex: none;
  width: 66px;
  height: 66px;
  margin-left: min(calc(56 * var(--unit)), 56px);
  background-image: url(assets/images/btn_header_menu_01.svg);
}
/* 一覧のページ: 地を主色に、ロゴと Menu の丸を白に */
.site-header--list {
  background: var(--color-primary);
}
.site-header--list .site-header__logo img,
.site-footer__logo img {
  filter: brightness(0) invert(1);
}
.site-header--list .site-header__menu {
  background-image: url(assets/images/btn_header_menu_01_w.svg);
}

/* ---------- メニュー（navigation.md。白い板の2列と板の下のリンク） ---------- */

.site-menu {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: min(calc(68 * var(--unit)), 68px) 40px min(calc(107 * var(--unit)), 107px);
  border: 0;
  background: var(--color-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu::backdrop {
  background: transparent;
}
.site-menu__box {
  position: relative;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: min(calc(65 * var(--unit)), 65px) min(calc(80 * var(--unit)), 80px) min(calc(51 * var(--unit)), 51px);
  border-radius: min(calc(80 * var(--unit)), 80px) min(calc(30 * var(--unit)), 30px);
  background: var(--color-surface);
}
.site-menu__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 66px;
  height: 67px;
  background-image: url(assets/images/btn_close_01.svg);
}
.site-menu__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(calc(64 * var(--unit)), 64px);
  align-items: start;
}
.site-menu__nav h2 {
  margin-bottom: 42px;
  color: var(--color-primary);
  font-family: "futura-pt", Inter, sans-serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 700;
}
.site-menu__nav li:not(:last-child) {
  background: url(assets/images/line_single_category_01.svg) left bottom / 14px 2px repeat-x;
}
.site-menu__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0 25px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}
.site-menu__nav a img {
  flex: none;
  width: 36px;
  height: 36px;
}
.site-menu__bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  width: min(100%, 1200px);
  margin: 39px auto 0;
  color: var(--color-surface);
}
.site-menu__legal,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: 14px;
}
.site-menu__social,
.site-footer__social {
  display: flex;
  flex: none;
  gap: 10px;
}
.site-menu__social a,
.site-footer__social a {
  display: block;
  width: 36px;
  line-height: 0;
}

/* ---------- フッター（navigation.md。3列と下段） ---------- */

.site-footer {
  margin-top: 130px;
  padding-inline: 60px;
  background: var(--color-primary);
  color: var(--color-surface);
}
.site-footer__inner {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 60px 0 40px;
}
.site-footer__logo {
  display: inline-block;
  line-height: 0;
}
.site-footer__logo img {
  width: 224px;
  height: 56px;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.site-footer__nav h2 {
  margin-bottom: 13px;
  font-size: 20px;
  font-weight: 700;
}
.site-footer__nav ul {
  display: grid;
  gap: 12px;
}
.site-footer__nav li {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 50px;
}
.site-footer__legal {
  margin-left: auto;
  font-weight: 700;
}
.site-footer__copyright {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}
.site-footer__copyright small {
  font-size: inherit;
}

/* ---------- 記事のカード（一覧と人のページ） ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(30px, calc(30 * var(--unit))) min(40px, calc(40 * var(--unit)));
}
.card {
  display: flex;
  align-items: flex-start;
}
.card__image {
  flex: none;
  width: 34.48%;
  line-height: 0;
}
.card__image img {
  width: 100%;
}
.card__title {
  flex: 1;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.card__image + .card__title {
  padding-left: 20px;
}

/* ---------- ページ送り（前後のページ。一覧と人のページ） ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: min(120px, calc(120 * var(--unit)));
}
.pagination a {
  display: block;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--color-surface) url(assets/images/icn_arrow_paging_next_01.svg) center / 20px 14px no-repeat;
}
.pagination__prev {
  transform: scaleX(-1);
}

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

@media (hover: hover) {
  .site-header__menu:hover {
    background-image: url(assets/images/btn_header_menu_01_on.svg);
  }
  .site-menu__close:hover {
    background-image: url(assets/images/btn_close_01_on.svg);
  }
  .site-menu__nav a:hover {
    color: var(--color-primary);
  }
  .site-footer a:hover,
  .site-menu__bottom a:hover {
    opacity: 0.7;
  }
  .card:hover .card__title {
    color: var(--color-primary-dark);
  }
  .pagination a:hover {
    background-image: url(assets/images/icn_arrow_paging_next_01_on.svg);
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  /* 目次で飛ぶ時に、なめらかにスクロールする */
  html {
    scroll-behavior: smooth;
  }
  .site-menu[open] {
    animation: fin-d-pro-fade-in 0.3s ease;
  }
  :is(.site-menu a, .site-footer a, .card__title) {
    transition: color 0.3s ease, opacity 0.3s ease;
  }
}
@keyframes fin-d-pro-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- 1399px 以下: Menu の丸を 55px に ---------- */

@media (max-width: 1399px) {
  .site-header__menu {
    width: 55px;
    height: 55px;
  }
}

/* ---------- PC の狭い幅（1100px 以下） ---------- */

@media (max-width: 1100px) {
  /* 一覧と人のページのカードを 1 列にする */
  .cards {
    grid-template-columns: 1fr;
  }
  .card__image {
    width: 200px;
  }
}

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

@media (max-width: 768px) {
  /* ヘッダー */
  .site-header {
    padding: 25px 20px 0;
  }
  .site-header--list {
    padding-top: 28px;
  }
  .site-header__menu {
    margin-top: 1px;
    margin-left: 0;
    width: 44px;
    height: 44px;
  }

  /* メニュー: 1列。白い板と下段を縦へ並べ、×は板の上の主色の地へ。 */
  .site-menu {
    padding: 80px 20px 78px;
  }
  .site-menu__box {
    position: static;
    padding: 30px 20px 56px;
    border-radius: 20px;
  }
  .site-menu__close {
    top: 25px;
    right: 20px;
    width: 44px;
    height: 44px;
    background-image: url(assets/images/btn_close_01_sp.svg);
  }
  .site-menu__nav {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-menu__nav h2 {
    margin-bottom: 16px;
    font-size: 24px;
  }
  .site-menu__nav a {
    padding: 16px 0;
    font-size: 14px;
  }
  .site-menu__nav a img {
    width: 20px;
    height: 20px;
  }
  .site-menu__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }
  .site-menu__legal {
    gap: 20px;
    font-size: 12px;
  }

  /* フッター: ロゴ、3つの列、SNS、規約、コピーライトの順に縦へ。 */
  .site-footer {
    margin-top: 80px;
    padding-inline: 20px;
  }
  .site-footer__inner {
    padding: 35px 0 20px;
  }
  .site-footer__logo img {
    width: 224px;
    height: 56px;
  }
  .site-footer__nav {
    grid-template-columns: 1fr;
    gap: 38px;
    margin-top: 37px;
  }
  .site-footer__nav h2 {
    font-size: 18px;
  }
  .site-footer__nav li {
    font-size: 13px;
  }
  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 37px;
    margin-top: 38px;
  }
  .site-footer__legal {
    margin-left: 0;
    gap: 16px;
    font-size: 12px;
  }
  .site-footer__copyright {
    font-size: 12px;
    font-weight: 400;
  }

  /* カード */
  .cards {
    gap: 20px;
  }
  .card__image {
    width: min(41.79%, 200px);
  }
  .card__title {
    margin-top: 0;
    font-size: 15px;
  }
  .card__image + .card__title {
    padding-left: 14px;
  }

  /* ページ送り */
  .pagination {
    margin-top: 40px;
  }
  .pagination a {
    width: 44px;
    height: 44px;
    background-size: 11px 8px;
  }
}