@charset "utf-8";
/* GATE サイト閉鎖ページ（PC・スマホ共通）
   画面幅 767px 以下 … スマホ表示（見本 GATE_SP.png / 制作基準 390 x 844）
   画面幅 768px 以上 … PC表示  （見本 GATE_PC.png / 制作基準 1440 x 1024）
   基本はスマホ用の指定を書き、768px以上のときだけ下のメディアクエリで上書きする。 */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;

  /* スマホはアドレスバーの分だけ実際の表示領域が狭い。
     100svh はその「実際に見えている高さ」を指すので、縦スクロールが出なくなる。
     svh に未対応のブラウザ向けに 100vh を先に書いて上書きしている。 */
  min-height: 100vh;
  min-height: 100svh;

  /* 背景は3層。重なり順は上から「星」「モザイク」「地色」。
     星は画面全体を覆うように拡大縮小し、1枚だけ使うので継ぎ目が出ない。
     モザイクは見本と同じ 680 x 590 の原寸で、画面の左上を起点に繰り返す。 */
  background-color: #2a2a2a;
  background-image: url(../img/bg-sp.png), url(../img/bg.svg);
  background-repeat: no-repeat, repeat;
  background-position:
    center top,
    left top;
  background-size:
    cover,
    680px 590px;

  font-family: ArialMT, Meiryo, メイリオ, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  text-align: center;
}

/* 見本どおり、画面上端からロゴ上端までを 103px にする。
   下の余白は、実機で縦スクロールが出ない範囲に抑えている。 */
.closed {
  padding: 103px 0 40px;
}

.closed_logo {
  display: block;
  width: 202px;
  height: 90px;
  margin: 0 auto;
}

/* 左右16pxずつあけて、画面幅に合わせて伸縮させる。
   ただしタブレットなど横に広い端末で間延びしないよう、480pxで頭打ちにする。 */
.closed_box {
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 88px auto 0;
  padding: 40px 0;
  background-color: #ffffff;
  border-radius: 4px;
}

.closed_box p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #e94751;
  text-align: center;
}

/* 読点「、」はPC表示のときだけ出す（スマホではそこで改行するため） */
.only_pc {
  display: none;
}

/* ここから PC表示 ------------------------------------------------------ */
@media screen and (min-width: 768px) {
  body {
    background-image: url(../img/bg-pc.png), url(../img/bg.svg);
  }

  /* 見本どおり、画面上端からロゴ上端までを 180px にする */
  .closed {
    padding: 180px 20px 418px;
  }

  .closed_logo {
    width: 332px;
    height: 148px;
  }

  /* 見本どおり幅730px。画面がそれより狭いときだけ縮んではみ出さないようにする */
  .closed_box {
    width: 730px;
    max-width: 100%;
    margin: 98px auto 0;
    padding: 50px 0;
    box-sizing: border-box;
  }

  /* スマホ用の改行を消し、PC用の読点を出す */
  .only_sp {
    display: none;
  }

  .only_pc {
    display: inline;
  }
}