@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* =======================================================
*
* 	Template Style
*	Edit this section
*
* ======================================================= */

/***********************************/
/*         MainBgContent           */
/***********************************/
.DetailBtnBoxSp {
  padding: 0;
  margin: 50px auto 0 auto;
}

.DetailBtn a {
  z-index: 1000;
  width: 90%;
  margin: 40px auto 30px auto;
  display: block;
  position: relative;
  text-align: center;
  border-radius: 50px;
  border: solid 3px #ffffff;
  /*background-image: conic-gradient(from 20deg, rgba(241, 96, 16, 1) 18deg, rgba(251, 91, 22, 1) 18deg, rgba(255, 97, 30, 1) 68deg, rgba(248, 127, 52, 1) 151deg, rgba(255, 74, 33, 1) 263deg, rgba(251, 108, 9, 1) 295deg 360deg);
	*/
  color: #ab2073;
  /*text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF,  0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
	*/
  /* background: -moz-linear-gradient(65deg, #F13F79, #FFC778);
	background: -webkit-linear-gradient(65deg, #F13F79, #FFC778);
	background: linear-gradient(25deg, #F13F79, #FFC778); */
  background-color: rgba(255, 255, 255, 0.75);
  padding: 15px 5px;
  transition: .3s;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.DetailBtn i {
  font-size: 30px;
}

.DetailBtn a:hover {
  padding: 15px 5px;
  color: #ffffff;
  /* box-shadow: #ffffff 0px 0px 45px inset; */
  background-color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgb(208, 19, 114);
}

.sp_none {
  display: none;
}


@media only screen and (min-width:1025px) {
  .sp_none {
    display: block;
  }

  .ContentBox p {
    font-size: 20px;
    font-weight: 400;
    padding: 30px 0 0 0;
    margin: 0;
  }

  .DetailBtnBox {
    padding: 0;
    margin: 80px auto 0 auto;
  }

  .DetailBtn a {
    z-index: 1000;
    width: 60%;
    margin: 20px auto 30px auto;
    display: block;
    position: relative;
    text-align: center;
    padding: 15px 5px;
    transition: .3s;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
  }

  .DetailBtn i {
    font-size: 30px;
  }

}

/***********************************/
/*  メルマガ配信にお使いいただけます  */
/***********************************/

.MerumagaImgBox {
  width: 80%;
  margin: 0 auto;
}

/***********************************/
/* 全てのデザインバナーを無料プレゼント*/
/***********************************/
.d-inline-block {
  display: inline-block;
}

.mb20 {
  margin-bottom: 20px;
}

.CampaignInnar {
  width: 100%;
  margin: 100px auto 0 auto;
}

.CampaignBox {
  width: 100%;
  background: #FFF;
  margin: 0 0 120px 0;
  position: relative;
  border-radius: 20px 20px 0 20px;
  border: solid 3px #0dbfdf;
}

.CampaignBox h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0;
  padding: 80px 10px 0px 10px;
  text-align: center;
  color: #0d8ce1;
  letter-spacing: .05em;
  word-wrap: break-word;
  border-spacing: 0;
  border-radius: 20px 20px 0 0;
}

.CampaignBox img {
  width: 100%;
  padding: 15px 15px 15px 15px;
}

.CampaignBox p {
  padding: 33px 15px 40px 15px;
  text-align: left;
  margin: 0;
}

.NumberIcon {
  position: absolute;
  display: flex;
  width: 100px;
  height: 100px;
  top: -50px;
  background-image: conic-gradient(from 20deg, rgba(197, 233, 254, 1) 3deg, rgba(244, 235, 121, 1) 72deg, rgba(194, 202, 241, 1) 172deg, rgb(110, 43, 255) 233deg, rgb(244, 235, 121) 299deg, rgba(194, 202, 241, 1) 360deg);
  border-radius: 100px;
  border: solid 3px #0dbfdf;
  left: 0;
  right: 0;
  margin: auto;
  align-items: center;
  justify-content: center;
}


.NumberIcon p {
  font-size: 50px;
  color: #FFF;
}

.CampaignBox p.SeachText {
  color: #0d8ce1;
  text-align: center;
  padding: 0px 0 20px 0;
}

.CampaignBox p i {
  margin-right: 15px;
  font-size: 20px;
}

@media only screen and (min-width:600px) {
  .CampaignInnar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 10px;
    margin: 125px auto 0 auto;
  }

  .CampaignBox {
    width: 30%;
    background: #FFF;
    margin: 0 0 120px 0;
    flex-wrap: wrap;
    position: relative;
    flex-basis: calc(33.3333% - 16px);
  }

  .CampaignBox h3 {
    font-size: 18px;
  }

}


@media only screen and (min-width:1025px) {

  .CampaignBox h3 {
    font-size: 20px;
  }

  .CampaignBox p {
    padding: 40px 15px 40px 15px;
  }

  .CampaignBox p.SeachText {
    padding: 0px 15px 20px 15px;
    margin: 0;
  }

}


.PresentContetsBgBox {
  width: 100%;
  margin: 0 auto;
  background: url(../images/SpPresentContetsBg.png) no-repeat center center;
  background-size: 100%;
  padding: 46px 0;
  text-align: left;
}

.PresentContetsBgBox h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 0 0;
}

.PresentContetsBgBox p {
  font-size: 14px;
  padding: 0 15px;
}

@media only screen and (min-width:600px) {
  .PresentContetsBgBox {
    background-size: 62%;
    padding: 80px 0;
  }

  .PresentContetsBgBox p {
    text-align: center;
  }
}

@media only screen and (min-width:820px) {
  .PresentContetsBgBox {
    padding: 100px 0;
  }
}

@media only screen and (min-width:1024px) {

  .PresentContetsBgBox {
    background: url(../images/PresentContetsBg.png) no-repeat center center;
    background-size: 80%;
    padding: 100px 0;
  }

  .PresentContetsBgBox h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 0 0;
  }

  .PresentContetsBgBox p {
    font-size: 17px;
    text-align: center;
  }

}

@media only screen and (min-width:1025px) {

  .PresentContetsBgBox {
    width: 1100px;
    margin: 0 auto;
    background: url(../images/PresentContetsBg.png) no-repeat center center;
    background-size: 80%;
    padding: 100px 0;
  }

}


/***********************************/
/*  無料トライアルでフッター画像もゲット　*/
/***********************************/
.AccentText {
  font-size: 40px;
  font-weight: bold;
}

@media only screen and (min-width:1025px) {
  .AccentText {
    font-size: 50px;
    font-weight: bold;
  }

}


/***********************************/
/*  　　　  コンタクトフォーム  　　  */
/***********************************/

#ContactWrapper {
  background: #FFF;
  padding: 5em 0;
  margin: 0 auto;
}

.FormBox {
  margin: 40px auto 50px;
}

.FormItem {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  width: 100%;
}

.FormItem:nth-child(5) {
  border-bottom: 1px solid #ddd;
}

.ItemLabel {
  width: 100%;
  margin: 0 0 30px 0;
  text-align: left;
  letter-spacing: 0.05em;
}

.Required {
  border-radius: 6px;
  margin-right: 20px;
  padding: 8px 12px;
  width: 80px;
  text-align: center;
  background: #e74c3c;
  border: solid 2px #e74c3c;
  color: #FFF;
  font-size: 14px;
}

.Any {
  border-radius: 6px;
  margin-right: 20px;
  padding: 8px 12px;
  width: 80px;
  text-align: center;
  background: #FFF;
  border: solid 2px #265796;
  color: #265796;
  font-size: 14px;
}

.ItemInput {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  background: #f5f5f5;
  font-size: 18px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #e74c3c;
}

input[type="tel"]:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #265796;
}

.TextareaItem {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  background: #f5f5f5;
  font-size: 18px;
}

.CheckBox {
  text-align: center;
  margin: 30px auto 45px auto;
  display: block;
}

.CheckBoxInput {
  display: none;
}

.CheckBoxParts {
  padding-left: 40px;
  position: relative;
}

.CheckBoxParts a {
  color: #e74c3c;
  font-weight: normal;
}

.CheckBoxParts a:hover {
  padding-bottom: 1px;
  border-bottom: 1px solid #e74c3c;
}

.CheckBoxParts::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border: 1px solid #e74c3c;
  border-radius: 4px;
}

.CheckBoxInput:checked+.CheckBoxParts::after {
  content: "";
  display: block;
  position: absolute;
  top: -13px;
  left: 11px;
  width: 15px;
  height: 32px;
  transform: rotate(43deg);
  border-bottom: 5px solid #e74c3c;
  border-right: 5px solid #e74c3c;
}

.ErrorMsgBox {
  margin: 0 auto 50px auto;
  text-align: center;
  border-top: solid 2px #e74c3c;
  border-bottom: solid 2px #e74c3c;
  width: 100%;
}

.ErrorMsgBox p {
  color: #e74c3c;
}

.ErrorText {
  color: #e74c3c;
  font-size: 17px;
}

.fa-sad-tear::before,
.fa-thumbs-up::before {
  font-size: 50px;
  line-height: 2em;
}

.SuccessMsgBox {
  margin: 0 auto 50px auto;
  text-align: center;
  border-top: solid 2px #008ee0;
  border-bottom: solid 2px #008ee0;
  width: 100%;
}

.SuccessMsgBox p {
  color: #008ee0;
}

.ErrorMsgBox p span,
.SuccessMsgBox p span {
  font-size: 18px;
}

.SubmitBtn {
  border-radius: 5px;
  border: solid 2px #265796;
  margin: 0 auto;
  padding: 15px 18px;
  width: 100%;
  font-size: 18px;
  display: block;
  transition: .3s;
  letter-spacing: 0.05em;
  background: #265796;
  color: #FFF;
  outline: none;
}

.SubmitBtn:hover {
  padding: 15px 18px;
  color: #265796;
  box-shadow: #FFF 0 0px 0px 40px inset;
}

.recaptcha-policy {
  margin: 50px 0 80px 0;
}

.recaptcha-policy a {
  color: #e74c3c;
}

.recaptcha-policy a:hover {
  padding-bottom: 1px;
  border-bottom: solid 1px #e74c3c;
}

.FormItem li {
  list-style: none;
}

label~label {
  margin-left: 15px;
}

input[type=radio] {
  margin-right: 8px;
}

/* ラジオボタン */
.RadioBtns {
  width: 100%;
  padding: 0;
}

.RadioBtns p {
  margin: 40px 0 0 0;
  font-size: 14px;
  padding: 0;
}

.RadioBtns input[type=radio] {
  display: none;
}

.RadioBtns label {
  position: relative;
  padding-left: 40px;
}

.RadioBtns input[type=radio]+label::before {
  position: absolute;
  content: '';
  display: block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  left: 0;
  top: 0;
}

.RadioBtns input[type=radio]+label::after {
  position: absolute;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e74c3c;
  left: 4.5px;
  top: 4.5px;
  opacity: 0;
  transition: .3s;
}

.RadioBtns input[type=radio]:checked+label::after {
  opacity: 1;
}


@media only screen and (min-width:600px) {
  .FormBox {
    margin: 40px auto 80px;
  }

  .FormItem {
    padding: 30px 20px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .ItemLabel {
    width: 40%;
    margin: 0;
  }

  .RadioBtns {
    width: 55%;
  }

  .SubmitBtn {
    width: 46%;
  }
}

@media only screen and (min-width:1025px) {
  .FormBox {
    margin: 40px auto 100px;
  }

  .FormItem {
    padding: 30px 60px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .Required {
    padding: 8px;
    width: 80px;
    display: inline-block;
    font-size: 14px;
  }

  .Any {
    padding: 8px;
    width: 80px;
    display: inline-block;
    font-size: 14px;
  }

  .ItemLabel {
    width: 340px;
  }

  .RadioBtns {
    width: 65%;
  }

  .RadioBtns p {
    margin: 30px 20px 0 0;
  }

  .ErrorMsgBox,
  .SuccessMsgBox {
    width: 80%;
  }

  .ErrorText {
    color: #e74c3c;
    font-size: 17px;
  }

  .ErrorMsgBox p span,
  .SuccessMsgBox p span {
    font-size: 24px;
  }

  .SubmitBtn {
    width: 320px;
  }

}


/* プレゼントボタン */
.PresentBtn {
  width: 100%;
  margin: 80px auto 40px auto;
  position: relative;
}


.PresentIcon {
  position: absolute;
  display: flex;
  background-image: linear-gradient(90deg, rgba(144, 140, 222, 1) 28%, rgba(113, 196, 229, 1) 50%, rgba(144, 140, 222, 1) 77%);
  color: #FFF;
  font-weight: 500;
  width: 90%;
  height: 65px;
  top: -55px;
  border-radius: 20px 0 20px 0;
  left: 0;
  right: 0;
  letter-spacing: 1px;
  margin: auto;
  align-items: center;
  justify-content: center;
}


.PresentBtn p.PresentIcon {
  width: 90%;
  font-size: 16px;
  color: #FFF;
  border: solid 3px #8890e4;
  border-radius: 20px 0 20px 0;
}


.PresentBtn a {
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  display: block;
  position: relative;
  background-image: linear-gradient(90deg, rgba(5, 48, 207, 1), rgba(8, 64, 181, 1) 50%, rgba(70, 194, 249, 1));
  text-align: center;
  border-radius: 0 20px 0 20px;
  border: 3px solid #008ee0;
  box-shadow: 0 3px 0 0 #0075b9;
  padding: 30px 10px 15px 10px;
  transition: .3s;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .05em;
  overflow: hidden;
  color: #FFF;
  font-size: 18px;
}

.PresentBtn a:hover {
  padding: 30px 10px;
  background-image: linear-gradient(90deg, rgba(101, 222, 215, 1), rgba(8, 64, 181, 1) 50%, rgba(11, 186, 255, 1));
  -webkit-transform: translateY(10px);
  padding: 30px 10px 15px 10px;
}


.PresentBtn a::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background: #d6d5d8;
  animation: TrialBtn 3s ease-in-out infinite;
}

.EffectSideMoveTrial {
  color: #e74c3c;
  margin-left: 0;
  animation: EffectSideMoveTrial 4s infinite;
}

.EffectSideMoveTrial.Blue {
  color: #265796;
}

.EffectSideMoveTrial.White {
  color: #FFF;
}

.EffectSwing.fa-cloud-download-alt::before {
  font-size: 36px;
  position: absolute;
  top: -38px;
  right: -20px;
  color: #FFF;
}

.fa-gift {
  padding-right: 20px;
}

.fa-gift::before {
  font-size: 28px;
  position: absolute;
  top: 18px;
  left: 40px;
}

.fa-arrow-circle-down::before {
  font-size: 18px;
  position: absolute;
  top: 22px;
  right: 25px;
}

/* メールアイコンアニメーション */
.EffectSwing {
  color: #FFF;
  animation-name: EffectSwing;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

.fa-chevron-right:before {
  margin-left: 8px;
}

.EffectSideMoveTrial.Right {
  margin-left: 8px;
}

.EffectSideMove {
  color: #FFF;
  margin-left: 30px;
  animation: EffectSideMove 4s infinite;
}

.EffectSideMove.Right {
  margin-left: 10px;
}

.bnr_box {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.bnr_box a:hover picture {
  opacity: 0.7;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}


@keyframes EffectSideMoveTrial {
  0% {
    transform: translateX(0px);
  }

  25% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(0px);
  }
}

@-webkit-keyframes EffectSwing {
  0% {
    -webkit-transform: rotate(0deg);
  }

  55% {
    -webkit-transform: rotate(0deg);
  }

  60% {
    -webkit-transform: rotate(-10deg);
  }

  65% {
    -webkit-transform: rotate(8deg);
  }

  70% {
    -webkit-transform: rotate(-5deg);
  }

  75% {
    -webkit-transform: rotate(4deg);
  }

  80% {
    -webkit-transform: rotate(-3deg);
  }

  85% {
    -webkit-transform: rotate(2deg);
  }

  90% {
    -webkit-transform: rotate(-1deg);
  }

  95% {
    -webkit-transform: rotate(1deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes EffectSideMove {
  0% {
    transform: translateX(0px);
  }

  25% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0px);
  }
}

@media only screen and (min-width:600px) {
  .PresentBtn {
    width: 80%;
    margin: 100px auto 80px auto;
  }

  .PresentBtn a {
    font-size: 28px;
    padding: 30px 10px 30px 50px;
  }

  .PresentBtn a:hover {
    padding: 30px 10px 30px 50px;
  }

  .PresentBtn p.PresentIcon {
    width: 65%;
    font-size: 18px;
  }

  /* メールアイコンアニメーション */
  .EffectSwing.fa-cloud-download-alt::before {
    top: -30px;
    right: 15px;
  }

  .fa-gift::before {
    font-size: 28px;
    top: 13px;
    left: 35px;
  }

  .fa-arrow-circle-down::before {
    font-size: 22px;
    top: 19px;
    right: 42px;
  }

  .bnr_box {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
  }

}


@media only screen and (min-width:1025px) {


  .fa-gift {
    padding-right: 0;
  }

  .PresentBtn {
    width: 680px;
    margin: 130px auto 60px auto;
  }

  .PresentIcon {
    width: 500px;
    height: 90px;
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  .PresentBtn p.PresentIcon {
    font-size: 24px;
  }

  .PresentBtn a {
    z-index: 0;
    margin: 0 auto;
    display: block;
    padding: 30px 10px;
    transition: .3s;
    text-decoration: none;
    font-size: 28px;
    padding-left: 90px;
  }

  .PresentBtn a:hover {
    padding: 30px 10px;
    color: #fff;
    padding-left: 90px;
  }

  /* メールアイコンアニメーション */
  .EffectSwing.fa-cloud-download-alt::before {
    font-size: 38px;
    top: -30px;
    right: 3px;
    color: #FFF;
    margin-right: 20px;
  }

  .fa-gift::before {
    font-size: 30px;
    top: 17px;
    left: 50px
  }

  .fa-arrow-circle-down::before {
    font-size: 25px;
    top: 30px;
    right: 42px;
  }

}