@charset "UTF-8";
/* CSS Document */

#login-id , #login-password{
	height: 40px;
	padding: 0 !important;
	width: 100%;
}
.loginBtn{
	width: 100%;
}
.loginArea{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logoutBtn{
	margin: 0 auto 44px;
}
.logoutArea{
	text-align: center;
}
.mb40{
	margin-bottom: 40px;
}
.printArea{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.printBtn{
	margin: 0 auto 44px;
}
body {
	font-family: Arial, sans-serif;
	margin-top:100px; 
}
h1{
	text-align: center;
	margin-bottom: 66px;
}
.form-group {
	margin-bottom: 40px;
}
.input-container input[type="text"]{
	margin-bottom: 40px;
}
label {
	display: block;
	margin-bottom: 15px;
	 font-size: 1.4rem;
	font-weight: 700;
}
input[type="text"] {
	width: 100%;
	padding: 10px;
	font-size: 16px;
}
button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

#calculation-form {
	display: none;
}


.contents{
	width: 90%;
	max-width: 980px;
	margin: 0 auto 44px;
	display: flex;
	justify-content: space-between;
	padding: 5%;
	border: 3px solid #333;
}
select{
	-webkit-appearance: none;
    appearance: none;
	height: 60px;
    padding: 0 10px;
    font-size: 1.2rem;
	background-image: url("../img/arrow.svg");
    background-repeat: no-repeat;
    background-size: 24px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 12px center; /* 画像の位置 */
	width: 100%;
}
input[type="number"] {
	width: 98%;
	height: 44px;
    font-size: 1.2rem;
}
/* Radio */
input[type="radio"] {
    transform:scale(1.6);
	cursor: pointer;
}
.radio_font{
	font-size: 1.4rem;
	margin-left: 2px;
	position: relative;
	top: 1px;
}
.cnt{
	width: 45%;
}
.resultArea{
	position: sticky;
    top: 60px;
    height: 100%;
	width: 40%;
	border: 3px solid #333;
	border-radius: 7px;
	overflow: hidden;
}
h2{
	padding: 5%;
	background: #333;
	margin: 0;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
}
h3{
	margin-bottom: 5px;
}
.Area{
	padding: 5% 5% 0 5%;
}
.Areaflex{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.result_ttl{
	display: block;
}
.hakuoshi{
	font-weight: 700;
}
.haku_num{
	display: block;
	margin-left: auto;
	text-align: right;
}
#total , #one_piece , input-container, #discount_price, #discount_price_total , #discount_price_total_one {
	font-size: 1.8rem;
	font-weight: 700;
}
#discount_price{
	font-size: 1.6rem
}
.discount_price{
	color: red;
}
#discountArea {
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.hide {
	visibility: hidden;
	height: 33px;
}


@media all and (max-width: 980px) {
.contents{
	width: 90%;
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.cnt{
	width: 100%;
}
}

.pc{
	display: block;
}
.sp{
	display: none;
}
@media all and (max-width: 750px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
#login-password{
	margin-bottom: 60px;
}	
	
body {
	font-family: Arial, sans-serif;
}
h1{
	text-align: center;
	margin: 33px 0;
	font-size: 1rem;
}
.form-group {
	margin-bottom: 40px;
}
.input-container input[type="text"]{
	margin-bottom: 40px;
}
label {
	display: block;
	margin-bottom: 15px;
	 font-size: 1.2rem;
	font-weight: 700;
}
input[type="text"] {
	width: 100%;
	padding: 10px;
	font-size: 16px;
}
button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

#calculation-form {
	display: none;
}


.contents{
	width: 84%;
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 5%;
	border: 0 solid #000;
}
select{
	-webkit-appearance: none;
    appearance: none;
	height: 60px;
    padding: 0 10px;
    font-size: 1.2rem;
	background-image: url("../img/arrow.svg");
    background-repeat: no-repeat;
    background-size: 24px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 12px center; /* 画像の位置 */
	width: 100%;
}
input[type="number"] {
	width: 90%;
	height: 44px;
    font-size: 1.2rem;
}
/* Radio */
input[type="radio"] {
    transform:scale(1.6);
	cursor: pointer;
}
.radio_font{
	font-size: 1.4rem;
	margin-left: 2px;
	position: relative;
	top: 1px;
}
.cnt{
	width: 100%;
}
.resultArea{
	position: sticky;
    top: 60px;
    height: 100%;
	width: 100%;
	border: 3px solid #333;
	border-radius:7px;
	overflow: hidden;
	background: #fff;
}
h2{
	padding: 5%;
	background: #333;
	margin: 0;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
}
h3{
	margin-bottom: 5px;
}
.Area{
	padding: 5% 5% 0 5%;
}
.Areaflex{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.result_ttl{
	display: block;
}
.hakuoshi{
	font-weight: 700;
}
.haku_num{
	display: inline-block;
	margin-left: auto;
}
#total , #one_piece , input-container, #discount_price, #discount_price_total , #discount_price_total_one {
	font-size: 1.8rem;
	font-weight: 700;
}
#discount_price{
	font-size: 1.6rem
}
.discount_price{
	color: red;
}
#discountArea {
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.hide {
	visibility: hidden;
	height: 33px;
}
}

@media all and (max-width: 750px) {
	.contents{
		padding-bottom: 160px;
	}
.pc-s{
	display: none;
}
.sp{
	display: block;
}

.spMode h2{
	padding: 2%;
	background: #333;
	margin: 0;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
	font-size: 1rem;
}
	.spMode{
		position: fixed;
        left: 50%;
		transform: translate(-50%, -10px);
        bottom: 10px;
        width: 90%;
        background: #fff;
		padding-bottom: 8px;
		border: 3px solid #333;
	}
	.spMode .input-container{
		width: 80%;
		margin: 0 auto 5px;
	}
	.spMode #one_piece , .spMode #total{
		font-size: 1.2rem;
	}
}
@media all and (max-width: 480px) {
	body{
		margin-top: 80px;
	}
	.spMedeSizeArea .Areaflex{
		flex-direction: column;
	}
	.spMedeSizeArea .Areaflex .result_ttl{
		width: 100%;
	}
	.spMedeSizeArea .Areaflex .result_cnt{
		width: 100%;
	}
	.haku_num{
		display: block;
		margin-left: auto;
		text-align: right;
}
	.kouchin{
		text-align: right;
	}
}