@charset "utf-8";

/*===================================
 CSS INFO
 Description : mypage css
=====================================*/

/* common
==================================== */
body{
	background-color: #EEE;
}
header{
	background-color:#FFF;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.065);
}
header #logo{
	width: 200px;
}
header .text-black-50{
	font-size: 80%;
	margin-left: 10px;
}
footer{
	padding-top: 1rem;
}
/*.btn-primary {
	box-shadow: 0 5px 0 0 #0e93a7;
	background-color: #14b9d1;
	border: 1px solid #14b9d1;
}*/

#mypage header,#mypage .navbar-expand-lg{
	padding: 0;
}
#mypage .navbar-collapse{
	background-color: #446175;
}
#mypage .navbar-collapse a{
	color: #FFF;
}
#mypage .navbar-brand{
	padding: 1rem;
}


#mypage .mypage-submenu {
	list-style: none;
	margin-bottom: 0;
	display: flex;
	padding-left: 0;
	padding-right: 1rem;
}

.mypage-submenu {}
.mypage-submenu a{
	color: rgba(0, 0, 0, 0.5) !important;
}

.page-head{
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.myp-ttl01{
	text-align: center;
	font-size: 1.75rem;
	font-weight: bold;
	color: #446175;
}
.myp-ttl02{
	font-size: 1.4rem;
	font-weight: bold;
	background-color: #446175;
	color: #fff;
	padding: 8px 15px;
	border-radius: 3px;
	margin-bottom: 15px;
}
.myp-ttl03{
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}
.myp-ttl04{
	padding: 5px;
	margin-bottom: 10px;
	padding-left: 10px;
	background-color: #EEEEEA;
	border-radius: 3px;
	font-size: 1rem;
	font-weight: bold;
}

#mypage .alert{
	-webkit-transition: 0.2s linear;
}

@media (min-width: 768px){
	#mypage .navbar-expand-lg .navbar-collapse{
		-webkit-justify-content: center;
		        justify-content: center;
	}
}
@media (min-width: 992px){
	#mypage .navbar-expand-lg{
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
	}
	#mypage .navbar-expand-lg .navbar-collapse{
		-webkit-flex-basis: 100%;
		        flex-basis: 100%;
	}
	#mypage .navbar-expand-lg .navbar-nav .nav-link{
		padding-right: 0.8rem;
		padding-left: 0.8rem;
	}
	#mypage .navbar-nav{
		width: 100%;
	}
	#mypage .navbar-nav li{
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		text-align: center;
	}
}

/* login
==================================== */
#login-wrap{
	height: 80vh;
}
#login-inner{
	-webkit-align-self: center;
	        align-self: center;
}
#login{
	width: 280px;
}
#login h1{
	font-size: 1.5rem;
	margin-bottom: 2rem;
	font-weight: bold;
}
#login .login-form-group{
	margin-bottom: 2rem;
}
#login .login-form-group input[type="text"],
#login .login-form-group input[type="password"]{
	padding: 1.5rem 1rem;
}
#login .login-form-group .login-id{
	-webkit-border-bottom-left-radius: 0;
	        border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	        border-bottom-right-radius: 0;
}
#login .login-form-group .login-pass{
	-webkit-border-top-left-radius: 0;
	        border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	        border-top-right-radius: 0;
	border-top: 0;
}

#login .placeholder_wrap .form-control{
	font-size: 0.77rem!important;
}

#login .card-header{
	background-color: #14b9d1;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
#login .card-body{
	padding: 1.5rem 2rem;
}
@media (min-width: 768px) {
	#login{
		width: 400px;
	}
}

/* mypage top
==================================== */
#mypage header .header-login{
	float: right;
	margin-top: 23px;
}
#mypage header .header-login .header-username{
	display: inline-block;
	margin-right: 30px;
}
#mypage .mypage-contents{
	background: #FFF;
	padding: 1rem;
}
@media (min-width: 768px) {
	#mypage .mypage-contents{
		padding: 2rem;
		box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.065);
	}
}

/*利用履歴*/
.reseve-history{}
.rsv-history-thead{
	text-align: center;
	font-size: 0.75rem;
	font-weight: bold;
	border-bottom: 2px solid #446175;
	display: none;
}
.rsv-history-tbody{
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.rsv-history-tbody + .rsv-history-tbody{
	border-top: none;
}

.rsv-history-thead + .rsv-history-tbody div[class^="rsv-td-"]{
	border-top:none;
}
.rsv-history-tbody div[class^="rsv-td-"] dl,
.rsv-history-tbody div[class^="rsv-td-"] dd{
	margin-bottom: 0;
}
.rsv-td-05 dl dd{
	color: #FF0000;
	font-weight: bold;
}

.rsv-td-06 > a:first-child{
	margin-right: 0.3rem;
}

.reseve-history-sort{
	margin-bottom: 2rem;
}
.reseve-history-sort small{
	padding-right: 5px;
}

.reseve-history-sort select{
	width: auto;
}

@media (max-width: 767px) {
}
@media (max-width: 991px) {
	.rsv-td-06{
		text-align: center;
		margin-top: 10px;
	}
	.rsv-history-tbody{
		padding: 15px 0 20px;
	}
	.rsv-history-tbody div[class^="rsv-td-"] dl{
	}
	.rsv-history-tbody div[class^="rsv-td-"] dl dt{
		width: 100px;
		float: left;
	}
	.rsv-history-tbody div[class^="rsv-td-"] dl dd{
		overflow: hidden;
	}
	.rsv-td-02 dd span{
		display: inline-block;
		margin-left: 5px;
	}
	.rsv-td-03 dl dd span.rsv-start-day:after{
		content: "～";
		display: inline-block;
		margin-right: 3px;
		margin-left: 3px;
	}
}
@media (min-width: 992px) {
	.rsv-history-thead{
		display: flex;
	}
	.rsv-history-tbody{
		-webkit-flex-direction: row;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
	.rsv-history-tbody{
		border-bottom: 1px solid #CCC;
	}
	.rsv-history-tbody div[class^="rsv-td-"]{
		text-align: center;
	}
	.rsv-history-tbody div[class^="rsv-td-"] dt{
		display: none;
	}
	.rsv-th-01,.rsv-td-01{
		width: 10%;
	}
	.rsv-th-02,.rsv-td-02{
		width: 15%;
	}
	.rsv-th-03,.rsv-td-03{
		width: 20%;
	}
	.rsv-th-04,.rsv-td-04{
		width: 25%;
	}
	.rsv-th-05,.rsv-td-05{
		width: 10%;
	}
	.rsv-th-06,.rsv-td-06{
		width: 20%;
	}
	.rsv-td-02 dl dd span{
		display: block;
	}
	.rsv-td-03 dl dd span.rsv-start-day,
	.rsv-td-03 dl dd span.rsv-end-day{
		display: block;
	}
	.rsv-td-03 dl dd span.rsv-start-day:before,
	.rsv-td-03 dl dd span.rsv-end-day:before{
		font-size: 11px;
		font-weight: bold;
	}
	.rsv-td-03 dl dd span.rsv-start-day:before{
		content: "貸出日：";
	}
	.rsv-td-03 dl dd span.rsv-end-day:before{
		content: "返却日：";
	}
	.rsv-th-06,.rsv-td-06 a.btn{
		padding: .25rem .5rem;
		font-size: .875rem;
		line-height: 1.5;
		border-radius: .2rem;
	}
	.rsv-history-thead div[class^="rsv-th-"]{
		padding: 5px 8px;
	}
	.rsv-history-tbody div[class^="rsv-td-"]{
		padding: 10px 8px;
	}
}


.reseve-history-list{
	border: 1px solid #CCC;
	margin-bottom: 2rem;
}
.reseve-history-head{
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	background-color: #5e87a2;
	padding: 0.5rem 1rem;
	color: #FFF;
}
.reseve-history-head .reserve-number{
	font-weight: bold;
}
.reseve-history-body{
	padding: 1rem 1rem;
}
.reseve-history-col1{
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	font-size: 0.8rem;
}
.st-yoyaku,.st-cancel,.st-riyou{
	-webkit-border-radius: 2px;
	        border-radius: 2px;
	padding: 0.1rem 0.2rem;
	font-size: 0.75rem;
}
.st-yoyaku{
	background-color: #ffc2c2;
	color: #A03535;
}
.st-cancel{
	background-color: #ccc;
	color: #666;
}
.st-riyou{
	background-color: #a8ddf1;
	color: #286E88;
}
.reseve-history-col2{
}
.reseve-history-col2 li{
	margin-bottom: 1rem;
}
.reseve-history-col2 li span{
	background-color: #EEE;
	display: block;
	margin-bottom: 0.5rem;
	-webkit-border-radius: 3px;
	        border-radius: 3px;
	padding: 0.3rem 0.5rem;
	font-size: 0.85rem;
}
.reseve-history-col3 a{
	display: block;
}

/*ご利用詳細*/
.reserve-id-box{
	margin-bottom: 30px;
	background-color: #E8F8FA;
	border: 3px solid #14B9D1;
	padding: 15px 20px;
	font-size: 18px;
	font-weight: bold;
}
.rsv-detail th{
	background-color: #EEE;
}
.rsv-option-list span{
	font-weight: bold;
	padding-right: 0.5rem;
}

.price-goukei{
border: 3px solid #FF0000;
overflow: hidden;
padding: 1rem;
background-color: #FFECEC;
margin-top: 15px;
display: flex;
-webkit-justify-content: space-between;
        justify-content: space-between;
-webkit-align-items: center;
        align-items: center;
}
.price-goukei dt{
background-color: #FFECEC;
}
.price-goukei dd{
	margin-bottom: 0;
}
.price-goukei dd span{
	color: #FF0000;
	font-weight: bold;
	font-size: 1.5rem;
}
.mypage-cancel-box{
	border: 10px solid #EEE;
	padding: 2rem;
}

@media (max-width: 575px) {
	.navbar{
		padding: 0;
	}
}
@media (min-width: 768px) {
	.reseve-history-head{
		display: inherit;
	}
	.reseve-history-col1{
		display: inherit;
	}
	.reseve-history-col1 p{
		display: inline-block;
	}
	.reseve-history-col3{
		text-align: right;
	}
	.reseve-history-col3 a{
		display: inline-block;
	}
}

/* 会員情報
==================================== */
.mypage-member{}
.mypage-member .col-form-label.must span:after {
	position: absolute;
	top: 10px;
	right: 10px;
}
.mypage-member .label-must:after,
.mypage-member .col-form-label.must span:after{
	content: "必須";
	background-color: #ff3a3a;
	padding: 2px 3px;
	font-size: 0.8rem;
	color: #FFF;
	margin-left: 5px;
	font-size: 11px;
}
.mypage-member .form-group.row{
	margin-left: 0;
	margin-right: 0;
	-webkit-align-items: baseline;
	        align-items: baseline;
}
.mypage-member .form-group.row .col-sm-2 + div[class^="col-sm-"]{
	padding-top: 0.3rem;
}
.mypage-member .col-form-label{
	padding: 0;
}
.mypage-member .col-form-label span{
	position: relative;
	padding: 7px 10px;
	text-align: left;
	display: block;
	background-color: #EEE;
}
.mypage-member .input-clm .form-control{
	width: 80%;
}
.mypage-member .input-clm .form-control,
.mypage-member .input-clm .custom-select,
.mypage-member .input-clm .text-muted{
	display: inline-block;
}

.mypage-member .form-control-plaintext{
	display: inline-block;
}
@media (max-width: 575px) {
	.mypage-member .input-clm .birth-year select.form-control{
		width: auto;
		margin-bottom: 0.5rem;
	}
	.mypage-member .zip-code{
		margin-bottom: 0.5rem;
	}
}
@media (max-width: 767px) {
	.mypage-member .col-form-label span{
		margin-bottom: 1rem;
	}
}
@media (min-width: 768px) {
	.mypage-member .col-form-label span{
		padding: 15px 10px;
	}
}

/*完了*/
.registry-done-info{
	background-color: #eefae0;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	padding: 1.5rem;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	color: #305800;
	margin-bottom: 2rem;
}