#pageHeader {
  background-color: rgba(232, 84, 106, 0.7);
  color: #FFF;
  overflow: hidden;
  padding-top: 6.25em; }
  #pageHeader .ph_base {
    height: 17.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
    #pageHeader .ph_base::after {
      content: "";
      display: block;
      position: absolute;
      right: -11.875em;
      top: 50%;
      transform: translateY(-54%);
      width: 28.962325em;
      height: 25.82293125em;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("../../img/common/whitesan_pink.svg");
      background-size: cover; }
    #pageHeader .ph_base h1 {
      font-size: 1.875em;
      letter-spacing: 0.090em;
      font-weight: bold; }
  @media screen and (max-width: 781px) {
    #pageHeader {
      padding-top: 3.75em; }
      #pageHeader .ph_base {
        height: 6.25em; }
        #pageHeader .ph_base::after {
          font-size: 0.412em;
          right: -9.375em; }
        #pageHeader .ph_base h1 {
          font-size: 1.0625em; } }

.box .b_ttl {
  background-color: #35200c;
  color: #FFF;
  text-align: center; }
  .box .b_ttl h4 {
    font-size: 1.4375em;
    line-height: 1.6;
    font-weight: bold;
    padding: 0.7173913043em; }
.box .b_content {
  padding: 3.75em;
  background-color: #f5f2ec; }
@media screen and (max-width: 781px) {
  .box .b_ttl h4 {
    font-size: 0.875em; }
  .box .b_content {
    padding: 0.9375em; } }

ul.cases {
  list-style: none; }
  ul.cases > li {
    position: relative;
    background-color: rgba(251, 196, 0, 0.4);
    text-align: center;
    padding: 1.125em; }
    ul.cases > li:not(:last-child) {
      margin-bottom: 1.875em; }
      ul.cases > li:not(:last-child)::after {
        content: "";
        width: 1.0625em;
        height: 1.0625em;
        box-sizing: border-box;
        border-right: 3.5px solid #35200c;
        border-bottom: 3.5px solid #35200c;
        position: absolute;
        left: 50%;
        bottom: -0.9375em;
        transform: translate(-50%, 20%) rotate(45deg); }
    ul.cases > li > .ttl {
      font-size: 1.125em;
      font-weight: bold; }
  @media screen and (max-width: 781px) {
    ul.cases > li {
      padding: 0.9375em; }
      ul.cases > li:not(:last-child) {
        margin-bottom: 1.5625em; }
        ul.cases > li:not(:last-child)::after {
          width: 1.0625em;
          height: 1.0625em;
          bottom: -0.78125em; }
      ul.cases > li > .ttl {
        font-size: em_dp(16); } }

.steps {
  display: flex;
  text-align: left;
  overflow: hidden; }
  .steps dl {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    margin: 0; }
    .steps dl dt {
      background-color: rgba(180, 130, 60, 0.8);
      height: 3.125em;
      display: flex;
      align-items: center;
      padding: 0.625em 2.1875em;
      position: relative; }
      .steps dl dt span {
        font-size: 1.125em;
        color: #FFF;
        font-weight: bold; }
    .steps dl dd {
      margin: 0;
      padding: 1.125em 2.1875em;
      background-color: #FFF;
      flex-grow: 1;
      padding-right: 0;
      position: relative;
      z-index: 5;
      line-height: 1.75; }
    @media print, screen and (min-width: 782px) {
      .steps dl:first-child dt,
      .steps dl:first-child dd {
        padding-left: 1.5625em; } }
    .steps dl:not(:last-child) dt::after {
      content: "";
      display: block;
      width: 2.5em;
      height: 2.5em;
      border-top: 5px solid #FFF;
      border-right: 5px solid #FFF;
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%) scaleX(0.6) rotate(45deg); }
    .steps dl:not(:last-child) dd {
      border-right: 1px dotted #888888; }
  @media screen and (max-width: 781px) {
    .steps {
      flex-direction: column; }
      .steps dl {
        flex-direction: row; }
        .steps dl dt {
          height: auto;
          padding: 0;
          width: 3.75em;
          justify-content: center; }
          .steps dl dt span {
            font-size: 0.875em; }
        .steps dl dd {
          padding: 0.625em 0.9375em;
          padding-right: 0; }
        .steps dl:not(:last-child) dt::after {
          width: 3em;
          height: 3em;
          top: auto;
          bottom: 1px;
          right: 50%;
          border-top: 5px solid #FFF;
          border-right: 5px solid #FFF;
          transform: translate(50%, 50%) scaleY(0.4) rotate(135deg); }
        .steps dl:not(:last-child) dd {
          border-bottom: 1px dotted #888888;
          border-right: none; } }

#main .head_descript {
  text-align: center;
  font-size: 1.125em;
  line-height: 1.75;
  letter-spacing: 0.020em;
  margin-bottom: 5em; }
#main .box.usecase .txt01 {
  text-align: center;
  font-size: 1.3125em;
  letter-spacing: 1.8095238095;
  font-weight: bold; }
#main .box.usecase .photo {
  display: flex;
  margin-top: 3.125em; }
  #main .box.usecase .photo img {
    width: 50%; }
#main .box.point .cols .col {
  height: 21.875em;
  background-color: #FFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 3.125em; }
  #main .box.point .cols .col::before {
    content: "";
    display: block;
    width: 15.1557375em;
    height: 13.77794375em;
    position: absolute;
    top: -2.5em;
    right: -1.1875em;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../../img/common/whitesan_gray.svg");
    background-size: cover; }
  #main .box.point .cols .col .inner {
    position: relative;
    z-index: 1; }
    #main .box.point .cols .col .inner .num span {
      font-size: 1.4375em;
      font-weight: bold;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 2.1739130435em;
      height: 2.1739130435em;
      color: #FFF;
      background-color: #e95469;
      border-radius: 50%;
      box-sizing: border-box; }
      body.os_Windows #main .box.point .cols .col .inner .num span {
        padding-top: 0.15em; }
    #main .box.point .cols .col .inner h5 {
      font-size: 1.3125em;
      line-height: 1.5238095238;
      font-weight: bold;
      color: #e95469;
      margin: 0.9523809524em 0; }
    #main .box.point .cols .col .inner .descript {
      line-height: 1.5; }
    #main .box.point .cols .col .inner .more {
      margin-top: 2.1875em; }
      #main .box.point .cols .col .inner .more a {
        color: #e95469;
        font-size: 0.9375em;
        font-weight: bold; }
#main .box.example h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #35200c;
  background-color: #FFF;
  height: 3.75em;
  margin-bottom: 1.875em; }
  #main .box.example h5 span {
    font-size: 1.3125em;
    font-weight: bold; }
#main .box.example .steps {
  margin-top: 0.5em;
  margin-bottom: 1.25em; }
@media screen and (max-width: 781px) {
  #main .head_descript {
    font-size: 1em;
    margin-bottom: 3em; }
  #main .box.usecase .txt01 {
    text-align: left;
    font-size: 1em;
    line-height: 1.75; }
  #main .box.usecase .photo {
    flex-direction: column;
    margin-top: 1.5625em; }
    #main .box.usecase .photo img {
      width: 100%; }
  #main .box.point .cols .col {
    height: 15.625em;
    padding-top: 1.875em; }
    #main .box.point .cols .col::before {
      font-size: 0.812em; }
    #main .box.point .cols .col .inner .num {
      margin-bottom: 1em; }
      #main .box.point .cols .col .inner .num span {
        font-size: 1.15em;
        width: 2.1739130435em;
        height: 2.1739130435em; }
    #main .box.point .cols .col .inner h5 {
      font-size: 1.125em;
      line-height: 1.5555555556;
      margin: 0.5em 0; }
    #main .box.point .cols .col .inner .descript {
      line-height: 1.6428571429; }
    #main .box.point .cols .col .inner .more {
      margin-top: 1em; }
      #main .box.point .cols .col .inner .more a {
        font-size: 0.8125em; } }