@charset "UTF-8";

/* 変数定義 */
:root {
  --lp-white-100: #ffffff;
  --lp-base-black: #1d1d1d;
  --lp-cyan: #00a0e9;
  --lp-yellow: #fff100;
  --lp-thumb-bg: #989898;
}

body.special {
  main {
    font-size: clamp(1.4rem, 1.055rem + 0.73vw, 1.6rem);
    overflow: clip;
    color: var(--lp-white-100);
    background: var(--lp-base-black);
    /* ［必須］ヘッダー分の高さを引く */
    @media (max-width: 767px) {
      margin-top: -70px;
    }
    @media screen and (min-width: 768px) {
      margin-top: -90px;
    }
  }

  /*［必須］ LP一覧に戻るセクション用 */
  .btn-to-lp-wrap {
    padding: 4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-to-lp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0rem;
    color: var(--lp-base-black);
    line-height: 4rem;
    border: 1px solid transparent;
    position: relative;
    padding-left: 4rem;
    transition: padding 0.4s ease-in;
    span {
      display: block;
      width: 4rem;
      height: 4rem;
      border: 1px solid #000;
      position: absolute;
      left: 0;
      transition: width 0.4s ease-in;
    }
    span::after {
      content: "";
      display: block;
      color: #1d1d1d;
      line-height: 1;
      width: 10px;
      height: 10px;
      border: 2px solid currentColor;
      border-left: 0;
      border-bottom: 0;
      box-sizing: border-box;
      transform: translateY(-50%) rotate(45deg);
      position: absolute;
      top: 50%;
      right: 40%;
      transition: postion 0.4s ease-in;
    }
    p {
      font-weight: bold;
      text-decoration: none;
      padding: 0 4rem;
      z-index: 10;
      left: auto;
      right: 0;
      transition: postion 0.4s ease-in;
    }
  }
  /* hover時 */
  .btn-to-lp:hover {
    padding-left: 0;
    padding-right: 4rem;
    color: var(--lp-white-100);
    transition: padding 0.4s ease-in;
    span {
      width: 100%;
      background: var(--lp-base-black);
      transition: width 0.4s ease-in;
    }
    span::after {
      color: var(--lp-white-100);
      right: 10%;
      transition: postion 0.4s ease-in;
    }
    p {
      left: 0;
      right: auto;
      transition: postion 0.4s ease-in;
    }
  }
  /* 背景黒用 */
  .bg-black {
    background: var(--lp-base-black);
    .btn-to-lp {
      color: var(--lp-white-100);
      span {
        border-color: var(--lp-white-100);
      }
      span::after {
        border-color: var(--lp-white-100);
      }
    }
    .btn-to-lp:hover {
      color: var(--lp-base-black);
      span {
        background: var(--lp-white-100);
      }
      span::after {
        border-color: var(--lp-base-black);
      }
    }
  }
} /* end of body.special */