/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#finance h2 {
  font-size: max(2.8rem, 21px);
  font-weight: Slight;
  line-height: 2;
  letter-spacing: 0.15em;
}
#finance > h2 {
  position: relative;
  text-align: center;
  padding: max(2rem, 20px) 5%;
  background: #fff;
  z-index: 0;
}
#finance > h2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(59, 49, 40, 0.1);
  z-index: -1;
}
#finance #cost {
  background: #fff;
}
#finance #cost .cost__wrapper {
  padding-top: 8rem;
}
#finance #cost .cost__wrapper .cost__table {
  margin-top: max(5rem, 30px);
  width: 100%;
  overflow-x: auto;
}
#finance #cost .cost__wrapper .cost__table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
#finance #cost .cost__wrapper .cost__table table thead tr {
  background: rgba(59, 49, 40, 0.7);
}
#finance #cost .cost__wrapper .cost__table table thead tr th {
  padding: max(1rem, 10px);
  border-right: 1px solid #c2c0bd;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
}
#finance #cost .cost__wrapper .cost__table table thead tr th.cost-row {
  width: max(31rem, 160px);
  min-width: 160px;
}
#finance #cost .cost__wrapper .cost__table table thead tr th.building-row {
  width: max(62rem, 320px);
  min-width: 320px;
}
#finance #cost .cost__wrapper .cost__table table thead tr th.other-row {
  width: max(45rem, 245px);
  min-width: 245px;
}
#finance #cost .cost__wrapper .cost__table table tbody tr {
  border-bottom: 1px solid #c2c0bd;
}
#finance #cost .cost__wrapper .cost__table table tbody tr td {
  padding: max(3rem, 20px) max(4rem, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
}
#finance #cost .cost__wrapper .cost__table table tbody tr td:not(:last-of-type) {
  border-right: 1px solid #c2c0bd;
}
#finance #cost .cost__wrapper .cost__table table tbody tr td .inner {
  display: flex;
  gap: max(3rem, 15px);
}
#finance #cost .cost__wrapper .cost__table table tbody tr td span.attention {
  margin-top: max(1rem, 10px);
}
#finance #funds {
  background: #fff;
}
#finance #funds .funds__wrapper {
  padding-top: max(9.5rem, 50px);
}
#finance #funds .funds__content dl {
  display: flex;
  align-items: first baseline;
  gap: max(3rem, 20px);
}
#finance #funds .funds__content dl:not(:last-of-type) {
  padding-bottom: max(3rem, 20px);
  margin-bottom: max(3rem, 20px);
  border-bottom: 1px solid #c2c0bd;
}
@media screen and (max-width: 768px) {
  #finance #funds .funds__content dl {
    gap: 10px;
    flex-direction: column;
  }
}
#finance #funds .funds__content dl dt {
  flex-shrink: 0;
  width: max(22.5rem, 125px);
}
@media screen and (max-width: 768px) {
  #finance #funds .funds__content dl dt {
    width: 100%;
  }
}
#finance #funds .funds__content dl dd {
  flex: 1;
}
#finance #repayment {
  background: #fff;
}
#finance #repayment .repayment__wrapper {
  padding-top: max(11rem, 50px);
  padding-bottom: max(11rem, 50px);
}
#finance #repayment .repayment__wrapper .repayment__inner {
  display: flex;
  gap: max(5rem, 20px);
  margin-top: max(5rem, 30px);
  margin-bottom: max(2rem, 15px);
}
@media screen and (max-width: 1000px) {
  #finance #repayment .repayment__wrapper .repayment__inner {
    gap: 50px;
    flex-direction: column;
  }
}
#finance #repayment .repayment__wrapper .repayment__inner .repayment__content {
  flex: 1;
}
#finance #repayment .repayment__wrapper .repayment__inner .repayment__content h3 {
  width: 100%;
  padding: max(1.5rem, 15px) 5%;
  border: 1px solid #3b3128;
  border-radius: max(7rem, 30px);
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: max(2rem, 15px);
}
#finance #repayment .repayment__wrapper .repayment__inner .repayment__content img {
  aspect-ratio: 614/231;
}
#finance #repayment .repayment__wrapper .repayment__inner .repayment__content p {
  margin-top: max(3rem, 20px);
  letter-spacing: 0.1em;
}
#finance #repayment .repayment__wrapper .reference {
  display: block;
  text-align: right;
  margin-top: max(5rem, 30px);
  font-size: max(1.2rem, 10px);
  letter-spacing: 0.1em;
}
#finance #interest {
  background: #fff;
}
#finance #interest .interest__wrapper {
  padding-bottom: max(12.5rem, 50px);
  border-bottom: 1px solid #c2c0bd;
}
#finance #interest .interest__wrapper .interest__content {
  margin-top: max(5rem, 30px);
}
#finance #interest .interest__wrapper .interest__content dl {
  display: flex;
  align-items: center;
  gap: max(3rem, 20px);
}
#finance #interest .interest__wrapper .interest__content dl:not(:last-of-type) {
  padding-bottom: max(3rem, 20px);
  margin-bottom: max(3rem, 20px);
  border-bottom: 1px solid #c2c0bd;
}
@media screen and (max-width: 768px) {
  #finance #interest .interest__wrapper .interest__content dl {
    gap: 40px;
    flex-direction: column-reverse;
  }
  #finance #interest .interest__wrapper .interest__content dl:not(:last-of-type) {
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
}
#finance #interest .interest__wrapper .interest__content dl dt {
  flex-shrink: 0;
  width: max(34.2rem, 200px);
}
@media screen and (max-width: 768px) {
  #finance #interest .interest__wrapper .interest__content dl dt {
    width: 80%;
    margin: auto;
  }
}
@media screen and (max-width: 550px) {
  #finance #interest .interest__wrapper .interest__content dl dt {
    width: 90%;
  }
}
#finance #interest .interest__wrapper .interest__content dl dd {
  flex: 1;
}
#finance #interest .interest__wrapper .interest__content dl dd h3 {
  font-weight: 500;
  margin-bottom: max(1rem, 10px);
}
#finance #interest .interest__wrapper .interest__content dl dd p {
  line-height: 2;
}
#finance #interest .interest__wrapper .interest__rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(2rem, 20px);
  padding: max(5rem, 30px) max(8rem, 30px);
  margin-top: max(10rem, 50px);
  background: rgba(59, 49, 40, 0.1);
}
@media screen and (max-width: 768px) {
  #finance #interest .interest__wrapper .interest__rate {
    gap: 30px;
    flex-direction: column;
  }
}
@media screen and (max-width: 550px) {
  #finance #interest .interest__wrapper .interest__rate {
    padding: 30px;
  }
}
#finance #interest .interest__wrapper .interest__rate .textBox {
  flex: 1;
}
#finance #interest .interest__wrapper .interest__rate .textBox > span {
  color: rgba(59, 49, 40, 0.4);
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1.8rem, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#finance #interest .interest__wrapper .interest__rate .textBox__inner {
  display: flex;
  align-items: baseline;
  gap: max(2rem, 15px);
  margin-top: max(1rem, 5px);
}
@media screen and (max-width: 1000px) {
  #finance #interest .interest__wrapper .interest__rate .textBox__inner {
    flex-direction: column;
  }
}
#finance #interest .interest__wrapper .interest__rate .textBox__inner h3 {
  flex-shrink: 0;
  font-size: max(2.8rem, 21px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
}
#finance #interest .interest__wrapper .interest__rate .textBox__inner p {
  flex: 1;
  line-height: 2;
}
#finance #interest .interest__wrapper .interest__rate .btn {
  flex-shrink: 0;
}
#finance #simulation {
  background: #fff;
}
#finance #simulation .simulation__wrapper {
  padding-top: max(12.5rem, 50px);
  padding-bottom: max(17rem, 100px);
}
#finance #simulation .simulation__wrapper .simulation__content {
  display: flex;
  align-items: end;
  gap: max(9rem, 40px);
}
@media screen and (max-width: 1000px) {
  #finance #simulation .simulation__wrapper .simulation__content {
    flex-direction: column;
  }
}
#finance #simulation .simulation__wrapper .simulation__content p {
  flex: 1;
}
#finance #simulation .simulation__wrapper .simulation__content .btn {
  flex-shrink: 0;
}/*# sourceMappingURL=finance.css.map */