/*more btn icon*/
/*.btn_normal --> base_group.css*/

div.btn_icon_more {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

div.btn_icon_more p {
  margin-left: 32px;
  padding-right: 48px;
  position: relative;
}

div.btn_icon_more p::after {
  display: block;
  position: absolute;
  right: 32px;
  top: calc(50% - 4px);
  right: 0;
  transform: translateY(-50%);
  transform-origin: left;
  width: 32px;
  height: 8px;
  /*background-color: #fff; 各自色指定*/
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}

a:hover div.btn_icon_more p::after {
  transform: translateY(-50%) scaleX(1.4);
}

div.btn_icon_more_s {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

div.btn_icon_more_s p {
  margin-left: 8px;
  padding-right: 36px;
  position: relative;
}

div.btn_icon_more_s p::after {
  display: block;
  position: absolute;
  right: 32px;
  top: calc(50% - 4px);
  right: 0;
  transform: translateY(-50%);
  transform-origin: left;
  width: 28px;
  height: 8px;
  background-color: #fff;
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}

a:hover div.btn_icon_more_s p::after {
  transform: translateY(-50%) scaleX(1.25);
}

div.btn_icon_more p span.num,
div.btn_icon_more_s p span.num {
  font-size: larger;
  font-weight: 400;
}

a:hover div.btn_icon_more p span.num,
a:hover div.btn_icon_more_s p span.num {
  transition-delay: 0.1s;
  /*font-style: oblique;*/
  font-weight: bold;
  letter-spacing: -0.0325rem; /*文字が太くなった分を吸収*/
}

div.btn_icon_more_s span.arrow {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover div.btn_icon_more_s span.arrow {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

div.btn_icon_more_s span.arrow::after {
  display: block;
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  transform: translateY(-50%);
  transform-origin: left;
  width: 24px;
  height: 8px;
  background-color: #fff;
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}

a:hover div.btn_icon_more_s span.arrow::after {
  transform: translateY(-50%) scaleX(1.25);
}

/*extlink btn icon*/
/*.btn_normal --> base_group.css*/

/*div.btn_icon_extlink {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

div.btn_icon_extlink p {
  margin-left: 24px;
  padding-right: 36px;
  position: relative;
}

div.btn_icon_extlink p::before {
  display: block;
  position: absolute;
  content: "";
  top: calc(50% - 8px);
  right: 7px;
  width: 16px;
  height: 12px;
  border-width: 2px;
  border-style: solid;
  border-color: #999; 各自色指定
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
}

div.btn_icon_extlink p::after {
  display: block;
  position: absolute;
  content: "";
  top: calc(50% - 5px);
  right: 10px;
  width: 16px;
  height: 12px;
  border-width: 2px;
  border-style: solid;
  border-color: #999; 各自色指定
  transition: 0.2s;
}

a:hover div.btn_icon_extlink {
  opacity: 0.8;
}

a:hover div.btn_icon_extlink p::before {
  width: 16px;
  height: 12px;
  top: calc(50% - 8px);
  right: 5px;
  opacity: 0.8;
}*/

/*-------------------------------------------------------------------*/

a div.btn_icon_extlink {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.2s ease;
}

a div.btn_icon_extlink p {
  margin-left: 24px;
  padding-right: 36px;
  position: relative;
}

a div.btn_icon_extlink p::before {
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

a div.btn_icon_extlink p::after {
  content: "↗";
  display: block;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  text-decoration: none;
  font-weight: 700;
  color: inherit;
  transition: transform 0.3s ease;
  font-family: "Noto Sans Symbols", "Arial Unicode MS", sans-serif; /*矢印専用*/
}

a:hover div.btn_icon_extlink p::before {
  border: 1px solid inherit;
}

a:hover div.btn_icon_extlink p::after {
  transform: translate(4px, -4px) translateY(-50%);
  /*background-color: #fff;*/
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 39%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%);
}

/*-------------------------------------------------------------------*/

div.btn_icon_extlink_s {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.2s ease;
}

div.btn_icon_extlink_s p {
  margin-left: 8px;
  padding-right: 32px;
  position: relative;
}

a div.btn_icon_extlink_s p::before {
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

a div.btn_icon_extlink_s p::after {
  content: "↗";
  display: block;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  text-decoration: none;
  font-weight: 700;
  color: inherit;
  transition: transform 0.3s ease;
  font-family: "Noto Sans Symbols", "Arial Unicode MS", sans-serif; /*矢印専用*/
}

a:hover div.btn_icon_extlink_s p::before {
  border: 1px solid inherit;
}

a:hover div.btn_icon_extlink_s p::after {
  transform: translate(4px, -4px) translateY(-50%);
  /*background-color: #fff;*/
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 39%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%);
}

/*.btn --> base_group.css*/

/*----------------------------------------monotone*/
.btn_normal,
.btn_normal_s,
.btn_flat {
  background: rgb(64, 64, 64); /*Neutral-700*/
  color: #fff;
}

.btn_normal > div.btn_icon_extlink p::before,
.btn_normal_s > div.btn_icon_extlink_s p::before {
  border-color: #fff !important;
  background: transparent !important;
}

.btn_normal > div.btn_icon_extlink p::after,
.btn_normal_s > div.btn_icon_extlink_s p::after {
  border-color: #fff !important;
  background: transparent !important;
}

a:hover .btn_normal > div.btn_icon_extlink p::after,
a:hover .btn_normal_s > div.btn_icon_extlink_s p::after,
.btn_normal:hover > div.btn_icon_extlink p::after,
.btn_normal_s:hover > div.btn_icon_extlink_s p::after {
  border-color: #fff !important;
  /*background: transparent !important;*/
  background: linear-gradient(45deg, rgba(64, 64, 64, 0) 39%, rgba(64, 64, 64, 1) 40%, rgba(64, 64, 64, 1) 100%) !important;
}

.btn_normal > div.btn_icon_more p::after,
.btn_normal_s > div.btn_icon_more_s p::after {
  background: #fff !important;
}

.btn_circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(64, 64, 64); /*Neutral-700*/
  color: #fff;
}

@media (min-width: 1080px) {
  .btn_circle {
    width: 44px;
    height: 44px;
  }
}

/*----------------------------------------monotone line*/

.btn_normal.line {
  border: 1px solid #404040; /*Neutral-700*/
  padding-top: 14px;
  padding-bottom: 14px;
  background: #fff;
  color: #262626; /*Neutral-800*/
}

.btn_normal_s.line {
  border: 1px solid #555;
  padding-top: 9px;
  padding-bottom: 9px;
  background: #fff;
  color: #555;
}

.btn_normal.line > div.btn_icon_extlink p::before,
.btn_normal_s.line > div.btn_icon_extlink_s p::before {
  border-color: #666 !important;
  background: transparent !important;
}

.btn_normal.line > div.btn_icon_extlink p::after,
.btn_normal_s.line > div.btn_icon_extlink_s p::after {
  border-color: #666 !important;
  background: transparent !important;
}

a:hover .btn_normal.line > div.btn_icon_extlink p::after,
a:hover .btn_normal_s.line > div.btn_icon_extlink_s p::after,
.btn_normal.line:hover > div.btn_icon_extlink p::after,
.btn_normal_s.line:hover > div.btn_icon_extlink_s p::after {
  border-color: #666 !important;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 39%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%) !important;
}

.btn_normal.line > div.btn_icon_more p::after,
.btn_normal_s.line > div.btn_icon_more_s p::after {
  background: #666 !important;
}

/*----------------------------------------color*/

.btn_normal.color,
.btn_normal_s.color,
.btn_circle.color {
  background: #3f5bd9;
  color: #fff;
}

.btn_normal.color > div.btn_icon_extlink p::before,
.btn_normal_s.color > div.btn_icon_extlink_s p::before {
  border-color: #fff !important;
  background: transparent !important;
}

.btn_normal.color > div.btn_icon_extlink p::after,
.btn_normal_s.color > div.btn_icon_extlink_s p::after {
  border-color: #fff !important;
  background: transparent !important;
}

a:hover .btn_normal.color > div.btn_icon_extlink p::after,
a:hover .btn_normal_s.color > div.btn_icon_extlink_s p::after,
.btn_normal.color:hover > div.btn_icon_extlink p::after,
.btn_normal_s.color:hover > div.btn_icon_extlink_s p::after {
  border-color: #fff !important;
  /*background: transparent !important;*/
  background: linear-gradient(45deg, rgba(110, 127, 243, 0) 39%, rgba(63, 91, 217, 1) 40%, rgba(63, 91, 217, 1) 100%) !important;
}

.btn_normal.color > div.btn_icon_more p::after,
.btn_normal_s.color > div.btn_icon_more_s p::after {
  background: #fff !important;
}

.btn_normal.color_line {
  border: 1px solid #5753c9;
  padding-top: 14px;
  padding-bottom: 14px;
  background: #fff;
  color: #5753c9;
}

.btn_normal_s.color_line {
  /*border:1px solid #7088bf;*/
  border: 1px solid #5753c9;
  padding-top: 9px;
  padding-bottom: 9px;
  background: #fff;
  color: #5753c9;
}

.btn_normal.color_line > div.btn_icon_extlink p::before,
.btn_normal_s.color_line > div.btn_icon_extlink_s p::before {
  border-color: #5753c9 !important;
}

.btn_normal.color_line > div.btn_icon_extlink p::after,
.btn_normal_s.color_line > div.btn_icon_extlink_s p::after {
  border-color: #5753c9 !important;
}

a:hover .btn_normal.color_line > div.btn_icon_extlink p::after,
a:hover .btn_normal_s.color_line > div.btn_icon_extlink_s p::after,
.btn_normal.color_line:hover > div.btn_icon_extlink p::after,
.btn_normal_s.color_line:hover > div.btn_icon_extlink_s p::after {
  border-color: #fff !important;
  /*background: transparent !important;*/
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 39%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%) !important;
}

.btn_normal.color_line > div.btn_icon_more p::after,
.btn_normal_s.color_line > div.btn_icon_more_s p::after {
  background: #5753c9 !important;
}

/*btn bg change*/

.btn_bg_flat_a,
.btn_bg_flat_b,
.btn_bg_flat_c,
.btn_bg_flat_d {
  position: relative;
  overflow: hidden;
}

.btn_bg_flat_a::before,
.btn_bg_flat_b::before,
.btn_bg_flat_c::before,
.btn_bg_flat_d::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}

.btn_bg_flat_a:hover::before,
.btn_bg_flat_b:hover::before,
.btn_bg_flat_c:hover::before,
.btn_bg_flat_d:hover::before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
}

a:hover .btn_bg_flat_a::before,
a:hover .btn_bg_flat_b::before,
a:hover .btn_bg_flat_c::before,
a:hover .btn_bg_flat_d::before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
}

.btn_bg_round_a,
.btn_bg_round_b,
.btn_bg_round_c,
.btn_bg_round_d {
  /*丸の基点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
}

.btn_bg_round_a::before,
.btn_bg_round_b::before,
.btn_bg_round_c::before,
.btn_bg_round_d::before {
  content: "";
  position: absolute;
  left: -80px;
  width: 80px;
  height: 80px;
  border-radius: 25px;
  transition: 0.3s ease-out;
  opacity: 0;
}

.btn_bg_round_a:hover::before,
.btn_bg_round_b:hover::before,
.btn_bg_round_c:hover::before,
.btn_bg_round_d:hover::before {
  width: calc(120% + 80px);
  opacity: 1;
}

a:hover .btn_bg_round_a::before,
a:hover .btn_bg_round_b::before,
a:hover .btn_bg_round_c::before,
a:hover .btn_bg_round_d::before {
  width: calc(120% + 80px);
  opacity: 1;
}

.btn_bg_flat_a::before,
.btn_bg_round_a::before {
  /*グレーから黒*/
  background-image: linear-gradient(125deg, #999 0%, #404040 75%, #404040 100%);
}

.btn_bg_flat_b::before,
.btn_bg_round_b::before {
  /*白から*/
  background-image: linear-gradient(125deg, #ccc 0%, #fff 75%, #fff 100%);
}
.btn_bg_flat_c::before,
.btn_bg_round_c::before {
  /*青系*/
  background-image: linear-gradient(135deg, #a1c4fd 0%, #3f5bd9 75%, #3f5bd9 100%);
}

.btn_bg_flat_d::before,
.btn_bg_round_d::before {
  /*3色*/
  background-image: linear-gradient(135deg, #a1c4fd 0%, #fff 25%, #a1c4fd 100%);
}