@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  box-sizing: border-box; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* reset for form */
input[type="text"],
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  box-sizing: border-box; }

textarea,
button,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-sizing: border-box; }

/*========== set.scss ==========*/
html {
  font-size: 62.5%;
  background-color: #f1f1f1; }

body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Helvetica Neue", YuGothic,  Arial, "メイリオ", Meiryo, sans-serif;
  color: #222;
  text-align: left;
  line-height: 1.7;
  font-size: calc(100vw / ( 750 / 26 )); }
  @media screen and (min-width: 768px) {
    body {
      font-size: 26px; } }

.clearfix:after {
  content: "";
  clear: both;
  display: block; }

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }

a {
  text-decoration: none;
  color: #2E2E2E; }
  a:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }

.opacity {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7; }

.trans {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

.hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

.hoverTxt {
  text-decoration: underline;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

.boxShadow {
  box-shadow: 0px 0px 6px rgba(54, 48, 48, 0.6); }

.txtShadow {
  text-shadow: 0px 0px 9px rgba(54, 48, 48, 0.71); }

.box-trim {
  position: relative;
  overflow: hidden; }
  .box-trim img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }

@media screen and (max-width: 767px) {
  .noSP {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .noPC {
    display: none !important; } }

.fadein {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 1300ms; }
  .fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0); }

/*========== l-contents.scss ==========*/
.l-contents {
  margin: auto;
  max-width: 750px;
  overflow-x: hidden;
  background-color: #fff; }

/*========== l-footer.scss ==========*/
.l-footer {
  display: none; }

/*========== c-title.scss ==========*/
.c-title-primary {
  position: relative; }
  .c-title-primary:before {
    content: "";
    display: block;
    width: calc(100vw / ( 2400 / 134 ));
    height: calc(100vw / ( 2400 / 6 ));
    background-color: #DDD1BD;
    position: absolute;
    left: calc(-100vw / ( 2400 / 160 ));
    top: calc(100vw / ( 2400 / 12 )); }

/*========== c-inner.scss ==========*/
.c-inner {
  padding: 0 calc(100vw / ( 750 / 32 )); }
  @media screen and (min-width: 768px) {
    .c-inner {
      padding: 0 32px; } }

/*========== c-box.scss ==========*/
.c-box-bg {
  background: url("../images/bg_tile.png") center top repeat-y;
  background-size: 100% auto; }

/*========== c-btn.scss ==========*/
.c-btn-list .btn:not(:last-child) {
  margin-bottom: calc(100vw / ( 750 / 30 )); }
  @media screen and (min-width: 768px) {
    .c-btn-list .btn:not(:last-child) {
      margin-bottom: 30px; } }
.c-btn-std {
  color: #fff;
  display: block;
  margin: auto;
  text-align: center;
  height: calc(100vw / ( 750 / 110 ));
  line-height: calc(100vw / ( 750 / 110 ));
  font-size: calc(100vw / ( 750 / 32 ));
  font-weight: bold;
  background: linear-gradient(45deg, #5CC6FF, #B6E5D5);
  width: calc(100vw / ( 750 / 568 ));
  border-radius: 1000px;
  position: relative;
  letter-spacing: 0.1em; }
  @media screen and (min-width: 768px) {
    .c-btn-std {
      height: 110px;
      line-height: 110px;
      font-size: 32px;
      width: 568px; } }
  .c-btn-std:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 12 ));
    height: calc(100vw / ( 750 / 20 ));
    background: url("../images/icon_arrow.svg") center no-repeat;
    background-size: contain;
    position: absolute;
    right: calc(100vw / ( 750 / 45 ));
    top: 50%;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px) {
      .c-btn-std:after {
        width: 12px;
        height: 20px;
        right: 45px; } }
  .c-btn-std.forDGR {
    background: #00a599; }
  .c-btn-std.forPK {
    background: #ff7ba8; }
  .c-btn-std.forBR {
    background: #29a7de; }
  .c-btn-std.forGR {
    background: #22b173; }
  .c-btn-std.forOR {
    background: #ed7424; }
  .c-btn-std.forYE {
    background: #ffff55;
    border: 1px solid #333;
    color: #333; }
    .c-btn-std.forYE:after {
      background-image: url("../images/icon_arrow-bk.svg"); }
.c-btn-simple {
  color: #333;
  display: block;
  margin: auto;
  font-size: calc(100vw / ( 750 / 24 ));
  height: calc(100vw / ( 750 / 76 ));
  line-height: calc(100vw / ( 750 / 76 ));
  text-align: center;
  border: 1px solid #333;
  width: calc(100vw / ( 750 / 526 )); }
  @media screen and (min-width: 768px) {
    .c-btn-simple {
      font-size: 24px;
      height: 76px;
      line-height: 76px;
      width: 526px; } }
.c-btn-line {
  background-color: #00b900;
  color: #fff;
  font-size: calc(100vw / ( 750 / 26 ));
  border-radius: 1000px;
  position: relative;
  display: block;
  width: calc(100vw / ( 750 / 568 ));
  margin: auto;
  height: calc(100vw / ( 750 / 110 )); }
  @media screen and (min-width: 768px) {
    .c-btn-line {
      font-size: 26px;
      width: 568px;
      height: 110px; } }
  .c-btn-line span {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.4;
    text-align: center;
    font-weight: bold; }
  .c-btn-line:before {
    content: "";
    width: calc(100vw / ( 750 / 63 ));
    height: calc(100vw / ( 750 / 62 ));
    background: url("../images/icon_line.png") center no-repeat;
    background-size: contain;
    position: absolute;
    left: calc(100vw / ( 750 / 40 ));
    top: 50%;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px) {
      .c-btn-line:before {
        width: 63px;
        height: 62px;
        left: 40px; } }
  .c-btn-line:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 12 ));
    height: calc(100vw / ( 750 / 20 ));
    background: url("../images/icon_arrow.svg") center no-repeat;
    background-size: contain;
    position: absolute;
    right: calc(100vw / ( 750 / 45 ));
    top: 50%;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px) {
      .c-btn-line:after {
        width: 12px;
        height: 20px;
        right: 45px; } }

/*========== p-kv.scss ==========*/
.p-kv {
  background: url("../images/kv_bg.png") center top no-repeat;
  background-size: 100% auto;
  padding: calc(100vw / ( 750 / 32 )) 0 0;
  margin-bottom: calc(100vw / ( 750 / 75 ));
  text-align: center; }
  @media screen and (min-width: 768px) {
    .p-kv {
      padding-top: 32px;
      margin-bottom: 75px; } }
  .p-kv-ttl {
    margin-bottom: calc(100vw / ( 750 / 660 )); }
    @media screen and (min-width: 768px) {
      .p-kv-ttl {
        margin-bottom: 660px; } }
  .p-kv-lead {
    font-weight: bold;
    font-size: calc(100vw / ( 750 / 29 ));
    line-height: 1.8;
    transform: rotate(-6deg); }
    @media screen and (min-width: 768px) {
      .p-kv-lead {
        font-size: 29px; } }

/*========== p-step01.scss ==========*/
.p-step01 {
  margin-bottom: calc(100vw / ( 750 / 159 ));
  position: relative; }
  @media screen and (min-width: 768px) {
    .p-step01 {
      margin-bottom: 159px; } }
  .p-step01:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 64 ));
    height: calc(100vw / ( 750 / 79 ));
    background: url("../images/icon_below.png") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: calc(-100vw / ( 750 / 159 ));
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .p-step01:after {
        width: 64px;
        height: 79px;
        bottom: -159px; } }
  .p-step01-intro {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: calc(-100vw / ( 750 / 100 ));
    margin-bottom: calc(100vw / ( 750 / 17 ));
    padding: calc(100vw / ( 750 / 40 ));
    z-index: 1;
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step01-intro {
        margin-top: -100px;
        margin-bottom: 17px;
        padding: 40px; } }
    .p-step01-intro p {
      font-size: calc(100vw / ( 750 / 28 )); }
      @media screen and (min-width: 768px) {
        .p-step01-intro p {
          font-size: 28px; } }
      .p-step01-intro p:not(:last-child) {
        margin-bottom: 1.5em; }
      .p-step01-intro p span {
        border-bottom: 1px solid #22b173; }
  .p-step01 .sec01 {
    padding-bottom: calc(100vw / ( 750 / 60 )); }
    @media screen and (min-width: 768px) {
      .p-step01 .sec01 {
        padding-bottom: 60px; } }
    .p-step01 .sec01_ttl {
      display: block;
      margin: 0 auto calc(100vw / ( 750 / 40 ));
      width: calc(100vw / ( 750 / 530 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01_ttl {
          margin-bottom: 40px;
          width: 530px; } }
    .p-step01 .sec01-obj01 {
      margin-bottom: calc(100vw / ( 750 / 90 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01-obj01 {
          margin-bottom: 90px; } }
    .p-step01 .sec01-obj02 {
      width: calc(100vw / ( 750 / 343 ));
      position: absolute;
      right: calc(100vw / ( 750 / 16 ));
      top: calc(-100vw / ( 750 / 25 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01-obj02 {
          width: 343px;
          right: 16px;
          top: -25px; } }
    .p-step01 .sec01-obj03 img {
      margin-bottom: calc(100vw / ( 750 / 15 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01-obj03 img {
          margin-bottom: 15px; } }
    .p-step01 .sec01-obj03 .cap {
      font-size: calc(100vw / ( 750 / 12 ));
      color: #666666;
      line-height: 1.5; }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01-obj03 .cap {
          font-size: 12px; } }
    .p-step01 .sec01 .point {
      padding: calc(100vw / ( 750 / 30 )) 0 0; }
      @media screen and (min-width: 768px) {
        .p-step01 .sec01 .point {
          padding-top: 30px; } }
      .p-step01 .sec01 .pointWrap {
        position: relative;
        min-height: calc(100vw / ( 750 / 330 ));
        margin-bottom: calc(100vw / ( 750 / 50 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec01 .pointWrap {
            min-height: 330px;
            margin-bottom: 50px; } }
      .p-step01 .sec01 .point .ttl {
        width: calc(100vw / ( 750 / 165 ));
        margin-bottom: calc(100vw / ( 750 / 20 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec01 .point .ttl {
            width: 165px;
            margin-bottom: 20px; } }
      .p-step01 .sec01 .point .txt {
        line-height: 1.85; }
        .p-step01 .sec01 .point .txt span {
          border-bottom: 2px dotted #22b173; }
  .p-step01 .sec02 {
    background: url("../images/step1/sec2_bg.png") left top no-repeat;
    background-size: auto 100%;
    margin-bottom: calc(100vw / ( 750 / 70 )); }
    @media screen and (min-width: 768px) {
      .p-step01 .sec02 {
        margin-bottom: 70px; } }
    .p-step01 .sec02-ttl img {
      margin-top: calc(-100vw / ( 750 / 45 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec02-ttl img {
          margin-top: -45px; } }
    .p-step01 .sec02 .merit {
      padding-left: calc(100vw / ( 750 / 300 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec02 .merit {
          padding-left: 300px; } }
      .p-step01 .sec02 .merit .items .item {
        line-height: 1.4;
        margin-bottom: 1em;
        font-size: calc(100vw / ( 750 / 25 ));
        position: relative;
        padding-left: calc(100vw / ( 750 / 37 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec02 .merit .items .item {
            font-size: 25px;
            padding-left: 37px; } }
        .p-step01 .sec02 .merit .items .item .uLine {
          font-weight: bold;
          background: linear-gradient(transparent 70%, rgba(34, 177, 115, 0.4) 30%); }
        .p-step01 .sec02 .merit .items .item:before {
          content: "";
          display: block;
          width: calc(100vw / ( 750 / 27 ));
          height: calc(100vw / ( 750 / 27 ));
          background: url("../images/step1/icon_check.png") center no-repeat;
          background-size: contain;
          position: absolute;
          left: 0;
          top: 0.3em; }
          @media screen and (min-width: 768px) {
            .p-step01 .sec02 .merit .items .item:before {
              width: 27px;
              height: 27px; } }
      .p-step01 .sec02 .merit .u-note {
        padding-bottom: 1em; }
  .p-step01 .sec03 {
    margin-bottom: calc(100vw / ( 750 / 60 )); }
    @media screen and (min-width: 768px) {
      .p-step01 .sec03 {
        margin-bottom: 60px; } }
    .p-step01 .sec03-inBox {
      border: 2px dotted #22b173;
      border-radius: 10px;
      margin-top: calc(-100vw / ( 750 / 70 ));
      background-color: #fff;
      z-index: 1;
      position: relative;
      padding: calc(100vw / ( 750 / 50 )) calc(100vw / ( 750 / 35 ));
      text-align: center;
      position: relative; }
      @media screen and (min-width: 768px) {
        .p-step01 .sec03-inBox {
          margin-top: -70px;
          padding: 50px 35px; } }
      .p-step01 .sec03-inBox:before {
        content: "";
        display: block;
        width: calc(100vw / ( 750 / 109 ));
        height: calc(100vw / ( 750 / 227 ));
        background: url("../images/step1/sec3_obj04.png") center no-repeat;
        background-size: contain;
        position: absolute;
        left: calc(100vw / ( 750 / 100 ));
        top: calc(-100vw / ( 750 / 210 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec03-inBox:before {
            width: 109px;
            height: 227px;
            left: 100px;
            top: -210px; } }
    .p-step01 .sec03-ttl {
      color: #fff;
      display: inline-block;
      height: calc(100vw / ( 750 / 57 ));
      line-height: calc(100vw / ( 750 / 57 ));
      font-weight: bold;
      font-size: calc(100vw / ( 750 / 28 ));
      padding: 0 2em;
      background-color: #22b173;
      margin-bottom: 1em; }
      @media screen and (min-width: 768px) {
        .p-step01 .sec03-ttl {
          height: 57px;
          line-height: 57px;
          font-size: 28px; } }
      .p-step01 .sec03-ttl span {
        color: #fff100; }
    .p-step01 .sec03 .about {
      margin-bottom: calc(100vw / ( 750 / 65 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec03 .about {
          margin-bottom: 65px; } }
      .p-step01 .sec03 .about .txt01 {
        font-size: calc(100vw / ( 750 / 26 ));
        margin-bottom: 1em; }
        @media screen and (min-width: 768px) {
          .p-step01 .sec03 .about .txt01 {
            font-size: 26px; } }
        .p-step01 .sec03 .about .txt01 .uLine {
          border-bottom: 2px dotted #22b173; }
    .p-step01 .sec03 .way .sec03-ttl {
      margin-bottom: 2em; }
    .p-step01 .sec03 .way .flexBox {
      display: flex;
      flex-wrap: wrap;
      align-items: center; }
      .p-step01 .sec03 .way .flexBox .box-obj {
        width: 42%;
        padding: 0 2%;
        margin-right: 2%; }
      .p-step01 .sec03 .way .flexBox .box-txt {
        width: 56%; }
        .p-step01 .sec03 .way .flexBox .box-txt .ttl {
          font-size: calc(100vw / ( 750 / 28 ));
          font-weight: bold;
          position: relative;
          padding-left: calc(100vw / ( 750 / 95 ));
          margin-bottom: calc(100vw / ( 750 / 50 )); }
          @media screen and (min-width: 768px) {
            .p-step01 .sec03 .way .flexBox .box-txt .ttl {
              font-size: 28px;
              padding-left: 95px;
              margin-bottom: 50px; } }
          .p-step01 .sec03 .way .flexBox .box-txt .ttl:before {
            content: "";
            display: block;
            width: calc(100vw / ( 750 / 85 ));
            height: calc(100vw / ( 750 / 88 ));
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%); }
            @media screen and (min-width: 768px) {
              .p-step01 .sec03 .way .flexBox .box-txt .ttl:before {
                width: 85px;
                height: 88px; } }
          .p-step01 .sec03 .way .flexBox .box-txt .ttl.num01:before {
            background: url("../images/step1/sec3_obj02-num01.png") center no-repeat;
            background-size: contain; }
          .p-step01 .sec03 .way .flexBox .box-txt .ttl.num02:before {
            background: url("../images/step1/sec3_obj02-num02.png") center no-repeat;
            background-size: contain; }
          .p-step01 .sec03 .way .flexBox .box-txt .ttl.num03 {
            background: url("../images/obj01.png") calc(100vw / ( 750 / 95 )) center no-repeat;
            background-size: calc(100vw / ( 750 / 240 )) auto; }
            @media screen and (min-width: 768px) {
              .p-step01 .sec03 .way .flexBox .box-txt .ttl.num03 {
                background-position: 95px center;
                background-size: 240px auto; } }
            .p-step01 .sec03 .way .flexBox .box-txt .ttl.num03:before {
              background: url("../images/step1/sec3_obj02-num03.png") center no-repeat;
              background-size: contain; }
        .p-step01 .sec03 .way .flexBox .box-txt .feature {
          line-height: 1.4;
          position: relative;
          padding-left: 0.7em; }
          .p-step01 .sec03 .way .flexBox .box-txt .feature:before {
            content: "";
            display: block;
            background-color: #22b173;
            border-radius: 50%;
            width: calc(100vw / ( 750 / 10 ));
            height: calc(100vw / ( 750 / 10 ));
            position: absolute;
            left: 0;
            top: 0.4em; }
            @media screen and (min-width: 768px) {
              .p-step01 .sec03 .way .flexBox .box-txt .feature:before {
                width: 10px;
                height: 10px; } }
          .p-step01 .sec03 .way .flexBox .box-txt .feature:not(:last-child) {
            margin-bottom: 0.5em; }
    .p-step01 .sec03 .way .items .item {
      text-align: left; }
      .p-step01 .sec03 .way .items .item.for01 {
        margin-bottom: calc(100vw / ( 750 / 70 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec03 .way .items .item.for01 {
            margin-bottom: 70px; } }
      .p-step01 .sec03 .way .items .item.for02 {
        margin-bottom: calc(100vw / ( 750 / 50 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec03 .way .items .item.for02 {
            margin-bottom: 50px; } }
      .p-step01 .sec03 .way .items .item.for03 .sec03-ttl {
        margin: 0;
        padding: 0 1em; }
      .p-step01 .sec03 .way .items .item.for03 .flexBox {
        border: 2px solid #22b173;
        padding: calc(100vw / ( 750 / 50 )) 0;
        margin-bottom: calc(100vw / ( 750 / 30 ));
        position: relative; }
        @media screen and (min-width: 768px) {
          .p-step01 .sec03 .way .items .item.for03 .flexBox {
            padding: 50px 0;
            margin-bottom: 30px; } }
        .p-step01 .sec03 .way .items .item.for03 .flexBox:after {
          content: "";
          display: block;
          width: calc(100vw / ( 750 / 81 ));
          height: calc(100vw / ( 750 / 81 ));
          position: absolute;
          right: 0;
          top: calc(-100vw / ( 750 / 60 ));
          background: url("../images/step1/sec3_obj03.png") center no-repeat;
          background-size: contain; }
          @media screen and (min-width: 768px) {
            .p-step01 .sec03 .way .items .item.for03 .flexBox:after {
              width: 81px;
              height: 81px;
              top: -60px; } }
    .p-step01 .sec03 .way .u-note {
      text-align: left; }
  .p-step01 .sec04 {
    background: url("../images/step1/sec4_bg.png") right center no-repeat;
    background-size: auto 100%; }
    .p-step01 .sec04-ttl {
      width: calc(100vw / ( 750 / 440 ));
      margin-bottom: calc(100vw / ( 750 / 40 )); }
      @media screen and (min-width: 768px) {
        .p-step01 .sec04-ttl {
          width: 440px;
          margin-bottom: 40px; } }
      .p-step01 .sec04-ttl img {
        margin-top: calc(-100vw / ( 750 / 7 )); }
        @media screen and (min-width: 768px) {
          .p-step01 .sec04-ttl img {
            margin-top: -7px; } }
    .p-step01 .sec04-txt {
      width: 53%; }
      .p-step01 .sec04-txt p {
        margin-bottom: 1.5em;
        line-height: 1.85; }
        .p-step01 .sec04-txt p .uLine-dot {
          border-bottom: 2px dotted #22b173; }
        .p-step01 .sec04-txt p .uLine-marker {
          font-weight: bold;
          background: linear-gradient(transparent 70%, rgba(34, 177, 115, 0.4) 30%); }

/*========== p-step02.scss ==========*/
.p-step02 {
  margin-bottom: calc(100vw / ( 750 / 159 ));
  position: relative; }
  @media screen and (min-width: 768px) {
    .p-step02 {
      margin-bottom: 159px; } }
  .p-step02:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 64 ));
    height: calc(100vw / ( 750 / 79 ));
    background: url("../images/icon_below.png") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: calc(-100vw / ( 750 / 159 ));
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .p-step02:after {
        width: 64px;
        height: 79px;
        bottom: -159px; } }
  .p-step02-intro {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: calc(-100vw / ( 750 / 50 ));
    margin-bottom: calc(100vw / ( 750 / 17 ));
    padding: calc(100vw / ( 750 / 40 ));
    z-index: 1;
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step02-intro {
        margin-top: -50px;
        margin-bottom: 17px;
        padding: 40px; } }
    .p-step02-intro p {
      font-size: calc(100vw / ( 750 / 28 )); }
      @media screen and (min-width: 768px) {
        .p-step02-intro p {
          font-size: 28px; } }
      .p-step02-intro p:not(:last-child) {
        margin-bottom: 1.5em; }
      .p-step02-intro p span {
        border-bottom: 1px solid #29a7de; }
  .p-step02-ttlPoint {
    width: calc(100vw / ( 750 / 186 ));
    margin-bottom: calc(100vw / ( 750 / 25 )); }
    @media screen and (min-width: 768px) {
      .p-step02-ttlPoint {
        width: 186px;
        margin-bottom: 25px; } }
  .p-step02-sec01 .obj01 {
    margin-bottom: calc(100vw / ( 750 / 115 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec01 .obj01 {
        margin-bottom: 115px; } }
  .p-step02-sec01 .point01 {
    position: relative;
    margin-bottom: calc(100vw / ( 750 / 110 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec01 .point01 {
        margin-bottom: 110px; } }
    .p-step02-sec01 .point01__inner {
      background: url("../images/bg_tile.png") center top repeat-y;
      background-size: 100% auto;
      padding: calc(100vw / ( 750 / 30 )) calc(100vw / ( 750 / 32 )) calc(100vw / ( 750 / 30 )) calc(100vw / ( 750 / 282 ));
      margin-bottom: calc(100vw / ( 750 / 120 ));
      position: relative; }
      @media screen and (min-width: 768px) {
        .p-step02-sec01 .point01__inner {
          padding: 30px 32px 30px 282px;
          margin-bottom: 120px; } }
      .p-step02-sec01 .point01__inner:after {
        content: "";
        display: block;
        width: calc(100vw / ( 750 / 242 ));
        height: calc(100vw / ( 750 / 111 ));
        background: url("../images/step2/sec1_obj04.png") center no-repeat;
        background-size: contain;
        position: absolute;
        right: calc(100vw / ( 750 / 50 ));
        bottom: calc(-100vw / ( 750 / 100 )); }
        @media screen and (min-width: 768px) {
          .p-step02-sec01 .point01__inner:after {
            width: 242px;
            height: 111px;
            right: 50px;
            bottom: -100px; } }
      .p-step02-sec01 .point01__inner p {
        line-height: 1.85; }
        .p-step02-sec01 .point01__inner p span {
          border-bottom: 2px dotted #29a7de; }
    .p-step02-sec01 .point01 .obj02 {
      position: absolute;
      left: 0;
      top: calc(-100vw / ( 750 / 50 ));
      width: calc(100vw / ( 750 / 348 )); }
      @media screen and (min-width: 768px) {
        .p-step02-sec01 .point01 .obj02 {
          top: -50x;
          width: 348px; } }
    .p-step02-sec01 .point01 .cost {
      display: inline-block;
      line-height: 2.5; }
      .p-step02-sec01 .point01 .costWrap {
        border: 2px dotted #75C5FA;
        border-radius: 10px;
        text-align: center;
        padding: calc(100vw / ( 750 / 50 )) 0;
        margin-bottom: calc(100vw / ( 750 / 20 ));
        position: relative; }
        @media screen and (min-width: 768px) {
          .p-step02-sec01 .point01 .costWrap {
            padding: 50px 0;
            margin-bottom: 20px; } }
        .p-step02-sec01 .point01 .costWrap:before {
          content: "";
          display: block;
          width: calc(100vw / ( 750 / 106 ));
          height: calc(100vw / ( 750 / 158 ));
          background: url("../images/step2/sec1_obj03.png") center no-repeat;
          background-size: contain;
          position: absolute;
          left: 50%;
          top: calc(-100vw / ( 750 / 140 ));
          transform: translateX(-50%); }
          @media screen and (min-width: 768px) {
            .p-step02-sec01 .point01 .costWrap:before {
              width: 106px;
              height: 158px;
              top: -140px; } }
      .p-step02-sec01 .point01 .cost .ttl {
        float: left;
        clear: both;
        width: 6.5em;
        text-align: right;
        color: #75C5FA; }
        .p-step02-sec01 .point01 .cost .ttl span {
          font-weight: bold;
          font-size: calc(100vw / ( 750 / 40 )); }
          @media screen and (min-width: 768px) {
            .p-step02-sec01 .point01 .cost .ttl span {
              font-size: 40px; } }
      .p-step02-sec01 .point01 .cost .txt {
        margin-left: 8em;
        text-align: left; }
        .p-step02-sec01 .point01 .cost .txt span {
          font-weight: bold;
          font-size: calc(100vw / ( 750 / 60 ));
          display: inline-block;
          margin-top: -0.45em; }
          @media screen and (min-width: 768px) {
            .p-step02-sec01 .point01 .cost .txt span {
              font-size: 60px; } }
  .p-step02-sec01 .point02__inner {
    background: url("../images/bg_tile.png") center top repeat-y;
    background-size: 100% auto;
    padding: calc(100vw / ( 750 / 30 )) 0 calc(100vw / ( 750 / 60 )) calc(100vw / ( 750 / 32 ));
    margin-bottom: calc(100vw / ( 750 / 120 ));
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step02-sec01 .point02__inner {
        padding: 30px 0 60px 32px;
        margin-bottom: 120px; } }
    .p-step02-sec01 .point02__inner:after {
      content: "";
      display: block;
      width: calc(100vw / ( 750 / 256 ));
      height: calc(100vw / ( 750 / 95 ));
      background: url("../images/step2/sec1_obj06.png") center no-repeat;
      background-size: contain;
      position: absolute;
      left: calc(100vw / ( 750 / 170 ));
      bottom: calc(-100vw / ( 750 / 55 )); }
      @media screen and (min-width: 768px) {
        .p-step02-sec01 .point02__inner:after {
          width: 256px;
          height: 95px;
          left: 170px;
          bottom: -55px; } }
    .p-step02-sec01 .point02__inner p {
      line-height: 1.85;
      margin-bottom: 1em; }
      .p-step02-sec01 .point02__inner p span {
        border-bottom: 2px dotted #29a7de; }
  .p-step02-sec01 .point02 .obj05 {
    position: absolute;
    right: 0;
    top: calc(-100vw / ( 750 / 25 ));
    width: calc(100vw / ( 750 / 386 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec01 .point02 .obj05 {
        top: -25px;
        width: 386px; } }
  .p-step02-sec01 .point02 .obj07 {
    position: relative;
    margin-bottom: calc(100vw / ( 750 / 80 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec01 .point02 .obj07 {
        margin-bottom: 80px; } }
    .p-step02-sec01 .point02 .obj07:before {
      content: "";
      display: block;
      width: calc(100vw / ( 750 / 109 ));
      height: calc(100vw / ( 750 / 156 ));
      background: url("../images/step2/sec1_obj08.png") center no-repeat;
      background-size: contain;
      position: absolute;
      left: calc(100vw / ( 750 / 40 ));
      top: calc(-100vw / ( 750 / 140 )); }
      @media screen and (min-width: 768px) {
        .p-step02-sec01 .point02 .obj07:before {
          width: 109px;
          height: 156px;
          left: 40px;
          top: -140px; } }
  .p-step02-sec02 .obj01 {
    margin-bottom: calc(100vw / ( 750 / 35 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec02 .obj01 {
        margin-bottom: 35px; } }
  .p-step02-sec03 .boxTxt {
    background: url("../images/step2/sec3_obj01.png") right center no-repeat;
    background-size: 100% auto;
    height: calc(100vw / ( 750 / 455 ));
    padding: calc(100vw / ( 750 / 15 )) 0 0 calc(100vw / ( 750 / 32 ));
    margin: calc(100vw / ( 750 / 25 )) 0 calc(100vw / ( 750 / 30 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec03 .boxTxt {
        height: 455px;
        padding: 15px 0 0 32px;
        margin: 25px 0 30px; } }
    .p-step02-sec03 .boxTxt p {
      margin-bottom: 1em;
      line-height: 1.85; }
      .p-step02-sec03 .boxTxt p .uLine-dot {
        border-bottom: 2px dotted #29a7de; }
      .p-step02-sec03 .boxTxt p .uLine-marker {
        background: linear-gradient(transparent 70%, #fff100 30%); }
  .p-step02-sec03 .boxGraph {
    position: relative;
    margin-bottom: calc(100vw / ( 750 / 80 )); }
    @media screen and (min-width: 768px) {
      .p-step02-sec03 .boxGraph {
        margin-bottom: 80px; } }
    .p-step02-sec03 .boxGraph .txt01 {
      position: absolute;
      right: calc(100vw / ( 750 / 32 ));
      bottom: 0;
      line-height: 1.85; }
      @media screen and (min-width: 768px) {
        .p-step02-sec03 .boxGraph .txt01 {
          right: 32px; } }
      .p-step02-sec03 .boxGraph .txt01 span {
        border-bottom: 2px dotted #29a7de; }

/*========== p-step03.scss ==========*/
.p-step03 {
  margin-bottom: calc(100vw / ( 750 / 189 ));
  position: relative; }
  @media screen and (min-width: 768px) {
    .p-step03 {
      margin-bottom: 189px; } }
  .p-step03:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 64 ));
    height: calc(100vw / ( 750 / 79 ));
    background: url("../images/icon_below.png") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: calc(-100vw / ( 750 / 159 ));
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .p-step03:after {
        width: 64px;
        height: 79px;
        bottom: -159px; } }
  .p-step03-intro {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: calc(-100vw / ( 750 / 100 ));
    margin-bottom: calc(100vw / ( 750 / 65 ));
    padding: calc(100vw / ( 750 / 40 ));
    z-index: 1;
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step03-intro {
        margin-top: -100px;
        margin-bottom: 65px;
        padding: 40px; } }
    .p-step03-intro p {
      font-size: calc(100vw / ( 750 / 28 )); }
      @media screen and (min-width: 768px) {
        .p-step03-intro p {
          font-size: 28px; } }
      .p-step03-intro p:not(:last-child) {
        margin-bottom: 1.5em; }
      .p-step03-intro p span {
        border-bottom: 1px solid #ff7ba8; }
  .p-step03-ttl {
    margin-bottom: calc(100vw / ( 750 / 80 )); }
    @media screen and (min-width: 768px) {
      .p-step03-ttl {
        margin-bottom: 80px; } }
  .p-step03-subTtl {
    text-align: center;
    padding-left: calc(100vw / ( 750 / 90 ));
    position: relative;
    margin-bottom: calc(100vw / ( 750 / 35 )); }
    @media screen and (min-width: 768px) {
      .p-step03-subTtl {
        padding-left: 90px;
        margin-bottom: 35px; } }
    .p-step03-subTtl:before {
      content: "";
      display: block;
      width: calc(100vw / ( 750 / 132 ));
      height: calc(100vw / ( 750 / 132 ));
      background: url("../images/step3/ttl_obj.png") center no-repeat;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 0; }
      @media screen and (min-width: 768px) {
        .p-step03-subTtl:before {
          width: 132px;
          height: 132px; } }
    .p-step03-subTtl.even {
      padding-left: 0;
      padding-right: calc(100vw / ( 750 / 90 )); }
      @media screen and (min-width: 768px) {
        .p-step03-subTtl.even {
          padding-right: 90px; } }
      .p-step03-subTtl.even:before {
        left: unset;
        right: 0;
        transform: rotate(-270deg); }
    .p-step03-subTtl .num {
      font-weight: bold;
      font-size: calc(100vw / ( 750 / 32 ));
      margin-bottom: 1em; }
      @media screen and (min-width: 768px) {
        .p-step03-subTtl .num {
          font-size: 32px; } }
      .p-step03-subTtl .num span {
        background: linear-gradient(transparent 70%, rgba(255, 123, 168, 0.4) 30%); }
      .p-step03-subTtl .num:before {
        content: "";
        display: block;
        margin: 0 auto calc(100vw / ( 750 / 25 ));
        width: calc(100vw / ( 750 / 92 ));
        height: calc(100vw / ( 750 / 106 )); }
        @media screen and (min-width: 768px) {
          .p-step03-subTtl .num:before {
            margin-bottom: 25px;
            width: 92px;
            height: 106px; } }
      .p-step03-subTtl .num01:before {
        background: url("../images/step3/ttl_num01.png") center no-repeat;
        background-size: contain; }
      .p-step03-subTtl .num02:before {
        background: url("../images/step3/ttl_num02.png") center no-repeat;
        background-size: contain; }
      .p-step03-subTtl .num03:before {
        background: url("../images/step3/ttl_num03.png") center no-repeat;
        background-size: contain; }
  .p-step03-lead {
    width: calc(100vw / ( 750 / 575 ));
    margin: 0 auto calc(100vw / ( 750 / 60 )); }
    @media screen and (min-width: 768px) {
      .p-step03-lead {
        width: 575px;
        margin-bottom: 60px; } }
    .p-step03-lead p:not(:last-child) {
      margin-bottom: 1em; }
    .p-step03-lead p span {
      border-bottom: 2px dotted #ff7ba8; }
  .p-step03 .sec01 {
    margin-bottom: calc(100vw / ( 750 / 100 )); }
    @media screen and (min-width: 768px) {
      .p-step03 .sec01 {
        margin-bottom: 100px; } }
    .p-step03 .sec01 .obj01 {
      margin-bottom: calc(100vw / ( 750 / 70 )); }
      @media screen and (min-width: 768px) {
        .p-step03 .sec01 .obj01 {
          margin-bottom: 70px; } }
  .p-step03 .sec02 {
    margin-bottom: calc(100vw / ( 750 / 65 )); }
    @media screen and (min-width: 768px) {
      .p-step03 .sec02 {
        margin-bottom: 65px; } }
  .p-step03 .sec03 .profileWrap {
    background: url("../images/step3/sec03_bg.png") left top no-repeat;
    background-size: 100% auto;
    padding: calc(100vw / ( 750 / 90 )) calc(100vw / ( 750 / 32 )) 0 calc(100vw / ( 750 / 310 ));
    margin-bottom: calc(100vw / ( 750 / 45 )); }
    @media screen and (min-width: 768px) {
      .p-step03 .sec03 .profileWrap {
        padding: 90px 32px 0 310px;
        margin-bottom: 45px; } }
  .p-step03 .sec03 .profile .ttl {
    font-size: calc(100vw / ( 750 / 20 ));
    margin-right: calc(-100vw / ( 750 / 32 )); }
    @media screen and (min-width: 768px) {
      .p-step03 .sec03 .profile .ttl {
        font-size: 20px;
        margin-right: -32px; } }
    .p-step03 .sec03 .profile .ttl p {
      line-height: 1.5; }
    .p-step03 .sec03 .profile .ttl .name {
      font-weight: bold;
      font-size: calc(100vw / ( 750 / 36 ));
      background: url("../images/obj01.png") left center no-repeat;
      background-size: contain;
      padding: 0.2em 1.5em 0.5em 0;
      letter-spacing: 0.1em;
      line-height: 1.8;
      display: inline-block; }
      @media screen and (min-width: 768px) {
        .p-step03 .sec03 .profile .ttl .name {
          font-size: 36px; } }
  .p-step03 .sec03 .profile .txt {
    font-size: calc(100vw / ( 750 / 22.8 ));
    border-top: 2px dotted #75C5FA;
    margin-top: 1em;
    padding-top: 1em; }
    @media screen and (min-width: 768px) {
      .p-step03 .sec03 .profile .txt {
        font-size: 22px; } }

/*========== p-step04.scss ==========*/
.p-step04 {
  margin-bottom: calc(100vw / ( 750 / 214 ));
  position: relative; }
  @media screen and (min-width: 768px) {
    .p-step04 {
      margin-bottom: 214px; } }
  .p-step04:after {
    content: "";
    display: block;
    width: calc(100vw / ( 750 / 64 ));
    height: calc(100vw / ( 750 / 79 ));
    background: url("../images/icon_below.png") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: calc(-100vw / ( 750 / 159 ));
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .p-step04:after {
        width: 64px;
        height: 79px;
        bottom: -159px; } }
  .p-step04-intro {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: calc(-100vw / ( 750 / 100 ));
    margin-bottom: calc(100vw / ( 750 / 65 ));
    padding: calc(100vw / ( 750 / 40 )) calc(100vw / ( 750 / 220 )) calc(100vw / ( 750 / 40 )) calc(100vw / ( 750 / 40 ));
    z-index: 1;
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step04-intro {
        margin-top: -100px;
        margin-bottom: 65px;
        padding: 40px 220px 40px 40px; } }
    .p-step04-intro p {
      font-size: calc(100vw / ( 750 / 28 )); }
      @media screen and (min-width: 768px) {
        .p-step04-intro p {
          font-size: 28px; } }
      .p-step04-intro p:not(:last-child) {
        margin-bottom: 1.5em; }
      .p-step04-intro p span {
        border-bottom: 1px solid #ed7424; }
    .p-step04-intro .obj {
      position: absolute;
      width: calc(100vw / ( 750 / 304 ));
      right: calc(-100vw / ( 750 / 15 ));
      top: calc(-100vw / ( 750 / 117 )); }
      @media screen and (min-width: 768px) {
        .p-step04-intro .obj {
          width: 304px;
          right: -15px;
          top: -117px; } }
  .p-step04 .flow {
    margin-bottom: calc(100vw / ( 750 / 65 )); }
    @media screen and (min-width: 768px) {
      .p-step04 .flow {
        margin-bottom: 65px; } }
    .p-step04 .flow .item01 {
      position: relative; }
      .p-step04 .flow .item01 .c-btn-std {
        position: absolute;
        right: calc(100vw / ( 750 / 32 ));
        bottom: calc(100vw / ( 750 / 32 ));
        height: calc(100vw / ( 750 / 95 ));
        line-height: calc(100vw / ( 750 / 95 ));
        width: calc(100vw / ( 750 / 312 ));
        margin: 0;
        font-size: calc(100vw / ( 750 / 26 )); }
        @media screen and (min-width: 768px) {
          .p-step04 .flow .item01 .c-btn-std {
            right: 32px;
            bottom: 32px;
            height: 95px;
            line-height: 95px;
            width: 312px;
            font-size: 26px; } }
        .p-step04 .flow .item01 .c-btn-std:after {
          right: calc(100vw / ( 750 / 30 )); }
          @media screen and (min-width: 768px) {
            .p-step04 .flow .item01 .c-btn-std:after {
              right: 30px; } }
    .p-step04 .flow .item03 {
      margin-top: calc(-100vw / ( 750 / 30 )); }
      @media screen and (min-width: 768px) {
        .p-step04 .flow .item03 {
          margin-top: -30px; } }
    .p-step04 .flow .item04 {
      margin-top: calc(-100vw / ( 750 / 70 )); }
      @media screen and (min-width: 768px) {
        .p-step04 .flow .item04 {
          margin-top: -70px; } }
    .p-step04 .flow .item05 {
      margin-top: calc(-100vw / ( 750 / 35 )); }
      @media screen and (min-width: 768px) {
        .p-step04 .flow .item05 {
          margin-top: -35px; } }
    .p-step04 .flow .item06 {
      margin-top: calc(-100vw / ( 750 / 45 )); }
      @media screen and (min-width: 768px) {
        .p-step04 .flow .item06 {
          margin-top: -45px; } }
    .p-step04 .flow .item08 {
      margin-top: calc(-100vw / ( 750 / 35 )); }
      @media screen and (min-width: 768px) {
        .p-step04 .flow .item08 {
          margin-top: -35px; } }

/*========== p-step05.scss ==========*/
.p-step05 {
  background-color: #f4f4f4;
  padding-bottom: calc(100vw / ( 750 / 50 )); }
  @media screen and (min-width: 768px) {
    .p-step05 {
      padding-bottom: 50px; } }
  .p-step05 .sec {
    background-color: #fff;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);
    padding: calc(100vw / ( 750 / 60 )) calc(100vw / ( 750 / 44 )) calc(100vw / ( 750 / 50 ));
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step05 .sec {
        padding: 60px 44px 50px; } }
    .p-step05 .sec:not(:last-child) {
      margin-bottom: calc(100vw / ( 750 / 95 )); }
      @media screen and (min-width: 768px) {
        .p-step05 .sec:not(:last-child) {
          margin-bottom: 95px; } }
    .p-step05 .secWrap {
      margin-top: calc(-100vw / ( 750 / 90 ));
      z-index: 1;
      position: relative; }
      @media screen and (min-width: 768px) {
        .p-step05 .secWrap {
          margin-top: -90px; } }
    .p-step05 .sec .c-btn-std {
      width: 100%;
      font-size: calc(100vw / ( 750 / 26 )); }
      @media screen and (min-width: 768px) {
        .p-step05 .sec .c-btn-std {
          font-size: 26px; } }
    .p-step05 .sec .btnList {
      padding-bottom: calc(100vw / ( 750 / 10 ));
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      @media screen and (min-width: 768px) {
        .p-step05 .sec .btnList {
          padding-bottom: 10px; } }
      .p-step05 .sec .btnList .item {
        margin-bottom: calc(100vw / ( 750 / 10 ));
        width: 100%; }
        @media screen and (min-width: 768px) {
          .p-step05 .sec .btnList .item {
            margin-bottom: 10px; } }
        .p-step05 .sec .btnList .item.half {
          width: 49%; }
        .p-step05 .sec .btnList .item a {
          display: block; }
  .p-step05-for {
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    height: calc(100vw / ( 750 / 56 ));
    line-height: calc(100vw / ( 750 / 56 ));
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.05em;
    width: calc(100vw / ( 750 / 596 ));
    font-size: calc(100vw / ( 750 / 24 )); }
    @media screen and (min-width: 768px) {
      .p-step05-for {
        height: 56px;
        line-height: 56px;
        width: 596px;
        font-size: 24px; } }
    .p-step05-for.for01 {
      background-color: #00a599; }
    .p-step05-for.for02 {
      background-color: #ff7ba8; }
    .p-step05-for.for03 {
      background-color: #29a7de; }
    .p-step05-for.for04 {
      background-color: #22b173; }
    .p-step05-for.for05 {
      background-color: #ed7424; }
    .p-step05-for.for06 {
      background-color: #ffff55;
      border: 1px solid #333333;
      color: #333333; }
  .p-step05-ttl {
    font-size: calc(100vw / ( 750 / 34 ));
    margin-bottom: 1em;
    line-height: 1.3;
    font-weight: bold;
    padding-left: calc(100vw / ( 750 / 108 ));
    position: relative; }
    @media screen and (min-width: 768px) {
      .p-step05-ttl {
        font-size: 34px;
        padding-left: 108px; } }
    .p-step05-ttl:before {
      content: "";
      display: block;
      width: calc(100vw / ( 750 / 88 ));
      height: calc(100vw / ( 750 / 97 ));
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%); }
      @media screen and (min-width: 768px) {
        .p-step05-ttl:before {
          width: 88px;
          height: 97px; } }
    .p-step05-ttl.for01 span {
      background: linear-gradient(transparent 75%, rgba(0, 165, 153, 0.4) 25%); }
    .p-step05-ttl.for01:before {
      background: url("../images/step5/subttl01.png") center no-repeat;
      background-size: contain; }
    .p-step05-ttl.for02 span {
      background: linear-gradient(transparent 75%, rgba(255, 123, 168, 0.4) 25%); }
    .p-step05-ttl.for02:before {
      background: url("../images/step5/subttl02.png") center no-repeat;
      background-size: contain; }
    .p-step05-ttl.for03 span {
      background: linear-gradient(transparent 75%, rgba(41, 167, 222, 0.4) 25%); }
    .p-step05-ttl.for03:before {
      background: url("../images/step5/subttl03.png") center no-repeat;
      background-size: contain; }
    .p-step05-ttl.for04 span {
      background: linear-gradient(transparent 75%, rgba(34, 177, 115, 0.4) 25%); }
    .p-step05-ttl.for04:before {
      background: url("../images/step5/subttl04.png") center no-repeat;
      background-size: contain; }
    .p-step05-ttl.for05 span {
      background: linear-gradient(transparent 75%, rgba(237, 116, 36, 0.4) 25%); }
    .p-step05-ttl.for05:before {
      background: url("../images/step5/subttl05.png") center no-repeat;
      background-size: contain; }
    .p-step05-ttl.for06 span {
      background: linear-gradient(transparent 75%, rgba(255, 255, 85, 0.4) 25%); }
    .p-step05-ttl.for06:before {
      background: url("../images/step5/subttl06.png") center no-repeat;
      background-size: contain; }
  .p-step05 .point .ttl {
    width: calc(100vw / ( 750 / 165 ));
    margin: 0 0 calc(100vw / ( 750 / 15 )) calc(-100vw / ( 750 / 12 )); }
    @media screen and (min-width: 768px) {
      .p-step05 .point .ttl {
        width: 165px;
        margin: 0 0 15px -12px; } }
  .p-step05 .point .txt {
    font-size: calc(100vw / ( 750 / 25.4 ));
    line-height: 1.925;
    margin-bottom: 1.5em; }
    @media screen and (min-width: 768px) {
      .p-step05 .point .txt {
        font-size: 25px; } }
    .p-step05 .point .txt .uLine {
      border-bottom-width: 2px;
      border-bottom-style: dotted; }
    .p-step05 .point .txt.for01 .uLine {
      border-bottom-color: #00a599; }
    .p-step05 .point .txt.for02 .uLine {
      border-bottom-color: #ff7ba8; }
    .p-step05 .point .txt.for03 .uLine {
      border-bottom-color: #29a7de; }
    .p-step05 .point .txt.for04 .uLine {
      border-bottom-color: #22b173; }
    .p-step05 .point .txt.for05 .uLine {
      border-bottom-color: #ed7424; }
    .p-step05 .point .txt.for06 .uLine {
      border-bottom-color: #999; }

/*========== u-utility.scss ==========*/
.u-bold {
  font-weight: bold; }
.u-note {
  color: #666;
  font-size: calc(100vw / ( 750 / 16 )); }
  @media screen and (min-width: 768px) {
    .u-note {
      font-size: 16px; } }