@charset "UTF-8";
/* 変数
--------------------------------------- */
/* フォントサイズ */
/* 線 */
/* 特有のUI設定 */
/* 文字＋背景 */
:root {
  --main-text-color: #333;
  --em-text-color: #c70d31;
  --gray-text-color: #777;
  --link-text-color: #2684ff;
  --midashi-color: #5c6f68;
  --main-bg-color: #f4f5fa;
  --sub-bg-color: #f1f1f6;
  --sub-bg-color2: #f9fafc;
  --btn-color: #3aaa7a;
  /* フォントサイズ */
  --large-font-size: 20px;
  --normal-font-size: 16px;
  --small-font-size: 13px;
  --note-font-size: 12px;
  --ruby-font-size: 12px;
  /* 線 */
  --table-border: #d2d2d4;
  /* 特有のUI設定 */
  --online-color-ka: #3bae75;
  --online-color-mi: #ce8b61;
  --online-color-fuka: #5e5e5e;
  /* 文字＋背景 */
  --zabutonR-dark: #c70d31;
  --zabutonR-light: #fcf1f1;
  --zabutonY-dark: #ec9800;
  --zabutonY-light: #f9f4ea;
  --zabutonB-dark: #4e91dd;
  --zabutonB-light: #e8f0f8;
  --zabutonG-dark: #3bae75;
  --zabutonG-light: #edf1ef;
  /* 余白定数 */
  --space0: 0;
  --space05: 5px;
  --space1: 10px;
  --space2: 20px;
  --space4: 40px;
  --space8: 80px;
}

@media screen and (max-width: 480px) {
  :root {
    /* フォントサイズ */
    --large-font-size: 4.2vw;
    --normal-font-size: 3.7vw;
    --small-font-size: 3.2vw;
    --note-font-size: 3.2vw;
    --ruby-font-size: 3.2vw;
  }
}
/* メモ…基本的にどの幅でも対応できるCSSの書き方にする。
デザイン的に横幅に応じて分岐させたいときだけメディアクエリを使う */
/* ローディング ------------------------------------------*/
@keyframes loadingBound {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }
  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }
  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }
  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}
/* リンク・ボタン周り
--------------------------------------- */
.loadingBtn {
  position: relative;
}
.loadingBtn .loading {
  display: none;
}

/* SVGアイコン
--------------------------------------- */
svg {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: #444;
}
svg.green {
  fill: #3aaa7a;
}
svg.green-100 {
  fill: #c5ebdb;
}
svg.green-200 {
  fill: #9fdec3;
}
svg.green-300 {
  fill: #79d1ab;
}
svg.green-400 {
  fill: #53c494;
}
svg.green-500 {
  fill: #3aaa7a;
}
svg.green-600 {
  fill: #2d845f;
}
svg.green-700 {
  fill: #205e43;
}
svg.green-800 {
  fill: #133828;
}
svg.green-900 {
  fill: #06120d;
}
svg.gray {
  fill: #444;
}
svg.gray-100 {
  fill: #aaaaaa;
}
svg.gray-200 {
  fill: #919191;
}
svg.gray-300 {
  fill: #777777;
}
svg.gray-400 {
  fill: #5e5e5e;
}
svg.gray-500 {
  fill: #444;
}
svg.gray-600 {
  fill: #2b2b2b;
}
svg.gray-700 {
  fill: #111111;
}
svg.gray-800 {
  fill: black;
}
svg.gray-900 {
  fill: black;
}
svg.white {
  fill: #fff;
}
svg.black {
  fill: #000;
}

/* アニメーションなど
--------------------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}
@keyframes slideDown {
  0% {
    transform: translate(0, -10px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    transform: translate(0, 0);
    line-height: 1.5;
  }
  100% {
    transform: translate(0, -10px);
    line-height: 0;
  }
}
/* スクロールバー */
/* 余白系（各スタイルの上書き調整用なので常に文書の最後に） ------------------------------------------*/
.p-0 {
  padding: var(--space0) !important;
}

.p-05 {
  padding: var(--space05) !important;
}

.p-1 {
  padding: var(--space1) !important;
}

.p-2 {
  padding: var(--space2) !important;
}

.p-4 {
  padding: var(--space4) !important;
}

.p-8 {
  padding: var(--space8) !important;
}

.px-0 {
  padding-left: var(--space0) !important;
  padding-right: var(--space0) !important;
}

.px-05 {
  padding-left: var(--space05) !important;
  padding-right: var(--space05) !important;
}

.px-1 {
  padding-left: var(--space1) !important;
  padding-right: var(--space1) !important;
}

.px-2 {
  padding-left: var(--space2) !important;
  padding-right: var(--space2) !important;
}

.px-4 {
  padding-left: var(--space4) !important;
  padding-right: var(--space4) !important;
}

.px-8 {
  padding-left: var(--space8) !important;
  padding-right: var(--space8) !important;
}

.py-0 {
  padding-top: var(--space0) !important;
  padding-bottom: var(--space0) !important;
}

.py-05 {
  padding-top: var(--space05) !important;
  padding-bottom: var(--space05) !important;
}

.py-1 {
  padding-top: var(--space1) !important;
  padding-bottom: var(--space1) !important;
}

.py-2 {
  padding-top: var(--space2) !important;
  padding-bottom: var(--space2) !important;
}

.py-4 {
  padding-top: var(--space4) !important;
  padding-bottom: var(--space4) !important;
}

.py-8 {
  padding-top: var(--space8) !important;
  padding-bottom: var(--space8) !important;
}

.pl-0 {
  padding-left: var(--space0) !important;
}

.pl-05 {
  padding-left: var(--space05) !important;
}

.pl-1 {
  padding-left: var(--space1) !important;
}

.pl-2 {
  padding-left: var(--space2) !important;
}

.pl-4 {
  padding-left: var(--space4) !important;
}

.pl-8 {
  padding-left: var(--space8) !important;
}

.pt-0 {
  padding-top: var(--space0) !important;
}

.pt-05 {
  padding-top: var(--space05) !important;
}

.pt-1 {
  padding-top: var(--space1) !important;
}

.pt-2 {
  padding-top: var(--space2) !important;
}

.pt-4 {
  padding-top: var(--space4) !important;
}

.pt-8 {
  padding-top: var(--space8) !important;
}

.pb-0 {
  padding-bottom: var(--space0) !important;
}

.pb-05 {
  padding-bottom: var(--space05) !important;
}

.pb-1 {
  padding-bottom: var(--space1) !important;
}

.pb-2 {
  padding-bottom: var(--space2) !important;
}

.pb-4 {
  padding-bottom: var(--space4) !important;
}

.pb-8 {
  padding-bottom: var(--space8) !important;
}

.pr-0 {
  padding-right: var(--space0) !important;
}

.pr-05 {
  padding-right: var(--space05) !important;
}

.pr-1 {
  padding-right: var(--space1) !important;
}

.pr-2 {
  padding-right: var(--space2) !important;
}

.pr-4 {
  padding-right: var(--space4) !important;
}

.pr-8 {
  padding-right: var(--space8) !important;
}

.m-0 {
  margin: var(--space0) !important;
}

.m-05 {
  margin: var(--space05) !important;
}

.m-1 {
  margin: var(--space1) !important;
}

.m-2 {
  margin: var(--space2) !important;
}

.m-4 {
  margin: var(--space4) !important;
}

.m-8 {
  margin: var(--space8) !important;
}

.mx-0 {
  margin-left: var(--space0) !important;
  margin-right: var(--space0) !important;
}

.mx-05 {
  margin-left: var(--space05) !important;
  margin-right: var(--space05) !important;
}

.mx-1 {
  margin-left: var(--space1) !important;
  margin-right: var(--space1) !important;
}

.mx-2 {
  margin-left: var(--space2) !important;
  margin-right: var(--space2) !important;
}

.mx-4 {
  margin-left: var(--space4) !important;
  margin-right: var(--space4) !important;
}

.mx-8 {
  margin-left: var(--space8) !important;
  margin-right: var(--space8) !important;
}

.my-0 {
  margin-top: var(--space0) !important;
  margin-bottom: var(--space0) !important;
}

.my-05 {
  margin-top: var(--space05) !important;
  margin-bottom: var(--space05) !important;
}

.my-1 {
  margin-top: var(--space1) !important;
  margin-bottom: var(--space1) !important;
}

.my-2 {
  margin-top: var(--space2) !important;
  margin-bottom: var(--space2) !important;
}

.my-4 {
  margin-top: var(--space4) !important;
  margin-bottom: var(--space4) !important;
}

.my-8 {
  margin-top: var(--space8) !important;
  margin-bottom: var(--space8) !important;
}

.ml-0 {
  margin-left: var(--space0) !important;
}

.ml-05 {
  margin-left: var(--space05) !important;
}

.ml-1 {
  margin-left: var(--space1) !important;
}

.ml-2 {
  margin-left: var(--space2) !important;
}

.ml-4 {
  margin-left: var(--space4) !important;
}

.ml-8 {
  margin-left: var(--space8) !important;
}

.mt-0 {
  margin-top: var(--space0) !important;
}

.mt-05 {
  margin-top: var(--space05) !important;
}

.mt-1 {
  margin-top: var(--space1) !important;
}

.mt-2 {
  margin-top: var(--space2) !important;
}

.mt-4 {
  margin-top: var(--space4) !important;
}

.mt-8 {
  margin-top: var(--space8) !important;
}

.mb-0 {
  margin-bottom: var(--space0) !important;
}

.mb-05 {
  margin-bottom: var(--space05) !important;
}

.mb-1 {
  margin-bottom: var(--space1) !important;
}

.mb-2 {
  margin-bottom: var(--space2) !important;
}

.mb-4 {
  margin-bottom: var(--space4) !important;
}

.mb-8 {
  margin-bottom: var(--space8) !important;
}

.mr-0 {
  margin-right: var(--space0) !important;
}

.mr-05 {
  margin-right: var(--space05) !important;
}

.mr-1 {
  margin-right: var(--space1) !important;
}

.mr-2 {
  margin-right: var(--space2) !important;
}

.mr-4 {
  margin-right: var(--space4) !important;
}

.mr-8 {
  margin-right: var(--space8) !important;
}

.gap-0 {
  gap: var(--space0) !important;
}

.gap-05 {
  gap: var(--space05) !important;
}

.gap-1 {
  gap: var(--space1) !important;
}

.gap-2 {
  gap: var(--space2) !important;
}

.gap-4 {
  gap: var(--space4) !important;
}

.gap-8 {
  gap: var(--space8) !important;
}

.gapx-0 {
  column-gap: var(--space0) !important;
}

.gapx-05 {
  column-gap: var(--space05) !important;
}

.gapx-1 {
  column-gap: var(--space1) !important;
}

.gapx-2 {
  column-gap: var(--space2) !important;
}

.gapx-4 {
  column-gap: var(--space4) !important;
}

.gapx-8 {
  column-gap: var(--space8) !important;
}

.gapy-0 {
  column-gap: var(--space0) !important;
}

.gapy-05 {
  column-gap: var(--space05) !important;
}

.gapy-1 {
  column-gap: var(--space1) !important;
}

.gapy-2 {
  column-gap: var(--space2) !important;
}

.gapy-4 {
  column-gap: var(--space4) !important;
}

.gapy-8 {
  column-gap: var(--space8) !important;
}

body {
  font-family: "Noto Sans JP";
  text-align: center;
  margin: 0 auto;
}
body .position {
  background-position: 53vw 60px;
  padding: 100px 0;
}
body .position header {
  margin: 0 auto 10px;
}
body .position header .logo figure {
  margin: 0;
}
body .position header .logo figure img {
  width: 200px;
}
body .position main h1 {
  color: #3aaa7a;
  font-size: 40px;
  margin: 0 0 15px;
}
body .position main p {
  font-size: 16px;
  line-height: 2;
  margin: 0;
}
body .position main h2 {
  margin: 60px 0 27px;
  font-size: 20px;
}
body .position main ul {
  border: 1px solid #CBD3DE;
  border-radius: 5px;
  width: 580px;
  margin: 0 auto 50px;
  padding: 30px 30px 30px 60px;
}
body .position main ul li {
  font-size: 16px;
  text-align-last: left;
  margin: 5px 0;
}
body .position main .btn a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  background-color: #3aaa7a;
  border-radius: 50px;
  width: fit-content;
  padding: 15px 35px;
  margin: 50px auto 0;
  display: block;
}

.sp {
  display: none;
}

.tms {
  background: url(../images/error/group.png) top/412px no-repeat;
}

.text_404 {
  margin: 0 0 110px !important;
}

.scrum {
  background: url(../images/error_srm/group.png) top/412px no-repeat;
}

@media screen and (max-width: 786px) {
  body {
    width: 100vw;
    margin: 0 auto 20.9vw;
  }
  body .position {
    background-position: 37vw -5px;
    padding: 12.7vw 0;
  }
  body .position header {
    margin: 0 auto 1.5vw;
  }
  body .position header .logo figure img {
    width: 35%;
  }
  body .position main h1 {
    color: #3aaa7a;
    font-size: 7.5vw;
    margin: 0 0 1.9vw;
  }
  body .position main p {
    font-size: 4vw;
  }
  body .position main h2 {
    margin: 7.5vw 0 3.4vw;
    font-size: 5vw;
  }
  body .position main ul {
    border: 1px solid #CBD3DE;
    border-radius: 0.6vw;
    width: 68vw;
    margin: 0 auto 50px;
    padding: 3vw 7vw 3vw 13vw;
    line-height: 2;
  }
  body .position main ul li {
    font-size: 4vw;
    margin: 0;
  }
  body .position main .btn a {
    border-radius: 12.7vw;
    padding: 3.8vw 9vw;
    font-size: 4vw;
  }
  .sp {
    display: block;
  }
  .tms {
    background: url(../images/error/group_sp.png) top/80% no-repeat;
  }
  .text_404 {
    margin: 0 0 14vw !important;
  }
  .scrum {
    background: url(../images/error_srm/group_sp.png) top/80% no-repeat;
  }
}

/*# sourceMappingURL=error.css.map */