@charset "euc-jp";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* CSS Document */
/*------------------------------
共通
------------------------------*/
body {
  color: #333333!important;
}
.sp {
  display: none;
}
.breadcrumb-item {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
}
.wrap {
  font-family: 'Noto Sans Japanese', sans-serif!important;
  font-size: 100%;
  line-height: 1.8;
}
.page-wrap {
  padding: 9px 0 0!important;
}
.breadcrumb a,
.breadcrumb-item,
.breadcrumb-item:not(:last-child)::after {
  color: #fff!important;
}
.contents-section {
  background: #EDEEF7;
  padding-bottom: 24px;
}
.common-contents-title {
  color: #E5258C;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}
.main-title{
  font-size: 22px;
    font-weight: bold;
}
.main-title span{
  color:#005bac;
  font-size: 32px;
    font-weight: bold;
}
.main-title-description {
  font-size: 16px;
  font-weight: 500;
}
.contents-section-wrap {
  width: 1024px;
  text-align: center;
  margin: 0 auto;
  padding: 88px 0;
}
.contents-description-title {
  font-size: 18px;
  font-weight: bold;
}
.contents-description-text {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.contents-description-text-bg {
  background: linear-gradient(to top right, #c12ae7 0%, #8239ec 100%);
  color: #fff;
  font-size: 14px;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0 20px;
  position: absolute;
    width: 100%;
    margin: 40px auto 0;
    left: 0;
    bottom: 0;
}
.contents-description-text-strong {
  display: block;
  font-size: 20px;
  font-weight: bold;
}
.contents-container {
  background: #fff;
  padding: 56px 0;
  margin: 24px 16px 0;
  -moz-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -webkit-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -ms-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
}
.check-list-contents {
  width: 1024px;
  margin: 0 auto;
}
.check-list-wrap {
  display: inline-block;
}
.check-list {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  padding-left: 40px;
  margin-top: 36px;
  background: url(../../../main/function/paidy/images/check-box.png) no-repeat 0;
  left: 50px;
}
.page-btn-paidy {
  margin-top: 100px!important;
}
/*------------------------------
メインビジュアル
------------------------------*/
.page-head {
  background: -webkit-linear-gradient(bottom left, #c12ae7 0%, #8239ec 100%);
  background: -o-linear-gradient(bottom left, #c12ae7 0%, #8239ec 100%);
  background: linear-gradient(to top right, #c12ae7 0%, #8239ec 100%);
  padding: 100px 0 0;
  margin-bottom: 0 !important;
  position: relative;
  height: 520px;
}
.main-visual-wrap {
  width: 1024px;
  margin: 0 auto;
  background-color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 72px 48px 0;
  position: absolute;
  bottom: -65px;
  left: 0;
  right: 0;
  z-index: 1;
  -moz-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -webkit-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -ms-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
}
.main-visual {
  background-color: #fff;
}
.main-sub-title {
  color: #E5258C;
}
.paidy-logo {
  margin: 24px 0 24px;
}
.main-visual-image-wrap {
  margin-left: 56px;
}
/*------------------------------
about
------------------------------*/
.common-contents-about-title {
  margin-top: 56px;
}
.about-list-wrap {
  display: flex;
  justify-content: center;
}
.about-list {
  width: calc(100%/3);
  background: #fff;
  padding: 40px 16px;
  margin: 48px 16px 0;
  -moz-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -webkit-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  -ms-box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  box-shadow: 1px 5px 34px 1px rgba(48, 44, 44, 0.44);
  position: relative;
  height: 420px;
}
.features {
  height: 350px;
} 
.arrow::after {
  content: "";
  position: absolute;
  top: 71%;
  box-sizing: border-box;
  border-right: 155px solid transparent;
  border-left: 155px solid transparent;
  border-top: 30px solid #ffffff;
  left: 0;
}
.about-list-text-wrap {
  margin-top: 24px;
}
.about-list-text-wrap dt {
  margin-bottom: 8px;
}
.about-list-text-wrap dd {
  text-align: justify;
}
.att {
  font-size: 12px;
  text-align: left;
  font-weight: 500;
  margin: 32px 0 0 16px;
}
/*------------------------------
Paidyが選ばれる理由
------------------------------*/
.reason-graph-wrap {
  margin: 60px 0 160px;;
}
.image-caption {
  font-size: 16px;
  font-weight: bold;
}
.reason-graph {
  position: relative;
  margin-top: 40px;
}
.action-data {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  position: absolute;
  line-height: 1.6em;
}
.data-num {
  font-size: 34px;
  color: #E5258C;
}
.unit {
  font-size: 24px;
  color: #E5258C;
}
.action-data.d1 {
  right: 254px;
  top: 0;
}
.action-data.d2 {
  right: 210px;
  top: 196px;
}
.action-data.d3 {
  right: 320px;
  top: 324px;
}
.action-data.d4 {
  left: 208px;
  top: 130px;
}
.action-data.d5 {
  text-align: center;
  left: 0;
  right: 0;
  top: 116px;
}
.d5 .data-num {
  font-size: 50px;
  display: inline-block;
  margin-top: 16px;
}
.d3 .data-num,
.d3 .unit,
.d4 .data-num,
.d4 .unit {
  color: #333333!important;
}
.price-list-table {
  width: 85%;
  margin: 40px auto 16px;
  table-layout: fixed;
  border-collapse: collapse;
  line-height: 1.2em;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px 1px rgba(48, 44, 44, 0.44);
  -webkit-box-shadow: 1px 1px 5px 1px rgba(48, 44, 44, 0.44);
  -ms-box-shadow: 1px 1px 5px 1px rgba(48, 44, 44, 0.44);
  box-shadow: 1px 1px 5px 1px rgba(48, 44, 44, 0.44);
}
.price-list-table thead th {
  font-size: 14px;
  font-weight: 500;
  line-height: 3;
  text-align: center;
}
.price-list-table tbody th {
  font-size: 16px;
  font-weight: bold;
}
.price-list-table tbody td {
  font-size: 14px;
  font-weight: 500;
}
.price-list-table th,
.price-list-table td {
  padding: 24px 20px;;
  text-align: center;
}
.price-list-table tbody tr:first-child {
  background-color: #DBEEFD;
}
.price-list-table tbody tr:nth-child(3) {
  background-color: #DBEEFD;
}
.table-small-text {
  font-size: 12px;
}
/*------------------------------
導入事例
------------------------------*/
.case-image-wrap {
  margin-top: 56px;
}
.case-main-image {
  margin: 40px 0 -56px;
  position: relative;
}
.case-main-image a {
  color: #333333!important;
}
.image-badge-left {
  position: absolute;
  top: 50px;
  left: 100px;
}
.image-badge-right {
  position: absolute;
  top: -50px;
  right: 80px;
}
/*------------------------------
利用料金
------------------------------*/
.price-image {
  margin-bottom: -80px;
  padding-left: 50px;
}
.price-text {
  font-size: 56px;
  color: #E5258C;
  font-weight: bold;
}
.price-contetns-wrap {
  margin-top: 48px;
}
.price-text-num {
  font-size: 88px;
}
.charge-table-wrap {
  width: 40%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}
.charge-table-wrap th {
  font-size: 20px;
  font-weight: bold;
  padding: 24px 0;
  text-align: center;
}
.inquiry-contetns-wrap {
  margin-top: 48px;
}
.inquiry-contetns-text-wrap {
  display: inline-block;
}
.inquiry-contetns-text {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  margin-top: 24px;
}
/*------------------------------
レスポンシブ
------------------------------*/
@media (max-width: 640px){
  .sp {
    display: block;
  }
  .contents-section {
    overflow: hidden;
  }
  .page-head {
    height: 400px;
    padding: 64px 0 0;
    margin-bottom: 0 !important;
  }
  .main-visual-wrap {
    width: 100%;
    display: block;
    margin: 8px 0;
    bottom: -510px;
  }
  .paidy-logo {
    margin-bottom: 30px;
    max-width: 80%;
  }
  .common-contents-title {
    font-size: 20px;
  }
  .main-title-description {
    font-size: 16px;
    padding: 0 8px;
  }
  .main-title-description br {
    display: none;
  }
  .main-visual-image-wrap {
    margin: 16px 0 0 0px;
  }
  .contents-section-wrap {
    width: 100%;
    padding: 32px 0;
  }
  .common-contents-about-title {
    margin-top: 510px;
  }
  .about-list-wrap {
    display: block;
  }
  .about-list {
    width: 90%;
  }
  .action-data.d1,.action-data.d2,.action-data.d3,.action-data.d4 {
    display: none;
  }
  .contents-description-title {
    width: 95%;
    margin: 0 auto;
  }
  .contents-description-title br{
    display: none;
  }
  .reason-graph-wrap {
    margin: 20px 0 60px;
  }
  .check-list-contents {
    width: 90%
  }
  .price-list-table{
    padding: 0 16px;
    width:230%;
  }
  .scroll{
  overflow-x: scroll;
  overflow: auto;　　　　/*tableをスクロールさせる*/
  white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
  }
  .scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
  height: 5px;
  }
  .scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
  background: #F1F1F1;
  }
  .scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
  background: #BCBCBC;
  }
  .image-badge-left {
    top: -30px;
    left: 0;
    width: 30%;
  }
  .image-badge-right {
    overflow: hidden;
    top: -30px;
    right: 0;
    width: 30%;
  }
  .price-image {
    padding: 0 8px;
  }
  .price-text {
    font-size: 36px;
    padding: 24px 35px 0 0;
  }
  .price-text-num {
    font-size: 64px;
  }
  .charge-table-wrap {
    width: 70%;
  }
  .inquiry-contetns-text-wrap {
    padding: 0 16px;
  }
  .arrow::after {
    content: "";
    border-right: 175px solid transparent;
    border-left: 175px solid transparent;
  }
}