@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/* 概要
---------------------------------------------- */
#overview {
  margin-bottom: 80px;
}
#overview .sectionTitle {
  margin-bottom: 8px;
}

/* お問合せからお支払いまでの流れ
---------------------------------------------- */
#fromToPayment {
  margin-bottom: 80px;
}
#fromToPayment .sectionTitleOrange {
  margin-bottom: 13px;
}
#fromToPayment .flowItems {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#fromToPayment .flowItems .item {
  width: 25%;
  border: 1px solid var(--colorBorder);
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item {
    width: 100%;
    height: 80px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 16px;
    padding: 12px;
  }
}
#fromToPayment .flowItems .item .numImageWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item .numImageWrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 10px;
  }
}
#fromToPayment .flowItems .item .numImageWrap .num {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: var(--size18px);
  color: var(--colorTextSub);
  width: 32px;
  height: 32px;
  background-color: var(--colorMain);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#fromToPayment .flowItems .item .numImageWrap .imageWrap {
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item .numImageWrap .imageWrap {
    height: auto;
    max-width: 42px;
    width: 100%;
  }
}
#fromToPayment .flowItems .item .numImageWrap .imageWrap img {
  width: 100%;
}
#fromToPayment .flowItems .item .flowText {
  font-weight: 700;
  font-size: var(--size16px);
  text-align: center;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item .flowText {
    text-align: left;
  }
}
#fromToPayment .flowItems .item:nth-of-type(1), #fromToPayment .flowItems .item:nth-of-type(2), #fromToPayment .flowItems .item:nth-of-type(3) {
  border-bottom: unset;
}
#fromToPayment .flowItems .item:nth-of-type(1), #fromToPayment .flowItems .item:nth-of-type(2), #fromToPayment .flowItems .item:nth-of-type(5) {
  border-right: unset;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item:nth-of-type(1), #fromToPayment .flowItems .item:nth-of-type(2), #fromToPayment .flowItems .item:nth-of-type(5) {
    border-right: 1px solid var(--colorBorder);
  }
}
#fromToPayment .flowItems .item:nth-of-type(3), #fromToPayment .flowItems .item:nth-of-type(6) {
  border-right: unset;
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item:nth-of-type(3), #fromToPayment .flowItems .item:nth-of-type(6) {
    border-right: 1px solid var(--colorBorder);
  }
}
@media screen and (max-width: 900px) {
  #fromToPayment .flowItems .item:nth-of-type(4), #fromToPayment .flowItems .item:nth-of-type(5), #fromToPayment .flowItems .item:nth-of-type(6) {
    border-bottom: unset;
  }
}

/* ご注文の流れ
---------------------------------------------- */
#orderFlow {
  margin-bottom: 80px;
}
#orderFlow .sectionTitleOrange {
  margin-bottom: 16px;
}
#orderFlow .orderFlowItems .item .itemHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  background-color: #EEEEEE;
  padding: 8px 16px;
  margin-bottom: 16px;
}
#orderFlow .orderFlowItems .item .itemHeader .num {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: var(--size16px);
  color: var(--colorTextSub);
  width: 32px;
  height: 32px;
  background-color: var(--colorMain);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#orderFlow .orderFlowItems .item .itemHeader .itemTitle {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: var(--size18px);
  color: var(--colorMain);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#orderFlow .orderFlowItems .item .itemContents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 900px) {
  #orderFlow .orderFlowItems .item .itemContents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}
#orderFlow .orderFlowItems .item .itemContents .imageWrap {
  max-width: 320px;
  width: 100%;
  border-radius: 4px;
}
@media screen and (max-width: 900px) {
  #orderFlow .orderFlowItems .item .itemContents .imageWrap {
    max-width: unset;
  }
}
#orderFlow .orderFlowItems .item .itemContents .imageWrap img {
  width: 100%;
}
#orderFlow .orderFlowItems .item .itemContents .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#orderFlow .orderFlowItems .item .itemContents .text .bold {
  font-weight: 700;
}
#orderFlow .orderFlowItems .item:nth-of-type(1) .itemContents .imageWrap {
  border: 1px solid var(--colorBorder);
}
#orderFlow .orderFlowItems .item:not(:nth-last-of-type(1)) {
  margin-bottom: 72px;
}

/* お支払いについて
---------------------------------------------- */
#aboutPayment {
  margin-bottom: 100px;
}
#aboutPayment .sectionTitleOrange {
  margin-bottom: 24px;
}
#aboutPayment .listBox {
  border: 1px solid var(--colorBorder);
  padding: 20px;
}
#aboutPayment .listBox:not(:nth-last-of-type(1)) {
  margin-bottom: 24px;
}
#aboutPayment .listBox .bankListTitle {
  margin-bottom: 24px;
  font-weight: 600;
  font-size: var(--size18px);
}
#aboutPayment .listBox .text.margin {
  margin-bottom: 40px;
}
#aboutPayment .listBox .bankList .item:not(:nth-last-of-type(1)) {
  margin-bottom: 32px;
}
#aboutPayment .listBox .bankList .item .bankName {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--size16px);
}
#aboutPayment .listBox .bankList .item .bankName svg {
  margin-right: 8px;
  color: var(--colorMain);
}
#aboutPayment .listBox .bankList .item .text {
  padding-left: 0.8em;
}

/* 公費負担に対応しています
---------------------------------------------- */
#aboutCoverCost {
  margin-bottom: 48px;
}
#aboutCoverCost .contents {
  background-color: var(--colorBackGround);
  border: 4px solid var(--colorMain);
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  margin-bottom: 8px;
}
@media screen and (max-width: 900px) {
  #aboutCoverCost .contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#aboutCoverCost .contents .textArea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#aboutCoverCost .contents .textArea .title {
  font-family: "Noto Sans JP", serif;
  font-size: var(--size24px);
  font-weight: 700;
  color: var(--colorMain);
  margin-bottom: 8px;
}
#aboutCoverCost .contents .textArea .importantText {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--size18px);
  font-weight: 700;
  line-height: 1.44;
  margin-bottom: 8px;
  background-color: var(--colorSub);
}
#aboutCoverCost .contents .textArea .text a {
  text-decoration: underline;
  color: var(--colorMain);
  display: inline;
}
#aboutCoverCost .contents .imageArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
#aboutCoverCost .contents .imageArea .poster {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
#aboutCoverCost .contents .imageArea .flier {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
#aboutCoverCost .contents .imageArea .poster .imageWrap,
#aboutCoverCost .contents .imageArea .flier .imageWrap {
  max-width: 64px;
  width: 100%;
}
@media screen and (max-width: 900px) {
  #aboutCoverCost .contents .imageArea .poster .imageWrap,
  #aboutCoverCost .contents .imageArea .flier .imageWrap {
    max-width: unset;
  }
}
#aboutCoverCost .contents .imageArea .poster .imageWrap img,
#aboutCoverCost .contents .imageArea .flier .imageWrap img {
  width: 100%;
}
#aboutCoverCost .contents .imageArea .poster .title,
#aboutCoverCost .contents .imageArea .flier .title {
  font-family: "Noto Sans JP", serif;
  font-size: var(--size12px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
#aboutCoverCost .linkArea {
  margin-bottom: 40px;
}
#aboutCoverCost .linkArea a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--colorMain);
  font-size: var(--size14px);
  font-weight: 500;
}/*# sourceMappingURL=flow.css.map */