@charset "UTF-8";
/* CSS Document */
/*===================================================
	共通CSS（SMP）
===================================================*/
/*////////////////////////////////////////////////////////////
	MODULES
///////////////////////////////////////////////////////////*/
.ttlMain {
  font-size: 1.9rem;
}

.ttlSub {
  font-size: 1.9rem;
}

.ttlModal {
  padding: 7px 17px;
}

.ttlModal small {
  display: block;
  margin-top: -2px;
}

.btnWrap {
  margin-top: 50px;
}

.btnWrap .btnSecondary {
  position: relative;
  top: auto;
  left: auto;
  margin: 20px auto 0;
}

.btnWrapResult .btnSecondary {
  margin-top: 0;
}

.btnStart {
  padding-left: 16px;
  width: 260px;
  height: 46px;
  font-size: 1.9rem;
  border-width: 1px;
}

.btnStart:before {
  left: 22px;
  width: 18px;
  height: 17px;
  background-image: url(../image/common/bg_btn_start_sp.png);
}

.btnPrimary {
  height: 46px;
}

.btnSecondary {
  width: 260px;
  height: 46px;
  border-radius: 23px;
}

.btnLink {
  width: 100%;
}

.btnLink li {
  margin: 10px 0 0;
  width: 100%;
}

.btnLink a:before {
  left: 18px;
}

.btnLink a[target="_blank"]:after {
  right: 19px;
}

.btnEdit {
  top: -66px;
}

.breadcrumbs {
  border-top: none;
  border-bottom: none;
}

.breadcrumbsInner {
  display: block;
}

.breadcrumbsInner:before {
  display: none;
}

.breadcrumbsTtl {
  margin: 0;
  padding: 11px 0;
  width: auto;
  letter-spacing: 0.1em;
  font-size: 1.9rem;
}

.breadcrumbsItem {
  padding: 4px 0;
  width: auto;
}

.breadcrumbsItem:before {
  display: none;
}

.breadcrumbsItem:not([data-step]) {
  display: none;
}

.breadcrumbsItem[data-step]:after {
  content: attr(data-step) "/4";
  display: block;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  font-size: 1.3rem;
  border: none;
}

.breadcrumbsItem:last-child {
  border-right: none;
}

.formBoxItem {
  display: block;
}

.formBoxItem ~ .formBoxItem {
  margin-top: 32px;
}

.formBoxTtl {
  margin-bottom: 6px;
  width: 100%;
  line-height: 1.5;
}

.checkBox {
  margin: 9px 0 0;
}

.flexBox {
  flex-wrap: wrap;
}

.inputBox {
  font-size: 1.4rem;
  width: 230px;
}

.selectBox {
  font-size: 1.6rem;
}

.selectBox.spW80 {
  width: 80px;
}

/*////////////////////////////////////////////////////////////
	LAYOUTS
///////////////////////////////////////////////////////////*/
a:hover {
  text-decoration: none;
  opacity: 1;
}

html, body {
  min-width: 320px;
}

/* --------------------------------------------------
	改行
-------------------------------------------------- */
.spBreak {
  display: block;
}

.pcBreak {
  display: none;
}

.headerInner {
  padding: 12px 20px;
  justify-content: space-between;
}

.headerLogo {
  width: 206px;
}

.headerBtn {
  margin-left: 0;
  width: 98px;
}

.footer {
  padding: 22px 0 23px;
}

.footerCopy {
  padding-top: 21px;
}

.topTtl {
  margin-bottom: 36px;
  letter-spacing: 0.1em;
  padding: 11px;
  font-size: 1.9rem;
}

.top .ttlSub {
  font-size: 1.6rem;
}

.topImg {
  margin: 20px auto 21px;
}

.top .btnStart {
  margin-top: 21px;
}

.pageTtlInner {
  padding: 8px 20px;
}

.pageLead {
  padding: 0;
}

.pageForm {
  margin-top: 23px;
}

.pageForm .formBoxTtl {
  padding-left: 0;
}

.pageForm .formBoxTtl:before {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-bottom: 7px;
}

.pageForm .checkBox {
  width: 100%;
}

.pageTab {
  margin-top: 87px;
}

.pageTabList {
  padding: 0 4px;
  font-size: 1.2rem;
}

.pageTabItem {
  flex: 1;
  margin: 0 4px;
  width: auto;
}

.pageTabBtn {
  line-height: 1.2;
}

.page#future .btnPrimary {
  width: 260px;
  line-height: 1.125;
  font-size: 1.6rem;
}

.chartTxt {
  margin-top: -18px;
  text-align: left;
}

.chartLegend {
  margin-top: 9px;
}

.chartLegendInner {
  flex-wrap: wrap;
}

#plan .chartLegend dl {
  display: block;
}

.chartLegendIncome li:nth-child(1) {
  width: calc(4em + 17px);
}

.chartLegendIncome li:nth-child(2), .chartLegendIncome li:nth-child(3) {
  width: calc(5em + 17px);
}

.chartLegendIncome li:nth-child(4) {
  width: calc(3em + 17px);
}

#plan .chartLegendSpend {
  margin: 4px 0 0 0;
}

#event .chartLegendSpend {
  margin-left: 8px;
}

.chartLegendSpend li.life {
  width: calc(4em + 17px);
}

.chartLegendSpend li.housing {
  width: calc(5em + 17px);
}

.chartLegendSpend li.education {
  width: calc(100% - 12em - 68px);
}

.chartLegendSpend li.tax {
  width: calc(7em + 17px);
}

.chartLegendSpend li.other {
  width: calc(5em + 17px);
}

#plan .chartLegend div, #plan .chartLegend ul {
  justify-content: flex-start;
  align-items: flex-start;
}

.chartLegend dt {
  width: 36px;
}

#event .chartLegend dd {
  padding-left: 26px;
}

#event .chartLegend dd:before {
  left: 2px;
  width: 12px;
  height: 12px;
}

.chartLegend ul {
  flex-wrap: wrap;
  font-size: 1.0rem;
}

.chartLegend li {
  margin: 2px 0 0 10px;
  padding-left: 17px;
}

.chartLegend li:before {
  width: 12px;
  height: 12px;
}

.chartLegend p {
  width: auto;
}

#plan .chartLegend p {
  margin: 5px 0 0 0;
}

#event .chartLegend p {
  margin-left: 8px;
}

.chartLegend p:before {
  margin-right: 5px;
  width: 16px;
}

.flow th {
  padding: 5px;
}

.flow th:nth-child(2) {
  left: 51px;
}

.flow td {
  padding: 7px 9px;
}

.flowTbl {
  font-size: 1.0rem;
}

.flowTblClone {
  left: 20px;
  transform: none;
}

.flowTblClone th {
  padding: 7px 5px;
}

.flowTbl thead th {
  min-width: 60px;
  font-size: 1.1rem;
}

.flowTbl thead th:nth-child(1) {
  min-width: 128px;
}

.flowTbl thead th:not(:first-child) {
  position: static;
}

.flowTbl thead th span {
  padding: 2px 0;
}

html:not(.ie) .flowTbl tbody tr.flowTotal th:nth-child(2) {
  left: 52px;
}

html:not(.ie) .flowTbl tbody tr.flowTotal ~ tr:not(.flowTotal) th {
  left: 52px;
}

.yield {
  margin: 36px auto;
}

.yieldTtl {
  justify-content: flex-start;
}

.alertBody {
  padding: 60px 20px;
}