/* base */
html {
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}

body {
  background-color: var(--bg);
  color: var(--tx);
  font-family: "YakuCaltGothic", "Noto Sans JP Subset", "Fira Sans Adjusted", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans JP Subset", "Fira Sans Adjusted", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
  font-weight: 700;
}

.headingDescription {
  font-weight: normal;
  font-size: var(--f-small);
  color: var(--tx-2);
  padding-left: 1rem;
}

ul, ol {
  padding-left: 2em;
  padding-inline-start: 2em;
  margin-block-start: 0;
}

a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.125em;
  opacity: 1;
  transition: color .15s ease-in;
  color: var(--bl);
}

a:hover,
a:focus {
  color: var(--bl-2);
  transition: color .15s ease-in;
}

a:active {
  color: var(--bl-2);
  transition: color .15s ease-in;
}

a:visited {
  color: var(--pu);
}

a.link--secret {
  color: var(--tx);
  text-decoration-color: var(--ui-3);
}

a.link--secret:hover,
a.link--secret:focus,
a.link--secret:active {
  color: var(--tx-2);
}

p {
  margin-bottom: var(--spacing-default);
}

hr {
  border: none;
  color: inherit;
  margin: var(--spacing-3x) 0;
}

hr::before {
  content: "***";
  letter-spacing: var(--spacing-default);
  margin-inline-start: var(--spacing-2x);
}

.url {
  word-break: break-all;
}

.wrapper {
  display: grid;
  background-color: var(--bg);
  grid-template-columns: repeat(auto-fill, 1em);
  justify-content: center;
  margin-inline: auto;
  width: min(40em, 95vw);
  grid-template-rows: auto 1fr auto;
  row-gap: 2rem;
  min-height: 100%;
  padding: 1rem 0;
}

.wrapper > * {
  grid-column: 1 / -1;
}

/* header */

header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  justify-items: end;
  gap: .25em;
}

header a {
  display: inline-block;
  color: var(--tx);
  text-decoration: none;
}

header a:hover,
header a:focus,
header a:active {
  color: var(--tx-2);
  text-decoration: underline;
}

.header__siteName {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.header__siteName a {
  display: block;
  align-items: center;
  text-decoration: none;
  border-bottom: 2px solid transparent; /* 通常時は透明 */
  transition: border-color .15s ease-in;
}

.header__siteName a svg {
  display: block;
  height: var(--f-huge);
  width: auto;
  fill: var(--tx);
  transition: fill .15s ease-in;
}

.header__siteName a:hover,
.header__siteName a:focus,
.header__siteName a:active {
  border-bottom-color: var(--tx-2); /* ホバー時に下線を表示 */
}

.header__siteName a:hover svg,
.header__siteName a:focus svg,
.header__siteName a:active svg {
  fill: var(--tx-2);
}

header nav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.header__nav ul {
  list-style: none;
  display: flex;
  justify-content: left;
  gap: .5em;
  padding: 0;
  margin: 0;
}

.header__nav ul > li::after {
  content: "･";
  padding-left: .5em;
}

.header__nav ul li a {
  display: inline-block;
}

#theme-switch {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

#theme-switch svg {
  fill: var(--tx);
}

/* main */

main {
  line-height: var(--height-default);
  margin-bottom: var(--spacing-3x);
}

main h1 {
  font-size: var(--f-huge);
  margin-bottom: var(--spacing-default);
}

a.rssIcon {
  font-family: 'Material Symbols Outlined';
  color: inherit;
  text-decoration: none;
  display: inline-block;
  font-size: var(--f-default);
  margin-left: var(--spacing-tiny);
}

main h2 {
  font-size: var(--f-h2);
}

main h2,
main h3,
main h4 {
  margin-top: var(--spacing-2x);
  margin-bottom: var(--spacing-small);
}

main h4 {
  margin-top: var(--spacing-default);
}

main h1:has(+ h2),
main h2:has(+ h3),
main h3:has(+ h4),
main h1:has(+ h4),
main h2:has(+ h4) {
  margin-bottom: 0 !important; 
}

main h1 + h2,
main h2 + h3,
main h3 + h4,
main h1 + h4,
main h2 + h4,
main h3 + h4 {
  margin-top: 1em !important;
}

main > *:first-child {
  margin-top: 0;
}

/* 基本: タイトルの下に大きめのマージン */
.dojin-preview__title {
  margin-bottom: var(--spacing-3x);
}

/* 目次がある場合は、タイトルのマージンを小さくして、目次の下にマージンを移動 */
.dojin-preview__title:has(+ .dojin-preview__content > ul:first-child) {
  margin-bottom: var(--spacing-default);
}

.dojin-preview__content > ul:first-child {
  margin-bottom: var(--spacing-3x);
}

figure.image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.aspect-16x9 { width: 100%; }

.aspect-5x3 { width: 96.825%; }

.aspect-3x2 { width: 91.856%; }

.aspect-4x3 { width: 86.602% }

.aspect-1x1 { width: 75%; }

.aspect-3x4 { width: 64.952%; }

.aspect-2x3 { width: 61.237%; }

.aspect-3x5 { width: 58.095%; }

.aspect-9x16 { width: 56.25%; }

.aspect-46ban { width: 62.37%; }

article img {
  --w: 16;
  --h: 9;
  --s: calc(var(--w) * var(--h) * var(--aspect-ratio));
  --x0: calc(var(--s) / 2);
  --x1: calc((var(--x0) + var(--s) / var(--x0)) / 2);
  --x2: calc((var(--x1) + var(--s) / var(--x1)) / 2);
  --x3: calc((var(--x2) + var(--s) / var(--x2)) / 2);
  --x4: calc((var(--x3) + var(--s) / var(--x3)) / 2);
  --x5: calc((var(--x4) + var(--s) / var(--x4)) / 2);
  --x6: calc((var(--x5) + var(--s) / var(--x5)) / 2);
  width: calc(100% * var(--x6) / var(--w));
  height: auto;
  display: block;
  margin: var(--spacing-default) auto;
}

figcaption {
  text-align: center;
  font-size: var(--f-small);
  color: var(--tx-2);
  margin-top: var(--spacing-tiny);
  margin-bottom: var(--spacing-default);
}

/* figcaptionが次に来るpタグの中のimgのmargin-bottomを0に */
p:has(+ figcaption) img {
  margin-bottom: 0;
}

p:has(+ figcaption) {
  margin-bottom: 0;
}

video {
  display: block;
  margin: var(--spacing-default) auto;
}

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
  margin-bottom: var(--spacing-default);
}

/* reviewCard: 感想記事で紹介する本用 */
.reviewCard {
  padding: var(--spacing-default);
  background-color: var(--bg-2);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-default);
  max-width: 100%; /* 横幅いっぱい */
}

@media all and (max-width: 560px) {
  .reviewCard {
    padding: var(--spacing-small);
  }
}

/* 書名を一番上に */
.reviewCard .reviewCard__title {
  order: 1;
  line-height: var(--height-small);
  font-weight: 700;
  margin: 0 0 var(--spacing-default) 0;
  font-size: var(--f-large);
}

@media all and (max-width: 560px) {
  .reviewCard .reviewCard__title {
    font-size: var(--f-default);
  }
}

/* 書影を2番目に */
.reviewCard .reviewCard__cover {
  order: 2;
}

.reviewCard .reviewCard__cover img {
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
}

@media all and (max-width: 560px) {
  .reviewCard .reviewCard__cover img {
    width: 61.237%;
  }
}

/* 詳細情報を3番目に */
.reviewCard .reviewCard__content {
  order: 3;
}

.reviewCard .reviewCard__detail {
  font-size: var(--f-small);
}

.reviewCard .reviewCard__publication {
  text-align: right;
  margin-top: 0;
  margin-bottom: var(--spacing-small);
  font-size: var(--f-tiny);
}

.reviewCard dl.reviewCard__info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  border-left: .125em solid;
  padding-left: .875em;
}

.reviewCard dl.reviewCard__info dt {
  width: 4em;
}

.reviewCard dl.reviewCard__info dd {
  width: calc(100% - 4em);
}

.reviewCard dl.reviewCard__info span.reviewCard__storeLink:not(:first-of-type)::before{
  content: "| ";
}

.reviewCard .reviewCard__content *:last-child {
  margin-bottom: 0;
}

/* section.bookCard */

.bookList {
  display: grid;
  grid-gap: var(--spacing-3x) var(--spacing-2x);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: var(--spacing-default) 0 var(--spacing-3x);
}

.bookCard {
  padding: var(--spacing-default);
  background-color: var(--bg-2);
  display: grid;
  grid-template-rows: subgrid; /* ←これが重要！ */
  grid-row: span 2; /* ←2行分使う（書影 + テキスト） */
  gap: var(--spacing-default);
}

@media all and (max-width: 560px) {
  .bookCard {
    padding: var(--spacing-small);
  }
}

.bookCard__title {
  line-height: var(--height-small);
  font-weight: 700;
  margin: 0 0 var(--spacing-default) 0;
  font-size: var(--f-large);
}

@media all and (max-width: 560px) {
  .bookCard__title {
    font-size: var(--f-default);
  }
}

.bookCard__title a {
  text-decoration: none;
  color: var(--tx);
}

.bookCard__title a:hover,
.bookCard__title a:active,
.bookCard__title a:focus {
  text-decoration: none;
  color: var(--tx-2);
}

.bookCard__cover {
  display: flex;
  justify-content: center;
  align-items: end; /* ←書影を下揃え */
}

figure.bookCard__cover img {
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
}

@media all and (max-width: 560px) {
  figure.bookCard__cover img {
    /* 四六判のサイズをだいたい2x3とみなして */
    width: 61.237%;
  }
}

figure.bookCard__cover a img:hover {
  opacity: .7;
  transition: all .1s ease-in;
}

.bookCard__info {
  font-size: var(--f-small);
}

div.bookCard__content *:last-child {
  margin-bottom: 0;
}

.alert,
.alert--netabare {
  background-color: var(--bg-2);
  color: var(--tx-2);
  font-size: var(--f-small);
  padding: 1em;
  padding-left: var(--spacing-small);
  margin: var(--spacing-default) 0;
  border-left: .25rem solid var(--or-2);
}

.alert p,
.alert--netabare p {
  margin: 0;
}

blockquote {
  margin: var(--spacing-default);
  margin-right: 0;
  padding: var(--spacing-small) 1rem;
  border-left: .25rem solid var(--ui-2);
  }

blockquote p:first-of-type {
  margin-top: 0;
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

cite {
  display: block;
  margin-top: .5em;
  font-size: var(--f-tiny);
  font-style: normal;
}

cite a{
  color: var(--color-text-base);
}

cite::before {
  content: '—';
  margin-right: .25em;
}

.recentPostList__date,
.articleList__date {
  font-size: var(--f-small);
  color: var(--tx-3);
  margin-left: .25rem;
  white-space: nowrap;
}
/*
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: block;
  margin-left: 1.25em;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover {
  cursor: pointer;
}

summary::before,
summary::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

summary::before {
  content: "\002b";
  position: absolute;
  right: 100%;
  margin-right: .75em;
}

details[open] summary::before {
  content: "\2010";
}
*/
.journal__content {
  margin-left: 1.25em;
  margin-bottom: var(--spacing-small);
  padding: .5em .75em;
  background-color: rgb(from var(--bg-2) r g b / 0.5);
}

.journal__content *:last-of-type {
  margin-bottom: 0;
}

.journal__content h2 {
  font-size: var(--f-large);
  line-height: var(--height-default);
}

.singlePost__meta {
  font-size: var(--f-small);
  color: var(--tx-2);
  text-align: right;
  margin-bottom: var(--spacing-default);
}

.singlePost__tag a {
  color: var(--tx-2);
}

.singlePost__tag > a:not(:first-of-type) {
  margin-left: .5em;
}

.singlePost__date {
  margin-left: .75em;
}

/* dojin詳細ページ */

dl.dojin-detail__info {
  display: grid;
  grid-template-columns: auto 1fr;
  width: fit-content;
  margin-top: var(--spacing-2x);
  margin-bottom: var(--spacing-default);
  font-size: var(--f-small);
}

dl.dojin-detail__info dt {
  padding: .25em 0 .25em var(--spacing-small);
  font-weight: 700;
}

dl.dojin-detail__info dd {
  padding: .25em var(--spacing-small) .25em var(--spacing-default);
}

dl.dojin-detail__info dt:not(:first-of-type),
dl.dojin-detail__info dd:not(:first-of-type) {
  border-top: 1px dotted var(--ui-2);
}

/* いいねボタン */

section.iine {
  display: flex;
  margin-bottom: var(--spacing-default);
}

button.newiine_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

section.iine--singlePost {
  justify-content: flex-end;
}

/* footer */

footer {
  text-align: center;
  margin-bottom: 0;
}

.footer__copyright {
  font-size: var(--f-small);
  margin-bottom: 0;
}

.footer__copyright a {
  margin-left: .5em;
}