:root{/*使うときはvar()*/
	--green:#51DB2E;
	--lightgreen:#A2F5A2;
	--yellow:#F1FA3B;
	--lightyellow:#F8FCBE;
	--blue:#6667FA;
	--skyblue:#56E3FA;
	--lightblue:#BBEDFA;
	--pink:#FA91E5;
	--lightpink:#F1DCF5;
}
*{
	font-family:"Lucida sans",Verdana,"sans-serif";
	font-size:16px;
	color:#000;
	padding:0;
	box-sizing:border-box;
}
body{
	background-image:url(../images/background1.png);
	background-repeat:no-repeat;
	background-position:center;
}
#wrapper{
	max-width:100vh;
	background-color:rgb(255 255 255/0.6);
	padding:1em;
	margin:0 auto;
	gap:1em;
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:100px 50px minmax(650px, auto) 100px;
}
header{
	background-color:var(--skyblue);
	display:grid;
	grid-template-columns:repeat(4,1fr);
}
header img{
	height:90%;
	padding-bottom:0.5em;	
	grid-column:1/2;
}
header h1{
	height:100%;
	max-width:100%;
	grid-column:2/5;
	font-family:"Lucida sans",Garamond,"serif";
	font-size:clamp(2em,5vw,3em);
	text-align:right;
	padding:0 1em 0 0;
}
nav{
	grid-row:2/3;
	background-color:var(--blue);
	width:100%;
	height:50px;
}
nav ul{
	list-style:none;
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	align-items:center;
	margin:0;
}
nav a{
	text-decoration:none;
	font-size:clamp(0.8em,2vw,1em);	
	color:#fff;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:0.5em;
}
nav a:hover{
	background-color:var(--yellow);
	color:#000;
}

main{
	max-width:100%;
	grid-row:3/4;
}
h2{
	font-size:2em;
}
h3{
	color:var(--blue);
	font-size:clamp(1em,3vw,1.6em);
}

/*index start*/
#home{
	max-width:100%;	
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-template-rows:auto;
	gap:0 1em;
}
#home1{
	grid-column:1/2;
	grid-row:1;
}
#home2{
	grid-column:2/3;
	grid-row:1;	
}
#home3{
	grid-column:1/2;
	grid-row:2;	
}
#home4{
	grid-column:2/3;
	grid-row:2;		
}
#home5{
	grid-column:1/2;
	grid-row:3;	
}
#home1 ul, #home2 ul, #home3 ul, #home4 ul, #home5 ul,#home2-sub ul,#home2-register ul{
	padding:0;
}
#home1 ul li, #home2 ul li, #home3 ul li, #home4 ul li, #home5 ul li,#home2-sub ul li,#home2-register ul li{
	position:relative;
	background:var(--lightblue);
	line-height:40px;
	width:100%;
	margin-bottom:5px;
	border-left:solid 35px var(--blue);
	list-style-type:none;
	vertical-align:middle;
	border-radius:15px 0px 0px 15px;
}
#home1 ul a, #home2 ul a, #home3 ul a, #home4 ul a, #home5 ul a, #home2-sub ul a,#home2-register ul a{
	text-decoration:none;
	height:40px;
	font-size:clamp(0.8em,2vw,1em);	
	padding:0 5px;	
	display:block;
}
#home1 ul a:hover, #home2 ul a:hover, #home3 ul a:hover, #home4 ul a:hover, #home5 ul a:hover,#home2-sub ul a:hover,#home2-register ul a:hover{
	background-color:var(--yellow);
	color:#000;
}
/*index END*/

/*soon*/
#soon{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(255 255 255/0.3);	
	padding:0.5em;
	margin:0.5em;	
}
/*soon*/

/*Instruction start*/
#instruction{
	width:90%;
	max-width:650px;
	text-align:center;
	display:block;
	background-color:rgb(255 255 255/0.3);	
	padding:0.5em;
	margin:0 auto;
}
#instruction img{
	width:100%;
}
/*Instruction END*/

/*calendar start*/
#calendar1 h2{
	text-align:left;
	margin:0 0 0.5em 0;
	padding:0 1em;
}
#calendar1 h3{
	text-align:right;
	margin:0 0 0.5em 0;
	padding:0 1em;	
}
#calendar2{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	margin:0.5em 0;
	padding:0 1em;
}
#calendar{
	width:90%;
	max-width:650px;
	height:500px;
	border-collapse:collapse;
	align-content:center;
	table-layout:fixed;
	margin:0 auto;	
}
#calendar th{
	text-align:center;
	background-color:#fff;
	border:solid 1px #000;	
	width:10%;
	font-size:20px;
}
#calendar td{
	text-align:left;
	background-color:#fff;
	border:solid 1px #000;
	width:10%;
	vertical-align:top;/*縦方向位置*/
}
#calendar td a{
	display:block;
	height:100%;
	width:100%;
	text-decoration:none;
}
#calendar td a:hover{
	background-color:var(--yellow);
}
#calendar .sun{
	background-color:var(--pink);
}
#calendar .sat{
	background-color:var(--skyblue);
}
#calendar .mute{
	color:rgb(0 0 0/0.2);
}
/*calendar END*/

/*FORM for expence, income, journal input start*/
form{
	width:90%;
	max-width:650px;
	height:500px;
	align-content:center;
	margin:0 auto;
}
#expense1,#income1,#register1,#journal1,#contact1{
	background-color:rgb(255 255 255/0.3);	
	padding:0.5em;
	margin:0.5em;
}
#expense2,#income2,#register2,#journal2,#contact2{
	color:#fff;
	font-size: clamp(1em, 5vw, 2em);
	display:block;
	width:100%;
	height:50px;
	text-align:center;
	padding:0.2em 0;
}
.expense,.income,.register,.journal,.contact{
	width:100%;
	height:40px	;
	border-collapse:collapse;
}
.expense th,.income th,.register th,.journal th,.contact th{
	height:40px;
	text-align:left;
	padding:0 0.5em;
	border:1px #fff solid;
}
.expense td,.income td,.register td,.journal td,.contact td{
	text-align:center;	
	vertical-align:middle;
	background-color:#fff;
	outline:none;
}
.row1{
	width:30%;
}
.row2{
	width:20%;	
}
.row3{
	width:50%;	
}
.row4{
	width:10%;	
}
.numbering{
	text-align:left;
	margin:0 0.5em;
	vertical-align:middle;
	display:block;
}
label{
	font-size:clamp(0.65em, 1.7vw, 0.8em);	
	display:inline-block;
	white-space:nowrap;
 }
.expense input,.expense textarea, .expense select,.income input,.income textarea, .income select,.register input,.register select,.journal input,.journal textarea,.contact input{
	padding: 0.15em;
	width:100%;
	height:40px;
	border:none;
	background:#fff;
}
#expense4,#income4,#register4,#journal4{
	text-align:right;
	margin:1em;
}
#expense3,#income3,#register3,#journal3,#contact3{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin:1em;
}
#expense4 button,#income4 button,#register4 button,#journal4 button{
	height:30px;
	width:55px;
	border:none;
	font-size:14px;
}
#expense3 button,#income3 button,#register3 button,#journal3 button,#contact3 button{
	height:50px;
	width:100px;
	padding:1em;
	border:none;
	color:#fff;
}
#expense3 button:hover,#income3 button:hover,#expense4 button:hover,#income4 button:hover,#register3 button:hover,#register4 button:hover,#journal3 button:hover,#journal4 button:hover,#contact3 button:hover{
	background-color:var(--yellow);
	color:#000;
}
/*expence, income input END*/

/*expence input start*/
#expense1{
	border:solid 1px var(--lightblue);
}
#expense2{
	background-color:var(--skyblue);
}
.expense th{
	background-color:var(--lightblue);
}
.expense td{
	border:1px var(--lightblue) solid;
}
#expense4 button{
	background-color:var(--lightblue);
}
#expense3 button{
	background-color:var(--skyblue);
}
/*expence input END*/

/*income input start*/
.journal th.j-title{
	text-align: center;
}
#income1{
	border:solid 1px var(--lightpink);
}
#income2{
	background-color:var(--pink);
}
.income th{
	background-color:var(--lightpink);
}
.income td{
	border:1px var(--lightpink) solid;
}
#income4 button{
	background-color:var(--lightpink);
}
#income3 button{
	background-color:var(--pink);
}
/*income input END*/


/*journal input start*/
#journal1,#contact1{
	border:solid 1px var(--lightgreen);
}
#journal2,#contact2{
	background-color:var(--green);
}
.journal th,.contact th{
	background-color:var(--lightgreen);
}
.journal td,.contact td{
	border:1px var(--lightgreen) solid;
}
#journal4 button{
	background-color:var(--lightgreen);
}
#journal3 button,#contact3 button{
	background-color:var(--green);
}
/*journal input END*/

/*contact start*/
.radio{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	width:100%;
	height:40px;
	margin:0;
	padding:0;
}
.radio input[type="radio"]{
	width:20px;
	height:50%;
	vertical-align:middle;
	margin:0.6em;
}
.detail{
	height:120px;
}
.contact textarea{
	padding: 0.15em;
	width:100%;
	height:95%;
	border:none;
	background:#fff;
}
/*contact END*/
/*FORM END*/

/*bs start*/
#bs1{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	margin:0.5em 0;
	padding:0 1em;
}
#bs{
	width:90%;
	max-width:650px;
	border-collapse:collapse;
	align-content:center;
	table-layout:fixed;
	margin:0 auto;	
}
#bs th{
	background-color:#fff;
	border:solid 1px #000;	
	width:10%;
	height:40px;
	text-align:right;
	vertical-align:middle;
	padding:0 0.5em 0 0;
	font-size:clamp(0.8em,1vw,1.2em);
}
#bs td{
	background-color:#fff;
	border:solid 1px #000;
	width:10%;
	height:40px;
	text-align:right;
	vertical-align:middle;
	padding:0 0.5em 0 0;	
}
#bs .subtotal.asset{
	background-color:var(--lightpink);	
}
#bs .total.liabilitie{
	background-color:var(--skyblue);	
}
#bs .total.asset{
	background-color:var(--pink);	
}
#bs .total.equity{
	background-color:var(--green);	
}
#bs .title.asset,#bs .title.liabilitie,#bs .title.equity{
	text-align:center;
}
#bs .sub.title.asset{
	background-color:var(--lightpink);	
}
#bs .title.asset{
	background-color:var(--pink);	
}
#bs .title.liabilitie{
	background-color:var(--skyblue);
}
#bs .title.equity{
	background-color:var(--green);	
}
/*bs END*/

/*Register start*/
form{
	width:90%;
	max-width:650px;
	height:500px;
	align-content:center;
	margin:0 auto;
}
#register1{
	border:solid 1px var(--lightgreen);
}
#register2{
	background-color:var(--green);
}
.register th{
	background-color:var(--lightgreen);
}
.register td{
	border:1px var(--lightgreen) solid;
}
#register3 button{
	background-color:var(--green);	
	color:#fff;
}
#register4 button{
	background-color:var(--lightgreen);	
}
/*Registration END*/

footer{
	background-color:var(--blue);
	grid-row:4/5;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-template-rows:repeat(2,1fr);
	margin:0;
}
#footer1{
	grid-column:1/3;
	grid-row:1/2;	
	font-size:0.5em;
}
#footer2{
	grid-column:1/2;
	grid-row:2/3;
	text-align:left;
}
#footer3{
	grid-column:2/3;
	grid-row:2/3;
	text-align:right;
}
#footer1 ul{
	list-style:none;
	line-height:0.2em;
	display:inline-block;
	margin:0.2em 0.2em;
}
#footer1 ul li a{
	font-size:0.8em;
}
#footer1 ul li a,#footer2 a,#footer3 a{
	display:block;
	width:auto;
	color:#fff;
	padding:0.5em;
	text-decoration:none;
	display:inline-block;
	margin:0.3em 0.3em;
}
#footer1 ul li a:hover,#footer2 a:hover,#footer3 a:hover{
	background-color:var(--yellow);
	color:#000;
}
/*media queries start*/
@media only screen and (min-width: 600px) and (max-width: 768px){
	#wrapper{
		grid-template-rows:100px minmax(50px, auto) 1fr 100px;
	}
	main{
		display:grid;
		grid-template-columns:repeat(1,1fr);
		grid-template-rows:auto;
	}
	#calendar{
		width:90%;
		height:500px;
	}
	label{
		white-space:normal;
	}
}
@media only screen and (max-width: 600px){
	#wrapper{
		grid-template-rows:100px minmax(50px, auto) 1fr 100px;
	}	
	#calendar{
		width:90%;
		height:350px;
	}
	label{
		white-space:normal;
	}	
}
/*media queries END*/