/*======================================
共通部分（ヘッダー・サイドメニュー・CTAボタン）のcssは
「style.css」に記載してあります。
========================================*/

body #main_buntan .main_contents {
  background-color: #EBF3F7;
  overflow: hidden;
  letter-spacing: 0;
}

body #main_buntan .main_contents * {
  box-sizing: content-box;
}

/*タイトルエリア*/
#page_service_area {
  width: 100%;
  height: 333px;
  background-image: url(../img/three_features/buntan_page_three_features_title_bg.png);
  background-size: cover;
  background-position: top;
  padding-top: 80px;
}

#page_service_area .p_t_f_ttl_content {
  padding-top: 137px;
  text-align: center;
}

#page_service_area .p_t_f_ttl_content .p_t_f_ttl_h2 {
  font-size: 48px;
  font-weight: bold;
  color: #003893;
}

#page_service_area .service_mv_icon {
  width: 200px;
  margin: 40px auto 0;
}

#page_service_area .service_mv_icon .service_mv_icon_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 170px;
  padding: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 15px #ADADAD;
}

#page_service_area .service_mv_icon .service_mv_icon_circle img {
  height: auto;
  width: 150px;
}

#page_service_area .service_mv_icon .service_mv_icon_circle img.icon_confidential {
  width: 170px;
}

#page_service_area .service_mv_icon .service_mv_icon_circle img.icon_ondemand {
  width: 100px;
}

section#page_service_content_area,
section#page_service_content_area_link {
  margin: 150px 0 50px;
}

section#page_service_content_area_merit {
  margin: 50px 0;
}

#main_buntan .main_contents .point .point_contents .point_content .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 15px 0;
}

#main_buntan .main_contents .point .point_contents .point_content .icon li {
  box-sizing: border-box;
  background-color: #109954;
  border-radius: 19px;
  text-align: center;
  width: 150px;
  height: 130px;
  border: none;
  margin: 10px;
  padding: 15px 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

#main_buntan .main_contents .point .point_contents .point_content .icon li p {
  width: 100%;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding: 0;
}

#main_buntan .main_contents .point .point_contents .point_content .icon li img {
  width: 50px;
  height: auto;
}

#main_buntan .main_contents .point .point_contents .point_content .icon li .icon_b {
  width: 65px;
  padding-bottom: 5px;
}

section#page_service_content_area_merit .page_service_content_area_merit_content {
  width: 1000px;
  margin: 30px auto;
}

.page_service_content_area_merit_content_flex {
  display: flex;
  background-color: #f4f7f7;
  border-radius: 20px;
  box-shadow: 0 0 10px #ADADAD;
  padding: 20px;
}

.page_service_content_area_merit_content_flex .page_service_content_area_merit_content_flex_img {
  width: 25%;
}

.page_service_content_area_merit_content_flex .page_service_content_area_merit_content_flex_img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
}

.page_service_content_area_merit_content_flex .page_service_content_area_merit_content_flex_text {
  width: 75%;
}

.page_service_content_area_merit_content_flex .page_service_content_area_merit_content_flex_text h3 {
  font-size: 24px;
  color: #003893;
  margin: 10px 0 30px 20px;
  margin-left: 20px;
  margin-bottom: 30px;
}

.page_service_content_area_merit_content_flex .page_service_content_area_merit_content_flex_text p {
  text-align: left;
  margin-left: 20px;
  padding: 0;
}

section#page_service_content_area_link .page_service_content_area_link_flex {
  max-width: 1000px;
  margin: 100px auto 70px;
  display: flex;
  justify-content: space-around;
}

section#page_service_content_area_link .page_service_content_area_link_flex .page_service_content_area_link_card {
  width: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px #ADADAD;
  padding: 20px;
  border-radius: 15px;
}

.page_service_content_area_link_card_content {
  text-align: center;
}

.page_service_content_area_link_card_content img {
  height: 150px;
  text-align: center;
  margin-top: -80px;
  transition: 0.5s;
}

.page_service_content_area_link_card_content h3 {
  color: #ccac46;
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
}

section#page_service_content_area_link .page_service_content_area_link_flex a:hover .page_service_content_area_link_card_content img {
  margin-top: -85px;
  margin-bottom: 5px;
}

/*** レスポンシブ ***/
@media screen and (max-width: 767px) {
  section#page_service_content_area_merit .page_service_content_area_merit_content {
    width: 90%;
  }

  .page_service_content_area_merit_content_flex {
    flex-direction: column;
    align-items: center;
  }

  section#page_service_content_area_link .page_service_content_area_link_flex {
    flex-direction: column;
    align-items: center;
    height: 700px;
  }
}

/* 台帳作成サービス */
#page_service_ledger_flow {
  margin:120px 0;
}

#page_service_ledger_flow .page_service_ledger_flow_image {
  text-align: center;
  margin: 20px 0;
}

#page_service_ledger_flow .page_service_ledger_flow_image img {
  max-width: 1000px;
}

#page_service_onsystem_flow {
  margin: 80px 0 120px;
  text-align: center;
  
}

#page_service_onsystem_flow .page_service_onsystem_flow_image img {
  max-width: 600px;
}

#page_service_ledger_flow .page_service_ledger_flow_video {
  text-align: center;
  max-width: 500px;
  margin: 50px auto 0;
}