.expense__wrapper {
 width: 86%;
 max-width: 1000px;
 text-align: left;
 counter-reset: item;
}
.expense__wrapper > .headline__style1 + p {
 margin-top: 20px;
}


@media screen and (min-width: 769px){
.expense__wrapper { margin: 150px auto 0; }


}
@media screen and (max-width: 768px){
.expense__wrapper { margin: 75px auto 0; }
}


.expense__grid.-type1 {
 position: relative;
 width: 100%;
 padding: 5px 0;
}

@media screen and (min-width:1025px){
.expense__grid.-type1 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 1fr;
 grid-column-gap: 5px;
 grid-row-gap: 5px;
 line-height: 1;
}
}
@media screen and (max-width: 1024px){
.expense__grid.-type1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
}


 .expense__grid.-type2 {
 width: 100%;
 line-height: 1;
 position: relative;
}

@media screen and (min-width: 769px){
 .expense__grid.-type2 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-column-gap: 5px;
 grid-row-gap: 5px;
 padding: 5px 0;
}
.expense__grid.-type2 .-label { grid-area: 1 / 1 / 4 / 2; text-align: center; }
.expense__grid.-type2 .-fee { grid-area: 1 / 2 / 4 / 3; }
.expense__grid.-type2 .-desc1 { grid-area: 1 / 3 / 2 / 4; }
.expense__grid.-type2 .-desc2 { grid-area: 2 / 3 / 3 / 4; }
.expense__grid.-type2 .-desc3 { grid-area: 3 / 3 / 4 / 4; }
}
@media screen and (max-width: 768px){
 .expense__grid.-type2 {
  margin-top: 15px;
  padding: 5px 0;
 }
 .expense__grid.-type2 + .expense__grid.-type2 {
 margin-top: 5px;	
 }
.expense__grid.-type2 > div + div {
 margin-top: 5px;
 padding: .5em 1em;
}
}

.expense__grid--caption {
 font-weight: 700;
 line-height: 1;
 padding-bottom: .5em;
 text-align: center;
 color: var(--color-black);
}



.expense__grid > div {
 position: relative;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 align-items: center;
}
.expense__grid:before {
 content: "";
 position: absolute;
 left: 0px;
 top:0px;
 z-index: 2;
 display: block;
 width: 100%;
 height: 1px;
 background-color: #000;
}
.expense__gridwrapper .expense__grid:last-child:after {
 content: "";
 position: absolute;
 left: 0;
 bottom:0;
 z-index: 2;
 display: block;
 width: 100%;
 height: 1px;
 background-color: #000;
}

.expense__grid .-time , .expense__grid .-label {
 color: #FFF;
 background-color: var(--color-mossgreen);
 font-weight: 700;
 padding: .25em;
}

.expense__grid .-fee {
  color: #5E8333;
  padding: 1em .25em;
 font-weight: 700;
}

.expense__grid .-desc {
 color: #5E8333;
 font-weight: 700;
 background: rgba(153, 202, 94, 0.30);
 padding: .5em;
}


.expense__grid .-label { 
 display : flex;
 flex-direction : column;
}
.expense__grid .-label span { 
 display: block;
 text-align: center;
}
.expense__grid .-label span:first-child{ 
 background-color: var(--color-green);
 padding: .5em 1em;
 width: 90%;
 margin-bottom:.5em;
}


@media screen and (min-width: 1025px){
.expense__grid--caption { margin-top: 50px; font-size: 24px; }
.expense__grid .-time { font-size: 32px; }
.expense__grid .-label { font-size: 20px; }
.expense__grid .-fee > span { font-size: 36px; }
.expense__grid .-fee span .tax { font-size: 20px; }
.expense__grid .-desc { font-size: 18px; }
}
@media screen and (max-width: 1024px){
.expense__grid--caption { margin-top: 25px; font-size: 18px; }
.expense__grid .-time { font-size: 20px; }
.expense__grid .-label { font-size: 16px; padding: 1em; }
.expense__grid .-fee > span { font-size: 18px; }
.expense__grid .-fee span .tax { font-size: 12px; }
.expense__grid .-desc { font-size: 14px; }
}


.expense__block--label {
 line-height: 1;
 color: #FFF;
 background: var(--color-mossgreen);
 padding: .5em 1em;
 margin: 5px 0;
}


.expense__block {
 margin: 10px auto 0;
 background-color: #FFF;
 border-radius: 10px;
 box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
}

.expense__block .-headline {
 display : flex;
 flex-direction : column;
 color: var(--color-green);
 text-align: center;
}

.expense__block .-headline .-main {
 font-size: 18px;
 font-weight: 600;
 display: inline-block;
}
.expense__block .-headline .-sub {
 display: table;
 font-size: 12px;
 line-height: 1.5;
 text-align: left;
}

.expense__block .-fee {
 color: var(--color-green);
 display: flex;
  justify-content: flex-end;
}
.expense__block .-fee .-val {
 font-size: 24px;
 font-weight: 700;
}

.expense__block .-fee .-unit {
 font-size: 16px;
 font-weight: 700;
}

.expense__block .-headline .-sub.-notice {
 position: relative;
 padding-left: 1em;
}
.expense__block .-headline .-sub.-notice:before {
 position: absolute;
 left: 0;
 top:0;
 content: "※";
}


@media screen and (min-width: 769px){
.expense__block {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.25em 10%;
}
 .expense__block .-headline {
  width: 80%;
 }
.expense__block .-headline .-main { margin: 0 auto; }
.expense__block .-headline .-sub { margin: 0 auto; }
}
@media screen and (max-width: 768px){
.expense__block {
 display : flex;
 flex-direction : column;
 padding: 1.25em 5%;
}
 .expense__block .-headline {
  width: 100%;
 }
.expense__block .-headline .-main {
 text-align: left;
}
.expense__block .-headline .-sub { text-align: left; margin-top: 1em; }
 .expense__block .-fee {
  margin-top: 1em;
 }	
	
}



.expense__total {
 padding: 25px 0;
 border-bottom: solid 1px var(--color-green);
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.expense__total .-total {
 font-size: 24px;
 font-weight: 700;
 color: #FFF;
 display: table;
 background-color: var(--color-green);
 padding: 10px;
 border-radius : 10px;
 line-height: 1;
 margin-right: 15px;
}

.expense__total .-val {
 font-weight: 700;
 color: var(--color-green);
 line-height: 1;
}

.expense__total + .expense__block--label {
 margin-top: 75px;
}


@media screen and (min-width: 769px){
 .expense__total .-total { font-size: 24px; }
 .expense__total .-val { font-size: 32px; }

}
@media screen and (max-width: 768px){
 .expense__total .-total { font-size: 18px; }
 .expense__total .-val { font-size: 28px; }
}