@charset "UTF-8";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/********************************************************

setting

********************************************************/
:root {
  --margin-block: 200px; }

@media (min-width: 1101px) and (max-width: 1280px) {
  :root {
    --margin-block: 120px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --margin-block: 90px; } }
@media (max-width: 640px) {
  :root {
    --margin-block: 70px; } }
/*=======================================================================

 ご契約の流れ

========================================================================*/
.rough {
  max-width: 1000px;
  margin: 0 auto; }

.page-flow {
  background: #fff; }
  .page-flow .cap {
    font-size: 12px;
    margin-top: 15px; }

.page-flow .flow {
  padding: calc(var(--margin-block) / 2) 0 var(--margin-block);
  width: 96%;
  margin: 0 auto; }
  @media screen and (max-width: 767.98px) {
    .page-flow .flow {
      width: 93%; } }

.page-flow .flow_arrow {
  position: relative;
  height: 1px;
  background: #c1c1c1;
  margin-bottom: 100px; }
  .page-flow .flow_arrow img {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: auto;
    width: 11.67%;
    line-height: 0; }

.page-flow .flow_title {
  text-align: center;
  font-size: 36px;
  color: #FFF;
  padding: 20px 0;
  margin: 120px auto 50px;
  background: #5a481a; }
  @media screen and (max-width: 767.98px) {
    .page-flow .flow_title {
      font-size: 24px;
      padding: 15px 0; } }

.page-flow .flow .inner {
  max-width: 1000px;
  margin: 0 auto; }

.page-flow .flow .flow-item {
  position: relative;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; } }
.page-flow .flow .flow-item:not(:last-child) {
  margin-bottom: 80px; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item:not(:last-child) {
    padding-bottom: 0px;
    margin-bottom: 50px; } }
.page-flow .flow .flow-item .txtArea {
  width: 57%;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  text-align: left; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item .txtArea {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 100%; } }
.page-flow .flow .flow-item .imgArea {
  position: relative;
  width: 38%; }

.page-flow .flow .flow-item .imgArea .figure {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }

.page-flow .flow .flow-item .imgArea .figure.--capt_in figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  padding: 5px 7px;
  text-align: right;
  font-size: clamp(11px, 1.2vw, 12px);
  letter-spacing: 0.02em; }
  @media screen and (max-width: 767.98px) {
    .page-flow .flow .flow-item .imgArea .figure.--capt_in figcaption .figure.--capt_in figcaption {
      padding: 5px 6px; } }

.page-flow .flow .flow-item .imgArea .figure figcaption.--black__shadow {
  color: #333;
  text-shadow: 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white; }

.page-flow .flow .flow-item .imgArea .figure figcaption.--white__shadow {
  color: #fff;
  text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black; }

.page-flow .flow .flow-item .imgArea .figure figcaption.--white {
  color: #fff; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item .imgArea {
    width: 100%;
    margin-top: 20px; } }
/*.page-flow .flow .flow-item .imgArea::before {
  pointer-events: none;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  border-bottom: 20px solid transparent;
  border-left: 20px solid #a69a68;
}*/
.page-flow .flow .flow-item .flow-item__step {
  position: relative;
  font-size: clamp(36px, 4.8vw, 48px);
  font-family: "Times New Roman", Times, serif;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #a69a68;
  padding-bottom: 5px;
  border-bottom: 1px solid #a69a68; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item .flow-item__step {
    padding-bottom: 3px; } }
.page-flow .flow .flow-item .flow-item__step::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 3px;
  background-color: #a69a68; }

.page-flow .flow .flow-item .flow-item__step small {
  font-size: 70%; }

.page-flow .flow .flow-item .flow-item__ttl {
  font-size: clamp(25px, 3.401vw, 34px);
  font-family: YakuHanMP, "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 15px;
  margin-bottom: 15px; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item .flow-item__ttl {
    margin-top: 12px;
    margin-bottom: 10px; } }
.page-flow .flow .flow-item .flow-item__txt {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 300; }

.page-flow .flow .flow-item .flow-item__option {
  padding: 17px 20px 20px;
  background-color: #ede5d1;
  margin-top: 30px; }

@media screen and (max-width: 767.98px) {
  .page-flow .flow .flow-item .flow-item__option {
    padding: 13px 17px 15px;
    margin-top: 20px; } }
.page-flow .flow .flow-item .flow-item__option .ttl {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400; }

.page-flow .flow .flow-item .flow-item__option .list {
  font-size: clamp(14px, 1.6vw, 16px);
  margin-top: 7px; }

.page-flow .flow .flow-item:last-child .figure::before {
  content: none; }

/*# sourceMappingURL=page-flow.css.map */