/*
メディアクエリを使用したレスポンシブデザイン
- PCファーストで設計しているので、部分的に@media (max-width: 500px)などで指定する
*/

.touroku_btn {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: none;
  align-items: flex-start;
  z-index: 2;

  .touroku_btn_img {
    background-color: #fffaf0;
    height: 130px;
    width: 130px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;

    img {
      height: 120px;
      width: 120px;
    }
  }
}

.toutoku_fukidasi {
  position: relative;
  display: inline-block;
  margin: 1.5em 1em 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 15px;
  background-image: url(../images/common/wood_yoko.jpg);
  background-color: #654b30;
  background-blend-mode: multiply;
  color: #ffffff;
  border-radius: 10px;
  width: 120px;

  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border: 8px solid transparent;
    border-left: 10px solid #654b30;
  }
}

/*
    footerの最低限のスタイル
    - フッターの高さは、最小100px
    - フッターの背景色は、白
    - フッターの文字色は、黒
    - 枠線で囲む
    - 非ログイン、ログインでスタイルは共通

    # エリア分け
    - ロゴ＋キャッチフレーズ：logo
    - 新規登録とログインのボタン：button
    - ナビゲーション：nav
    - コピーライト：copy_right

    logo empty
    button empty
    empty nav
    empty copy_right
    */
/*レイアウト*/
.site_global_footer {
  position: relative;
  z-index: 2;
  padding: 3em 2em;
  background-image: url(../images/common/wood_yoko.jpg);
  background-color: #654b30;
  background-blend-mode: multiply;
  background-size: cover;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;

  .footer_inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;

    flex-direction: column;
    gap: 2em;
    align-items: center;

    .left,
    .right {
      display: flex;
      flex-direction: column;
      gap: 1em;
    }

    .logo {
      height: auto;
      display: flex;
      color: #ffffff;

      flex-direction: column;
      align-items: center;
      gap: 0.5em;
      width: 100%;

      .title {
        font-size: 2em;
      }

      .description {
        font-size: 1em;
      }
    }

    .button {
      text-align: center;
      width: 100%;
      a {
        display: inline-block;
        padding: 0.5em 1em;
        border: 1px solid #ffffff;
        border-radius: 5px;
        margin-right: 1em;
        text-decoration: none;
        color: #ffffff;
      }
      a:last-child {
        margin-right: 0;
      }
    }
  }

  .yukemuri_switch {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 100%;
    justify-content: center;

    p {
      font-size: 1em;
      color: #ffffff;
      cursor: pointer;
      border: 1px solid;
      padding: 0.5em 1em;
      border-radius: 5px;

      &:hover {
      }

      &[data-yukemuri="true"] {
        color: #ffffff;
        background-color: #ee3f3f;

        /*にじみを出す*/
        box-shadow: 0px 0px 15px -5px #ee3f3f;
      }

      &[data-yukemuri="false"] {
        color: #ee3f3f;
      }
    }
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    width: 100%;

    justify-content: center;
    margin-bottom: 0;

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      justify-content: center;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        font-size: 1em;
        color: #ffffff;

        a {
          text-decoration: underline;
          color: #ffffff;
        }
      }
    }
  }

  .copy_right {
    color: #ffffff;

    small {
      display: block;
      text-align: center;
      font-size: 0.8em;
    }
  }
}

/*湯気のスタイル
    - 湯気は画面の下から上に上がっていく
    - 湯気はpointer-events:none;でクリックを妨げない
    */
.steam {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  width: 1000px;
  height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation-name: steam;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  bottom: 0;
  mix-blend-mode: screen;
}

/*湯気のアニメーション
    - 湯気は画面の下から上に上がっていく
    - 湯気は画面の上に到達したら消える
    */
@keyframes steam {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh);
    opacity: 0;
  }
}