/* Reset CSS */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(video,canvas,audio,iframe,embed,object){display:block}:where(img,svg){display:inline-block;}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
*{outline: 0;}

:root {
  --margin-default: 12px;
  --padding-default: 12px;
  --radius-default: 12px;

  --text-color: #333;
  --text-color-invert: #fff;
  --text-color-fixed: #fff;
  --text-link-color: #0092ff;
  --bg-color: #fff;
  --accent-color: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #e5e7eb;
    --text-color-invert: #333;
    --text-link-color: #00f2ff;
    --bg-color: #202124;
    --accent-color: #60a5fa;
  }
}

html, body {
  font-size: 10px;
  background-color: var(--bg-color);
  /* background: #fff; */
}
body {
  font-size: 1.6rem;
  font-family: "Noto Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.78;
  color: var(--color-base);
}

main {
  padding: var(--padding-default);
}

p + p {
  margin-top: 1em;
}

.error-message {
  color: #f00;
}

a {
  color: var(--text-link-color);
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  main {
    padding-bottom: 80px;
  }
}
/* ヘッダー */
header a {
  text-decoration: none;
  color: var(--text-link-color);
}
header .logo a {
  display: inline-block;
  aspect-ratio: 52 / 10;
  width: 300px;
  background-image: url(../images/logo.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
header .container-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
header .navibar {
  display: none;
}
header .navibar .btn-login {
  border: 1px solid var(--text-link-color);
  border-radius: 999px;
  padding: .5em 1em;
}
@media screen and (min-width: 601px) {
  header .navibar {
    display: block;
  }
  header .navibar ul {
    display: flex;
    gap: 2em;
  }
}
/* フッター */
footer .navibar {
  display: none;
}
@media screen and (max-width: 600px) {
  footer nav.navibar {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--bg-color);
  }
  footer nav.navibar ul {
    padding: 10px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
  footer nav.navibar ul li {
    text-align: center;
  }
  footer nav.navibar a {
    text-decoration: none;
    color: var(--text-color);
  }
  footer nav.navibar span.icon {
    font-size: 10px;
    line-height: 1;
  }
  footer nav.navibar span.icon::before {
    content: "";
    display: block;
    width: 2em;
    height: 2em;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--text-color);
  }
  footer nav.navibar span.icon.icon-home::before {
    -webkit-mask-image: url(../images/icon-home.svg);
    mask-image: url(../images/icon-home.svg);
  }
  footer nav.navibar span.icon.icon-favorite::before {
    -webkit-mask-image: url(../images/icon-favorite.svg);
    mask-image: url(../images/icon-favorite.svg);
  }
  footer nav.navibar span.icon.icon-search::before {
    -webkit-mask-image: url(../images/icon-search.svg);
    mask-image: url(../images/icon-search.svg);
  }
  footer nav.navibar span.icon.icon-channel::before {
    -webkit-mask-image: url(../images/icon-channel.svg);
    mask-image: url(../images/icon-channel.svg);
  }
  footer nav.navibar span.icon.icon-account::before {
    -webkit-mask-image: url(../images/icon-account.svg);
    mask-image: url(../images/icon-account.svg);
  }
}