/* CTA-010
---------------------------------------------*/
/* common
-----------------------*/
.font-oswald {
  font-family: Oswald,sans-serif;
}

/* base
-----------------------*/
.cta-010 {
  background-color: #79af9b;
  padding: calc(100vw * 50 / var(--lpw)) 0;
}
.cta-010 .container {
  max-width: calc(100vw * 800 / var(--lpw));
  padding: 0;
}
.cta-010.webonly .container {
  max-width: calc(100vw * 665 / var(--lpw));
}
.cta-010 .cta-body {
  width: 100%;
  max-width: calc(100vw * 800 / var(--lpw));
  padding-left: calc(100vw * 280 / var(--lpw));
}
.cta-010.webonly .cta-body {
  padding-left: calc(100vw * 210 / var(--lpw));
}
.cta-010 .cta-body::before {
  content: '';
  width: calc(100vw * (250 / var(--lpw)));
  height: calc(100vw * (429 / var(--lpw)));
  display: inline-block;
  position: absolute;
  top: calc(100vw * 42 / var(--lpw));
  left: 0;
  background: center/contain url(../../img/cta/ip/cta-250×429.png) no-repeat;
  /* 1) フォールバック (image-set非対応ブラウザ用) */
  background-image: url("../../img/cta/ip/cta-250×429.png");

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

  /* 3) 標準仕様 */
  background-image: image-set(
    url("../../img/cta/ip/cta-250×429.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-250×429.png")  type("image/png") 1x
  );
}
.cta-010.affiliate .cta-body::before {
  top: calc(100vw * (47 / var(--lpw)));
}
.cta-010.webonly .cta-body::before {
  content: '';
  width: calc(100vw * (180 / var(--lpw)));
  height: calc(100vw * (309 / var(--lpw)));
  display: inline-block;
  position: absolute;
  top: calc(100vw * 20 / var(--lpw));
  left: 0;
  background: center/contain url(../../img/cta/ip/cta-180×309.png) no-repeat;
  /* 1) フォールバック (image-set非対応ブラウザ用) */
  background-image: url("../../img/cta/ip/cta-180×309.png");

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

  /* 3) 標準仕様 */
  background-image: image-set(
    url("../../img/cta/ip/cta-180×309.webp") type("image/webp") 1x,
    url("../../img/cta/ip/cta-180×309.png")  type("image/png") 1x
  );
}
@media only screen and (min-width: 1281px) {
  .cta-010 {
    padding: 50px 0;
  }
  .cta-010 .container {
    max-width: 800px;
  }
  .cta-010.webonly .container {
    max-width: 665px;
  }
  .cta-010 .cta-body {
    max-width: 800px;
    padding-left: 280px;
  }
  .cta-010.webonly .cta-body {
    padding-left: 210px;
  }
  .cta-010 .cta-body::before {
    width: 250px;
    height: 429px;
    top: 42px;
  }
  .cta-010.affiliate .cta-body::before {
    top: 47px;
  }  
  .cta-010.webonly .cta-body::before {
    width: 180px;
    height: 309px;
    top: 20px;
  }
}
@media only screen and (max-width: 768px){
  .cta-010 {
    padding: 30px 0 50px;
    padding-left: 0;
    padding-right: 0;
  }
  .cta-010:before {
    content: "";
    width: 200px;
    height: 105px;
    position: absolute;
    top: -101px;
    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-010 .container,
  .cta-010.webonly .container {
    max-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cta-010 .container:before {
    top: -130px;
  }
  .cta-010 .cta-body {
    max-width: 375px;
  }
  .cta-010 .cta-body,
  .cta-010.affiliate .cta-body,
  .cta-010.webonly .cta-body {
    padding: 0;
  }
  .cta-010 .cta-body::before,
  .cta-010.affiliate .cta-body::before,
  .cta-010.webonly .cta-body::before {
    content: none;
  }
}
/* bteam - base
-----------------------*/
.cta-010.bteam .cta-body {
  padding-left: calc(100vw * 280 / var(--lpw));
}
.cta-010.bteam .cta-body::before {
  content: '';
  width: calc(100vw * (220 / var(--lpw)));
  height: calc(100vw * (377 / var(--lpw)));
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  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-010.bteam .cta-body {
    max-width: 800px;
    padding-left: 280px;
  }
  .cta-010.bteam .cta-body::before {
    width: 220px;
    height: 377px;
    top: 0;
  }
}
@media only screen and (max-width: 768px){
  .cta-010.bteam .cta-body {
    padding-left: 0;
  }
  .cta-010.bteam .cta-body::before {
    content: none;
  }
}
/* short - base
-----------------------*/
.cta-010.short {
  padding: calc(100vw * 50 / var(--lpw)) 0 calc(100vw * 37 / var(--lpw));
}
.cta-010.short .container {
  max-width: calc(100vw * 670 / var(--lpw));
}
.cta-010.short .cta-body {
  max-width: calc(100vw * 670 / var(--lpw));
  padding-left: 0;
}
.cta-010.short .cta-body::before {
  content: none;
}
@media only screen and (min-width: 1281px) {
  .cta-010.short {
    padding: 50px 0 37px;
  }
  .cta-010.short .container {
    max-width: 670px;
  }  
  .cta-010.short .cta-body {
    max-width: 670px;
    padding-left: 0;
  }
  .cta-010.short .cta-body::before {
    content: none;
  }
}
@media only screen and (max-width: 768px){
  .cta-010.short {
    padding: 30px 0 40px;
  }
  .cta-010.affiliate.short {
    padding: 30px 0 40px;
  }
  .cta-010.webonly.short {
    padding: 30px 0 20px;
  }
  .cta-010.short:before {
    content: none;
  }
  .cta-010.short .container {
    max-width: 375px;
  }
  .cta-010.short .cta-body {
    max-width: 375px;
    padding-left: 0;
  }
  .cta-010.short .cta-body::before {
    content: none;
  }
}
/* cta-010-b - base
-----------------------*/
.cta-010-b .cta-body {
  padding-left: calc(100vw * 280 / var(--lpw));
}
.cta-010-b .cta-body::before {
  content: '';
  width: calc(100vw * (220 / var(--lpw)));
  height: calc(100vw * (377 / var(--lpw)));
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  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-010-b .cta-body {
    max-width: 800px;
    padding-left: 280px;
  }
  .cta-010-b .cta-body::before {
    width: 220px;
    height: 377px;
    top: 0;
  }
}
@media only screen and (max-width: 768px){
  .cta-010-b .cta-body {
    padding-left: 0;
  }
  .cta-010-b .cta-body::before {
    content: none;
  }
}
/* offer
-----------------------*/
.cta-010 .cta-offer {
  background-color: #fff;
  width: 100%;
  max-width: calc(100vw * 400 / var(--lpw));
  text-align: center;
  border-radius: calc(100vw * 100 / var(--lpw));
  padding: calc(100vw * 15 / var(--lpw)) 0;
  font-size: clamp( 1px, calc(100vw * 20 / var(--lpw)), 20px );
  margin-inline: auto;
  margin-bottom: calc(100vw * 50 / var(--lpw));
  color: #79ae9b;
  font-weight: 600;
}
.cta-010 .cta-offer small {
  display: block;
  font-size: clamp( 1px, calc(100vw * 16 / var(--lpw)), 16px );
}
.cta-010 .cta-offer:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
  bottom: -15px;
  left: calc(50% - 10px);
}
@media only screen and (min-width: 1281px) {
  .cta-010 .cta-offer {
    max-width: 400px;
    border-radius: 100px;
    padding: 15px 0;
    margin-bottom: 50px;
  }
  .cta-010 .cta-offer small {
    font-size: 17px;
  }
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-offer {
    margin-bottom: 40px;
    max-width: 319px;
    font-size: 17px;
  }
  .cta-010 .cta-offer small {
    display: block;
    font-size: 14px;
  }
}
/* outdoor - offer
-----------------------*/
.cta-010 .cta-offer.outdoor {
  max-width: calc(100vw * 340 / var(--lpw));
  padding: calc(100vw * 20 / var(--lpw)) 0;
  color: #dc3839;
}
.cta-010 .cta-offer.outdoor small {
  font-size: clamp( 1px, calc(100vw * 20 / var(--lpw)), 20px );
}
@media only screen and (min-width: 1281px) {
  .cta-010 .cta-offer.outdoor {
    max-width: 340px;
    padding: 20px 0;
  }
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-offer.outdoor {
    max-width: 319px;
  }
  .cta-010 .cta-offer.outdoor small {
    font-size: 17px;
  }
}
/* bteam & short - offer
-----------------------*/
.cta-010.bteam .cta-offer,
.cta-010.short .cta-offer {
  display: none;
}
/* title
-----------------------*/
.cta-010 .cta-title {
  color: #fff;
  font-size: clamp( 1px, calc(100vw * 30 / var(--lpw)), 30px );
  text-align: center;
  font-weight: 600;
}
.cta-010 .cta-title small {
  display: block;
  font-size: clamp( 1px, calc(100vw * 21 / var(--lpw)), 21px );
  line-height: 1;
}
.cta-010 .cta-title:before,
.cta-010 .cta-title:after {
  content: "";
  background-image: url(../../img/cta/cta-title-deco-left_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(100vw * 25 / var(--lpw));
  height: calc(100vw * 80 / var(--lpw));
  position: absolute;
}
.cta-010 .cta-title:before {
  left: calc(50% - calc(100vw * 220 / var(--lpw)));
  top: calc(100vw * -10 / var(--lpw));
}
.cta-010 .cta-title:after {
  right: calc(50% - calc(100vw * 220 / var(--lpw)));
  top: calc(100vw * -10 / var(--lpw));
  transform: scale(-1, 1);
}
@media only screen and (min-width: 1281px) {
  .cta-010 .cta-title:before,
  .cta-010 .cta-title:after {
    width: 25px;
    height: 80px;
  }
  .cta-010 .cta-title:before {
    left: calc(50% - 220px);
    top: -10px;
  }
  .cta-010 .cta-title:after {
    right: calc(50% - 220px);
    top: -10px;
  }
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-title {
    font-size: 23px;
  }
  .cta-010 .cta-title small {
    font-size: 16px;
  }
  .cta-010 .cta-title:before,
  .cta-010 .cta-title:after {
    width: 5%;
    height: 100%;
  }
  .cta-010 .cta-title:before {
    left: 0;
    top: -10%;
  }
  .cta-010 .cta-title:after {
    right: 0;
    top: -10%;
    transform: scale(-1, 1);
  }
  .cta-02 .cta-title:before,
  .cta-02 .cta-title:after {
    width: 10%;
    top: 0;
  }
  .cta-02 .cta-title:before {
    left: 10%;
  }
  .cta-02 .cta-title:after {
    right: 10%;
  }
}
/* bteam - title
-----------------------*/
.cta-010 .cta-title.bteam {
  font-size: clamp( 1px, calc(100vw * 30 / var(--lpw)), 30px );
}
.cta-010 .cta-title.bteam small {
  font-size: clamp( 1px, calc(100vw * 21 / var(--lpw)), 21px );
}
.cta-010 .cta-title.bteam:before,
.cta-010 .cta-title.bteam:after {
  content: none;
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-title.bteam {
    font-size: 20px;
  }
  .cta-010 .cta-title.bteam small {
    font-size: 14px;
  }
}
/* tel
-----------------------*/
.cta-010 .cta-tel {
  text-align: center;
  margin-top: 10px;
}
.cta-010 .cta-tel-link {
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.cta-010 .cta-tel-link .number {
  font-weight: 700;
}
.cta-010 .cta-tel-link .number::before {
  content: "";
  width: calc(100vw * 50 / var(--lpw));
  height: calc(100vw * 50 / var(--lpw));
  display: inline-block;
  vertical-align: baseline;
  background: center/calc(100vw * 50 / var(--lpw)) url(../../img/cta/icon-tel-circle_white.svg) no-repeat;
  margin-right: calc(100vw * 15 / var(--lpw));
}
.cta-010 .cta-tel-text {
  display: block;
  font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
  font-weight: 300;
  margin-top: 10px;
}
@media only screen and (min-width: 1281px) {
  .cta-010 .cta-tel-link .number::before {
    width: 50px;
    height: 50px;
    background: center/50px url(../../img/cta/icon-tel-circle_white.svg) no-repeat;
    margin-right: 15px;
  }
}
@media only screen and (min-width: 769px){
  .cta-tel-link {
    pointer-events: none;
  }
  .cta-02.web-only {
    margin-top: 100px;
  }
  .cta-010 .cta-tel-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }  
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-tel-link {
    display: block;
    text-align: center;
    background-color: #fff;
    color: #79af9b;
    font-weight: 600;
    padding: 20px 0;
    font-size: 19px;
    border-radius: 10px;
    box-shadow: 0 10px 0 rgba(0,0,0,0.2);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .cta-010 .cta-tel {
    margin-top: 30px;
  }
  .cta-010 .cta-tel-text {
    font-size: 14px;
    color: #fff;
  }
  .cta-010 .cta-tel-text small {
    font-size: 14px;
  }
  .cta-010 .cta-tel-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
    fill: #79af9b;
  }
}
/* bteam - tel
-----------------------*/
@media only screen and (max-width: 768px){
  .cta-010.bteam .cta-tel {
    margin-top: 10px;
  }
}
/* short - tel
-----------------------*/
.cta-010.short .cta-tel-text {
  display: none;
}
@media only screen and (max-width: 768px){
  .cta-010.short .cta-tel {
    margin-top: 10px;
  }
}
/* web
-----------------------*/
.cta-010 .cta-web {
  margin-top: calc(100vw * 30 / var(--lpw));
  padding-top: calc(100vw * 15 / var(--lpw));
}
.cta-010.webonly .cta-web {
  margin-top: calc(100vw * 15 / var(--lpw));
  padding-top: calc(100vw * 15 / var(--lpw));
}
.cta-010 .cta-web:before {
  content: "";
  width: calc(100vw * 50 / var(--lpw));
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: calc(50% - calc(100vw * 25 / var(--lpw)));
  top: 0;
}
.cta-010 .cta-web-title {
  font-size: clamp( 1px, calc(100vw * 19.5 / var(--lpw)), 19.5px );
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cta-010 .cta-web-item {
  display: block;
  text-align: center;
  background-color: #fff;
  color: #79af9b;
  font-weight: 600;
  padding: calc(100vw * 20 / var(--lpw)) 0;
  font-size: clamp( 1px, calc(100vw * 22.5 / var(--lpw)), 22.5px );
  border-radius: calc(100vw * 10 / var(--lpw));
  box-shadow: 0 calc(100vw * 10 / var(--lpw)) 0 rgba(0,0,0,0.2);
  margin-top: calc(100vw * 10 / var(--lpw));
  max-width: calc(100vw * 500 / var(--lpw));
  margin-inline: auto;
  z-index: 1;
}
.cta-010 .cta-web-item:active {
  box-shadow: 0 calc(100vw * 5 / var(--lpw)) 0 rgba(0,0,0,0.2);
  top: 5px;
}
.cta-010 .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: #79af9b;
}
@media only screen and (min-width: 1281px) {
  .cta-010 .cta-web {
    margin-top: 30px;
    padding-top: 15px;
  }
  .cta-010.webonly .cta-web {
    margin-top: 15px;
    padding-top: 15px;
  }
  .cta-010 .cta-web:before {
    width: 50px;
    height: 1px;
    left: calc(50% - 25px);
    top: 0;
  }
  .cta-010 .cta-web-item {
    padding: 20px 0;
    border-radius: 10px;
    box-shadow: 0 10px 0 rgba(0,0,0,0.2);
    margin-top: 10px;
    max-width: 500px;
  }
  .cta-010 .cta-web-item:active {
    box-shadow: 0 5px 0 rgba(0,0,0,0.2);
    top: 5px;
  }
  .cta-010 .cta-mail-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
@media only screen and (max-width: 768px){
  .cta-010 .cta-web {
    margin-top: 30px;
    padding-top: 15px;
  }
  .cta-010.webonly .cta-web {
    margin-top: 15px;
    padding-top: 15px;
  }
  .cta-010 .cta-web:before {
    width: 50px;
    height: 1px;
    left: calc(50% - 25px);
    top: 0;
  }
  .cta-010 .cta-web-title {
    font-size: 17px;
  }
  .cta-010 .cta-web-item {
    font-size: 19px;
    padding: 20px 0;
    border-radius: 10px;
    box-shadow: 0 10px 0 rgba(0,0,0,0.2);
    margin-top: 10px;
    max-width: 375px;
  }
  .cta-010 .cta-web-item:active {
    box-shadow: 0 5px 0 rgba(0,0,0,0.2);
    top: 5px;
  }
  .cta-010 .cta-mail-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
    fill: #79af9b;
  }
}
/* short - web
-----------------------*/
.cta-010.short .cta-web {
  display: none;
}