@charset "UTF-8";
/*----------------------------------------------------
	.con_about
----------------------------------------------------*/
.con_about {
  padding-top: 30px; }
  .con_about .txt_intro {
    margin-top: 30px;
    text-align: justify;
    padding: 0 15px 35px; }

@media only screen and (min-width: 768px) {
  .con_about {
    padding-top: 50px; }
    .con_about .txt_intro {
      text-align: center;
      padding: 0;
      line-height: 2.8; } }
/*----------------------------------------------------
	.contents_title01
----------------------------------------------------*/
.con_about > .contents_title01 strong.ja, .con_howto > .contents_title01 strong.ja {
  letter-spacing: 0.1ex;
  text-indent: 0.1ex;
  font-weight: bold; }
.con_about > .contents_title01 span.en, .con_howto > .contents_title01 span.en {
  color: #7d77ec; }
  .con_about > .contents_title01 span.en:after, .con_about > .contents_title01 span.en:before, .con_howto > .contents_title01 span.en:after, .con_howto > .contents_title01 span.en:before {
    border-top: 1px solid #7d77ec;
    width: 10px; }
  .con_about > .contents_title01 span.en:before, .con_howto > .contents_title01 span.en:before {
    left: -20px; }
  .con_about > .contents_title01 span.en:after, .con_howto > .contents_title01 span.en:after {
    right: -20px; }

/*----------------------------------------------------
	.con_points
----------------------------------------------------*/
.con_points {
  position: relative;
  padding-top: 48vw;
  background: url(../about/images/bg_points_sp.jpg) center top no-repeat;
  background-size: auto 48vw; }
  .con_points:before, .con_points:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    height: 2.0vw;
    width: 100%; }
  .con_points:before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%); }
  .con_points:after {
    top: 46.0vw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%); }
  .con_points ul {
    padding: 0 55px; }
    .con_points ul li {
      padding: 25px 0;
      border-top: 1px dotted #d6d6dc;
      text-align: center; }
      .con_points ul li:first-child {
        border: none; }
      .con_points ul li:first-child > span {
        margin-top: 5px; }
      .con_points ul li i {
        display: block;
        width: 50.0vw;
        margin: 0 auto; }
      .con_points ul li > span {
        line-height: 1;
        display: inline-block;
        color: #fff;
        text-align: center;
        background: #333350;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: 0.4ex;
        text-indent: 0.4ex;
        padding: 7px 0;
        width: 80%;
        border-radius: 14px;
        margin-top: 20px; }
      .con_points ul li strong {
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        line-height: 1.6;
        margin-top: 20px; }

@media only screen and (min-width: 768px) {
  .con_points {
    padding: 0;
    background: none;
    overflow: hidden;
    margin-top: 55px; }
    .con_points:before, .con_points:after {
      height: 20px; }
    .con_points:after {
      top: auto;
      bottom: 0; }
    .con_points ul {
      display: flex;
      position: relative;
      padding: 75px 15px 80px;
      width: 1280px;
      height: 444px;
      margin: 0 auto; }
      .con_points ul:before {
        content: "";
        display: block;
        background: url(../about/images/bg_points.jpg) center top no-repeat;
        background-size: cover;
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 0;
        height: 444px;
        width: 668px;
        margin-left: 118px; }
      .con_points ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 330px;
        padding: 0;
        border-top: none;
        border-left: 1px dotted #d6d6dc; }
        .con_points ul li:first-child {
          border: none; }
        .con_points ul li:first-child > span {
          margin-top: 26px; }
        .con_points ul li i {
          width: 200px; }
        .con_points ul li > span {
          font-size: 1.6rem;
          padding: 9px 0;
          width: 180px;
          border-radius: 17px;
          margin-top: 26px; }
        .con_points ul li strong {
          font-size: 1.6rem;
          line-height: 1.8;
          margin-top: 20px; } }
/*----------------------------------------------------
	.con_howto
----------------------------------------------------*/
.con_howto {
  margin-top: 50px;
  padding: 0 15px; }
  .con_howto > .txt {
    margin-top: 30px;
    text-align: justify; }
  .con_howto .box_howto {
    margin-top: 30px; }
    .con_howto .box_howto h3 {
      text-align: center;
      font-weight: bold;
      font-size: 5.0vw; }
    .con_howto .box_howto .con_flow {
      counter-reset: num; }
      .con_howto .box_howto .con_flow .box_flow {
        margin-top: 30px;
        position: relative; }
        .con_howto .box_howto .con_flow .box_flow:nth-child(1) {
          z-index: 2;
          margin-top: 20px; }
        .con_howto .box_howto .con_flow .box_flow:nth-child(2) {
          z-index: 1; }
        .con_howto .box_howto .con_flow .box_flow:last-child .bg {
          height: 100%;
          border: 2px solid #EBEBED;
          border-radius: 8px; }
        .con_howto .box_howto .con_flow .box_flow:last-child:before, .con_howto .box_howto .con_flow .box_flow:last-child:after {
          display: none; }
        .con_howto .box_howto .con_flow .box_flow:last-child .wrap_flow {
          padding-bottom: 20px; }
        .con_howto .box_howto .con_flow .box_flow .bg {
          background: #F9F9FA;
          border: 2px solid #EBEBED;
          border-bottom: none;
          border-radius: 8px 8px 0 0;
          position: absolute;
          width: 100%;
          height: 60%;
          top: 0;
          left: 0;
          z-index: -1; }
        .con_howto .box_howto .con_flow .box_flow:before, .con_howto .box_howto .con_flow .box_flow:after {
          content: "";
          display: block;
          width: 50%;
          height: 80%;
          position: absolute;
          bottom: -25px;
          background: #F9F9FA;
          border: 2px solid #EBEBED;
          border-top: none;
          box-sizing: border-box;
          z-index: -2; }
        .con_howto .box_howto .con_flow .box_flow:before {
          left: 0;
          -webkit-transform: skew(0, 8deg);
          -moz-transform: skew(0, 8deg);
          -ms-transform: skew(0, 8deg);
          -o-transform: skew(0, 8deg);
          transform: skew(0, 8deg);
          border-radius: 0 0 8px 8px / 0 0 2px 8px;
          border-right: none; }
        .con_howto .box_howto .con_flow .box_flow:after {
          right: 0;
          -webkit-transform: skew(0, -8deg);
          -moz-transform: skew(0, -8deg);
          -ms-transform: skew(0, -8deg);
          -o-transform: skew(0, -8deg);
          transform: skew(0, -8deg);
          border-radius: 0 0 8px 8px / 0 0 8px 2px;
          border-left: none; }
        .con_howto .box_howto .con_flow .box_flow .wrap_flow {
          display: flex;
          flex-direction: column;
          padding: 10.0vw 20px 10px; }
          .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt {
            order: 1;
            margin-top: 7.0vw; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt h4 {
              font-weight: bold;
              color: #7d77ec;
              font-size: 1.6rem; }
              .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt h4:before {
                counter-increment: num;
                content: counter(num);
                color: #fff;
                background: #7d77ec;
                display: inline-block;
                vertical-align: middle;
                font-family: josefinsans, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", sans-serif;
                line-height: 1;
                padding: 6px 0;
                width: 28px;
                text-align: center;
                border-radius: 50%;
                margin-right: 5px; }
              .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt h4 span {
                vertical-align: middle; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt .txt {
              line-height: 1.8;
              margin-top: 10px;
              text-align: justify; }
          .con_howto .box_howto .con_flow .box_flow .wrap_flow .img {
            position: relative; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .img:after {
              content: "";
              display: block;
              width: 32vw;
              height: 32vw;
              background: #fff;
              border-radius: 50%;
              position: absolute;
              left: 50%;
              top: 50%;
              margin: -16vw 0 0 -16vw; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .img span {
              display: block;
              width: 40vw;
              margin: 0 auto;
              position: relative;
              z-index: 1; }
  .con_howto .btn {
    margin-top: 20px;
    padding: 0 20px; }

@media only screen and (min-width: 768px) {
  .con_howto {
    margin: 65px auto 0;
    padding: 0 40px;
    width: 1280px; }
    .con_howto .txt {
      line-height: 2.8;
      text-align: center; }
    .con_howto .box_howto {
      margin-top: 90px; }
      .con_howto .box_howto h3 {
        font-size: 2.7rem; }
      .con_howto .box_howto .con_flow {
        margin-top: 40px;
        display: flex;
        justify-content: space-between; }
        .con_howto .box_howto .con_flow .box_flow {
          width: 384px;
          margin-top: 0; }
          .con_howto .box_howto .con_flow .box_flow:nth-child(1) {
            margin-top: 0; }
          .con_howto .box_howto .con_flow .box_flow:last-child .bg {
            height: 100%;
            border: 4px solid #EBEBED;
            border-radius: 8px; }
          .con_howto .box_howto .con_flow .box_flow:last-child:before, .con_howto .box_howto .con_flow .box_flow:last-child:after {
            display: none; }
          .con_howto .box_howto .con_flow .box_flow:last-child .wrap_flow {
            padding-bottom: 40px; }
          .con_howto .box_howto .con_flow .box_flow .bg {
            border: 4px solid #EBEBED;
            border-right: none;
            border-radius: 8px 0 0 8px;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1; }
          .con_howto .box_howto .con_flow .box_flow:before, .con_howto .box_howto .con_flow .box_flow:after {
            width: 100px;
            height: 50%;
            bottom: auto;
            border: 4px solid #EBEBED;
            border-left: none; }
          .con_howto .box_howto .con_flow .box_flow:before {
            left: auto;
            top: 0;
            right: -24px;
            -webkit-transform: skew(10deg, 0);
            -moz-transform: skew(10deg, 0);
            -ms-transform: skew(10deg, 0);
            -o-transform: skew(10deg, 0);
            transform: skew(10deg, 0);
            border-radius: 0 8px 2px 0 / 0 8px 8px 0;
            border-bottom: none; }
          .con_howto .box_howto .con_flow .box_flow:after {
            top: 50%;
            right: -24px;
            -webkit-transform: skew(-10deg, 0);
            -moz-transform: skew(-10deg, 0);
            -ms-transform: skew(-10deg, 0);
            -o-transform: skew(-10deg, 0);
            transform: skew(-10deg, 0);
            border-radius: 0 2px 8px 0 / 0 8px 8px 0;
            border-top: none; }
          .con_howto .box_howto .con_flow .box_flow .wrap_flow {
            padding: 60px 40px 40px; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt {
              margin-top: 45px; }
              .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt h4 {
                font-size: 2.0rem; }
                .con_howto .box_howto .con_flow .box_flow .wrap_flow .con_txt h4:before {
                  width: 32px;
                  margin-right: 8px; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .img:after {
              width: 182px;
              height: 182px;
              margin: -91px 0 0 -91px; }
            .con_howto .box_howto .con_flow .box_flow .wrap_flow .img span {
              width: 232px; }
    .con_howto .btn {
      width: 440px;
      margin: 50px auto 0;
      padding: 0; }
      .con_howto .btn a {
        font-size: 2.0rem;
        padding: 25px 0;
        border-radius: 35px; } }
/*----------------------------------------------------
	.con_about .con_partner_list
----------------------------------------------------*/
.con_about .con_partner_list {
  margin-top: 20px; }

@media only screen and (min-width: 768px) {
  .con_about .con_partner_list {
    margin-top: 100px; } }