@charset "utf-8";
/* =========================
  サブページ ステージ
========================= */
#zone_substage {
  background-image: url("/membership/image/img-substage.jpg")!important;
}
@media screen and (max-width: 768px) {
  #zone_substage {
    background-position: right;
	}
}
.l_btn_dl {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.2em;
  row-gap: 0.2em;
  padding: 1.2em 2.2em;
  border-radius: 10px;
  background-image: linear-gradient(130deg, #f2c27b, #e6a86a);
  color: #4a3a1f;
	font-weight: bold;
  text-decoration: none;
  font-size: clamp(14px, 1.1vw, 18px);
  box-shadow: 0 2px 20px #c48a4a;
  transition:background-image 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	width: 300px;
	margin: 0 auto;
}
/* メインテキスト */
.l_btn_dl .main {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  white-space: nowrap;
}
/* サブテキスト */
.l_btn_dl .sub {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-size: 0.75em;
  opacity: 0.85;
}
/* アイコン */
.l_btn_dl i {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-size: 1.4em;
}
/* hover */
.l_btn_dl:hover {
  background-image: linear-gradient(130deg, #ffd08a, #f2b572);
  transform: translateY(3px);
  box-shadow: 0 3px 20px #c48a4a;
	color: #fff!important;
}
.l_btn_dl:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #c48a4a;
}