@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background-color: #000;
  clip-path: inset(0);
  -webkit-text-size-adjust: 100%;
  font-family:
    Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a img {
  border-style: none;
}

.page_wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: static;
}

header {
  display: flex;
  background-color: #000;
  background-image: url(../img/6dot.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  font-size: 0;
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 15000;
}

.menu_button {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 6px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding-left: 30px;
}

.menu_button__line,
.menu_button::before,
.menu_button::after {
  content: "";
  width: 28px;
  height: 3px;
  background-color: #fff;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.menu_button.is-opened .menu_button__line {
  transform: scale(0);
  opacity: 0;
}

.menu_button.is-opened::before {
  transform: translateY(9px) rotate(225deg);
}

.menu_button.is-opened::after {
  transform: translateY(-9px) rotate(-225deg);
}

header h1 a {
  display: inline-block;
  margin: 20px 30px;
  width: 280px;
  height: 40px;
}

header h1 img {
  width: 280px;
  height: 40px;
}

footer {
  display: block;
  background-color: #000;
  color: #fff;
  font-family:
    Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ＭＳ Ｐゴシック",
    sans-serif;
  font-size: 0.8rem;
  text-align: right;
  padding: 2px 10px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.main_wrapper {
  flex-grow: 1;
  display: grid;
  gap: 0;
  grid-template-columns: 180px minmax(auto, 1000px) minmax(0, auto);
  grid-template-areas: "sidebar main .";
  overflow-x: clip;
  clip-path: inset(0);
}

.main_wrapper::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: #000;
  background: linear-gradient(
    180deg,
    rgba(102, 102, 102, 1) 0%,
    rgba(102, 102, 102, 1) 33%,
    rgba(0, 0, 0, 1) 33%,
    rgba(0, 0, 0, 1) 100%
  );
  background-size: 1px 3px;
}

.sidebar {
  grid-area: sidebar;
  display: block;
  font-family: "calibri", sans-serif;
  font-style: normal;
  line-height: 1rem;
  width: 180px;
  position: sticky;
  top: 80px;
  align-self: start;
}

.sidebar h2 {
  display: block;
  border: #ccc 2px solid;
  border-left-style: none;
  border-radius: 0 0.6rem 0.6rem 0;
  background-color: #000;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3rem;
  width: 70%;
  margin: 10px auto 0 0;
  padding: 0 6px;
}

.sidebar a {
  display: block;
  border: 4px solid;
  border-right-style: none;
  border-radius: 0.6rem 0 0 0.6rem;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  text-align: right;
  text-decoration: none;
  width: 85%;
  margin: 8px 0 8px auto;
  padding: 8px 6px 8px 8px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='jarnzchecker-omega' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.3 26.14'%3E%3Cpath id='path' d='M.14,22.81h4.77c-.55-.38-1.07-.81-1.54-1.29-.68-.69-1.27-1.49-1.75-2.37-.48-.88-.85-1.87-1.1-2.95-.25-1.07-.38-2.26-.38-3.52,0-1.82.26-3.51.76-5.05.51-1.54,1.27-2.9,2.27-4.02,1-1.13,2.24-2.02,3.71-2.65,1.46-.63,3.17-.95,5.09-.95s3.49.3,4.9.89c1.41.59,2.6,1.44,3.54,2.52.94,1.08,1.65,2.39,2.12,3.9.47,1.5.7,3.18.7,4.98,0,1.34-.13,2.59-.39,3.72-.26,1.13-.63,2.17-1.1,3.09-.48.92-1.06,1.74-1.74,2.43-.47.48-.99.91-1.55,1.29h4.76v3.33h-9.58v-3.64s.99-.55,1.5-.89c.46-.31.99-.77,1.56-1.36.57-.58,1.04-1.25,1.41-1.99.37-.74.65-1.59.83-2.52.18-.94.27-2.04.27-3.25,0-.8-.06-1.6-.17-2.38-.11-.77-.29-1.5-.53-2.17-.24-.67-.55-1.29-.93-1.85-.37-.55-.83-1.03-1.38-1.43-.54-.4-1.18-.71-1.9-.94-.72-.23-1.56-.34-2.49-.34s-1.78.12-2.51.37c-.73.24-1.39.58-1.96,1-.57.42-1.05.92-1.43,1.49-.39.58-.72,1.21-.97,1.88-.25.67-.44,1.38-.55,2.12-.11.74-.17,1.48-.17,2.21,0,1.29.09,2.44.26,3.39.17.95.44,1.8.81,2.52.36.72.83,1.37,1.4,1.93.57.57,1.1,1.01,1.56,1.33.5.34,1.5.89,1.5.89v3.64H.14' fill='%23333333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: 8px -16px;
}

.sidebar a {
  border-color: #333;
}

.sidebar a:hover,
body.top .nav_top > a,
body.about .nav_about > a,
body.calendar .nav_calendar > a,
body.discography .nav_discography > a,
body.songs .nav_songs > a,
body.history .nav_history > a,
body.x_twitter .nav_x_twitter > a,
body.tools .nav_tools > a {
  border-color: #ccc;
}

.main_content {
  grid-area: main;
  display: block;
  background-color: #ccc;
  color: #000;
  font-size: 0.9em;
  line-height: 1.5em;
}

.main_content::before {
  content: "";
  display: none;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}

/* サイドメニューが隠れるライン */
@media (max-width: 980px) {
  .menu_button {
    display: flex;
  }
  .main_wrapper {
    grid-template-columns: 180px 100vw;
    grid-template-areas: "sidebar main";
    margin-left: -180px;
    transition: margin-left 0.3s;
  }
  .main_wrapper.is-opened {
    margin-left: 0;
  }
  .main_wrapper .main_content {
    transition: filter 0.2s;
  }
  .main_wrapper.is-opened .main_content {
    filter: brightness(25%);
    pointer-events: none;
  }
  /* for Safari */
  /* memo:
  iOS26 safariのリキッドグラスUIにより、サイドバー背景をアドレスバーの上までしか描画せず、不自然になるので、iPhone限定で背景削除することにする。
  ※iPhoneSafariは不具合発生、macSafariは問題ないことを確認済み。
  　iPhone横持ちでも幅980pxを超えることがないので、現状の指定で今のところ問題なし。
  　iPadSafariが不明で、iPadも含める必要があるなら、幅指定を考え直す必要がある（いっそ、Safariは黒背景を仕様にしてしまうか？）
  */
  _::-webkit-full-page-media,
  _:future,
  :root .main_wrapper::before {
    display: none;
  }
}
/* ヘッダーが縮むライン */
@media (max-width: 670px) {
  header {
    height: 40px;
  }
  .menu_button {
    padding-left: 10px;
  }
  header h1 a {
    margin: 10px 12px;
    width: 140px;
    height: 20px;
  }
  header h1 img {
    width: 140px;
    height: 20px;
  }
  footer {
    font-size: 6pt;
  }
  .sidebar {
    top: 40px;
  }
}
/* ヘッダーをさらに圧縮（サイト名とドットマークが干渉するため） */
@media (max-width: 350px) {
  header {
    background-size: 33%;
  }
}

/*----------------------------------------------------------------------------------------------*/
/* contents box (main contents) */
/*----------------------------------------------------------------------------------------------*/

.contents_box {
  display: block;
  background-color: #fff;
  margin: 4px;
  border-radius: 0.6em;
}

.contents_box a {
  color: #36c;
  text-decoration: underline;
}

.contents_box h2 {
  color: #039;
  font-size: 1.2em;
  padding-bottom: 0.5em;
}

.contents_box h2.contents_header {
  display: block;
  background-color: #039;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.75em;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='jarnzchecker-omega' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.3 26.14'%3E%3Cpath id='path' d='M.14,22.81h4.77c-.55-.38-1.07-.81-1.54-1.29-.68-.69-1.27-1.49-1.75-2.37-.48-.88-.85-1.87-1.1-2.95-.25-1.07-.38-2.26-.38-3.52,0-1.82.26-3.51.76-5.05.51-1.54,1.27-2.9,2.27-4.02,1-1.13,2.24-2.02,3.71-2.65,1.46-.63,3.17-.95,5.09-.95s3.49.3,4.9.89c1.41.59,2.6,1.44,3.54,2.52.94,1.08,1.65,2.39,2.12,3.9.47,1.5.7,3.18.7,4.98,0,1.34-.13,2.59-.39,3.72-.26,1.13-.63,2.17-1.1,3.09-.48.92-1.06,1.74-1.74,2.43-.47.48-.99.91-1.55,1.29h4.76v3.33h-9.58v-3.64s.99-.55,1.5-.89c.46-.31.99-.77,1.56-1.36.57-.58,1.04-1.25,1.41-1.99.37-.74.65-1.59.83-2.52.18-.94.27-2.04.27-3.25,0-.8-.06-1.6-.17-2.38-.11-.77-.29-1.5-.53-2.17-.24-.67-.55-1.29-.93-1.85-.37-.55-.83-1.03-1.38-1.43-.54-.4-1.18-.71-1.9-.94-.72-.23-1.56-.34-2.49-.34s-1.78.12-2.51.37c-.73.24-1.39.58-1.96,1-.57.42-1.05.92-1.43,1.49-.39.58-.72,1.21-.97,1.88-.25.67-.44,1.38-.55,2.12-.11.74-.17,1.48-.17,2.21,0,1.29.09,2.44.26,3.39.17.95.44,1.8.81,2.52.36.72.83,1.37,1.4,1.93.57.57,1.1,1.01,1.56,1.33.5.34,1.5.89,1.5.89v3.64H.14' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.1em;
  background-position: 0.3em 0.25em;
  padding: 0 0.5em;
  padding-left: 2em;
  border-radius: 0.6em 0.6em 0 0;
}

.contents_box .contents_body {
  padding: 13px;
  word-break: break-all;
}

.contents_box h2.contents_header + .contents_body {
  padding-top: 10px;
}

.contents_box .contents_body p,
.contents_box .contents_body ul,
.contents_box .contents_body li,
.contents_box .contents_body dl {
  margin-bottom: 0.8em;
}

.contents_box .contents_body p:last-child,
.contents_box .contents_body ul:last-child,
.contents_box .contents_body li:last-child,
.contents_box .contents_body dl:last-child {
  margin-bottom: 0;
}

.contents_box .contents_body ul {
  padding-left: 1em;
}

.contents_box .contents_body dt {
  font-weight: bold;
  margin-top: 0.8em;
}

.contents_box .contents_body dt:first-child {
  margin-top: 0;
}

.contents_box .contents_body dd {
  margin-left: 0.5em;
}

.contents_box.notice {
  border: 6px double #039;
}

/*----------------------------------------------------------------------------------------------*/
/* No use? */
/*----------------------------------------------------------------------------------------------*/

.contents_box .contents_body .box {
  border: 2px solid #039;
  margin: 0;
  padding: 5px;
}

/*----------------------------------------------------------------------------------------------*/
/* Discography */
/*----------------------------------------------------------------------------------------------*/

.discography .contents_box .contents_body {
  display: flex;
}

.discography .contents_box .contents_body .cd_summary {
  margin-left: 1em;
  width: 180px;
}

.discography .contents_box .contents_body .cd_summary a {
  display: inline-block;
}

.discography .contents_box .contents_body .cd_list {
  flex: 1;
}

.discography .contents_box .contents_body ol {
  padding-left: 1em;
}

@media (max-width: 740px) {
  .discography .contents_box .contents_body {
    flex-direction: column;
  }

  .discography .contents_box .contents_body .cd_summary {
    margin: 0 auto 1em auto;
    width: 160px;
    border-bottom: 1px solid #333;
    text-align: center;
  }

  .discography .contents_box .contents_body .cd_list {
    margin-left: 1em;
  }
}

/*----------------------------------------------------------------------------------------------*/
/* Songs */
/*----------------------------------------------------------------------------------------------*/

.songs .song_list {
  width: 100%;
}

.songs p.notice {
  display: none;
}

@media (max-width: 890px) {
  .songs .song_list {
    overflow-x: scroll;
  }
  .songs p.notice {
    display: block;
  }
}

.songs table {
  border-collapse: collapse;
  border: solid 1px #ccc;
  margin: 0;
  width: 100%;
  min-width: 850px;
}

.songs th {
  color: #fff;
  background: #039;
  border: 1px solid #ccc;
  font-weight: bold;
  line-height: 2em;
  text-align: center;
  vertical-align: middle;
  width: auto;
  white-space: nowrap;
}

.songs td {
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: middle;
  width: auto;
  padding: 0 4px;
}

.songs tr:nth-child(2n + 1) {
  background: #eef;
}

.songs a i {
  font-size: 200%;
}

/*----------------------------------------------------------------------------------------------*/
/* Tools */
/*----------------------------------------------------------------------------------------------*/

.tools textarea {
  font-family: "ＭＳ ゴシック", monospace;
  padding: 5px;
  width: 90%;
}

.tools iframe {
  width: 100%;
}

/*----------------------------------------------------------------------------------------------*/
/* X(Twitter) */
/*----------------------------------------------------------------------------------------------*/

div.twitter2 {
  color: #fff;
  text-align: center;
  font-weight: bold;
  width: 230px;
  padding: 5px;
  margin-left: 5px;
  text-indent: 0em !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
div#twitter_jarnzchecker {
  background: #039;
  float: right;
}

/* これはflexに置き換えたい */
div.clearLeftFloat {
  clear: left;
}

/* これはflexに置き換えたい */
div.clearRightFloat {
  clear: right;
}

/*----------------------------------------------------------------------------------------------*/
/* Brand Color */
/*----------------------------------------------------------------------------------------------*/

.fa-x-twitter {
  color: #000000;
}
.fa-instagram-square,
.fa-instagram {
  color: #e1306c;
}
.fa-tiktok {
  color: #25f4ee;
}
.fa-facebook-square,
.fa-facebook {
  color: #1877f2;
}
.fa-threads {
  color: #000000;
}
.fa-youtube-square,
.fa-youtube {
  color: #ff0000;
}
.fa-heart {
  color: #fc8324;
}
.twitcasting {
  color: #0073ff;
}