@charset "UTF-8";
/*===================================
 page --- 調査の流れ
===================================*/
footer {
  margin-top: 36px;
}
@media screen and (min-width: 600px) {
  footer {
    margin-top: 80px;
  }
}

/*----------------------------------
 ページタイトル
----------------------------------*/
.page__title-area {
  background-image: url("../../images/flow/mv_sp.jpg");
}
@media screen and (min-width: 600px) {
  .page__title-area {
    background-image: url("../../images/flow/mv.jpg");
  }
}

/*----------------------------------
 相談したらどうなるの？浮気調査はどのように進めるの？
----------------------------------*/
.flow-about {
  margin-top: 33px;
}
@media screen and (min-width: 600px) {
  .flow-about {
    margin-top: 33px;
  }
}
.flow-about .l-lower-inner {
  padding: 0 20px;
}
.flow-about .c-sec__title {
  color: #e89289;
  letter-spacing: -0.035em;
  line-height: 1.5;
}
@media screen and (min-width: 600px) {
  .flow-about .c-sec__title {
    letter-spacing: 0;
  }
}
.flow-about .c-sec__title::after {
  display: none;
}

.flow-about__intro {
  line-height: 1.7666666667;
  margin-top: 24px;
}
@media screen and (min-width: 600px) {
  .flow-about__intro {
    line-height: 1.7333333333;
    text-align: center;
    margin-top: 17px;
  }
}

.flow-list {
  margin-top: 38px;
}
@media screen and (min-width: 600px) {
  .flow-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr;
    grid-template-columns: repeat(6, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: repeat(1, 1fr);
    gap: 0 1%;
    max-width: 867px;
    margin: 73px auto 0;
  }
  .flow-list > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .flow-list > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .flow-list > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  .flow-list > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
  .flow-list > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
  }
  .flow-list > *:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 11;
  }
}
.flow-list li {
  position: relative;
  width: 100%;
  /* 矢印 */
}
@media screen and (min-width: 600px) {
  .flow-list li {
    width: 97.75%;
    max-width: 128px;
  }
}
.flow-list li:nth-child(n+2) {
  margin-top: 13px;
}
@media screen and (min-width: 600px) {
  .flow-list li:nth-child(n+2) {
    margin-top: 0;
  }
}
@media screen and (min-width: 600px) {
  .flow-list li::after {
    position: absolute;
    top: 61%;
    right: -10%;
    -webkit-transform: translateY(-50%) translateX(0);
            transform: translateY(-50%) translateX(0);
    display: block;
    content: "";
    background: url("../../images/flow/flow_list_arw.svg") no-repeat center center/contain;
    width: 10px;
    height: 16px;
  }
}
.flow-list li:last-child::after {
  display: none;
}
.flow-list li img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/*----------------------------------
 各流れ
----------------------------------*/
.flow {
  margin-top: 63px;
}
@media screen and (min-width: 600px) {
  .flow {
    margin-top: 95px;
  }
}

.flow-block {
  background-position: center top;
  background-size: 100% 103px;
  background-repeat: no-repeat;
  padding-bottom: 80px;
  /* 偶数のブロック（コンテンツを左右逆に） */
}
@media screen and (min-width: 600px) {
  .flow-block {
    background-size: 100% 136px;
    background-repeat: no-repeat;
    padding-bottom: 93px;
  }
}
.flow-block:nth-child(even) .flow-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
@media screen and (min-width: 600px) {
  .flow-block:nth-child(even) .flow-wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 9% 1fr;
    grid-template-columns: auto 1fr;
    gap: 0 9%;
  }
}
.flow-block:last-child {
  padding-bottom: 0;
}
@media screen and (min-width: 600px) {
  .flow-block .l-lower-inner {
    max-width: calc(860px + (40px * 2));
  }
}

.flow-num {
  position: relative;
  top: -22px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  max-width: 100px;
  margin: 0 auto;
  padding: 7px 10px;
  /* 三角形 */
}
@media screen and (min-width: 600px) {
  .flow-num {
    top: -29px;
    font-size: 4rem;
    letter-spacing: 0.12em;
    max-width: 133px;
    padding: 9px 10px;
  }
}
.flow-num::after {
  position: absolute;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
  display: block;
  content: "";
  width: 100%;
  height: 15px;
}
@media screen and (min-width: 600px) {
  .flow-num::after {
    bottom: -20px;
    height: 20px;
  }
}
.flow-num p {
  position: relative;
  top: 5px;
}
@media screen and (min-width: 600px) {
  .flow-num p {
    top: 5px;
  }
}

.flow__title {
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.5777777778;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  text-align: center;
  margin-top: 14px;
}
@media screen and (min-width: 600px) {
  .flow__title {
    font-size: 3rem;
    line-height: 1.5666666667;
    margin-top: 18px;
  }
}

.flow-wrap {
  margin-top: 17px;
}
@media screen and (min-width: 600px) {
  .flow-wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4% auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    gap: 0 4%;
    margin-top: 44px;
  }
  .flow-wrap > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .flow-wrap > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

.flow__box {
  font-family: "NotoSans-DemiLight", sans-serif;
  font-style: normal;
  font-weight: 350;
  line-height: 1.7666666667;
}
@media screen and (min-width: 600px) {
  .flow__box {
    line-height: 1.7333333333;
  }
}

.flow__head {
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.4705882353;
  text-align: center;
  margin-bottom: 13px;
}
@media screen and (min-width: 600px) {
  .flow__head {
    font-size: 1.9rem;
    line-height: 1.5789473684;
    text-align: left;
    margin-bottom: 13px;
  }
}
.flow__head strong {
  color: #e89289;
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 700;
}

.flow__img {
  margin-top: 16px;
}
@media screen and (min-width: 600px) {
  .flow__img {
    margin-top: 0;
  }
}
.flow__img img {
  display: block;
  margin: 0 auto;
}

.btn-flow {
  margin: 30px auto 10px;
  /* 矢印 */
}
@media screen and (min-width: 600px) {
  .btn-flow {
    border-radius: 9px;
    margin: 20px 0 0;
  }
}
.btn-flow:hover, .btn-flow:active {
  opacity: 0.75;
}
.btn-flow .c-btn-base__link {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-family: "NotoSans-Medium", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 1.1714285714;
  padding: 12px 48px;
}
@media screen and (min-width: 600px) {
  .btn-flow .c-btn-base__link {
    font-size: 1.7rem;
    line-height: 1.5294117647;
    padding: 17px 28px;
  }
}
.btn-flow.c-btn-icon .c-btn-base__link::after {
  right: 23px;
  border-top-width: 3px;
  border-right-width: 3px;
  width: 11px;
  height: 11px;
}
@media screen and (min-width: 600px) {
  .btn-flow.c-btn-icon .c-btn-base__link::after {
    right: 23px;
  }
}

/* ------ 各流れごとの設定 ------ */
.flow01 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(235, 232, 237)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(235, 232, 237) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow01 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(235, 232, 237)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(235, 232, 237) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.flow01 .flow-num {
  background-color: #c297c0;
  /* 三角形 */
}
.flow01 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #c297c0)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #c297c0)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #c297c0 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #c297c0 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow01 .flow__title {
  color: #c297c0;
}

.flow02 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(227, 229, 235)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(227, 229, 235) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow02 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(227, 229, 235)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(227, 229, 235) 0%, rgba(255, 255, 255, 0) 100%);
    padding-bottom: 131px;
  }
}
.flow02 .flow-num {
  background-color: #a69ec8;
  /* 三角形 */
}
.flow02 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #a69ec8)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #a69ec8)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #a69ec8 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #a69ec8 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow02 .flow__title {
  color: #a69ec8;
}
.flow02 .btn-flow {
  background-color: #a69ec8;
  max-width: 320px;
}
@media screen and (min-width: 600px) {
  .flow02 .btn-flow {
    max-width: 438px;
  }
}

.flow03 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(223, 235, 236)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(223, 235, 236) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow03 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(223, 235, 236)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(223, 235, 236) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.flow03 .flow-num {
  background-color: #90bcc1;
  /* 三角形 */
}
.flow03 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #90bcc1)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #90bcc1)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #90bcc1 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #90bcc1 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow03 .flow__title {
  color: #90bcc1;
}

.flow04 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 238, 229)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(233, 238, 229) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow04 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 238, 229)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(233, 238, 229) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.flow04 .flow-num {
  background-color: #a3bf91;
  /* 三角形 */
}
.flow04 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #a3bf91)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #a3bf91)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #a3bf91 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #a3bf91 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow04 .flow__title {
  color: #a3bf91;
}

.flow05 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 228, 219)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(232, 228, 219) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow05 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 228, 219)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(232, 228, 219) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.flow05 .flow-num {
  background-color: #c1b291;
  /* 三角形 */
}
.flow05 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #c1b291)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #c1b291)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #c1b291 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #c1b291 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow05 .flow__title {
  color: #c1b291;
}

.flow06 {
  /* 背景グラデ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 228, 227)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(180deg, rgb(238, 228, 227) 0%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 600px) {
  .flow06 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 228, 227)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgb(238, 228, 227) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.flow06 .flow-num {
  background-color: #c2918c;
  /* 三角形 */
}
.flow06 .flow-num::after {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(51.1%, #c2918c)) no-repeat top left/50.1% 100%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(51.1%, #c2918c)) no-repeat bottom right/50.1% 100%;
  background: linear-gradient(to top right, transparent 50%, #c2918c 51.1%) no-repeat top left/50.1% 100%, linear-gradient(to top left, transparent 50%, #c2918c 51.1%) no-repeat bottom right/50.1% 100%;
}
.flow06 .flow__title {
  color: #c2918c;
}

/*----------------------------------
 お問い合わせエリア
----------------------------------*/
.flow-contact {
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5333333333;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  text-align: center;
  margin-top: 55px;
}
@media screen and (min-width: 600px) {
  .flow-contact {
    font-size: 1.8rem;
    line-height: 2.0555555556;
    margin-top: 90px;
  }
}

.btn-contact {
  max-width: 320px;
  margin: 27px auto 0;
  /* 矢印 */
}
@media screen and (min-width: 600px) {
  .btn-contact {
    border-radius: 9px;
    max-width: 501px;
    margin-top: 30px;
  }
}
.btn-contact .c-btn-base__link {
  display: block;
  font-family: "NotoSans-Medium", sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media screen and (min-width: 600px) {
  .btn-contact .c-btn-base__link {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.btn-contact.c-btn-icon .c-btn-base__link::after {
  border-top-width: 3px;
  border-right-width: 3px;
  right: 18px;
  width: 11px;
  height: 11px;
}
@media screen and (min-width: 600px) {
  .btn-contact.c-btn-icon .c-btn-base__link::after {
    right: 28px;
    width: 14px;
    height: 14px;
  }
}
.btn-contact .btn__txt--sub,
.btn-contact .btn__txt--main {
  display: block;
}
.btn-contact .btn__txt--sub {
  font-size: 1.2rem;
  line-height: 1.6086956522;
}
@media screen and (min-width: 600px) {
  .btn-contact .btn__txt--sub {
    font-size: 1.8rem;
    line-height: 1.6111111111;
  }
}
.btn-contact .btn__txt--main {
  font-size: 1.8rem;
  line-height: 1.5277777778;
}
@media screen and (min-width: 600px) {
  .btn-contact .btn__txt--main {
    font-size: 2.9rem;
    line-height: 1.4827586207;
  }
}
/*# sourceMappingURL=flow.css.map */