@charset "UTF-8";

/* ==========================================================================
   btn.css
   ========================================================================== */

/*背景色ありリンクボタン */

.o-c__btn-link {
  text-decoration: none;
  display: inline-block;
  padding: 15px 40px 12px;
  text-align: center;
  position: relative;
  line-height: 1.2;
  border-radius: 50px;
  border: 2px solid var(--rseisan-primary);
  transition: all ease 0.3s;
  color: var(--white);
  white-space: nowrap;
  /*hover処理 */
  &:after {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    transition: all ease .3s;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

/*外部リンクアイコン */

.o-c__btn-link._external {
  &:after {
    display: none;
  }
  .icon_box {
    position: relative;
    display: inline-block;
    width: 100%;
    &:after {
      position: absolute;
      z-index: 1;
      display: block;
      content: "";
      width: 7px;
      height: 7px;
      top: 1px;
      right: -25px;
      margin: auto;
      transition: all ease .3s;
      border-top: 1px solid var(--white);
      border-right: 1px solid var(--white);
    }
    &:before {
      position: absolute;
      z-index: 1;
      display: block;
      content: "";
      background-color: var(--white);
      width: 8px;
      height: 7px;
      top: 50%;
      right: -22px;
      margin: auto;
      transition: all ease .3s;
      transform: translateY(-50%);
    }
  }
}

/*BOX型 */

.o-c__btn-link._box_type {
  padding: 25px 40px 21px;
  border-radius: 10px;
}

/*配色指定 */

.o-c__btn-link._blue {
  background-color: var(--rseisan-primary);
  color: var(--white);
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
      color: var(--rseisan-primary);
    }
  }
}

.o-c__btn-link._white {
  background-color: var(--white);
  color: var(--rseisan-primary);
  border: 2px solid var(--white);
  &:after {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--rseisan-primary);
      color: var(--white);
    }
  }
}

.o-c__btn-link._white._external {
  .icon_box:after {
    border-top: 1px solid var(--rseisan-primary);
    border-right: 1px solid var(--rseisan-primary);
  }
  .icon_box:before {
    background-color: var(--rseisan-primary);
  }
}

.o-c__btn-link._gray {
  background-color: var(--gray-01);
  border: 2px solid var(--gray-01);
  color: var(--white);
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
      color: var(--gray-01);
    }
  }
}

.o-c__btn-link._white_border {
  background-color: var(--white);
  color: var(--rseisan-primary);
  &:after {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--rseisan-primary);
      color: var(--white);
    }
  }
}

.o-c__btn-link._white_border._external {
  .icon_box:after {
    border-top: 1px solid var(--rseisan-primary);
    border-right: 1px solid var(--rseisan-primary);
  }
  .icon_box:before {
    background-color: var(--rseisan-primary);
  }
}

.o-c__btn-link._navi_blue {
  background-color: var(--rseisan-primary);
  color: var(--white);
  padding: 10px 20px 7px 10px;
  font-size: 12px;
  &:after {
    width: 6px;
    height: 6px;
    right: 10px;
  }
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
      color: var(--rseisan-primary);
    }
  }
}

.o-c__btn-link._light_blue {
  background-color: var(--rseisan-bg-sub-03);
  color: var(--white);
  border-radius: 10px;
  border: none;
  color: var(--rseisan-primary);
  &:after {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
  &:hover {
    background-color: var(--rseisan-primary);
    color: var(--white);
  }
  &:hover:after {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

.o-c__btn-link._light_gray {
  background-color: var(--gray-bg-02);
  color: var(--white);
  border-radius: 10px;
  border: none;
  color: var(--rseisan-primary);
  &:after {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
  &:hover {
    background-color: var(--rseisan-primary);
    color: var(--white);
  }
  &:hover:after {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

/*アロー無し */

.o-c__btn-link._noarrow {
  &:after {
    display: none;
  }
}

.o-c__btn-link._blue:hover:after {
  @media screen and (min-width: 769px) {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
}

.o-c__btn-link._white:hover:after {
  @media screen and (min-width: 769px) {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

.o-c__btn-link._white:hover._external {
  .icon_box:after {
    @media screen and (min-width: 769px) {
      border-top: 1px solid var(--white);
      border-right: 1px solid var(--white);
    }
  }
  .icon_box:before {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
    }
  }
}

.o-c__btn-link._gray:hover:after {
  @media screen and (min-width: 769px) {
    border-top: 2px solid var(--gray-01);
    border-right: 2px solid var(--gray-01);
  }
}

.o-c__btn-link._gray:hover._external {
  .icon_box:after {
    @media screen and (min-width: 769px) {
      border-top: 1px solid var(--gray-01);
      border-right: 1px solid var(--gray-01);
    }
  }
  .icon_box:before {
    @media screen and (min-width: 769px) {
      background-color: var(--gray-01);
    }
  }
}

.o-c__btn-link._white_border:hover:after {
  @media screen and (min-width: 769px) {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

.o-c__btn-link._white_border:hover._external {
  .icon_box:after {
    @media screen and (min-width: 769px) {
      border-top: 1px solid var(--white);
      border-right: 1px solid var(--white);
    }
  }
  .icon_box:before {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
    }
  }
}

.o-c__btn-link._navi_blue:hover:after {
  @media screen and (min-width: 769px) {
    border-top: 2px solid var(--rseisan-primary);
    border-right: 2px solid var(--rseisan-primary);
  }
}

.o-c__btn-link._external:hover {
  .icon_box:after {
    @media screen and (min-width: 769px) {
      border-top: 1px solid var(--rseisan-primary);
      border-right: 1px solid var(--rseisan-primary);
    }
  }
  .icon_box:before {
    @media screen and (min-width: 769px) {
      background-color: var(--rseisan-primary);
    }
  }
}

.o-c__btn-link._orange {
  min-width: 130px;
  background-color: var(--rseisan-cta);
  border: 2px solid var(--rseisan-cta);
  &:hover {
    @media screen and (min-width: 769px) {
      background-color: var(--white);
      color: var(--rseisan-cta);
    }
  }
  &:hover:after {
    @media screen and (min-width: 769px) {
      border-top: 2px solid var(--rseisan-cta);
      border-right: 2px solid var(--rseisan-cta);
    }
  }
}

.o-c__btn-link._btn_center {
  margin: 0 auto;
}

/*プライマリーカラーアロー付きテキストリンク */

.o-c__btn-text {
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0 0 0 23px;
  cursor: pointer;
}

.o-c__btn-text_icon_plus {
  display: inline-block;
  text-decoration: none;
  color: var(--rseisan-primary);
  line-height: 1.4;
  &:hover {
    color: var(--rseisan-primary);
  }
}

.o-c__btn-text_icon_plus_bg {
  display: inline-block;
  background-color: var(--rseisan-primary);
  width: 18px;
  height: 18px;
  border-radius: 9px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all ease 0.3s;
  &:before {
    content: "";
    background-color: var(--white);
    width: 8px;
    height: 2px;
    line-height: 0;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
  }
  &:after {
    content: "";
    background-color: var(--white);
    width: 2px;
    height: 8px;
    line-height: 0;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.o-c__btn-text_icon_plus.active .o-c__btn-text_icon_plus_bg:after {
  display: none;
}

.o-c__btn-text_icon_plus:hover .o-c__btn-text_icon_plus_bg {
  @media screen and (min-width: 769px) {
    transform: rotate(90deg);
  }
}

.o-c__btn-text_icon_arrow {
  display: inline-block;
  text-decoration: none;
  color: var(--rseisan-primary);
  line-height: 1.4;
  &:hover {
    color: var(--rseisan-primary);
  }
}

.o-c__btn-text_icon_arrow_bg {
  display: inline-block;
  background-color: var(--rseisan-primary);
  width: 18px;
  height: 18px;
  border-radius: 9px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all ease 0.3s;
  &:after {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    top: 0;
    right: 7px;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    transition: all ease .3s;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

.o-c__btn-text_icon_arrow:hover .o-c__btn-text_icon_arrow_bg {
  @media screen and (min-width: 769px) {
    left: -3px;
  }
}

.o-c__btn-text_icon_window {
  display: inline-block;
  text-decoration: none;
  color: var(--rseisan-primary);
  &:hover {
    color: var(--rseisan-primary);
  }
}

.o-c__btn-text_icon_window_box {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all ease 0.3s;
  &:after {
    position: absolute;
    z-index: 10;
    display: block;
    content: "";
    width: 12px;
    height: 10px;
    top: 2px;
    left: 3px;
    margin: auto;
    transition: all ease .3s;
    border-top: 1px solid var(--rseisan-primary);
    border-right: 1px solid var(--rseisan-primary);
  }
  &:before {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    background-color: var(--rseisan-primary);
    width: 12px;
    height: 10px;
    top: 50%;
    left: 0;
    margin: auto;
    transition: all ease .3s;
    transform: translateY(-40%);
  }
}

.o-c__btn-text_icon_window:hover {
  .o-c__btn-text_icon_window_box:after {
    @media screen and (min-width: 769px) {
      background-color: var(--rseisan-primary);
    }
  }
  .o-c__btn-text_icon_window_box:before {
    @media screen and (min-width: 769px) {
      background-color: var(--rseisan-bg-sub-02);
    }
  }
}

/*ページトップボタン */

.o-c__btn-scltop {
  text-decoration: none;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: rgba(0, 125, 204, 0.8);
  position: fixed;
  z-index: 1000;
  bottom: -60px;
  right: 30px;
  transition: all ease .3s;
  @media screen and (max-width: 768px) {
    right: 10px;
  }
}

.o-c__btn-scltop_inner {
  display: block;
  width: 50px;
  height: 50px;
  position: relative;
  width: 100%;
  &:after {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    bottom: auto;
    margin: auto;
    transform: translateY(-30%) translateX(-50%) rotate(-45deg);
    transition: all ease .3s;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }
}

.o-c__btn-scltop.show_feature_floater {
  bottom: 30px;
  @media screen and (max-width: 768px) {
    bottom: 75px;
    right: 10px;
  }
}