/* kojika17 Blog: v.14 */

/* Web Font
   LINE Seed: https://seed.line.me/index_jp.html
*/
@font-face {
  font-family: 'LINE Speed JP';
  src: local('LINE Seed JP_OTF'),
        local('LINE Seed JP_TTF'),
       url(/prx/000/https/kojika17.com/WOFF2/LINESeedJP_OTF_Rg.woff2);
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: 'LINE Speed JP';
  src: local('LINE Seed JP_OTF'),
        local('LINE Seed JP_TTF'),
       url(/prx/000/https/kojika17.com/WOFF2/LINESeedJP_OTF_Bd.woff2);
  font-display: swap;
  font-weight: 700;
}

:root {
  --font-size-base: 1.1875rem;
  --color-key: #ff92ad;
  --color-accent: #f58;
  --color-accent-dark: #d50040;
  --color-dark: #555;
  --color-gray: #777;
  --color-gray-pale: #eee;
  --color-base: #fdfdfd;
  --writing-vertical: ;
}

@media (max-width: 38em) {
  :root {
    --font-size-base: 1rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-key: #ff92ad;
    --color-accent: #ff94b4;
    --color-accent-dark: #fffa2f;
    --color-dark: #eaeaea;
    --color-gray: #bbb;
    --color-gray-pale: #999;
    --color-base: #000;
  }
}

[data-theme='vertical'] {
  --writing-vertical: initial;
}

html {
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  writing-mode: var(--writing-vertical, vertical-rl);
}
body {
  font-family: 'LINE Speed JP', sans-serif;
  font-size: var(--font-size-base);
  background: var(--color-base);
  color: var(--color-dark);
}
h1, h2, h3, h4, h5 {
  margin-block-start: 2.5em;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
h1 {
  margin-block-end: 0;
  font-size: 1.75em;
}
h1:before {
  content: '';
  display: block;
  border-block-start: 1px solid var(--color-accent);
  inline-size: 2em;
  margin-block-end: 1.236em;
}
:is(h2, h3, h4, h5) + :is(h3, h4, h5) {
  margin-block-start: 1em;
}
table {
  inline-size: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid var(--color-gray);
  padding: 0.2em 0.5em;
}
th {
  background: var(--color-gray-pale);
}
blockquote {
  border-left: 4px solid var(--color-gray);
  margin-block: 2.5em;
  margin-inline: 0;
  padding-inline: 40px;
}
pre, time {
  font-size: 0.85em;
}
pre[class*=language-]:not([prism-theme]) {
  margin-block: 1.5em;
  box-shadow: 0 2px 1em 2px var(--color-gray-pale);
}
pre {
  overflow: auto;
}
time {
  color: var(--color-gray);
}
:not(pre) > code {
  background: var(--color-gray-pale);
  border-radius: 4px;
  padding-block:0.2em;
  padding-inline: 0.4em;
}

a,
.header-link:is(:hover, :focus-within),
.list-title a:is(:hover, :focus-within) {
  color: var(--color-accent);
  transition: color 0.2s ease-out;
}
a:is(:hover, :focus-within) {
  color: var(--color-accent-dark);
}
img {
  max-inline-size: 100%;
  block-size: auto;
}

.c {
  max-inline-size: 48em;
  margin-inline: auto;
  padding-inline: 0.5em;
}
.header {
  display: flex;
  align-items: center;
  margin-block: 2em;
}
.header-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 0.4em;
  letter-spacing: 0.2em;
  color: var(--color-dark);
  font-size: 1.05em;
  text-transform: uppercase;
  font-family: Lato, sans-serif;
}
.theme-button {
  margin-block-start: var(--writing-vertical, auto);
  margin-inline-start: auto;
  background: var(--color-base);
  padding-block: 0.2em;
  padding-inline: 1em;
  border: 2px solid currentColor;
  border-radius: 9in;
  user-select: none;
  cursor: pointer;
  font-size: 0.8em;
  color: var(--color-accent);
}

.list-card {
  margin-block-start: 5em;
}
.list-card p {
  margin-block: 0.4em 0;
  font-size: 0.85em;
}
.list-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 400;
}
.list-title a {
  color: var(--color-dark);
  text-decoration: none;
}

.article-date {
  margin-block-end: 2.5em;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 3em;
  padding-block-end: 2em;
  gap: 1em;
}
.footer-nav {
  display: flex;
  gap: 1rem;
}
.copyright {
  margin-block: 0;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.alert {
  color: var(--color-accent-dark);
}
.share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 2em 5em;
  line-height: 1;
  color: var(--color-gray);
}
.resize-iframe {
  overflow: hidden;
  resize: horizontal;
  text-align: right;
  line-height: 1.2;
}
.resize-iframe:after {
  content: '右端をドラッグ';
  color: var(--color-accent);
  font-size: 0.85em;
}