@charset"utf-8";
body{font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";}
#calculatorLife h1,#calculatorLife h2,#calculatorLife h3,#calculatorLife h4,#calculatorLife h5{
line-height: 0;
}
ul{list-style:none;}
/* 生活費＆学費計算機
-------------------------------------*/
#contentsTitle {
	max-width:680px;
	margin:0 auto 15px;
}
#contentsTitle h2{width:100%;}
#contentsTitle h2 img{
	display:block;
	width:100%;
	ocject-fit:contain;
	text-align:center;
}
/**#contentsTitle p {
	position: absolute;
	top: 110px;
	left: 34;
	font-size: 10px;
	color: #5a3300;
	display: block;
	right: 32px;
	letter-spacing: 0.1em;
	width: 612px;
	line-height: 1.2em;
}**/
.center{text-align:center;
margin:0 auto;}
#calculatorLife {
	margin:20px auto;
	max-width: 680px;
	border-left:15px solid #aad65d;
	border-right:15px solid #aad65d;
	border-bottom:15px solid #aad65d;

	border-radius:5px;
}
#calculatorLife h3{
	width:100%;
	position:relative;
	padding-left:32px;
	background:#aad65d;
	/**border-bottom:5px solid #FF9800;**/
	color:#624013;
	font-weight:700;
	margin:0 0 10px 0;
	font-size:24px;
	height:42px;
	line-height:42px;
}
#calculatorLife h3 span{
	position:absolute;
	background:#FFF9E7;
	font-weight:900;
	color:#FF9800;
	top:10px;
	left:0;
	width:24px;
	height:24px;
	line-height:24px;
	text-align:center;
	align-items:center;
	vertial-align:middle;
	border:1px solid #FF9800;
	border-radius:50%;
}

.calculatorLifeBox {
	margin:0 auto;
	max-width: 680px;
	/**border:15px solid #aad65d;
	border-radius:5px;**/
	/**background-image: url(/money/calculator_life/images/calculator_life_box_back.gif);
	background-repeat: repeat-y;
	padding-right: 37px;
	padding-left: 37px;
	padding-top: 20px;**/
}
.calculatorLifeBox .mb25 img{
	margin-top:10px;
}
/**
.stepBox {
	margin-bottom: 30px;
	text-align: center;
	position: relative;
	height: 72px;
}

.stepBox li {
 float:left;
	margin-right: 38px;
}

.stepBox li.end {
	margin-right: 0;
}

.stepBox img.arrow1 {
	display: block;
	position: absolute;
	left: 114px;
	top: 15px;
}

.stepBox img.arrow2 {
	display: block;
	position: absolute;
	left: 258px;
	top: 15px;
}

.stepBox img.arrow3 {
	display: block;
	position: absolute;
	left: 402px;
	top: 15px;
}**/

.sampleBox {
	text-align: center;
}

.commentBox {
 text-align: center;
}

.calculatorLifeBoxFoot {
	margin-left: auto;
	margin-right: auto;
	width: 612px;
	position: relative;
}

/* STEP1 学校の種類を選ぼう
-------------------------------------*/
.schoolBox {
	width: 538px;
	margin-bottom: 25px;
}
/*
.schoolBox table {
	border-collapse:collapse;
	background-color: #FFFFFF;
	line-height: 1.2em;
	color: #484848;
	font-size: 14px;
}

.schoolBox th {
	font-size: 12px;
	color: #5a3300;
	background-color: #aae9f0;
	font-weight: bold;
	text-align: left;
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	line-height: 1.3em;
}

.schoolBox th span.subject {
	font-size: 10px;
	color: #5a3300;
	background-color: #ffecb2;
	font-weight: normal;
	text-align: left;
}

.schoolBox td{
	width: 264px;
	padding-right: 5px;
	padding-top: 5px;
	font-size: 14px;
	padding-bottom: 5px;
}

.schoolBox td.end {
	padding-bottom: 15px;
}
*/
.schoolBox ul {
	width:100%;
display: flex;
flex-wrap: wrap;
margin:0 auto 20px;
}

.schoolBox li{
width: 50%;
	font-size: 14px;
	padding: 5px 0;
/**float: left;**/
}
.schoolBox li label{
margin-left: 5px;
}

/* STEP2 めざす分野を選ぼう
-------------------------------------*/
.fieldBox {
	margin-bottom: 25px;
}

.fieldBoxSp {
margin-top: 20px;
	margin-bottom: 25px;
}
#calculatorLife .fieldBoxSp h4{
	background-color: #DBEEB5;
	font-size: 12px;
	color: #5a3300;
	line-height: 1.3em;
	font-weight: bold;
	padding:5px 10px;
}
#calculatorLife .fieldBoxSp h4 span.subject {
	font-size: 10px;
	color: #5a3300;
	font-weight: normal;
}
.fieldBox ul,.fieldBoxSp ul,.fieldBoxSp2 ul{
overflow: hidden;
	padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.fieldBox li{
width: 33%;
font-size: 14px;
padding: 5px 0;
    box-sizing: border-box;
}
.fieldBoxSp li,.fieldBoxSp2 li{
	width: 50%;
    font-size: 12px;
	padding-right: 5px;
	padding-top: 5px;
	white-space: nowrap;
	padding-left: 10px;
    box-sizing: border-box;
}
.fieldBoxSp2 li{
font-size: 14px;
}
/*
.fieldBox table {
	border-collapse:collapse;
	background-color: #FFFFFF;
	line-height: 1.2em;
	color: #484848;
	font-size: 14px;
}

.fieldBox table {
	border-collapse:collapse;
	background-color: #FFFFFF;
	line-height: 1.2em;
	color: #484848;
	font-size: 14px;
}

.fieldBoxSp table {
	border-collapse:collapse;
	background-color: #FFFFFF;
	line-height: 1.2em;
	color: #484848;
	font-size: 12px;
}

.fieldBoxSp th {
	font-size: 12px;
	color: #5a3300;
	background-color: #DBEEB5;
	font-weight: bold;
	text-align: left;
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	line-height: 1.3em;
}

.fieldBoxSp th span.subject {
	font-size: 10px;
	color: #5a3300;
	font-weight: normal;
	text-align: left;
}

.fieldBox td{
	width: 169px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	white-space: nowrap;
}

.fieldBoxSp td{
	width: 254px;
	padding-right: 5px;
	padding-top: 5px;
	white-space: nowrap;
	padding-left: 10px;
}

.fieldBox td.bottom {
	padding-bottom: 0px;
}

.fieldBoxSp td.bottom {
	padding-bottom: 10px;
}*/

/* STEP3 希望のライフスタイルを選ぼう
-------------------------------------*/
.itemBox {
	max-width: 600px;
	margin-bottom: 30px;
}

.itemBoxBack {
	max-width: 600px;
	background-image: url(/money/calculator_life/images/item_back.gif);
	background-repeat: repeat;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 12px;
	padding-left: 15px;
}

.itemBoxSelect1 {
	max-width: 600px;
	margin-bottom: 3px;
}
.itemBoxSelect1 ul {
	display:flex;
	justify-content:space-between;
	width:100%;
	flex-wrap:nowrap;
}
.itemBoxSelect1 li {
	width:33%;
	font-size: 14px;
	line-height: normal;
	display: inline;
	padding:0;
	margin:0;
}

.itemBoxSelect2 {
	max-width: 600px;
	margin-bottom: 3px;
}

.itemBoxSelect2 h5 {
	display: block;
/**	width: 125px;
	margin-right: 10px;**/
}

/*** html .itemBoxSelect1 h5,.itemBoxSelect2 h5 {
	margin-right: 5px;
}**/
.itemBoxSelect2 ul {
	display:flex;
	justify-content:space-between;
	flex-wrap:nowrap;
	height: 23px;
	width:100%;
}

.itemBoxSelect2 li {
	width:24%;
	font-size: 14px;
	padding: 0;
	font-variant: normal;
	letter-spacing: normal;
	margin: 0;
}

.itemBox input{
 margin-right: 3px;
}

* html .itemBox input{
 margin-right: 0px;
}



/* 診断結果
-------------------------------------*/
p.result {
	font-size: 16px;
	color: #5a3300;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.5em;
}

.calculatorLifeBox span.s1{
	font-size: 10px;
	font-weight: normal;
}

p.average {
	display: block;
	/**float: left;**/
	line-height: normal;
	padding-left:10px;
}

.resultBox {
/**	background-image: url(/money/calculator_life/images/result_back1.gif);
	background-repeat: no-repeat;**/
	max-width: 600px;
	position: relative;
	background-position: 0px 0px;
	/**height: 126px;**/
	margin-bottom: 10px;
}
.resultBox h5{
	padding:5px;
	margin:5px auto;
	background:#aad65d!important;
	width:96%;
	height:30px;
	line-height:30px;
	border-radius:8px;
	position:relative;
}
.resultBox h5 span{
	position:absolute;
	color:#5a3300;
	font-size:22px;
	top:13px;
	left:13px;right:0;
}


* html .resultBox {
/**	background-image: url(/money/calculator_life/images/result_back1.gif);
	background-repeat: no-repeat;
	width: 538px;
	position: relative;
	background-position: 0px 0px;
	height: 126px;
	margin-bottom: 0px;**/
}

.resultBox dl {
	margin-bottom: 10px;
	width: 508px;
}

.resultBox dt {
	/**float: left;**/
	height: 33px;
	margin-bottom: 10px;
}

* html .resultBox dt {
/**	float: left;**/
	height: 33px;
	width: 247px;
	margin-bottom: 5px;
}

.resultBox dd {
	color: #5a3300;
	font-size: 26px;
	line-height: 33px;
	font-weight: bold;
}

.detailsBox {
	padding-right: 15px;
	padding-left: 15px;
	max-width: 508px;
	padding-top: 10px;
	padding-bottom: 10px;
	height: auto;
}

.detailsBox dl {
	max-width: 508px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	vertical-align:middle;
}
.detailsBox img{
	margin:0 5px;
	width:50px;height:50px;
}
.detailsBox dt {
	height: 33px;
	width: 67%;
	margin-bottom: 10px;
}
.detailBox dd .in,.detailBox dd .out{
	width:30%;
	text-align:right;
	color: #5a3300;
	font-size: 24px;
	line-height: 33px;
	font-weight: bold;
}
.detailsBox dt small{font-size:65%;letter-spacing:0.15;}
/*** html .detailsBox dt {
	float: left;
	height: 33px;
	width: 247px;
	margin-bottom: 5px;
}**/

/**.detailsBox dd.in {
	color: #5a3300;
	font-size: 24px;
	line-height: 33px;
	font-weight: bold;
	position: absolute;
	left: 356px;
	top: 40px;
	text-align: right;
	width: 180px;
}

.detailsBox dd.out {
	color: #5a3300;
	font-size: 24px;
	line-height: 33px;
	font-weight: bold;
	position: absolute;
	left: 356px;
	top: 83px;
	text-align: right;
	width: 180px;
}**/

/*.detailsBox dd {
	color: #5a3300;
	font-size: 26px;
	line-height: 33px;
	font-weight: bold;
}*/

.breakdownBox {
	margin-bottom: 10px;
}
.breakdownBox h5{
	font-size:16px;
	color:#5a3300;
	padding:0 0 0 10px;
}

.breakdownBox dl{
	width:96%;
	display:flex;
	juetify-content:flex-start;
	flex-wrap:nowrap;
}
.breakdownBox dt {
	width: 23%;
}
.breakdownBox dt.mr15{color:#5a3300;background:#aad65d;width:4em;padding:5px;margin:0 10px;text-align:center;border-radius:5px;}
.breakdownBox dd {
	color: #5a3300;
	font-size: 14px;
	font-weight: bold;
	line-height: 23px;
}

.breakdownBoxGraph{
	width:96%;
	display:flex;
	juetify-content:space-between;
}
.breakdownBoxGraph img{
	width:45%;
	object-fit:contain;
}
.breakdownBoxTable {
	/*width: 230px;*/
	width:calc(100% - 45%);
}

.breakdownBox table {
	border-collapse:collapse;
	font-size: 12px;
	color: #484848;
	width: 100%;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
}

.breakdownBox th {
width:60%;
	font-weight: normal;
	text-align: left;
	padding: 3px;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
}

.breakdownBox td {
	padding: 3px;
	border-bottom-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.breakdownBox td.in1 {
	background-color:#fcbf00;
}

.breakdownBox td.in2 {
	background-color:#fddc76;
}

.breakdownBox td.in3 {
	background-color:#fdcc33;
}

.breakdownBox td.ex1 {
	background-color:#fcbf00;
}

.breakdownBox td.ex2 {
	background-color:#fddc76;
}

.breakdownBox td.ex3 {
	background-color:#fdcc33;
}

.breakdownBox td.ex4 {
	background-color:#f6ebc4;
}

.breakdownBox td.ex5 {
	background-color:#e7b823;
}

.breakdownBox td.ex6 {
	background-color:#fdebb5;
}

.breakdownBox td.ex7 {
	background-color:#fdcc33;
}

.expensesBox {
	max-width: 600px;
/**	background-image: url(/money/calculator_life/images/result_back2.gif);
	background-repeat: no-repeat;**/
	height: 80px;
/**	background-position: 0px bottom;**/
	position: relative;
	margin-bottom: 10px;
}
.expensesBox h5{
	font-size:16px;
	color:#5a3300;
	background:#aad65d;
	width:96%;margin:0 auto;
	height:24px;line-height:24px;position:relative;align-items:middle;padding:10px 10px 0 10px;border-radius:5px;
}
.expensesBox h5 small{
	position:absolute;
	bottom:-10px;
	left:0;
	font-size:80%;
}
.expensesBox p.expenses{
	font-size: 26px;
	color: #5a3300;
	font-weight: bold;
	display: block;
	position: absolute;
	top: 16px;
	left: 100px;
}
.detailsBox2 {
	max-width: 600px;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	margin-bottom: 15px;
	/**height: 140px;**/
}

/**.detailsBox2Bottom {
	width: 538px;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	height: 140px;
	margin-bottom: 0px;
}**/

.detailsBox2 .list,.detailsBox2Bottom .list {
	max-width: 600px;
	display:flex;
	justify-content:space-between;
	flex-wrap:nowrap;
	vertical-align:top;
/**	overflow:hidden;
/**	background-image: url(/money/calculator_school/images/details_line.gif);
	background-repeat: repeat-x;
	background-position: bottom;
**/
}
.detailsBox2 .list p{
	width:10%;
	font-size:12px;color:#5a3300;
}
.detailsBox2 .list dl{
	width:50%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.detailsBox2 .list img.comment{
	width:40%;height:auto;object-fit:contain;
}

.detailsBox2 .list dl dt{
	font-size: 14px;
	color: #5a3300;
	line-height:1.7em;
/**	background-image: url(/money/calculator_school/images/details_line.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	padding-bottom: 5px;
	padding-top: 5px;**/
	width: 58%;
	border-bottom:2px dotted #5a3300;
}

.detailsBox2 .list dl dd,.detailsBox2Bottom .list dl dd {
	font-size: 14px;
	color: #5a3300;
	line-height:1.7em;
/**	background-image: url(/money/calculator_school/images/details_line.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	padding-bottom: 5px;
	padding-top: 5px;**/
	width:calc(100% - 58%);
	border-bottom:2px dotted #5a3300;
}
/**.detailsBox2 .list dl dt:last-of-type,.detailsBox2 .list dl dd:last-of-type {
background-image:none;
}

/**.detailsBox2 img.comment,**/
.detailsBox2Bottom img.comment {
	position: absolute;
	right: 15px;
	top: 0px;
}

.resultComment p {
	color: #5a3300;
	font-size: 10px;
	line-height: 1.3em;
	padding:5px;
}

.resultComment li {
	color: #5a3300;
	font-size: 10px;
	line-height: 1.3em;
}

.btnContents {
	margin-bottom: 20px;
	width: 612px;
	margin-right: auto;
	margin-left: auto;
}
.btnContents ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/*
.btnContents li.left {
 float: left;
}

.btnContents li.right {
 float: right;
}*/

.calculatorLifeBoxFoot img.btnFoot {
	/**position: absolute;
	top: 50px;
	left: 214px;**/
	display: block;
	margin:20px auto;
}

/* 平均値テーブル
-------------------------------------*/
.averageBox {
	max-width: 600px;
	background-color: #FFFFFF;
	padding: 20px;
}

.averageBox span {
	color: #1256E4;
	line-height: 2em;
}

.averageBox table {
	width: 538px;
	border-collapse:collapse;
	background-color: #FFFFFF;
	line-height: 1.2em;
	color: #484848;
	font-size: 14px;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #AAD65D;
	border-left-color: #AAD65D;
	margin-bottom: 10px;
}

.averageBox th {
	font-size: 12px;
	color: #5a3300;
	background-color: #C0E07D;
	font-weight: bold;
	line-height: normal;
	padding: 5px;
}

.averageBox th.subject {
	background-color: #DBEEB5;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #AAD65D;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD65D;
}

.averageBox td{
	font-size: 12px;
	padding: 5px;
	text-align: right;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #AAD65D;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD65D;
}

.averageBox td.subject {
	text-align: left;
}

/* オリコバナー
-------------------------------------*/
.scholarshipBan {
	margin-top: 15px;
	width: 670px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #D6EBFA;
}

.scholarshipBan p {
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: #000F9C;
	line-height: normal;
	margin-bottom: 10px;
}

.scholarshipBan img {
	width: 230px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}


@media screen and (max-width:650px){
#contentsTitle {
	width:100%;
	}
#calculatorLife h3{
	width:100%}
.schoolBox ul{display:block;}
.schoolBox li{width:80%;}
.detailsBox dl {
	width:96%;display:block;}
.detailsBox dt,.detailBox dd .in,.detailBox dd .out{width:100%;}
.detailsBox dt:first-of-type{
	height: 50px;}
.detailsBox dd{text-align:right;}
.detailsBox img{
	width:30px;height:30px;}
.detailsBox2 .list,.detailsBox2Bottom .list{display:block;width:96%;}
.breakdownBoxGraph,.detailsBox2 .list dl{display:block;width:96%;}
.detailsBox2 .list dl dt{width:96%;text-align:left;border:none;}
.detailsBox2 .list dl dd{width:96%;text-align:right;}
.detailsBox2 .list img.comment{display:block;width:80%;margin:5px auto 0;text-align:center;}
	
.breakdownBoxGraph img{
	width:60%;margin:0 auto;
}
label{font-size:12px;}
.breakdownBoxTable {
	width:90%;margin:0 auto;
}
.expensesBox p.expenses{
	font-size: 24px;
	top: 30px;
}
.expensesBox h5 small{bottom:-20px;font-size:11px;}
/**.detailsBox2{height:360px;}**/
.detailsBox2 img.comment{
	/**top:210px;left:15px;**/
	}
.calculatorLifeBox {width:100%;}
.resultComment p {
	padding-bottom:30px;
	margin-bottom:50px;}
.calculatorLifeBoxFoot{margin:0 auto 10px;width:90%;
	position:relative;}
.calculatorLifeBoxFoot img.btnFoot ,.btnContents li img{
	display:block;
	text-align:center;
	margin: auto;
	/**position: absolute;
	bottom: 30px;
	left:0;right:0;**/}

.btnContents{margin:0 auto 10px;width:90%;position:relative;}

.btnContents ul{/**list-style:none;position:absolute;bottom:-36px;left:0;right:0;**/margin:0 auto;width:90%;}
}