/*common*/
.mv-bg{
  position: relative;
  margin-bottom: 55px;
  padding-top: 42px;
  background-image: -moz-linear-gradient( 90deg, rgb(191,225,243) 0%, rgb(229,243,250) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(191,225,243) 0%, rgb(229,243,250) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(191,225,243) 0%, rgb(229,243,250) 100%);
  width: 100%;
  z-index: 1;
  overflow: hidden;
}

.mv-bg::before{
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  background-color: #ffffff;
  opacity: .3;
  transform: skewX(-45deg);
}

.mv-bg.mv-bg-color-01{
  background-image: -moz-linear-gradient( 90deg, rgb(213,235,193) 0%, rgb(232,250,217) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(213,235,193) 0%, rgb(232,250,217) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(213,235,193) 0%, rgb(232,250,217) 100%);
}

.mv-bg.mv-bg-color-02{
  background-image: -moz-linear-gradient( 90deg, rgb(249,216,218) 0%, rgb(254,243,237) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(249,216,218) 0%, rgb(254,243,237) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(249,216,218) 0%, rgb(254,243,237) 100%);
}

.panel-list{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.panel-list-item{
  margin-right: 30px;
}

.panel-list-item:last-of-type{
  margin-right: 0;
}

@media only screen and (max-width: 640px) {
  .panel-list{
    margin-bottom: 30px;
 }
 .panel-list-item{
    margin-right: 7.5px;
 }
 .panel-list-item:last-of-type{
    margin-right: 0;
 }
}

/*cp-202210*/
.cp-step_item {
  display: flex;
}

.cp-step_num {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  padding: 0;
  width: 100px;
  background: #005bac;
  text-align: center;
}

.cp-step_col {
  flex: 1;
  padding: 20px 0 30px;
  border-bottom: 1px solid rgb(204, 204, 204);
}

.cp-step_item:first-child > .cp-step_col {
  padding-top: 0;
}
.cp-step_item:last-child > .cp-step_col {
  padding-bottom: 0;
  border-bottom: 0;
}

.cp-step_box {
  padding: 20px;
  background-color: rgb(245, 245, 245);
}

.cp-step_inner {
  display: flex;
}

.cp-step_inner._grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cp-step_box-wrap + .cp-step_box-wrap {
  margin-left: 20px;
}

.cp-step_inner._grid .cp-step_box-wrap + .cp-step_box-wrap {
  margin-left: 0;
}

.cp-step_box-def{
  position: relative;
  font-size: 18px;
  font-weight: bold;
}

.cp-step_box-def::before, .cp-step_box-def::after{
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 8px;
  height: 2px;
  background-color: #333333;
}

.cp-step_box-def::before{
  margin-left: -14px;
}

.cp-step_box-def::after{
  margin-left: 6px;
}

.cp-step_num::before, .cp-step_num::after{
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  width: 100px;
  height: 30px;
}

.cp-step_num::before{
  background-color: #005bac;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 2;
}

.cp-step_item:last-child > .cp-step_num::before{
  clip-path: none;
}

.cp-step_item:last-child > .cp-step_num::after{
  clip-path: none;
}

.cp-step_num::after{
  background-color: #ffffff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform: translateY(2px);
  z-index: 1;
}

.bar-text{
  padding-top: 22px;
  font-size: 22px;
  color: #ffffff;
}

@media only screen and (max-width: 640px) {
  .cp-step_num {
    margin-right: 5px;
    width: 46px;
  }

  .cp-step_inner,
  .cp-step_inner._grid {
    display: block;
  }

  .cp-step_box-wrap + .cp-step_box-wrap {
    margin-left: 0;
    margin-top: 34px;
  }

  .cp-step_box.target {
    height: auto !important;
  }

  .cp-step_num::before, .cp-step_num::after{
    width: 46px;
    height: 15px;
  }

  .bar-text{
    font-size: 14px;
  }

  .bar-text-br{
    display: block;
  }
}

.cp-hdg{
  position: relative;
  padding-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #005bac;
}

.cp-hdg::before{
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  border: 1px solid #005bac;
  background-color: #005bac;
}

.cp-text{
  margin-bottom: 19px;
}

.cp-content-inner-wrap{
  display: flex;
  justify-content: center;
  padding-top: 36px;
}

.cp-step_box .ge-btn{
  min-width: max-content;
}

.ge-btn.arrow-btm::before{
  position: absolute;
  right: 15px;
  transform: rotate(45deg) translateY(-50%);
}

@media only screen and (max-width: 640px) {
  .cp-content-wrap{
    display: inline-block;
  }

  .cp-box-wrap{
    padding-top: 24px;
  }

  .cp-box-wrap.step-box1{
    margin-bottom: 15px;
  }

  .cp-box-wrap.step-box1::before{
    bottom: -15px;
  }
  
  .cp-hdg{
    font-size: 16px;
  }

  .cp-content-inner-wrap{
    display: block;
    padding-top: 19px;
  }

  .cp-box-wrap.step-box2{
    margin-right: 0;
    margin-bottom: 34px;
  }
}

/*form*/
.form-box{
  display: flex;
  justify-content: center;
}

.form-box-inner{
  padding: 30px 0;
}

.mktoButtonRow {
  display: flex !important;
  justify-content: center !important;
}

.mktoButtonWrap {
  background: none !important;
  /* padding: 0 !important; */
  box-shadow: none !important;
}

.mktoButton {
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  min-width: 370px !important;
  background: #ffa10a !important;
  font: 1.6rem/1 "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all .1s ease-out !important;
  align-items: center !important;
  border: none !important;
  border-radius: 30px !important;
  margin: 0 auto !important;
}

.mktoButtonWrap.mktoBluePill {
  margin-left: 0 !important;
}

@media screen and (max-width: 640px){
  .mktoButton{
    min-width: 305px !important;
  }
}

.mktoButton:hover{
  background: #ff8d12 !important;
  color: #ffffff !important;
}

@media only screen and (max-width: 480px) {
  .mktoForm,
  .mktoForm * {
    padding: 0 !important;
  }
}


/*index*/
.mv-ldg{
  margin-bottom: 39px;
  font-size: 47px;
  font-weight: bold;
  color: rgb(51, 51, 51);
  text-align: center;
  letter-spacing: 0.05em;
}

.text-b{
  position: relative;
  padding-bottom: 10px;
  color: #005bac;
}

.text-b::after{
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  border: 1px solid #005bac;
  background-color: #005bac;
}

.mv-content{
  display: flex;
  justify-content: center;
  padding: 0 10px;
}

.mv-img-01{
  display: flex;
  align-items: flex-end;
}

.mv-inner-content{
  margin-top: calc(52px - 39px);
  margin-left: 40px;
  margin-bottom: 40px;
  padding: 21px 42px 20px 40px;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 20px 0px rgba(0, 134, 205, 0.2);
}

.mv-text{
  position: relative;
  font-size: 18px;
  font-weight: bold;
  color: #005bac;
  text-align: center;
}

.mv-text::before{
  position: absolute;
  display: inline-block;
  content: "";
  top: 0;
  bottom: 0;
  margin: auto 0;
  margin-left: -18px;
  width: 2px;
  height: 24px;
  background-color: #005bac;
  transform: rotate(-29deg) translate(5px, 2px);
}

.mv-text::after{
  position: absolute;
  display: inline-block;
  content: "";
  top: 0;
  bottom: 0;
  margin: auto 0;
  margin-left: 8px;
  width: 2px;
  height: 24px;
  background-color: #005bac;
  transform: rotate(29deg);
}

.mv-img-02{
  margin-bottom: 21px;
}

@media screen and (max-width: 767px){
  .mv-ldg{
    font-size: 30px;
  }

  .sp-word-break{
    display: block;
  }

  .text-b{
    padding-bottom: 6px;
  }

  .mv-content{
    display: block;
  }

  .mv-img-01{
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }

  .mv-inner-content{
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 20px;
    padding: 20px 15px;
    }

    .mv-text{
      font-size: 14px;
    }
}

.about-data-content_text{
  display: flex;
  justify-content: center;
}

.ge-box._bg-color{
  background: #f3ffeb;
}

.contents {
  margin: 0 !important;
}

.cp-step-box {
  background-color: #faf7f5;
  position: relative;
  margin-bottom: 32px;
}

.cp-step-box_inner {
  padding: 76px 24px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29px;
}

.cp-step-box_col {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  position: relative;
}

.cp-step-box_col-inner {
  padding: 49px 22px 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cp-step-box_num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  padding: 13px 34px;
  background-color: #e7f6ff;
  border: 2px solid #005bac;
  border-radius: 32px;
  color: #005bac;
}

.cp-step-box_title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #005bac;
  text-align: center;
}

.cp-step-box_img {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cp-step-box_ribbon {
  position: absolute;
  top: -27px;
  left: -12px;
}

.cp-step-box_ribbon-inner {
  display: inline-block;
  position: relative;
  padding: 14px 18px 14px 25px;
  font-size: 18px;
  line-height: 1;
  color: #FFF;
  background: #f06575;
}

.cp-step-box_ribbon-inner::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 12px #cc5865;
}

@media screen and (min-width: 768px) and (max-width: 1039px) {
  .cp-step-box_num {
    top: -16px;
    font-size: 1.6rem;
    padding: 9px 10px;
  }
}

@media screen and (max-width: 767px){
  .cp-step-box_inner {
    display: block;
    padding: 57px 18px 16px;
  }

  .cp-step-box_num {
    top: -16px;
    font-size: 1.6rem;
    padding: 9px 24px;
  }

  .cp-step-box_col:not(:first-child) {
    margin-top: 35px;
  }

  .cp-step-box_col-inner {
    padding: 37px 16px 24px;
  }

  .cp-step-box_title {
    font-size: 1.4rem;
  }

  .cp-step-box_img {
    margin-top: 20px;
  }

  .cp-step-box_text {
    margin-top: 20px;
  }
}

.cp-list-notice {
  font-size: 1.4rem;
  padding-bottom: 32px;
  text-align: right;
  padding-right: 24px;
}

@media screen and (max-width: 640px){
  .cp-list-notice {
    font-size: 1.4rem;
    padding-bottom: 24px;
    text-align: left;
    padding-right: 18px;
    padding-left: 18px;
  }
}

.cp-lyt {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

@media screen and (max-width: 640px){
  .cp-lyt {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 767px){
  .acq-media-lyt_item.acq-u-width-48._full-width,
  .acq-media-lyt_content.acq-u-width-48._full-width {
    width: 100% !important;
  }
}

.cp-hdg-l3 {
  margin: 60px 0 20px;
  color: #005bac;
  font-weight: 400;
  position: relative;
}

.cp-hdg-l3_main {
  display: block;
  font-size: 3rem;
}

@media screen and (max-width: 640px){
  .cp-hdg-l3 {
    margin: 40px 0 20px;
    font-size: 2rem;
  }

  .cp-hdg-l3_main {
    font-size: 2rem;
  }
}

.cp-icon {
  position: absolute;
  top: -20px;
  right: -20px;
}

@media screen and (max-width: 640px){
  .cp-icon {
    width: 65px;
    height: 65px;
    right: -10px;
    top: -10px;
  }
}

/*
.cp-startdash-form
 ----------------------------------------------- */
#mktoForm_1324 {
  font-family: var(--acq-font-family) !important;
}

.cp-startdash-form-content #mktoForm_1324 {
  max-width: 879px !important;
}

@media only screen and (max-width: 450px) {
  .mktoHasWidth {
      width: 200px !important;
  }
}

.mktoField.mktoEmailField.mktoHasWidth.mktoRequired {
  width: 300px !important;
}

@media only screen and (max-width: 450px) {
  .mktoField.mktoEmailField.mktoHasWidth.mktoRequired {
      width: 200px !important;
  }
}

#LblEmail,
#Lblform_ACC_CONTRACT_ID {
  width: 200px !important;
  text-align: center;
}

.cp-startdash-form-title {
  text-align: center;
}

.cp-startdash-form-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--acq-color-bg-beige);
  padding: 40px 20px;
}

.mktoFieldWrap .mktoRequiredField {
  text-align: center;
}

.mktoRequiredField strong {
  color: var(--acq-color-font);
}

.mktoFormRow {
  display: flex;
  justify-content: center;
}

.mktoButtonWrap.mktoBluePill {
  margin-left: 0 !important;
}

#mktoForm_1324 .mktoButton {
  --padding: 16px;
  --color-main: var(--acq-color-highlight);
  --color-main-hover: var(--acq-color-highlight-hover);
  --color-sub: var(--acq-color-white);

  position: relative;
  display: inline-block;
  min-width: min(100%, 336px) !important;
  padding: var(--padding) calc(var(--padding) + 24px);
  background-color: var(--color-main) !important;
  border: 1px solid var(--color-main) !important;
  border-radius: var(--acq-rounded-md) !important;
  color: var(--color-sub) !important;
  font-size: var(--acq-font-size-lg) !important;
  font-weight: var(--acq-font-weight-bold) !important;
  text-align: center;
  text-decoration: none;
  transition: all var(--acq-transition-duration) var(--acq-transition-tf);
  height: 59px !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--acq-font-family) !important;
}

#mktoForm_1324 .mktoButton:is(:hover, :active, :focus-visible) {
  --color-main: var(--color-main-hover) !important;

  color: var(--color-sub);
}

#mktoForm_1324 .mktoButton:is(:hover, :active, :focus-visible)::after {
  transform: translateX(4px) !important;
}

#mktoForm_1324 .mktoButton:is(:hover, :active, :focus-visible)::before, #mktoForm_1324 .mktoButton:is(:hover, :active, :focus-visible)::after {
  transform: translateX(4px);
}

.mktoButton::before {
  background-color: var(--color-sub);
  border-radius: 50%;
  display: block;
  content: "";
  position: absolute;
  inset: 0 var(--padding) 0 auto;
  width: 20px;
  height: 20px;
  margin: auto;
  transition: all var(--acq-transition-duration) var(--acq-transition-tf);
}

.mktoButton::after {
  background-color: var(--color-main);
  mask: url("/common_a/img/acquisition/general/mask/angle-right.svg") no-repeat center;
  display: block;
  content: "";
  position: absolute;
  inset: 0 var(--padding) 0 auto;
  width: 20px;
  height: 20px;
  margin: auto;
  transition: all var(--acq-transition-duration) var(--acq-transition-tf);
}


@media only screen and (max-width: 450px) {
  #mktoForm_1324 .mktoButton {
      width: 190px !important;
      font-size: 16px !important;
  }
}

#ValidMsgEmail.mktoErrorMsg,
#ValidMsgform_ACC_CONTRACT_ID.mktoErrorMsg {
  background: var(--acq-color-highlight) !important;
  color: #fff !important;
  padding: 8px;
  border: none;
}

.mktoForm .mktoError .mktoErrorArrow {
  background: var(--acq-color-highlight) !important;
  border: none !important;
}

.mktoError {
  bottom: -45px !important;
}
