@font-face {
  font-family: "GenEiAntiq";
  src: url(./font/GenEiAntiquePv5-M.ttf) format("truetype");
}
@font-face {
  font-family: "ShinRetoroMaru";
  src: url(./font/ShinRetroMaruGothic-Regular.ttf);
}
@font-face {
  font-family: "RiiTN_R";
  src: url(./font/RiiTN_R.otf);
}
html, body {
  overflow-x: hidden;
  background-color: #fff5e7;
}

p {
  font-size: clamp(1.25rem, 1.107rem + 0.71vw, 1.75rem);
  color: #c54f00;
  font-family: "GenEiAntiq";
}

h2, h3 {
  font-family: sans-serif;
}

.accent {
  color: #f1c183;
}

.border {
  border-bottom: 0.125rem #f1c183 solid;
}

a {
  border: none;
}

button {
  background-color: transparent;
  border: none;
}

#pc {
  display: block;
}

#mobile {
  display: none;
}

header {
  position: fixed;
  width: 100%;
  height: 70px;
  z-index: 900;
}

.header-content {
  width: 100%;
  display: grid;
  padding: 0.25rem 0.5rem 0;
}

#name {
  width: 30%;
  height: auto;
}

#top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.964rem + 0.18vw, 1.125rem);
  width: 100vw;
  height: 100vh;
  margin-bottom: 10%;
}
@media screen and (max-width: 767px) {
  #top {
    flex-direction: column;
  }
}

#top-bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 15%;
}
@media screen and (max-width: 767px) {
  .logo-text {
    flex-direction: column;
  }
}
.logo-text #logo {
  width: 60%;
}

.text-box {
  text-align: center;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .text-box {
    flex-direction: column;
  }
}
.text-box h2 {
  color: white;
  background-color: #f1c183;
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  z-index: 0;
  padding: 0 clamp(1.25rem, 0.893rem + 1.79vw, 2.5rem);
}

.pic-text, .pic-text2 {
  margin-left: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.964rem + 0.18vw, 1.125rem);
  align-items: center;
  margin-bottom: 10%;
}
@media screen and (max-width: 767px) {
  .pic-text, .pic-text2 {
    flex-direction: column;
  }
}
.pic-text img, .pic-text2 img {
  width: 40%;
  height: auto;
}
.pic-text h2, .pic-text2 h2 {
  width: 100%;
  margin-bottom: 1rem;
  z-index: 0;
}

.card-section, .card-section2 {
  width: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 0.25rem solid #000;
  margin: 1rem auto;
  margin-bottom: 10%;
}
@media screen and (max-width: 767px) {
  .card-section, .card-section2 {
    flex-direction: column;
  }
}

.card-section img, .card-section2 img {
  width: 50%;
  border: #000 0.25rem solid;
}

.card-left {
  text-align: center;
  width: 50%;
}

.mini-wrapper {
  margin-top: 10%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0 1rem;
  margin-bottom: 10%;
}

.min-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  border: 0.25rem solid #000;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .min-card {
    flex-direction: column;
  }
}

.card-top img {
  -o-object-fit: contain;
     object-fit: contain;
}

.card-down {
  text-align: center;
}

.URL-content {
  width: 80%;
  height: auto;
  margin: 0 auto 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .URL-content {
    flex-direction: column;
  }
}
.URL-content a {
  width: 30%;
}
.URL-content .URL-text {
  width: 70%;
  text-align: center;
}
.URL-content .URL-text h2 {
  background-color: #f1c183;
  color: #fff;
  font-size: clamp(1.25rem, 0.893rem + 1.79vw, 2.5rem);
  display: inline-block;
  font-weight: lighter;
  font-family: "RiiTN_R";
  padding: 0 1rem;
  margin-bottom: clamp(1.25rem, 1.107rem + 0.71vw, 1.75rem);
}
.URL-content .URL-text p {
  font-family: "RiiTN_R";
}

#info {
  color: #000;
  font-family: serif;
  font-size: clamp(1rem, 0.964rem + 0.18vw, 1.125rem);
}

footer {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100px;
  background-color: #f1c183;
}
@media screen and (max-width: 767px) {
  footer {
    flex-direction: column;
  }
}

#support {
  color: #fff;
}

@media screen and (max-width: 960px) {
  .mini-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  #pc {
    display: none;
  }
  #mobile {
    display: block;
  }
  section {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  #name {
    width: 50%;
  }
  #top {
    margin: 0 0 15%;
    background-position: 50%;
  }
  #top-bg {
    -o-object-position: 30% 0%;
       object-position: 30% 0%;
  }
  .pic-text, .pic-text2 {
    height: auto;
    align-items: center;
  }
  .pic-text img, .pic-text2 img {
    width: 100%;
  }
  .pic-text h2, .pic-text2 h2 {
    width: 100%;
    transform: translate(0);
  }
  .pic-text2 {
    flex-direction: column-reverse;
  }
  .logo-text #logo {
    width: 80%;
  }
  .text-box {
    width: 90%;
  }
  .card-section {
    flex-direction: column;
  }
  .card-section2 {
    flex-direction: column-reverse;
  }
  .card-section img, .card-section2 img {
    width: 95%;
  }
  .card-left {
    width: 95%;
  }
  .mini-wrapper {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .URL-content {
    flex-direction: column;
    width: 100%;
  }
  footer {
    height: 60px;
  }
  footer, .footer-third {
    flex-direction: row;
  }
  .footer-third a {
    width: 15%;
  }
  .footer-second h3, .footer-second p {
    font-size: 0.5rem;
  }
  .footer-forth {
    bottom: 0.25rem;
    right: 0.25rem;
  }
  .footer-forth p {
    font-size: 0.5rem;
  }
}/*# sourceMappingURL=style.css.map */