@charset "UTF-8";

/* ---------------
共通
 --------------- */
:root {
  --red:#d6006f;
  --lred:#e24d9a;/*下線で使用が多い*/
  --gray: #008cd6;
  --egray: #eee;
  --lgray: #f3f3f3;
  --yl: #ffff00;
}

/* CTA
-----------------------------------*/
.cta-com{
  padding: 6rem 1.5rem;
  background: var(--red);
}
.cta-com section{
  max-width: 120rem;
  margin: 0 auto;
}

/* 見出し+テキスト SP --------------------- */
.cta-com-flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cta-com-flex h2{
  padding: 0 10% 2rem;
}
.cta-com-flex h2 img{
  display: block;
  width: 20rem;
  margin: 0 auto;
}
.cta-com-flex div{
  margin: 0;
  padding: 0;
}
.cta-com-flex div p{
  text-align: center;  
  letter-spacing: 0.1em;
}
.cta-com-flex div p:first-child{
  line-height: 2;
  color: var(--yl);
  font-size: 2rem;
  font-weight: bold;
}
.cta-com-flex div p:last-child{
  padding: 3rem 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;  
}

/*ボタンスタイル SP------------------------*/
.cta-com-btn-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.cta-com-btn-wrap p{
  width: auto;
}
.cta-com-btn{  
  display: block;
  margin: 0 0 1rem;
  padding: 2rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.8rem;
  font-weight: bold;
  transition: 0.5s;
}
.btn-bgr,.btn-bgw{
  border-radius: 0.5rem;
}
.btn-bgr{
  border: 3px solid #fff;
  background: #fff url(../img/icon-btn-r.svg) no-repeat 96% center;
  background-size: 3rem;
}
.btn-bgr:hover{
  border: 3px solid #fff;
  color: #fff;
  background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 96% center;
  background-size: 3rem;
}
.btn-bgw{
  border: 3px solid #000;
  color: #fff;
  background: #000 url(../img/icon-btn-w.svg) no-repeat 96% center;
  background-size: 3rem;
}
.btn-bgw:hover{
  border: 3px solid #e74d9d;
  background: #e74d9d url(../img/icon-btn-b.svg) no-repeat 96% center;
  background-size: 3rem;
}

/* テキスト下線
-----------------------------------*/
.ttl-line{
  padding-block-end: 3px;  
  border-bottom: 2px dashed var(--yl); 
}
.ttl-line-cta{
  padding-block-end: 5px;  
  border-bottom: 3px dashed var(--yl); 
}
.ttl-line-upload{
  padding-block-end: 3px;  
  border-bottom: 3px dashed var(--red); 
}
.ttl-line-case{
  padding-block-end: 3px;  
  border-bottom: 2px dashed var(--red); 
}


/*----------------------------------------------------
TB 750- 
----------------------------------------------------*/
@media screen and (min-width:750px) {

  /*ボタンスタイル TB------------------------*/
  .cta-com-btn-wrap{
    flex-direction: row;
    padding: 0 2rem;
  }
  .cta-com-btn-wrap p{
    width: 48%;
  }


}


/*----------------------------------------------------
PC 1000 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

}


/*----------------------------------------------------
PC 1200 
----------------------------------------------------*/
@media screen and (min-width:1200px) {



  /* 下線 1200
  -----------------------------------*/
  .ttl-line-cta{
    padding-block-end: 5px;  
    border-bottom: 5px dashed var(--yl); 
  }

  .ttl-line-upload{
    padding-block-end: 5px;  
    border-bottom: 5px dashed var(--red); 
  }



  /* CTA
  -----------------------------------*/
  .cta-com{
    padding: 6rem 1.5rem;
  }
  /* 見出し+テキスト 1400 --------------------- */
  .cta-com-flex{
    flex-direction: row;
  }
  .cta-com-flex h2{
    padding:0;
  }
  .cta-com-flex h2 img{
    width: 26rem;
    margin: 0;
  }
  .cta-com-flex div{
    padding: 0 0 0 2rem;
  }
  .cta-com-flex div p{
    text-align: left;  
  }
  .cta-com-flex div p:first-child{
    font-size: 3.4rem;
  }
  .cta-com-flex div p:last-child{
    padding: 0;
    font-size: 3.6rem;
  }

  /*ボタンスタイル 1200 ------------------------*/
  .cta-com-btn-wrap{
    padding: 4rem 0 0;
  }
  .cta-com-btn{  
    margin: 0;
    padding: 3rem;
    font-size: 3rem;
  }
  .btn-bgr,.btn-bgw{
    border-radius: 1rem;
  }
  
  .btn-bgr{
    border: 3px solid #fff;
    background: #fff url(../img/icon-btn-r.svg) no-repeat 92% center;
    background-size: 5rem;
  }
  .btn-bgr:hover{
    border: 3px solid #fff;
    color: #fff;
    background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 92% center;
    background-size: 5rem;
  }
  
  .btn-bgw{
    border: 3px solid #000;
    color: #fff;
    background: #000 url(../img/icon-btn-w.svg) no-repeat 92% center;
    background-size: 5rem;
  }
  .btn-bgw:hover{
    border: 3px solid #e74d9d;
    background: #e74d9d url(../img/icon-btn-b.svg) no-repeat 92% center;
    background-size: 5rem;
  }

}