@charset "utf-8";

.content-wrap {
  background: url('../images/bg-koku.png');
  background-position: center;
  font-family: 'MS Pゴシック', 'MS ゴシック', Osaka, sans-serif;
}

@media screen and (max-width: 768px) {
  .content-wrap {
    background-size: 65% auto;
    background-position: top;
  }
}

/* ==== Welcome Text ==== */
.welcome-text-wrapper {
  background: linear-gradient(
      to right,
      red 0%,
      red 15%,
      orange 17%,
      yellow 30%,
      yellow 32%,
      lime 45%,
      lime 47%,
      cyan 60%,
      cyan 62%,
      blue 75%,
      blue 77%,
      red 90%,
      red 100%
    )
    0 / 200%;
  animation: bg-position 4s steps(18) infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 60px;
  font-size: 2rem;
  overflow: hidden;
  box-shadow:
    4px 4px 0 #000,
    8px 8px 0 #666;
  padding: 1rem;
  margin: 2rem 0;
  letter-spacing: -1px;
  text-transform: uppercase;
}

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

.welcome-text {
  display: inline-block;
  white-space: nowrap;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #666;
  animation: marquee 20s steps(150, end) infinite;
  margin: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ==== Zabuton Animation ==== */
.oiri {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* スマホ用スタイル */
/* stylelint-disable-next-line */
@media screen and (max-width: 768px) {
  .oiri {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS */
  }
}

.zabuton {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  pointer-events: none;
  transform-origin: center;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes throw-zabuton-from-left-top {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(100vw, 100vh) rotate(var(--rotate, 0deg));
    opacity: 0.9;
  }
}

@keyframes throw-zabuton-from-top {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(var(--rotate, 0deg));
    opacity: 0.9;
  }
}

@keyframes throw-zabuton-from-right-top {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(-100vw, 100vh) rotate(var(--rotate, 0deg));
    opacity: 0.9;
  }
}

.counter-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: var(--page-space-block);
}

.counter img {
  display: inline-block;
  vertical-align: middle;
}

.counter p {
  font-family: var(--mincho);
  font-weight: 700;
}

/* ==== News Box ==== */
.tegalog-box {
  margin-bottom: 1rem;
}

.tegalog {
  border-bottom: 1px solid #ccc;
}

/* ==== Banner ==== */
.banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 650px;
  margin: 1rem auto 0;
  font-size: 0;
}

.banner img {
  margin: 0 2px 2px 0;
}

.site-title {
  font-size: 6rem;
  position: relative;
  font-weight: 700;
  text-shadow:
    1px 1px 0px gray,
    2px 2px 0px gray,
    3px 3px 0px gray,
    4px 4px 0px gray,
    5px 5px 0px gray,
    6px 6px 0px gray,
    7px 7px 0px gray,
    8px 8px 0px gray,
    9px 9px 0px gray,
    10px 10px 0px gray;
  display: inline-block;
  line-height: 1.1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-font-smoothing: none;
  margin-bottom: var(--page-space-block);
}

.site-title::before {
  content: '黒糖丸部屋のほめぱげ';
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background: linear-gradient(
    to right,
    red 0%,
    yellow 15%,
    lime 30%,
    cyan 45%,
    blue 60%,
    magenta 75%,
    red 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  font-weight: inherit;
  display: inline-block;
  white-space: normal;
  line-height: 1.1;
}

.kiriban-form {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 2px dotted #dcb;
  background: #fff;
}

.kiriban-form p {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.kiriban-form form input {
  width: 80%;
  margin-bottom: 0.7rem;
  border: 1px solid;
}

.kiriban-form form textarea {
  border: 1px solid;
}

.kiriban-form button {
  margin-top: 0.7rem;
  padding: 0.4rem 1rem;
}

table.menu-table .menu-ttl {
  letter-spacing: 0.15em;
  font-size: 1.7rem;
}

table.menu-table tbody:nth-child(1) .menu-ttl {
  background-color: #cacaff;
}

table.menu-table tbody:nth-child(2) .menu-ttl {
  background-color: #ffddff;
}

table.menu-table tbody:nth-child(3) .menu-ttl {
  background-color: #caffca;
}

table.menu-table tbody:nth-child(4) .menu-ttl {
  background-color: #caffff;
}

@media screen and (max-width: 768px) {
  table.menu-table th,
  table.menu-table td {
    border: none !important;
    padding: 0;
  }

  table.menu-table .menu-ttl {
    padding: 8px;
  }

  table.menu-table td {
    text-align: center;
  }
}

.about-link {
  margin: 0 auto;
  text-align: center;
  display: block;
}

.intro {
  border-style: ridge;
  border-width: 10px;
  border-color: red blue green yellow;
}

.intro dl {
  width: fit-content;
  margin-left: auto;
}

.intro dl dt {
  text-align: right;
}

@media screen and (max-width: 768px) {
  .intro dl #keika {
    display: block;
  }
}

table.menu-table {
  border: 15px ridge #864a2b;
}

.banner-box {
  text-align: center;
}

.webring {
  margin-top: 1rem;
}

/* 占い */
#desc {
  white-space: pre-line;
  line-height: 1.4;
}

#result {
  font-size: 2.2rem;
  text-align: center;
}

.kimarite {
  color: #ff3399;
  font-weight: bold;
  text-shadow: 1px 1px #000;
}

#uranai-kekka {
  display: none;
  animation: fadeIn 0.4s ease-in;
  background: #fff;
  background-image: repeating-linear-gradient(
    45deg,
    #c49e60 0px,
    #c49e60 5px,
    #a57b42 5px,
    #a57b42 10px
  );
  padding: 10px;
  border-radius: 8px;
  margin: 1rem 0;
}

#uranai-kekka div {
  background: #fff;
  padding: 20px;
  margin: 0 auto 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#uranai-kekka .note {
  margin: 1rem 0;
  color: gray;
  font-size: 0.9em;
}