@charset "utf-8";
@media (width<768px){
  .formArea{
    padding:30px;
  }
  .commercial{
    dt{
      margin-top:30px;
    }
  }
  .PConly{
    display:none;
  }
  .PCmargin{
    margin-left:10px;
  }
  .steps{
    li{
      font-size:20px;
    }
  }
  .form-area .steps li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -11px;
    z-index:99;
    border-style: solid;
    border-width: 20px 0 20px 10px;
    border-color: transparent transparent transparent #fff;
  }
  .form-area .steps li:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    z-index:100;
    border-style: solid;
    border-width: 20px 0 20px 10px;
    border-color: transparent transparent transparent #68899E;
  }
}
@media (width>=768px){
  .SPonly{
    display:none;
  }
  .formArea{
    padding:50px 100px;
  }
  .commercial{
    display:grid;
    grid-template-columns:1fr 2fr;
  }
  .contentArea{
    p,ul,ol,table{
      margin-left:36px;
    }
  }
  .tablestyle{
    dl{
      display:grid;
      grid-template-columns:1fr 2fr;
    }
  }
  .PCmargin{
    margin-left:50px;
  }
  .steps{
    li{
      font-size: 32px;
    }
  }
  .form-area .steps li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -21px;
    z-index:99;
    border-style: solid;
    border-width: 30px 0 30px 20px;
    border-color: transparent transparent transparent #fff;
  }
  .form-area .steps li:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -20px;
    z-index:100;
    border-style: solid;
    border-width: 30px 0 30px 20px;
    border-color: transparent transparent transparent #68899E;
  }
}
.pageContent {
  width:100%;
  max-width: 1400px;
  margin:200px auto 100px;
  padding:10px;
  .titleArea{
    border-bottom:2px solid #98C1DB;
    padding-bottom:35px;
    margin-bottom:35px;
    .h1Title {
      font-weight:bold;
      font-size:36px;
      margin-left:45px;
      position:relative;
      &::before {
        content:'';
        width:1em;
        height:1em;
        border-radius:0.5em;
        background-color:#064066;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
      }
      &::after{
        content:'';
        width:0.7em;
        height:0.7em;
        border-radius:0.35em;
        border:2px solid #fff;
        background-color:#064066;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
        right:auto;
        margin:auto;
      }
    }
    .h1Sub{
      font-size:20px;
      margin-left:45px;
      color:#064066;
    }
  }
  .contentArea{
    margin-bottom:60px;
    .ppNumTitle{
      font-weight:bold;
      font-size:24px;
      margin-bottom:1rem;
      margin-top:35px;
      padding-top:35px;
      border-top:2px solid #eee;
    }
    .border-none{
      padding-top:0;
      border-top:none;
    }
    .h4Title{
      color:#064066;
      font-size:20px;
      font-weight:bold;
      margin:30px auto 20px 36px;
      &::before{
        content:'▼';
        margin-right:0.5em;
      }
    }
    .osTitle{
      color:#064066;
      font-size:20px;
      line-height:1.8em;
      margin-top:20px;
      &::before{
        content:'＜';
      }
      &::after{
        content:'＞';
      }
    }
    p{
      line-height:1.8em;
      a{
        text-decoration:underline;
        color:#064066;
      }
    }
    .topText{
      margin-left:0;
    }
    .contactText{
      margin-top:1em;
      line-height:1.8em;
      span{
        display:block;
        padding-left:1em;
        color:#064066;
      }
    }
    ul{
      list-style:disc inside;
      margin-bottom:1em;
      li{
        line-height:1.8em;
        &::marker{
          content:normal;
        }
      }
    }
    ol{
      list-style:none;
      counter-reset:number;
      &.noneCircle{
        list-style:decimal inside;
        li{
          color:#064066;
          &::marker{
            content:normal;
          }
          span.text{
            color:#222;
          }
        }
      }
      li{
        margin-bottom:0.5em;
        span:not([class]){
          padding-left:1em;
          a{
            text-decoration:underline;
            color:#064066;
          }
        }
      }
    }
    .contactTable{
      tr{
        th{
          font-weight:normal;
          text-align-last:justify;
          position:relative;
          padding-right:0.5em;
          width:6em;
          &::after{
            content:':';
            position:absolute;
            right:0;
          }
          &:last-of-type{
            width:2em;
          }
        }
      }
    }
    table{
      tr{
        td{
          a{
            color:#888;
            text-decoration:underline;
          }
        }
      }
    }
  }
  .rightSet{
    text-align:right;
    line-height:2em;
  }
  .commercial{
    width:100%;
    max-width:1400px;
    dt,dd{
      padding:20px 10px;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
    }
    dt{
      align-items:center;
      justify-content:center;
      border-bottom:1px solid #064066;
      color:#064066;
    }
    dd{
      align-items:left;
      justify-content:left;
      border-bottom:1px solid #ddd;
      ul{
        list-style:disc inside;
        margin-bottom:1em;
        li{
          line-height:2em;
          &::marker{
            content:normal;
          }
          span{
            display:block;
            padding-left:1.5em;
          }
        }
      }
    }
  }
}
/*Form*/
.formArea{
  background-color:#fff;
  border-radius:25px;
  margin:30px auto;
  width:100%;
  max-width:1400px;
}
.tablestyle{
  list-style:none!important;
  dl{
    margin:30px auto;
    dt{
      span{
        padding:0.1em 0.3em;
          border-radius:5px;
          color:#fff;
          margin-left:2em;
        &.required{
          background-color:#A91018;
        }
        &.notRequired{
          background-color:#888;
        }
      }
    }
    dd{
      .mt-em05{
        margin-left:0;
        color:#A91018;
      }
      #company,#name,#phone,#email,#subject,.select-wrap>select,textarea{
        width:100%;
        border:1px solid #aaa;
        border-radius:5px;
        padding:5px 10px;
      }
      #company,#name,#phone,#email,#subject{
        line-height:2.5em;
      }
      #namewrap{
        display:grid;
        grid-template-columns:calc(50% - 5px) calc(50% - 5px);
        gap:10px;
        input{
          max-width:100%;
          border:1px solid #aaa;
        border-radius:5px;
          padding:5px 10px;
          line-height:2.5em;
        }
      }
    }
  }
}
.agree{
  text-align:center;
}
.btn-wrap{
  list-style:none!important;
  text-align:center;
}
.yugo{
  width:100%;
  max-width:300px;
  margin:30px auto;
  color:#fff;
  background-color:#064066;
  padding:15px 0;
  border-radius:8px;
}


/**/
.form-area .steps {
  overflow: hidden;
  margin-bottom: 60px!important;
  margin-left:auto;
  margin-right:auto;
  list-style:none!important;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
}
.form-area .steps li {
  width: 100%;
  position: relative;
  background: #68899E;
  color: #fff;
  padding: 0 1em 0 30px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
}
.form-area .steps li.end {
  background: #064066;
  color: #fff;
}
.form-area .steps li.end:after {
  border-color: transparent transparent transparent #064066;
}
.form-area .steps li:last-child {
  margin-right: 0;
  padding: 0;
}
.form-area .steps li:last-child:after {
  content: none;
}
.form-area .steps li .num {
  border-right: 1px solid #fff;
  position: absolute;
  left: 0;
  height: 100%;
  width: 60px;
  line-height: 1;
  font-size: 1.4rem;
  padding-top: 10px;
}
.form-area .steps li .num .int {
  display: block;
  font-size: 3.4rem;
}

/*Listing*/
@media (width<768px){
  .listingTitleAb{
    font-size:26px;
  }
  .whiteArea{
    width:calc(100% - 60px);
    padding:30px;
    margin:100px 30px -200px;
    &::before{
      background-size:auto 70%; 
      opacity:0.3;
    }
    .listingSubTitle{
      width:70%;
    }
  }
  .secondInner{
    padding-bottom:50px;
    &::before{
      background-position:center 80%;
      background-size:60%;
  }
  }
  .listingH3Title{
    font-size:24px;
    span{
      font-size:34px;
    }
  }
  .worriesArea{
    margin:30px auto;
    .listingWorries{
      font-size:18px;
      font-weight:bold;
      width:90%;
      min-width:320px;
      padding:10px 10px 10px calc(2.8em + 20px);
      margin:20px auto;
      min-height:calc(2.8em + 20px);
      background-color:#fff;
      border-radius:0px;
      &:last-of-type{
        margin-bottom:200px;
      }
    }
  }
  .listingFlow{
    padding:50px 20px;
  }
  .flow{
    li{
      font-size:20px;
    }
  }
  .flowImg{
    grid-template-rows:1fr 1fr;
    li{
      max-height:90px;
      margin:10px auto;
      img{
        height:100%;
        width:auto;
      }
    }
  }
  .flowDetail{
    li{
      font-size:16px;
    }
  }
  .supportContent{
    div{
      p{
        font-size:24px;
      }
    }
  }
  .reason{
    font-size:30px;
  }
  .reasonList{
    font-size:20px;
  }
  .stepTitle,.differenceTitle,.successTitle{
    font-size:25px;
  }
  .differenceTable{
    thead{
      *{
        font-size:16px;
      }
    }
    tbody{
      >*{
        font-size:14px;
      }
    }
  }
  .successEx{
    >div{
      &::before{
        font-size:32px;
      }
      &::after{
        font-size:120px;
      }
      h4{
        font-size:28px;
      }
    }
  }
  .exData{
    font-size:20px;
  }
  .budgetArea{
    p:not([class]){
      font-size:25px;
    }
  }
  .budgetDetail{
    font-size:20px;
  }
  .whiteBackImage{
    margin:50px auto 10px;
    padding:50px 30px;
  }
  .caution{
    font-size:14px;
  }
  .listingFaq{
    dl{
      font-size:16px;
    }
  }
}

@media (width>=768px){
  .listingTop{
    width:100%;
    padding-bottom:39%;
    background-image:url('../img/image1.jpg');
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    h1{
      position:absolute;
      top:50%;
      width:35%;
      left:10%;
      transform: translate(0, -50%);
    }
  }
  .whiteArea{
    width:100%;
    padding:100px;
    margin:100px auto -200px;
    &::before{
      background-size:auto 90%;
    }
    .listingTitleAb{
      font-size:48px;
    }
    .listingSubTitle{
      width:34%;
      font-size:32px;
    }
    .commentArea{
      width:55%;
    }
  }
  .secondInner{
    padding-bottom:100px;
    &::before{
      background-position:center 60%;
      background-size:30%;
    }
  }
  .listingH3Title{
    font-size:36px;
    span{
      font-size:48px;
    }
  }
  .worriesArea{
    display:grid;
    grid-template-columns:1fr 1fr;
    justify-content:space-between;
    .listingWorries{
      background-color:#fff;
      width:450px;
      line-height:1.4em;
      min-height:calc(2.8em + 40px);
      font-size:24px;
      font-weight:bold;
      margin-top:20px;
      margin-bottom:20px;
      padding:20px 20px 20px calc(2.8em + 40px);
      &:nth-of-type(2n+1){
        margin-left:0;
        margin-right:auto;
      }
      &:nth-of-type(2n){
        margin-right:0;
        margin-left:auto;
      }
      &:nth-of-type(1),&:nth-of-type(5){
        margin-left:30px;
      }
      &:nth-of-type(2),&:nth-of-type(6){
        margin-right:30px;
      }
    }
  }
  .listingFlow{
    padding:100px 50px;
    .we{
      font-size:36px;
    }
  }
  .flow{
    display:grid;
    grid-template-columns:2fr 1fr;
    li{
      font-size:24px;
    }
  }
  .flowImg{
    grid-template-columns:2.289fr 1fr;
    img{
      width:100%;
    }
  }
  .flowDetail{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    li{
      font-size:20px;
    }
  }
  .flowTitle{
    font-size:24px;
  }
  .supportComment{
    font-size:40px;
  }
  .supportContent{
    div{
      p{
        font-size:32px;
      }
    }
  }
  .reason{
    font-size:48px;
  }
  .reasonList{
    font-size:32px;
  }
  .stepTitle,.differenceTitle,.successTitle{
    font-size:36px;
  }
  .differenceTable{
    thead{
      >*{
        font-size:32px;
      }
    }
    tbody{
      >*{
        font-size:24px;
      }
    }
  }
  .successEx{
    >div{
      &::before{
        font-size:52px;
      }
      &::after{
        font-size:172px;
      }
      h4{
        font-size:32px;
      }
    }
  }
  .exData{
    font-size:32px;
  }
  .budgetArea{
    p:not([class]){
      font-size:48px;
    }
  }
  .budgetDetail{
    font-size:24px;
  }
  .whiteBackImage{
    margin:calc(30px + 10em) auto 10px;
    padding:100px 30px;
  }
  .listingFaq{
    dl{
      font-size:20px;
    }
  }
}

.secondArea{
  .whiteArea{
    max-width:1162px;
    border-radius:30px;
    background-color:#fff;
    box-shadow: inset 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
    position:relative;
    z-index:50;
    &::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-image:url('../img/listing_img001.png');
      background-position:85% bottom;
      background-repeat:no-repeat;
    }
    .listingSubTitle{
      text-align:center;
      line-height:2em;
      font-weight:bold;
      color:#fff;
      background-color:#0F75B7;
      border-radius:1em;
      max-width:400px;
      position:absolute;
      top:-1em;
      left:0;
      right:0;
      margin:auto;
    }
    .commentArea{
      .listingTitleAb{
        line-height:1.6em;
        span{
          display:inline-block;
          border-bottom:6px solid #ffbe00;
        }
      }
      p:not([class]){
        font-weight:bold;
        color:#0F75B7;
        line-height:1.8;
      }
    }
  }
  .secondInner{
    position:relative;
    padding-top:300px;
    background-color:#eeeeef;
    background-image:url('../img/listing_bg_img001.png'),url('../img/listing_bg_img002.png'),url('../img/listing_bg_img003.png');
    background-repeat:no-repeat;
    background-size:13%;
    background-position:98% 3%,0 50%,100% 100%;
    &::before{
      content:'';
      position:absolute;
      margin:auto;
      top:0;
      left:0;
      right:0;
      background-color:#D5F4FB;
      width:65%;
      max-width:800px;
      height:100%;
      background-image:url('../img/listing_img002.png');
      background-repeat:no-repeat;
    }
    .listingH3Title{
      text-align:center;
      font-weight:bold;
      position:relative;
      z-index:50;
      span{
        color:#0F75B7;
      }
    }
    .worriesArea{
      position:relative;
      z-index:50;
      width:100%;
      max-width:1400px;
      margin-left:auto;
      margin-right:auto;
      .listingWorries{
        position:relative;
        border-radius:50px;
        display:flex;
        align-items:center;
        justify-content:left;
        &::before{
          content:'';
          width:2em;
          height:2em;
          position:absolute;
          top:50%;
          left:2em;
          transform:translate(-50%, -50%);
          border-radius:50%;
          background-color:#0F75B7;
        }
        &::after{
          content:'';
          display:block;
          width:1em;
          height:0.7em;
          border-bottom:3px solid #fff;
          border-left:3px solid #fff;
          position:absolute;
          top:50%;
          left:2em;
          transform:translate(-50%, -70%) rotate(-45deg);;
        }
      }
    }
  }
    .worriesCaution{
      width:80%;
      max-width:55%;
      margin:30px auto;
      position:relative;
      z-index:50;
    }
}
.listingFlow{
  width:90%;
  max-width:1400px;
  margin:auto;
  background-color:#fff;
  border-radius:25px;
  .we{
    text-align:center;
    line-height:10px 20px;
    color:#fff;
    font-weight:bold;
    margin:auto;
    position:relative;
    span{
      display:block;
      width:6em;
      margin:auto;
      border-radius:30px;
      background-color:#0F75B7;
      position:relative;
      z-index:50;
    }
    &::before{
      content:'';
      width:100%;
      height:2px;
      background-color:#0F75B7;
      position:absolute;
      top:50%;
      left:0;
    }
  }
  .flow{
    text-align:center;
    margin:50px auto;
    overflow:hidden;
    li{
      margin-right:1em;
      line-height:1.6;
      font-weight:bold;
      position:relative;
      span{
        display:block;
        width:100%;
        &::before{
          content:'';
          position:absolute;
          top:0;
          right:-1em;
          width: 0;
          height: 0;
          border-style: solid;
          border-top: 0.8em solid transparent;
          border-bottom: 0.8em solid transparent;
          border-left: 1em solid;
          border-right: 0;
        }
      }
      &:first-of-type>span{
        background-color:#FEED99;
        color:#0F75B7;
        &::before{
          border-left-color:#FEED99;
        }
      }
      &:last-of-type>span{
        background-color:#D9D9D9;
        color:#064066;
        &::before{
          border-left-color:#D9D9D9;
        }
      }
      .flowDetail{
        margin-top:50px;
        li{
          font-weight:normal;
          text-align:left;
          ul{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            li{
              display:flex;
              align-items:center;
              justify-content:left;
              background-color:#FEED99;
              border-radius:8px;
              padding:0 10px;
              margin-right:0;
              &::before{
                content:'';
                display:block;
                margin-right:5px;
                width:18px;
                height:18px;
                background-repeat:no-repeat;
                background-position:center;
                background-size:contain;
              }
              &.flowSearch::before{
                background-image:url('../img/listing_img003.png');
              }
              &.flowSns::before{
                background-image:url('../img/listing_img004.png');
              }
              &.flowWeb::before{
                background-image:url('../img/listing_img005.png');
              }
              &.flowOthers::before{
                background-image:url('../img/listing_img006.png');
              }
            }
          }
          &.arrowText::before,&.arrowNontext::before{
            color:#fff;
            text-align:right;
            width:2.5em;
            height:1.6em;
            position:absolute;
            top:50%;
            right:-4.2em;
            transform:translate(-50%, -50%);
            background-color:#0F75B7;
            z-index:100;
          }
          &.arrowText::before{
            content:'集客';
          }
          &.arrowNontext::before{
            content:'';
          }
          &.arrowText::after,&.arrowNontext::after{
            content:'';
            position:absolute;
            top:50%;
            transform:translate(-50%, -50%);
            right:-4.2em;
            width: 0;
            height: 0;
            border-style: solid;
            border-top: 1.3em solid transparent;
            border-bottom: 1.3em solid transparent;
            border-left: 1em solid #0F75B7;
            border-right: 0;
          }
          &.flow2Web,&.flow2Submit{
            display:flex;
            flex-direction:column;
            flex-wrap:nowrap;
            align-items:center;
            justify-content:center;
            background-color: #FEED99;
            border-radius: 8px;
            padding:10px;
          }
        }
      }
      &.lastStep{
        .flowDetail{
          margin-top:50px;
          li{
            display:flex;
            flex-direction:column;
            flex-wrap:nowrap;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border:1px solid #0F75B7;
            padding:10px 20px;
          }
          .flow3Cart{
            margin-left:2em;
          }
          .flow3Subsc{
            margin-right:-1em;
          }
        }
      }
    }
  }
  .flowImg{
    width:100%;
    display:grid;
    gap:0;
    margin:30px auto;
  }
  .flowTitle{
    color:#fff;
    margin-right:1em;
    text-align:center;
    position:relative;
    line-height:1.6;
    background-color:#064066;
    &::before{
      content:'';
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      right:-1.5em;
      width: 0;
      height: 0;
      border-style: solid;
      border-top: 0.8em solid transparent;
      border-bottom: 0.8em solid transparent;
      border-left: 1em solid #064066;
      border-right: 0;
    }
  }
  .support{
    margin:30px auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content: space-between;
    li{
      width:100%;
      max-width:390px;
      display:grid;
      grid-template-columns:1fr 4fr;
      align-items:center;
      gap:20px;
      margin:10px auto;
      border-radius:8px;
      border:2px solid #064066;
      padding:10px 20px;
    }
  }
  .supportComment{
    width:100%;
    text-align:center;
    line-height:2.4em;
    background-color:#EFEFEF;
    font-weight:bold;
    span{
      color:#0F75B7;
    }
  }
}
.flowCaution{
  width:65%;
  max-width:800px;
  margin:0 auto 100px;
  padding:50px 50px 0;
  text-align:center;
  position:relative;
  background-color:#D5F4FB;
  color:#0F75B7;
  font-weight:bold;
  &::before{
    content:'';position: absolute;
  top: 100%; /* 親の下端に配置 */
  left: 0;
  width: 100%; /* 親の幅に合わせる */
  height: 100px; /* 尖った部分の高さ */
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
  }
}
.supportBack{
  margin-top:-650px;
  padding-top:700px;
  padding-bottom:100px;
  background-image:url('../img/listing_bg_img004.png'),url('../img/listing_bg_img005.png'),url('../img/listing_bg_img006.png'),linear-gradient(0deg,#0F75B7,#85E0C0);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:0 50%,99% 85%,0 100%;
  position:relative;
  z-index:-1
}
.supportContent{
  div{
    padding:50px 30px;
    border-radius: 20px;
    text-align:center;
    background-color:#fff;
    margin-bottom:30px;
    width:90%;
    max-width:420px;
    p{
      font-weight:bold;
      color:#0F75B7;
      margin-bottom:50px;
    }
  }
}
.reason{
  width:90%;
  max-width:1400px;
  margin:50px auto;
  text-align:center;
  line-height:1.6;
  background-color:#fff;
  border-radius:0.8em;
  font-weight:bold;
  color:#0F75B7;
}
.reasonListArea{
  width:90%;
  max-width:1400px;
  margin:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-around;
  .reasonList{
    color:#fff;
    font-weight:bold;
    li{
      display:grid;
      grid-template-columns: 1fr 2.5fr;
      margin-bottom:30px;
      &:last-of-type{
        margin-bottom:0;
      }
      span{
        color:#0F75B7;
        margin-right:10px;
        background-color: #fff;
        border-radius:1.6em;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:0 5px;
        width:7em;
        height:calc(1em + 10px);
      }
    }
  }
  img{
    max-width:550px;
    width:100%;
  }
}
.thirdArea{
  background-color:#fff;
  padding:100px 0;
  background-image:url('../img/listing_bg_img007.png'),url('../img/listing_bg_img008.png');
  background-repeat:no-repeat;
  background-position:0 20%,100% 80%;
  .stepTitle{
    text-align:center;
    font-weight:bold;
    line-height:1.4;
    span{
      color:#0F75B7;
      >span{
        font-size:2em;
      }
    }
  }
  .stepFlow{
    div{
      margin-top:80px;
      padding:60px 10px 30px;
      position:relative;
      width:90%;
      max-width:420px;
      border-radius:20px;
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:center;
      .stepFlowNum{
        text-align:center;
        position:absolute;
        top:-2em;
        left:0;
        right:0;
        margin:auto;
        width:38%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        font-weight:bold;
        background-color:#FAF8F3;
        border-radius:16px;
        &::before{
          content:'';
          position:absolute;
          margin:auto;
          top:0;
          bottom:-70px;
          right:0;
          left:0;
          width: 0;
          height: 0;
          border-style: solid;
          border-bottom: 0;
          border-top: 0.8em solid #FAF8F3;
          border-left: 1em solid transparent;
          border-right: 1em solid transparent;
        }
        span{
          font-size:2.7em;
        }
      }
      &:nth-of-type(2n+1){
        background-image:linear-gradient(-90deg,#97EDA080,#97EDA01A);
      }
      &:nth-of-type(2n){
        background-image:linear-gradient(-90deg,#4CBCFF80,#4CBCFF1A);
      }
      h4{
        font-weight:bold;
        margin:30px auto;
      }
      p:not([class]){
        padding:0 20px;
      }
    }
  }
}
.fourthArea{
  padding:100px 0;
  background-image:url('../img/listing_bg_img009.png');
  background-repeat:no-repeat;
  background-position:99% 13%;
  .differenceTitle{
    text-align:center;
    font-weight:bold;
    span{
      font-size:1.3em;
      color:#0F75B7;
    }
  }
}
.differenceTable{
  width:90%;
  max-width:1400px;
  margin:50px auto;
  line-height:1.8;
  text-align:center;
  border-collapse: collapse;
  thead{
    >*{
      color:#fff;
    }
    th:nth-of-type(2){
      background-color:#0F75B7;
    }
    th:last-of-type{
      background-color: #AAAAAA;
    }
  }
  tbody{
    tr{
      th{
        background-color: #eeeeef;
        border-bottom:2px solid #fff;
      }
      td:first-of-type{
        background-color:#EFF5F6;
        color:#0F75B7;
        box-shadow:inset 2px 0 0 0 #0F75B7,inset -2px 0 0 0 #0F75B7;
      }
      &:last-of-type{
        td:first-of-type{
          box-shadow:inset 2px -2px 0 0 #0F75B7,inset -2px -2px 0 0 #0F75B7,inset 0 -2px 0 0 #0F75B7;
        }
      }
      td:last-of-type{
        background-color: #fff;;
        border-bottom:2px solid #EFEFEF;
      }
    }
  }
}
.successArea{
  padding:100px 0 0;
  background-color:#EFF5F6;
  background-image:url('../img/listing_bg_img010.png');
  background-repeat:no-repeat;
  background-position:0 5%;
  .successTitle{
    text-align:center;
  }
  .successEx{
    margin-top:30px;
    >div{
      width:90%;
      max-width:685px;
      background-image:linear-gradient(90deg,#0F75B7,#45A785);
      padding:30px;
      border-radius:30px;
      position:relative;
      &::before{
        content:'CASE';
        font-family: 'Futura PT';
        position:absolute;
        top:0.5em;
        right:30px;
        color:#fff6;
      }
      &::after{
        position:absolute;
        font-family: 'Futura PT';
        top:0.1em;
        right:10px;
        color:#fff6;
      }
      &:first-of-type::after{
        content:'01';
      }
      &:last-of-type::after{
        content:'02';
      }
      h4{
        line-height:1.8em;
        color:#fff;
        span{
          font-size:1.25em;
          color:#FEED99;
        }
      }
      >p{
        color:#fff;
        margin:30px auto;
      }
      .exData{
        background-color: #fff;
        padding:10px;
        border-radius:24px;
        list-style:disc inside;
        line-height:2em;
        color:#0F75B7;
        font-weight:bold;
        li::marker{
          content:normal;
        }
      }
    }
  }
}
.budgetArea{
  margin-top:100px;
  padding:100px 10px;
  background-image:url('../img/listing_bg_img004.png'),url('../img/listing_bg_img005.png'),linear-gradient(0deg,#064066,#0C80CC);
  background-repeat:no-repeat,no-repeat;
  background-position:0 10%,99% 75%;
  >p:not([class]){
    text-align:center;
    font-weight:bold;
    color:#fff;
    >span{
      color:#FFFF00;
    }
  }
  .budgetDetail{
    color:#fff;
    font-weight:bold;
    align-items:center;
    width:90%;
    max-width:1000px;
    border: 2px solid #fff;
    border-radius:20px;
    padding:1em;
    margin:30px auto;
    p{
      font-size:1em;
    }
    ul{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
      gap:10px;
      position:relative;
      bottom:1rem;
      li{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:end;
        justify-content:center;
        gap:10px;
        span:not([class]){
          display:block;
          border-radius: 50%;
          width:4em;
          height:4em;
          padding:0.5em;
          line-height:3em;
          background-color: #fff;
          color:#0F75B7;
        }
        .num{
          font-size:4em;
          position:relative;
          bottom:-1rem;
        }
      }
    }
  }
}
.whiteBackImage{
  background-color:#fff;
  width:90%;
  max-width:1200px;
  position:relative;
  text-align:center;
  img:first-of-type{
    width:60%;
    position:absolute;
    top:-7%;
    left:0;
    right:0;
    margin:auto;
  }
}
.caution{
  width:90%;
  max-width:1200px;
  color:#fff;
  margin:auto;
}
.listingFaq{
  width:90%;
  max-width:1400px;
  margin:auto;
  margin-bottom:100px;
  .pageTitleArea{
    padding-bottom:35px;
    margin-bottom:35px;
    .h1Title {
      font-weight:bold;
      font-size:36px;
      margin-left:45px;
      position:relative;
      &::before {
        content:'';
        width:1em;
        height:1em;
        border-radius:0.5em;
        background-color:#064066;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
      }
      &::after{
        content:'';
        width:0.7em;
        height:0.7em;
        border-radius:0.35em;
        border:2px solid #fff;
        background-color:#064066;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
        right:auto;
        margin:auto;
      }
    }
    .h1Sub{
      font-size:20px;
      margin-left:45px;
      color:#064066;
    }
  }
  dl{
    dt{
      color:#0F75B7;
      margin-top:30px;
      &::before{
        content:'Ｑ';
        margin-right:1em;
      }
    }
    dd{
      margin:30px auto;
      padding-bottom:30px;
      border-bottom:2px solid #98C1DB;
      &::before{
        content:'Ａ';
        margin-right:1em;
      }
    }
  }
}
.flexRow{
  margin:auto;
  width:90%;
  max-width:1400px;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:30px;
}