@charset "UTF-8";

/* 大枠 */
/* ボタン */
.detail-btn-block{
  width: min(100%, 960px);
  margin: auto;
  display: grid;
  gap: 16px 8px;
  grid-template-columns: repeat(2, 1fr);
}

.detail-btn-block--narrow{
  width: min(94%, 760px);
  margin: auto;
  display: grid;
  gap: 16px 8px;
  grid-template-columns: repeat(2, 1fr);
}

.detail-btn-block--narrow-v2{
  width: min(94%, 760px);
  margin: auto;
  display: grid;
  gap: 16px 8px;
  grid-template-columns: repeat(3, 1fr);
}

/* バナー */
.detail-bnr-block--1line{
  width: min(100%, 600px);
  margin-left: auto;
  margin-right: auto;
}


/* テキストリンク */
.detail-btn-block--text{
  width: min(100%, 960px);
  margin: auto;
  display: grid;
  gap: 8px;
}


@media (min-width: 769px) {
  .detail-btn-block,
  .detail-btn-block--narrow{
    gap: 16px;
  }

  .detail-btn-block--text{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ボタン */
a.detail-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #3CB65E;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--pink {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #df5799;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-pink {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ee87b9;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--blue {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #06669a;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #4db0e5;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-blue-v2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #3CBFFE;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--orange {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ff5b00;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ff9257;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-green {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #00b4a2;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

a.detail-btn--light-green-v2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #07CB12;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px ,2.8vw ,16px);
  height: 100%;
  min-height: 40px;
  position: relative;
  line-height: 1.1;
  text-decoration: none;
}

/* ボタン大きさ */
a.detail-btn-size--large{
  font-size: clamp(12px ,3vw ,16px);
  height: 100%;
  min-height: 46px;
  padding: 8px 18px;

}

/* まとめて設定 */
.detail-btn::after,
.detail-btn--pink::after,
.detail-btn--light-pink::after,
.detail-btn--blue::after,
.detail-btn--light-blue::after,
.detail-btn--light-blue-v2::after,
.detail-btn--orange:after,
.detail-btn--light-orange:after,
.detail-btn--light-green:after,
.detail-btn--light-green-v2:after{
  position: absolute;
  content: '';
  right: 12px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* ボタン２列の場合 */
.detail-btn-size--large::after{
  position: absolute;
  content: '';
  right: 10px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}


@media (min-width: 769px) {
  .detail-btn::after,
  .detail-btn--pink::after,
  .detail-btn--light-pink::after,
  .detail-btn--blue::after,
  .detail-btn--light-blue::after,
  .detail-btn--light-blue-v2::after,
  .detail-btn--orange::after,
  .detail-btn--light-orange::after,
  .detail-btn--light-green::after,
  .detail-btn--light-green-v2::after{
    right: 15px;
  }

  /* hover */
  .detail-btn:hover,
  .detail-btn--pink:hover,
  .detail-btn--light-pink:hover,
  .detail-btn--blue:hover,
  .detail-btn--light-blue:hover,
  .detail-btn--light-blue-v2:hover,
  .detail-btn--orange:hover,
  .detail-btn--light-orange:hover,
  .detail-btn--light-green:hover,
  .detail-btn--light-green-v2:hover,
  .detail-bnr-block--1line a img:hover{
    opacity: 0.7;
  }

  /* ボタン大きさ */
  a.detail-btn-size--large{
    min-height: 56px;
  }
}



/* テキストリンク */
a.text-link-arrow{
  position: relative;
  color: #222;
  text-decoration: none;
  display: block;
  border-bottom: 1px dashed #bcbcbc;
  font-size: clamp(12px, 3vw ,16px);
  padding: 4px 4px 4px 20px;
  line-height: 1.2;
}

a.text-link-arrow::before{
  content:"";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY( -50%);
  width: 16px;
  height: 16px;
  background-color: #009141;
  border-radius: 999px;
}

a.text-link-arrow::after{
  content:"";
  display: block;
  position: absolute;
  top: 35%;
  left: 4px;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
}

@media (min-width: 769px) {
  a.text-link-arrow:hover{
    background-color: #feffae;
  }

  a.text-link-arrow::after{
  top: 40%;
}
}