@charset "UTF-8";

/* ========================================
  共通
======================================== */
:root{
  --bk: #202020;
  --blue: #102E9E;
  --gray: #aaa;
}

body{
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
  line-height: 1.6;
  color: var(--bk);
}

.container{
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
  404ページ
======================================== */
#page404 {
  text-align: center;
  padding: clamp(48px, calc(80 / 1200 * 100vw), 80px) 0 clamp(56px, calc(96 / 1200 * 100vw), 96px);
}
.page404__notfound-txt {
  color: var(--blue);
  font-weight: bold;
  line-height: 1;
}
.page404__title{
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 1.5em;
}
#page404 .page404__btn {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
  background: var(--blue);
  margin: auto;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .page404__notfound-txt {
    font-size: 6.25rem;
    margin-bottom: 3.125rem;
  }
  .page404__title {
    font-size: 1.2rem;
  }
  .page404__txt {
    font-size: 1rem;
    margin-bottom: 4rem;
  }
  #page404 .page404__btn {
    width: 30rem;
    height: 5rem;
    font-size: 1.4rem;
    font-weight: 500;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    border: 1px solid var(--blue);
  }
  #page404 .page404__btn:hover {
    background: #fff;
    color: var(--blue);
  }
}
@media only screen and (max-width: 767px) {
  .page404__notfound-txt {
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 8vw;
  }
  .page404__title {
    font-size: 1.125rem;
  }
  .page404__txt {
    font-size: 1rem;
    line-height: 1.7;
    margin-top: calc(0px - (1em * 1.7 - 1em) / 2);
    margin-bottom: 3rem;
  }
  #page404 .page404__btn {
    max-width: 300px;
    width: 100%;
    height: 15.3846153846vw;
    font-size: 1.125rem;
    font-weight: 500;
  }
}