@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&text=0123456789");
@import url("https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap&text=！!");
a.btn--basic {
  display: block;
  width: auto;
  padding: 0.5em 1em;
  margin: 2% auto;
  border: 2px #AAA solid;
  border-radius: 7px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 0 5px 3px rgba(255, 255, 255, 0.5) inset;
  background-size: auto;
  background-position: 0 0;
  background-repeat: repeat;
  background-attachment: scroll;
  background-image: linear-gradient(to bottom, #EEE, #CCC);
  background-color: transparent;
  background-origin: padding-box;
  background-clip: border-box;
  background-blend-mode: normal;
  font-size: 110%;
  font-weight: bold;
  font-style: normal;
  font-family: sans-serif;
  text-align: center;
  text-indent: 0;
  text-shadow: 1px 1px 2px #FFF;
  text-decoration: none;
  color: #222;
  line-height: normal;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0;
  padding: 0;
}

h3 {
  margin: 0;
  padding: 0;
}

h4 {
  margin: 0;
  padding: 0;
}

h5 {
  margin: 0;
  padding: 0;
}

ol, ul {
  margin: 0;
  padding: 0;
}
ol li, ul li {
  margin-left: 1.5em;
}

table {
  border-collapse: collapse;
}

main > .contents {
  width: 100%;
  margin-top: 10%;
  position: relative;
  overflow-x: hidden;
}
main > .contents section.chronicle {
  padding: 8vw 0;
  min-height: 100dvh;
  margin-top: 0;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: none;
  background-color: transparent;
  background-origin: padding-box;
  background-clip: border-box;
  background-blend-mode: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
main > .contents section.chronicle::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 4px 4px;
  background-position: 0 0;
  background-repeat: repeat;
  background-attachment: scroll;
  background-image: radial-gradient(#000 20%, transparent 80%);
  background-color: rgba(0, 0, 0, 0.8);
  background-origin: padding-box;
  background-clip: border-box;
  background-blend-mode: normal;
  z-index: 0;
  backdrop-filter: blur(10px);
  transition: all 2s 0s ease-out;
}
main > .contents section.chronicle > div {
  margin-top: -10vw;
  position: relative;
  z-index: 1;
}
main > .contents section.chronicle.active::before {
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(0px) !important;
}
main > .contents section.chronicle.active .ch__date {
  transform: translateX(0) !important;
  opacity: 0.2 !important;
}
main > .contents section.chronicle .ch__date {
  width: min(95%, 1200px);
  margin: 0 auto;
  margin-bottom: -1.5vw;
  transition: all 1s 0s ease-out;
  font-size: min(27vw, 300px);
  font-weight: 600;
  font-style: oblique;
  font-family: Oswald, sans-serif;
  text-align: left;
  text-indent: -0.1em;
  text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
  text-decoration: none;
  color: white;
  line-height: 1;
  transform: translateX(20%);
  opacity: 0;
}
main > .contents section.chronicle.wp10 .ch__date {
  color: #fcffa7;
}
main > .contents section.chronicle:nth-of-type(2n) .ch__date {
  text-align: right;
  transform: translateX(-20%);
}
main > .contents section.chronicle .ch__window {
  width: min(95%, 1200px);
  margin: 0 auto;
  padding: 2em 1em;
  background-color: rgba(255, 255, 255, 0.7);
  border: 5px #FFF solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  /*.ch__date{
      font-size:200%;
      font-family: $Serif;
      text-align: center;
  }*/
}
main > .contents section.chronicle .ch__window .ch__body {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 640px) {
  main > .contents section.chronicle .ch__window .ch__body {
    display: block;
  }
}
main > .contents section.chronicle .ch__window .ch__body .ch__pac {
  height: min(20vw, 400px);
  aspect-ratio: 8.5/10;
}
@media (max-width: 640px) {
  main > .contents section.chronicle .ch__window .ch__body .ch__pac {
    height: 40vw;
    margin: 0 auto 6%;
  }
}
main > .contents section.chronicle .ch__window .ch__body .ch__pac img {
  display: block;
  height: 100%;
  margin: 0 auto;
  border: 1px #EEE solid;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
}
main > .contents section.chronicle .ch__window .ch__body .ch__info {
  width: 100%;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info h3 {
  font-size: 180%;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__release {
  margin-bottom: 1em;
  font-size: 90%;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #444;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__secondary {
  margin-top: 1em;
  border: 1px #999 dotted;
  border-width: 2px 0 0;
  padding: 0.5em 0 0;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__secondary h4 {
  font-weight: bold;
  margin-bottom: 0.3em;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__secondary ul {
  line-height: 1.8;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__secondary ul li {
  display: inline-block;
  margin-left: 1em;
  font-size: 90%;
}
main > .contents section.chronicle .ch__window .ch__body .ch__info .ch__secondary ul li::before {
  content: "● ";
}
main > .contents section.chronicle.wp1 {
  background-image: url(../images/chronicle/bg_wp1.jpg);
}
main > .contents section.chronicle.wp2 {
  background-image: url(../images/chronicle/bg_wp2.jpg);
}
main > .contents section.chronicle.wp3 {
  background-image: url(../images/chronicle/bg_wp3.jpg);
}
main > .contents section.chronicle.wp4 {
  background-image: url(../images/chronicle/bg_wp4.jpg);
}
main > .contents section.chronicle.wp5 {
  background-image: url(../images/chronicle/bg_wp5.jpg);
}
main > .contents section.chronicle.wp6 {
  background-image: url(../images/chronicle/bg_wp6.jpg);
}
main > .contents section.chronicle.wp7 {
  background-image: url(../images/chronicle/bg_wp7.jpg);
}
main > .contents section.chronicle.wp8 {
  background-image: url(../images/chronicle/bg_wp8.jpg);
}
main > .contents section.chronicle.wp9 {
  background-image: url(../images/chronicle/bg_wp9.jpg);
}
main > .contents section.chronicle.wp10 {
  background-image: url(../images/chronicle/bg_wp10.jpg);
}

.ch__tweet {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 10% auto 0;
  z-index: 2;
}
.ch__tweet a {
  display: block;
  width: 20em;
  padding: 1em 1em;
  margin: 1%;
  background-color: #1d9bf0;
  border-radius: 3em;
  border: 3px rgba(255, 255, 255, 0.3) solid;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  font-size: min(3.5vw, 26px);
  font-weight: bold;
  font-style: normal;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  text-align: center;
  text-indent: 0;
  text-shadow: 0 0 5px rgba(13, 17, 38, 0.5);
  text-decoration: none;
  color: white;
  line-height: 1;
}