@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Limelight&display=swap");

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

メインビジュアル

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.mainvisual {
  display: flex;
  place-items: center;
  height: 100dvh;
}

.mainvisual .sitename {
  font-weight: 100;
  font-size: clamp(6rem, 2.5rem + 14vw, 20rem);
  letter-spacing: 8px;
  width: -moz-min-content;
  width: min-content;
  margin-left: auto;
  margin-right: 10%;
  color: #EDC339;
  /* 文字色 */
  -webkit-text-stroke: 3px rgb(0, 0, 0);
}

.mainvisual .mainvisual__img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: -1;
}

.mainvisual .mainvisual__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: top center;
}

/* タブレット */
@media screen and (max-width: 1180px) {
  .mainvisual {
    place-items: flex-end;
  }

  .mainvisual .sitename {
    padding: 20px;
    margin-right: 0;
  }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

更新履歴

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.update {
  height: 140px;
  overflow-y: auto;
  padding-right: 20px;
}

.update__item {
  display: flex;
  gap: 20px;
  padding: 8px 0;
}

.update__item:not(:last-child) {
  border-bottom: 1px solid #01577D;
}

.update__item time {
  padding-top: 4px;
  color: #01577D;
}

/* スマホ */
@media screen and (max-width: 520px) {
  .update__item {
    flex-direction: column;
    gap: 4px;
  }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 ABOUT

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/*－－－－－－－－－－ Profile －－－－－－－－－－*/
.profile__img {
  padding: 0 40px;
}

.profile__img img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  margin: auto;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 CONTACT

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.mailform input,
.mailform textarea {
  width: max(50%, 400px);
}

/* タブレット、スマホ */
@media screen and (max-width: 768px) {

  .mailform input,
  .mailform textarea {
    max-width: 100%;
  }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

GALLERY

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.gallerylist {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0;
}

.gallerylist__item {
  width: calc((100% - 80px) / 5);
  height: auto;
}

@media screen and (max-width: 1180px) {
  .gallerylist__item {
    width: calc((100% - 60px) / 4);
  }
}

@media screen and (max-width: 767px) {
  .gallerylist__item {
    width: calc((100% - 40px) / 3);
  }
}

@media screen and (max-width: 520px) {
  .gallerylist__item {
    width: calc((100% - 20px) / 2);
  }
}

.gallerylist__item a {
  position: relative;
  width: 100%;
  display: block;
}

.gallerylist__item a img {
  position: unset;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}



/* 追加箇所  */
@media screen and (max-width: 768px) {
  .member_name {
    font-size: clamp(6rem, 2.5rem + 14vw, 5rem);
  }
}


/* member毎のCSS */
.eto {
  background-color: #7fff7f
}

.eto_name {
  color: #7fff7f
}

.gomashio {
  background-color: #00ffff;
}

.gomashio_name {
  color: #00ffff;
}

.himari {
  background-color: #fcac17;
}

.himari_name {
  color: #fcac17;
}

.hiro {
  background-color: #BBBCDE;
}

.hiro_name {
  color: #BBBCDE;
}

.marimo {
  background-color: #d4f0d4;
}

.marimo_name {
  color: #d4f0d4;
}

.meji {
  background-color: #ff9999;
}

.meji_name {
  color: #ff9999;
}

.miya {
  background-color: #478384
}

.miya_name {
  color: #478384
}

.mizo {
  background-color: #e6e6fa
}

.mizo_name {
  color: #e6e6fa
}

.negi {
  background-color: #e3f9e3
}

.negi_name {
  color: #e3f9e3
}

.neito {
  background-color: #2F4DB2
}

.neito_name {
  color: #2F4DB2
}

.osushi {
  background-color: #B8C1D1
}

.osushi_name {
  color: #B8C1D1
}

.rizuru {
  background-color: #4A5A8F
}

.rizuru_name {
  color: #4A5A8F
}

.sagami {
  background-color: #89438C
}

.sagami_name {
  color: #89438C
}

.shirokuma {
  background-color: #fafafa
}

.shirokuma_name {
  color: #fafafa
}

.shizuku {
  background-color: #AFEEEE
}

.shizuku_name {
  color: #AFEEEE
}

.syamo {
  background-color: #761013
}

.syamo_name {
  color: #761013
}

.tena {
  background-color: #cccccc
}

.tena_name {
  color: #cccccc
}

.utagawa {
  background-color: #D53211
}

.utagawa_name {
  color: #D53211
}

.wiru {
  background-color: #8a2be2
}

.wiru_name {
  color: #8a2be2
}


/* ロード画面 */
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100lvh;
  z-index: 999;
  background: #d49a9a;
  text-align: center;
  color: #d1c3c3;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 260px;
}

.button-2 {
  font-family: "HGP創英角ﾎﾟｯﾌﾟ体", "Potta One";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #333333;
  border-radius: 25px;
  background-color: #fff;
  color: #ffffff;
  font-size: 1em;
  background: linear-gradient(to right, #e60000, #f39800, #fff100, #009944, #0068b7, #1d2088, #920783, #e60000) 0 / 200%;
  height: 80px;
  animation: 5s button-2 linear infinite;
}

.button-2:hover {
  background-color: #cccccc;
}


@keyframes button-2 {
  100% {
    background-position: 200%;
  }
}

.mainvisual .mainvisual__img .zoumotu img {
  object-fit: scale-down;
}