.dp-home-guide-invite{
  max-width:1200px;
  margin:24px auto 18px;
  padding:0 20px;
  box-sizing:border-box;
}

.dp-home-guide-invite__inner{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:28px;
  align-items:center;
  padding:34px 38px;
  border:1px solid #d9e9ce;
  border-radius:24px;
  background:radial-gradient(circle at 92% 15%,rgba(125,189,68,.18),transparent 30%),linear-gradient(135deg,#fbfff6 0%,#f2f8eb 58%,#fff8ef 100%);
  box-shadow:0 18px 46px rgba(37,63,31,.09);
  box-sizing:border-box;
}

.dp-home-guide-invite__inner::before{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-90px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(199,132,89,.12);
  pointer-events:none;
}

.dp-home-guide-invite__copy,
.dp-home-guide-invite__aside{
  position:relative;
  z-index:1;
}

.dp-home-guide-invite__kicker{
  margin:0 0 10px!important;
  color:#b76f4a;
  font-family:'Montserrat',sans-serif;
  font-size:12px!important;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2!important;
  text-transform:uppercase;
}

.dp-home-guide-invite h2{
  max-width:760px;
  margin:0 0 13px;
  color:#203d1c;
  font-family:'Montserrat',sans-serif;
  font-size:34px;
  font-weight:800;
  line-height:1.14;
}

.dp-home-guide-invite__copy>p:not(.dp-home-guide-invite__kicker){
  max-width:760px;
  margin:0;
  color:#51624c;
  font-size:16px;
  line-height:1.65;
}

.dp-home-guide-invite__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(190px,240px));
  gap:12px;
  margin-top:22px;
}

.dp-home-guide-invite__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:14px;
  box-sizing:border-box;
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-decoration:none!important;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.dp-home-guide-invite__button:hover{
  transform:translateY(-1px);
}

.dp-home-guide-invite__button--primary,
.dp-home-guide-invite__button--primary:visited{
  color:#fff!important;
  background:#213f1d;
  box-shadow:0 10px 22px rgba(33,63,29,.22);
}

.dp-home-guide-invite__button--primary:hover{
  color:#fff!important;
  background:#2f5c28;
}

.dp-home-guide-invite__button--secondary,
.dp-home-guide-invite__button--secondary:visited{
  color:#213f1d!important;
  background:#fff;
  border:1px solid #c8dfbd;
  box-shadow:0 8px 18px rgba(37,63,31,.07);
}

.dp-home-guide-invite__button--secondary:hover{
  color:#213f1d!important;
  background:#f8fff3;
}

.dp-home-guide-invite__aside{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
  width:340px;
  max-width:100%;
  min-height:236px;
  margin-left:auto;
}

.dp-home-guide-invite__illust{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:112px;
  padding:18px 14px 16px;
  border:1px solid rgba(125,189,68,.18);
  border-radius:20px;
  background:rgba(255,255,255,.58);
  box-shadow:0 14px 32px rgba(37,63,31,.07);
  color:#213f1d!important;
  text-decoration:none!important;
  box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.dp-home-guide-invite__illust:hover,
.dp-home-guide-invite__illust:focus{
  border-color:rgba(125,189,68,.42);
  box-shadow:0 16px 36px rgba(37,63,31,.11);
  color:#213f1d!important;
  outline:none;
  transform:translateY(-2px);
}

.dp-home-guide-invite__illust b{
  color:#213f1d;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.1;
  text-align:center;
}

.dp-home-guide-invite__illust img{
  width:112px;
  height:76px;
  object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(37,63,31,.12));
  transition:transform .2s ease;
}

.dp-home-guide-invite__illust:hover img{
  transform:translateY(-2px) scale(1.03);
}

.dp-home-guide-invite__illust--tomato{background:linear-gradient(145deg,rgba(249,255,244,.92),rgba(255,247,238,.78));}
.dp-home-guide-invite__illust--cucumber{background:linear-gradient(145deg,rgba(248,255,243,.92),rgba(237,248,227,.78));}
.dp-home-guide-invite__illust--pepper{background:linear-gradient(145deg,rgba(255,250,242,.92),rgba(246,238,224,.78));}
.dp-home-guide-invite__illust--strawberry{background:linear-gradient(145deg,rgba(255,247,247,.92),rgba(246,250,237,.78));}

@media (min-width:768px) and (max-width:1024px){
  .dp-home-guide-invite__inner{
    grid-template-columns:1fr;
    padding:28px;
  }
  .dp-home-guide-invite__aside{display:none;}
  .dp-home-guide-invite h2{font-size:29px;}
}

@media (max-width:767px){
  .dp-home-guide-invite{
    width:auto;
    margin:8px -17px 12px;
    padding:0;
  }
  .dp-home-guide-invite__inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px;
    border-radius:14px;
    background:#f7fcef;
    border-color:#dceccd;
    box-shadow:none;
  }
  .dp-home-guide-invite__inner::before{display:none;}
  .dp-home-guide-invite__copy{display:contents;}
  .dp-home-guide-invite__kicker{
    margin-bottom:5px!important;
    font-size:10px!important;
    letter-spacing:.16em;
  }
  .dp-home-guide-invite h2{
    margin:0 0 6px;
    font-size:18px;
    line-height:1.18;
  }
  .dp-home-guide-invite__copy>p:not(.dp-home-guide-invite__kicker){
    font-size:12.5px;
    line-height:1.4;
  }
  .dp-home-guide-invite__aside{
    order:3;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:1fr;
    gap:6px;
    width:100%;
    min-height:0;
    margin:12px 0;
  }
  .dp-home-guide-invite__illust{
    gap:4px;
    min-width:0;
    min-height:68px;
    padding:7px 3px 6px;
    border-radius:11px;
    box-shadow:none;
  }
  .dp-home-guide-invite__illust b{
    font-size:9px;
    line-height:1.1;
  }
  .dp-home-guide-invite__illust img{
    width:52px;
    height:34px;
    filter:drop-shadow(0 5px 7px rgba(37,63,31,.12));
  }
  .dp-home-guide-invite__actions{
    order:4;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:0;
  }
  .dp-home-guide-invite__button{
    width:100%;
    min-height:40px;
    padding:0 8px;
    border-radius:11px;
    font-size:12.5px;
    line-height:1.2;
  }
}
