@charset "UTF-8";
/*-------------
　　ヘッダ画像
 --------------*/
@import url("https://fonts.googleapis.com/css?family=Nixie+One&display=swap");
@font-face {
  font-family: しねきゃぷしょん;
  src: url("https://cdn.leafscape.be/cinecaption/cinecaption227.woff2") format("woff2"); }
.hero-screen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  /* 100vwとするとスクロールバーの分も含まれるため */
  height: 42.5vw;
  /* シネスコ */
  /* ハイビジョン 9:16 = 0.56:1 */
  /* アメリカンビスタ 1:1.85 = 0.54:1 */
  /* シネマスコープ 1：2.35 = 0.425:1 */
  overflow: hidden;
  background-color: black;
  font-size: 50px; }

.neon {
  text-align: center;
  font-family: 'Nixie One', Helvetica, Arial, sans-serif;
  transform: rotate(-3deg); }
  .neon h1 {
    font-size: 10vw;
    font-weight: 400;
    line-height: 8vw; }
    .neon h1, .neon h1 a {
      color: #ebffff;
      text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 1.5vw #fff, 0 0 1vw #38eeff, 0 0 0.5vw #38eeff; }
    .neon h1 .mini {
      font-size: 7vw; }

.blink1 {
  animation-name: blink-fast;
  animation-duration: 4s;
  animation-iteration-count: infinite; }

.blink2 {
  animation-name: blink-slow;
  animation-duration: 4s;
  animation-iteration-count: infinite; }

@keyframes blink-fast {
  0% {
    opacity: 0; }
  24.95% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 1; } }
@keyframes blink-slow {
  0% {
    opacity: 0; }
  49.95% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }
/* ネオンサイン風のタイトルデザインは、かつてweb上にあった Neon-like というファイルを参考にさせていただきました。現在みつかりません */

.subtitle {
  position: absolute;
  width: 100%;
  bottom: 2vw;
  font-size: 3vw;
  text-align: center;
  color: antiquewhite;
  font-family: "しねきゃぷしょん";
  font-style: oblique;
  /* ネオンサインの内容を示す字幕なので斜体で表示 */ }

.fluorescent {
  box-shadow: 0rem 0rem 2rem #eeffff; }

.bg-back {
  background-color: oldlace; }
/* 背景色　ショウケースの地の色 */

/*-------------
    日記など。
 --------------*/
/* 最大幅40文字 */
.mw-40c {
  max-width: 40rem; }

/* 作品名： 日記内のみ作品名は太字に */
.diary cite {
  font-weight: bolder; }

/* 五人組カラー */
.text-haruhi {
  color: #ff0080;
  font-weight: bold; }

.bg-haruhi {
  background-color: #ff0080; }

.text-kyon {
  color: #0000FF;
  font-weight: bold; }

.bg-kyon {
  background-color: #0000ff; }

.text-nagato {
  color: #8080ff;
  font-weight: bold; }

.bg-nagato {
  background-color: #8080ff; }

.text-asahina {
  color: #ff80c0;
  font-weight: bold; }

.bg-asahina {
  background-color: #ff80c0; }

.text-koizumi {
  color: #008080;
  font-weight: bold; }

.bg-koizumi {
  background-color: #008080; }

/* 縦書き指定 */
.tate{
  writing-mode : vertical-rl;
  text-orientation: mixed; }

/* 縦中横指定 */
.tcy{
  text-conbine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  -moz-text-combine-upright: all; }

/* 一つのセルに2作品名が入る場合の処理 */
/* <td class="split または split-sm"><div>作品名1</div><div>作品名2</div></td>とする */
td.split{
  padding:0px;
}
td.split-sm{
  padding:0px;
}

.split div{
  margin:0px;
  padding:0.75rem;
}
.split-sm div{
  margin:0px;
  padding:0.3rem;
}
.mw-60c{
	max-width: 64rem;
}
