@charset "utf-8";

/* フローティングキャンペーンバナー用のCSS */
/* 通常状態 */
.wrapper_floating_campaign_banner {
  position: fixed;
  top: 270px;
  right: calc(50px - 1010px);
  z-index: 10;
  width: 1010px;
  background-color: #fff;
  font-size: 16px;
  border-radius: 10px 0 0 10px;
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
          box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  overflow: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  
  .btn_close {
    width: 72px;
    position: absolute;
    left: -6px;
    top: -5px;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
  }
  .gridbox {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(5,auto);
    grid-template-columns:  50px 260px auto;

    .bnrcatch {
      grid-row: 1/6;
      grid-column: 1/2;
      background-color: #E95A64;
      color: #fff;
      -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
      text-align: center;
      font-weight: bold;
      line-height: 1.0;
      padding-right: calc((50px - 1em)/2);
      cursor: pointer;
      pointer-events: all;
    }
    .bnrtitle {
      grid-row: 1/2;
      grid-column: 2/4;
      background-color: #42210b;
      color: #fff;
      font-size: 1.2em;
      padding: 0.5em;
      text-align: center;
    }
    .eyecatch {
      /* 配信されるバナー画像の縦横比は1:1で固定 */
      grid-row: 2/5;
      grid-column: 2/3;

      & img {
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
    }
    .title {
      grid-row: 2/3;
      grid-column: 3/4;
      color: #42210b;
      font-size: 1.2em;
      padding: 1em 30px;
      line-height: 1.35;
    }
    .body {
      grid-row: 3/4;
      grid-column: 3/4;
      color: #42210b;
      padding: 0 30px;
    }
    .link_contact_detail {
      grid-row: 4/5;
      grid-column: 3/4;
      padding: 1em 30px;
      font-size: 0.8em;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 1em;
      & a {
        position: relative;
        display: inline-block;
        border-radius: 6em;
        background-color: #E95A64;
        color: #fff;
        font-size: 13px;
        padding: 1em 1.5em;
        line-height: 1.0;
        font-weight: bold;
        text-decoration: none;
        
        & img {
          position: relative;
          left: 0;
          width: 15px;
          vertical-align: middle;
          margin-left: 0.5em;
          -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
        }
      }
      & a:hover {
        & img {
          left: 5px;
        }
      }
      .contact {
        & a {
          background-color: #E95A64;
        }
      }
      .detail {
        & a {
          background-color: #5bb331;
        }
      }
    }
    .period_remaining {
      grid-row: 5/6;
      grid-column: 2/4;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 30px;
      color: #E95A64;
      padding: 0.5em 1em;
      font-weight: bold;
      
      .shoulder {
        display: inline-block;
        border: 1px solid #E95A64;
        border-radius: 6em;
        font-size: 0.9em;
        padding: 1px 0.5em;
        margin-right: 0.5em;
      }
      .period {
        & span {
          vertical-align: middle;
        }
      }
      .remaining {
        & span {
          vertical-align: middle;
        }
        .number {
          font-size: 2.0em;
          padding: 0 5px;
        }
      }
    }
  }
  .mobileonly {
    display: none;
  }
}
.wrapper_floating_campaign_banner:hover {
  right: calc(55px - 1010px);
}

@media screen and (max-width: 1010px) {
  .wrapper_floating_campaign_banner {
    width: 760px;
    right: calc(50px - 760px);
  }
}
@media screen and (max-width: 768px) {
  .wrapper_floating_campaign_banner {
    font-size: 15px;
    width: 360px;
    top: auto;
    right: -360px;
    bottom: 150px;
    overflow: visible;
    
    .btn_close {
      left: -20px;
      top: -20px;
    }
    .gridbox {
      grid-template-rows: repeat(6,auto);
      grid-template-columns: 190px 1fr;

      .bnrtitle {
        grid-row: 1/2;
        grid-column: 1/3;
        font-size: 0.8em;
      }
      .eyecatch {
        height: 190px;
        grid-row: 2/4;
        grid-column: 1/2;
        align-self: center;
      }
      .title {
        grid-row: 4/5;
        grid-column: 1/3;
        padding-left: 15px;
        padding-right: 15px;
      }
      .link_contact_detail {
        grid-row: 5/6;
        grid-column: 1/3;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
      .period_remaining {
        grid-row: 2/4;
        grid-column: 2/3;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        color: #fff;
        padding: 0;
        gap: 0;
        font-size: 12px;
        
        .shoulder {
          border: none;
          border-radius: unset;
          font-size: unset;
          padding: 0;
          margin-right: 0;
        }
        .period {
          grid-row: 1/2;
          height: 100%;
          background-color: #e95a64;
          padding: 0.5em;
          display: grid;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          .innerbox {
            .shoulder {
              display: block;
              border-radius: 3px;
              color: #e95a64;
              background-color: #fff;
              padding: 0 2em;
              margin: 0 auto 0.75em;
              width: -webkit-fit-content;
              width: -moz-fit-content;
              width: fit-content;
            }
            .date {
              display: block;
              text-align: right;
              font-size: 13px;
            }
          }
        }
        .remaining {
          grid-row: 2/3;
          height: 100%;
          background-color: #ec828a;
          padding: 0.5em;
          display: grid;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          
          .innerbox {
            display: grid;
            grid-template-columns: 1fr 1fr -webkit-min-content;
            grid-template-columns: 1fr 1fr min-content;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
                    
            & span {
              vertical-align: unset;
            }
            .shoulder {
              grid-row: 1/2;
              grid-column: 1/4;
            }
            .prefix {
              font-size: 1.2em;
              grid-row: 2/3;
              grid-column: 1/2;
              align-self: last baseline;
              justify-self: end;
            }
            .number {
              font-size: 3em;
              grid-row:2/3;
              grid-column: 2/3;
              align-self: last baseline;
              justify-self: center;
              padding: 0 5px;
            }
            .suffix {
              font-size: 1.2em;
              grid-row:2/3;
              grid-column: 3/4;
              -ms-flex-item-align: last baseline;
                  align-self: last baseline;
            }
          }
        }
      }
      .note {
        display: block;
        grid-row: 6/7;
        grid-column: 1/3;
        color: #E95A64;
        font-size: 0.7em;
        text-align: center;
        padding-bottom: 1.5em;
      }
    }
    .mobileonly {
      display: unset;
    }
    .pconly {
      display: none;
    }
  }
}

/* 表示状態 */
.wrapper_floating_campaign_banner.show {
  right: 0;
  .btn_close {
    opacity: 100;
    pointer-events: all;
  }
  .gridbox {
    .bnrcatch {
      pointer-events: none;
    }
  }
}

/* モバイル表示のキャンペーンバナー */
.sp_cam_bnr {
  display: none
}

@media screen and (max-width: 768px) {
  .sp_cam_bnr {
    display: block;
    position: fixed;
    bottom: 40vw;
    right: 5px;
    z-index: 10;
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    pointer-events: all;
  }
  .sp_cam_bnr.hide {
    opacity: 0;
    z-index: -1;
    right: -90px;
    pointer-events: none;
  }
}