/* CTA-006
---------------------------------------------*/
/* common */
.font-oswald {
  font-family: 'Oswald', sans-serif;
}
/* base
-----------------------*/
.cta-006 {
  background-color: #faecc9;
  line-height: 2;
  padding: 0 0 calc(100vw * 50 / var(--lpw));
}
.cta-006.hikkoshi {
  padding: calc(100vw * 60 / var(--lpw)) 0 calc(100vw * 50 / var(--lpw));
}
.cta-006 .container {
  max-width: calc(100vw * (800 / var(--lpw)));
  padding-left: 0;
  padding-right: 0;
}
.cta-006 .cta-body {
  width: calc(100vw * (800 / var(--lpw)));
  padding-left: calc(100vw * (270 / var(--lpw)));
}
.cta-006 .cta-body::before {
  content: '';
  width: calc(100vw * (240 / var(--lpw)));
  height: calc(100vw * (411 / var(--lpw)));
  display: inline-block;
  position: absolute;
  top: calc(100vw * (100 / var(--lpw)));
  left: 0;
  background: center/contain url(../../img/cta/ip/cta-240×411.png) no-repeat;
  /* 1) フォールバック (image-set非対応ブラウザ用) */
  background-image: url("../../img/cta/ip/cta-240×411.png");

  /* 2) Safari用 (-webkit-) */
  background-image: -webkit-image-set(
    url("../../img/cta/ip/cta-240×411.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-240×411.png")  type("image/png") 1x
  );

  /* 3) 標準仕様 */
  background-image: image-set(
    url("../../img/cta/ip/cta-240×411.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-240×411.png")  type("image/png") 1x
  );
}
.cta-006.hikkoshi .cta-body::before {
  content: '';
  width: calc(100vw * (220 / var(--lpw)));
  height: calc(100vw * (377 / var(--lpw)));
  top: calc(100vw * (-7 / var(--lpw)));
  background: center/contain url(../../img/cta/ip/cta-220×377.png) no-repeat;
  /* 1) フォールバック (image-set非対応ブラウザ用) */
  background-image: url("../../img/cta/ip/cta-220×377.png");

  /* 2) Safari用 (-webkit-) */
  background-image: -webkit-image-set(
    url("../../img/cta/ip/cta-220×377.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-220×377.png")  type("image/png") 1x
  );

  /* 3) 標準仕様 */
  background-image: image-set(
    url("../../img/cta/ip/cta-220×377.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-220×377.png")  type("image/png") 1x
  );
}
@media only screen and (min-width: 1281px) {
  .cta-006 {
    padding: 0 0 50px;
  }  
  .cta-006.hikkoshi {
    padding: 60px 0 50px;
  }
  .cta-006 .container {
    max-width: 800px;
  }
  .cta-006 .cta-body {
    width: 800px;
    padding-left: 270px;
  }
  .cta-006 .cta-body::before {
    width: 240px;
    height: 411px;
    top: 100px;
  }
  .cta-006.hikkoshi .cta-body::before {
    width: 220px;
    height: 377px;
    top: -7px;
  }
  .cta-006 .cta-tel-link .number::before {
    width: 43px;
    height: 55px;
    background: center/43px url(./img/cta/cta_icon_tel_red.svg) no-repeat;
    margin-right: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .cta-006 {
    padding: 30px 0 50px;
  }
  .cta-006.hikkoshi {
    margin-top: 0;
    padding: 40px 0 50px;
  }
  .cta-006 .container {
    max-width: 375px;
    padding: 0 10px;
  }
  .cta-006 .container:before {
    content: "";
    width: 200px;
    height: 105px;
    position: absolute;
    top: -131px;
    left: calc(50% - 100px);
    background: center/contain url(../../img/cta/ip/cta_sp.png) no-repeat;
    /* 1) フォールバック (image-set非対応ブラウザ用) */
    background-image: url("../../img/cta/ip/cta_sp.png");
  
    /* 2) Safari用 (-webkit-) */
    background-image: -webkit-image-set(
      url("../../img/cta/ip/cta_sp.webp") type("image/webp") 1x,
      url("../../img/cta/ip/cta_sp.png")  type("image/png") 1x
    );
  
    /* 3) 標準仕様 */
    background-image: image-set(
      url("../../img/cta/ip/cta_sp.webp") type("image/webp") 1x,
      url("../../img/cta/ip/cta_sp.png")  type("image/png") 1x
    );  
  }
  .cta-006.hikkoshi .container:before {
    top: -141px;
  }
  .cta-006 .cta-body {
    width: 100%;
    max-width: 375px;
    padding-left: 0;
  }
  .cta-006 .cta-body::before,
  .cta-006.hikkoshi .cta-body::before {
    content: none;
  }
}
/* title
-----------------------*/
/* affiliate */
.cta-006 .cta-title {
  color: #78410b;
  font-size: clamp( 1px, calc(100vw * 30 / var(--lpw)), 30px );
  text-align: center;
  font-weight: 600;
}
.cta-006 .cta-title .strong-text {
  display: inline-block;
}
.cta-006 .cta-title-img img {
  margin: auto;
}
/* hikkoshi */
.cta-006 .cta-title.hikkoshi {
  color: #78410b;
  font-size: clamp( 1px, calc(100vw * 30 / var(--lpw)), 30px );
  text-align: center;
  font-weight: 600;
}
.cta-006 .cta-title.hikkoshi small {
  display: block;
  font-size: clamp( 1px, calc(100vw * 18 / var(--lpw)), 18px );
  line-height: 1;
}
.cta-006 .cta-title.hikkoshi:before,
.cta-006 .cta-title.hikkoshi:after {
  content: "";
  background-image: url(../../img/cta/cta_title_deco_left.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(100vw * 20 / var(--lpw));
  height: calc(100vw * 80 / var(--lpw));
  position: absolute;
}
.cta-006 .cta-title.hikkoshi:before {
  left: calc(50% - calc(100vw * 205 / var(--lpw)));
  top:calc(100vw * -10 / var(--lpw));
}
.cta-006 .cta-title.hikkoshi:after {
  right: calc(50% - calc(100vw * 205 / var(--lpw)));
  top:calc(100vw * -10 / var(--lpw));
  transform: scale(-1, 1);
}
@media only screen and (min-width: 1281px) {
  .cta-006 .cta-title.hikkoshi:before,
  .cta-006 .cta-title.hikkoshi:after {
    width: 20px;
    height: 80px;
  }
  .cta-006 .cta-title.hikkoshi:before {
    left: calc(50% - 205px);
    top: -10px;
  }
  .cta-006 .cta-title.hikkoshi:after {
    right: calc(50% - 205px);
    top: -10px;
    transform: scale(-1, 1);
  }
}
@media only screen and (max-width: 768px) {
  /* affiliate */
  .cta-006 .cta-title.affiliate {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px; /* 100% */
  }
  .cta-006 .cta-title.affiliate .strong-text {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 100% */
  }
  /* hikkoshi */
  .cta-006 .cta-title.hikkoshi {
    font-size: 23px;
  }
  .cta-006 .cta-title.hikkoshi small {
    display: block;
    font-size: 16px;
    line-height: 1;
  }
  .cta-006 .cta-title.hikkoshi:before,
  .cta-006 .cta-title.hikkoshi:after {
    width: 15px;
    height: 58px;
  }
  .cta-006 .cta-title.hikkoshi:before {
    left: 10px;
    top: -10%;
  }
  .cta-006 .cta-title.hikkoshi:after {
    right: 10px;
    top: -10%;
  }

}
/* dot-text
-----------------------*/
.dot-text {
  display: inline-block;
}
.dot-text span {
  position: relative;
  display: inline-block;
}
.dot-text span::before {
  content: "";
  position: absolute;
  top: calc(100vw * 5 / var(--lpw));     /* ドットを文字の上に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * 5 / var(--lpw));      /* ドットの大きさ */
  height: calc(100vw * 5 / var(--lpw));
  border-radius: 50%;
  background: #78410b; /* ドットの色 */
}
@media only screen and (min-width: 1281px) {
  .dot-text span::before {
    top: 5px;
    width: 5px;
    height: 5px;
  }  
}
@media only screen and (max-width: 768px){
  .dot-text span::before {
    top: -13px;     /* ドットを文字の上に配置 */
    width: 7px;      /* ドットの大きさ */
    height: 7px;
  }  
}
/* tel
-----------------------*/
.cta-006 .cta-tel {
  text-align: center;
  margin-top: calc(100vw * 10 / var(--lpw));
}
.cta-006 .cta-tel-link {
  font-size: clamp( 1px, calc(100vw * 68 / var(--lpw)), 68px );
  font-weight: 600;
  color: #b91b1b;
  line-height: 1;
}
.cta-006 .cta-tel-link .pc {
  font-weight: 700;
  letter-spacing: 1.125px;
}
.cta-006 .cta-tel-link .number::before {
  content: "";
  width: calc(100vw * 45 / var(--lpw));
  height: calc(100vw * 53 / var(--lpw));
  display: inline-block;
  vertical-align: baseline;
  background: center/calc(100vw * 45 / var(--lpw)) url(../../img/cta/cta_icon_tel_red.svg) no-repeat;
  margin-right: calc(100vw * 10 / var(--lpw));
}
.cta-006 .cta-tel-text {
  display: block;
  color: #78410b;
  font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
  font-size: clamp( 1px, calc(100vw * 17 / var(--lpw)), 17px );
  font-weight: 300;
  margin-top: calc(100vw * 10 / var(--lpw));
}
@media only screen and (min-width: 1281px) {
  .cta-006 .cta-tel {
    margin-top: 10px;
  }
  .cta-006 .cta-tel-link .number::before {
    width: 45px;
    height: 53px;
    background: center/45px url(../../img/cta/cta_icon_tel_red.svg) no-repeat;
    margin-right: 15px;
  }
  .cta-006 .cta-tel-text {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .cta-006 .cta-tel-link {
    display: block;
    text-align: center;
    background-color: #c90008;
    color: #fff;
    font-weight: 600;
    padding: 22px 0 16px;
    font-size: 19px;
    border-radius: 8px;
    box-shadow: 0 5px 0 rgba(158,0,0,1);
    margin-top: 15px;
  }
  .cta-006 .cta-tel-icon {
    width: 23px;
    height: 23px;
    margin-right: 10px;
    vertical-align: middle;
    fill: #fff;
    top: -2px;
  }
  .cta-006 .cta-tel-text {
    margin-top: 10px;
    font-size: 12px;
  }
}
/* web
-----------------------*/
.cta-006 .cta-web {
  margin-top: calc(100vw * 30 / var(--lpw));
  padding-top: calc(100vw * 15 / var(--lpw));
}
.cta-006 .cta-web:before {
  content: "";
  width: calc(100vw * 50 / var(--lpw));
  height: 1px;
  background-color: #78410b;
  position: absolute;
  left: calc(50% - calc(100vw * 25 / var(--lpw)));
  top: 0;
}
.cta-006 .cta-web-title {
  font-size: clamp( 1px, calc(100vw * 20 / var(--lpw)), 20px );
  font-weight: 600;
  color: #78410b;
  text-align: center;
}
.cta-006 .cta-web-item {
  display: block;
  text-align: center;
  background-color: #fff;
  color: #78410b;
  font-weight: 600;
  padding: calc(100vw * 20 / var(--lpw)) 0;
  font-size: clamp( 1px, calc(100vw * 24 / var(--lpw)), 24px );
  border-radius: 10px;
  box-shadow: 0 calc(100vw * 10 / var(--lpw)) 0 rgba(204,160,96,1);
  margin-top: calc(100vw * 10 / var(--lpw));
  max-width: calc(100vw * 500 / var(--lpw));
  width: 100%;
  margin-inline: auto;
  z-index: 1;
}
.cta-006 .cta-web-item:active {
  box-shadow: 0 calc(100vw * 5 / var(--lpw)) 0 rgba(204,160,96,0.6);
  top: 5px;
}
.cta-006 .cta-mail-icon {
  display: inline-block;
  width: calc(100vw * 30 / var(--lpw));
  height: calc(100vw * 30 / var(--lpw));
  margin-right: calc(100vw * 10 / var(--lpw));
  vertical-align: middle;
  fill: #916031;
  top: calc(100vw * -3 / var(--lpw));
}
@media only screen and (min-width: 1281px) {
  .cta-006 .cta-web {
    margin-top: 30px;
    padding-top: 15px;
  }
  .cta-006 .cta-web:before {
    width: 50px;
    height: 1px;
    left: calc(50% - 25px);
  }
  .cta-006 .cta-web-item {
    padding: 20px 0;
    box-shadow: 0 10px 0 rgba(204,160,96,1);
    margin-top: 10px;
    max-width: 500px;
  }
  .cta-006 .cta-web-item:active {
    box-shadow: 0 5px 0 rgba(204,160,96,0.6);
  }
  .cta-006 .cta-mail-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    top: -3px;
  }
}
@media only screen and (min-width: 769px){
  .cta-006 .cta-tel-link {
    pointer-events: none;
  }
}
@media only screen and (max-width: 768px) {
  .cta-006 .cta-web {
    margin-top: 30px;
    padding-top: 30px;
  }
  .cta-006 .cta-web:before {
    width: 50px;
    height: 1px;
    left: calc(50% - 25px);
    top: 0;
  }  
  .cta-006 .cta-web-title {
    font-size: 16px;
  }
  .cta-006 .cta-web-item {
    padding: 15px 0;
    border-radius: 8px;
    box-shadow: 0 6px 0 rgba(204,160,96,1);
    font-size: 19px;
    max-width: 375px;
  }
  .cta-006 .cta-mail-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
}
/* title-img（animation）
-----------------------*/
.cta-006 .cta-title:before, .cta-006 .cta-title:after {content: none;}
.cta-006 .cta-title-img img {
  width: calc(100vw * 239 / var(--lpw));
  height: calc(100vw * 99.5 / var(--lpw));
}
@media only screen and (min-width: 1281px) {
  .cta-006 .cta-title-img img {
    width: 239px;
    height: 99.5px;
  }
}
@media only screen and (min-width: 769px){
  .cta-006 .cta-title-img img {
    animation-name: cta-006-bounce-pc;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.6s;
  }
}
@media only screen and (max-width: 768px){
  .cta-006 .cta-title-img {
    margin-bottom: 30px;
  }
  .cta-006 .cta-title-img img {
    width: 160px;
    height: 66.95px;
  }
  .cta-006 .cta-title-img img {
    animation-name: cta-006-bounce-sp;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.6s;
  }
}

@keyframes cta-006-bounce-pc {
  0% {transform: translate(0,-15px);}
  100% {transform: translate(0,-30px);}
}
@keyframes cta-006-bounce-sp {
  0% {transform: translate(0,0);}
  100% {transform: translate(0,-10px);}
}