@charset "utf-8";

/* wrapper */
article#main .article-cta__wrapper {
    position: relative;
    background-color: #FFFAF2;
    border-radius: 24px; 
    overflow: hidden; 
}
/* circles */
article#main .article-cta__wrapper::before,
article#main .article-cta__wrapper::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}
/* main circle */
article#main .article-cta__wrapper::before {
    background-color: #FEE780;
    width: 240px;
    height: 240px;
    top: -140px;
    right: -100px;
}
/* opaque circle */
article#main .article-cta__wrapper::after {
    background-color: #F39700;
    opacity: 18%;
    width: 68px;
    height: 68px;
    top: 105px;
    right: -5px;
}

/* content top part */
article#main .article-cta__top {
    position: relative;
    z-index: 2; 
    padding: 48px 32px 32px 32px;
}
article#main .article-cta__title {
    font-size: 1.5rem;
    line-height: 1.5 !important;
    margin-bottom: 24px;
}
article#main .article-cta__desc {
    line-height: 1.85;
    margin-bottom: 0;
}
article#main .text-highlight {
    color: #F07A0D;
    background: linear-gradient(transparent 60%, #FEE780 60%); 
}

/* bottom btns part */
article#main .article-cta__bottom {
    position: relative;
    z-index: 2;
    padding: 24px 32px 32px; 
    display: flex;
    justify-content: center;
    gap: 16px;
}
article#main .article-cta__btn-block {
    flex: 1;
}
article#main .article-cta__btn-label {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ボタン共通設定 */
article#main .article-cta__btn {
  width: 100%;
  padding: 0;
  border: 2px solid #EA5522; 
  overflow: hidden;
}
article#main .article-cta__btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 40px 20px 60px;
  line-height: 1.4;
  text-decoration: none;
  position: relative;
}
article#main .article-cta__btn a::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  transition: border-color 0.15s ease-in-out;
}
article#main .article-cta .cta-icon {
  position: absolute;
  left: 8px; 
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.15s ease-in-out;
}
article#main .article-cta .cta-icon::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 24px auto;
  mask-size: 24px auto;
  transition: background-color 0.15s ease-in-out;
}
article#main .article-cta .cta-icon--serve::before {
  -webkit-mask-image: url(/dcms_media/other/icon-serve-main.svg);
  mask-image: url(/dcms_media/other/icon-serve-main.svg);
}
article#main .article-cta .cta-icon--consult::before {
  -webkit-mask-image: url(/dcms_media/other/icon-consult-white.svg);
  mask-image: url(/dcms_media/other/icon-consult-white.svg);
}

/* button 1 color and hover */
article#main .article-cta__btn--main {background-color: #EA5522;}
article#main .article-cta__btn--main a { color: #FFFFFF; }
article#main .article-cta__btn--main a::after { border-color: #FFFFFF; }
article#main .article-cta__btn--main .cta-icon { background-color: #FFFFFF; } 
article#main .article-cta__btn--main .cta-icon::before { background-color: #EA5522; }

article#main .article-cta__btn--main:hover {
  background-color: #FFFFFF;
}
article#main .article-cta__btn--main:hover a { color: #EA5522; }
article#main .article-cta__btn--main:hover a::after { border-color: #EA5522; }
article#main .article-cta__btn--main:hover .cta-icon { background-color: #EA5522; } 
article#main .article-cta__btn--main:hover .cta-icon::before { background-color: #FFFFFF; }

/* button 2 color and hover */
article#main .article-cta__btn--white {
  background-color: #FFFFFF;
}
article#main .article-cta__btn--white a { color: #6A3906; }
article#main .article-cta__btn--white a::after { border-color: #EA5522; }
article#main .article-cta__btn--white .cta-icon { background-color: #EA5522; } 
article#main .article-cta__btn--white .cta-icon::before { background-color: #FFFFFF; }

article#main .article-cta__btn--white:hover {
  background-color: #EA5522;
}
article#main .article-cta__btn--white:hover a { color: #FFFFFF; }
article#main .article-cta__btn--white:hover a::after { border-color: #FFFFFF; }
article#main .article-cta__btn--white:hover .cta-icon { background-color: #FFFFFF; } 
article#main .article-cta__btn--white:hover .cta-icon::before { background-color: #EA5522; }

/* レスポンシブ対応 (SP時) */
@media (max-width: 767.98px) {
  article#main .article-cta__top {
    padding: 32px 16px 24px;
  }
  article#main .article-cta__bottom {
    flex-direction: column;
    padding: 24px 16px 32px;
    gap: 32px;
  }
}