@charset "utf-8";

/* -------- 変数 --------*/
:root{
	--acce-color:#bc962d;
	--base-color:#f0f0f0;
	--main-color:#444;
	--warning-color:#d20605;
	--sub-color:#ddd;
}
/* -------- 共通 --------*/
html{
	/* background-image:url(../img/note-grid.png);
	background-repeat: no-repeat;
	background-size: cover; */
	font-family: 'ヒラギノ角ゴ ProN',sans-serif;
	font-size:62.5%;		/*font-sizeを16px→10pxに*/
}
@media (min-width:960px){
	html{
		font-size:75%;		/*パソコンサイズの時は文字サイズを1.2倍*/
	}
}
body{
	background-color: var(--base-color);
	font-size: 1.6rem;		/*基本：16px*/
}
input{
	font-size:1.6rem;		/*16px以上にして、スマホサイズでの意図しない拡大を防止*/
}
.box{		/*全体に余白を取ってかつ真ん中よせにする*/
	margin:16px auto;
	max-width:800px;
	width: 88%;
}
.section{
	margin:56px 0;
}
.unit{		/*unit = 単位。メインの文字と比べて小さく*/
	font-size: 0.8em;
}
img{
	height: auto;
	max-width: 100%;
}
.icon img{
	margin-right: 16px;
	width: 48px;
}

/* -------- テキスト系 --------*/
.title{
	color:var(--acce-color);
	font-size: 4.0rem;
	margin: 40px 0;
	text-align: center;
}
.title__sub{
	display:block;
	font-family: "Snell Roundhand",serif;
	font-size:1.2rem;
	text-align: center;
}
.heading__2{
	border-bottom: 1px solid;		/*見出しの下に下線を引いてノートっぽく*/
	font-size:2.4rem;
	padding-bottom: 8px;
}
.mt-16px{
	margin-top: 16px;
}
.text--bold{		/*太字にするためのクラス*/
	font-weight: bold;
}
/* -------- ボタン --------*/
.button{
	appearance: none;
	border: 1px solid transparent;
	background-color: var(--main-color);
	border-radius: 2em;
	color: var(--base-color);
	cursor: pointer;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 8px 16px;
	text-align: center;
}
.button.button--warning{		
	background-color: var(--warning-color);
	color: var(--base-color);
}
.button.button--acce{		
	background-color: var(--acce-color);
	border: 1px solid var(--acce-color);
	color: var(--base-color);
}
/* -------- 配置・横並び --------*/
.flex{		/*横並び*/
	display: flex;
	margin-top: 24px;
}
.flex--default{		/*左右端揃え・上下中央揃え*/
	align-items: center;
	justify-content: space-between;
}
.flex--start{		/*左揃え・上下中央揃え*/
	align-items: center;
	justify-content: flex-start;
}

/* -------- 合計セクション --------*/
.section.total .heading__2::before{
	background-image:url(../img/calculator.png);
}
.total__accent{
	font-size: 4.0rem;
	font-weight: bold;
}

/* -------- 一覧セクション --------*/
.section.list .heading__2::before{
	background-image:url(../img/list.png);
}
.list__item{
	background-color:var(--sub-color);
	padding: 16px;
	margin-top: 16px;
}
.list__item dt{
	font-size: 2.0rem;
	font-weight: bold;
}
.list__item dd {
	margin-top: 16px;
}
.list__item__cost{
	font-weight: bold;
}

/* -------- ログアウトセクション --------*/
.addition__text-wrap,
.logout__text-wrap{
	padding: 0 16px;
}

/* -------- ログインフォーム --------*/
.login__button-wrap{
	text-align: right;
	margin-top: 16px;
}