@charset "utf-8";
/*--------------------------------------------------------------
/reservation/index.php
--------------------------------------------------------------*/
/*全体*/
.reservation {
	display: flex;
	justify-content: space-between;
	margin: 3em auto;
	width: 92%;
	max-width: 1180px;
}
.reservation main {
	width: 55%
}
.reservation aside {
	width: 40%;
}
/*戻るボタン*/
.prev {
	margin: 0 0 3em;
	font-size: .9375em;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: inherit;
}
.prev:hover {
	opacity: .5;
}
.prev svg {
	margin-right: .5em;
	width: 1em;
	vertical-align: text-top;
}






.reservation .container {
	text-align: center;
}
.reservation .container h1 {
	margin: 0 0 1em;
	font-size: 1.5em;
}
.reservation .container .studio-list {

}
.reservation .container .studio-list a { 
	display: block; 
	padding: 1.5em; 
	font-size: 1.125em;
	font-weight: bold; 
	text-decoration: none; 
	color: inherit; 
	border: .125em solid #eee; 
	border-radius: .25em; 
	transition: all 0.2s ease;
}
.reservation .container .studio-list a:hover {
	color: #fff; 
	border-color: #007bff; 
	background: #007bff; 
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,123,255,0.1);
}
.reservation .container .prev {
	display: block;
	font-size: .875em;
	text-decoration: none;
	color: inherit;
}
/*店舗選択*/
.reservation .studio .container {

}
.reservation .studio .container h2 {
	font-size: 1.25em;
	text-align: left;
}
.reservation .studio .container .studio-list {
	
}
.reservation .studio .container .studio-list .studio-item {
	display: block;
	margin: 0 0 .5em;
	padding: 1em 1.25em; 
	text-decoration: none; 
	color: inherit; 
	border: .125em solid #eee; 
	border-radius: .25em; 
	cursor: pointer;
	transition: all 0.2s ease;
}
.reservation .studio .container .studio-list .studio-item .name {
	margin: 0 0 .25em;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
}
.reservation .studio .container .studio-list .studio-item .address {
	margin: 0;
	font-size: .75em;
	text-align: left;
}
.reservation .studio .container .studio-list .studio-item .station {
	margin: 0;
	font-size: .875em;
	text-align: left;
}
.reservation .studio .container .studio-list .studio-item:hover,
.reservation .studio .container .studio-list .studio-item.selected {
	border-color: #007bff;
}


/*プラン選択*/
.reservation .menu .container .block {
	margin: 0 0 2em;
}
.reservation .menu .container .block h2 {
	font-size: 1.25em;
	text-align: left;
}
.reservation .menu .container .block label.item {
	display: block;
	margin: 0 0 .5em;
	padding: 1em 1.25em; 
	text-decoration: none; 
	color: inherit; 
	border: .125em solid #eee; 
	border-radius: .25em; 
	cursor: pointer;
	transition: all 0.2s ease;
}
.reservation .menu .container .block label.item input {
	margin-right: 10px; transform: scale(1.2);
}
.reservation .menu .container .block label.item.selected {
	border-color: #007bff;
}
.reservation .menu .container .block label.item .info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.reservation .menu .container .block label.item .info .body {
	
}
.reservation .menu .container .block label.item .info .body input {
	display: none;
}
.reservation .menu .container .block label.item .info .body .name {
	margin: 0 0 .25em;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
}
.reservation .menu .container .block label.item .info .body .description {
	margin: 0;
	font-size: .75em;
	text-align: left;
}
.reservation .menu .container .block label.item .info .price {
	width: 15em;
	font-size: 1.25em;
	font-weight: bold;
	text-align: right;
}
.reservation .menu .container .block label.item .info .price .unit {
	padding: 0 .125em;
	font-size: .75em;
}
.reservation .menu .container .block label.item .info .price .tax {
	display: block;
	font-size: .5em;
}




.reservation .menu .container .block .wrap {
	display: flex;
	justify-content: space-between;
}
.reservation .menu .container .block .wrap label.item {
	width: 32%;
}
.reservation .menu .container .block .wrap label.item .info {
	display: block;
}
.reservation .menu .container .block .wrap label.item .info .body .name {
	margin: 0;
	text-align: center;
}
.reservation .menu .container .block .wrap label.item .info .price {
	width: auto;
	text-align: center;
}


/*背景*/
.reservation .menu .container .block .bg-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.reservation .menu .container .block .bg-grid .bg-card {
	position: relative;
	overflow: hidden;
	border: .125em solid #eee;
	border-radius: .25em;
	cursor: pointer;
	transition: 0.2s;
}
.reservation .menu .container .block .bg-grid .bg-card img {
	display: block;
	width: 100%;
	height: auto;
}
.reservation .menu .container .block .bg-grid .bg-card .bg-name {
	padding: .5em;
	font-size: .875em;
	font-weight: bold;
	text-align: center;
}
.reservation .menu .container .block .bg-grid .bg-card input {
	display: none;
}
.reservation .menu .container .block .bg-grid .bg-card.selected {
	border-color: #007bff;
	box-shadow: 0 0 10px rgba(0,123,255,0.3);
}
.reservation .menu .container .block .bg-grid .bg-card.selected .bg-name {
	color: #fff;
	background: #007bff;
}
@media (max-width: 769px) {


}
/*属性*/
.reservation .menu .container .block .attribute_grid {
	display: flex;
	justify-content: space-between;
}
.reservation .menu .container .block .attribute_grid select {
	display: block;
	padding: 1em;
	width: 49%;
	font-size: .875em;
	font-weight: bold;
	color: inherit;
	background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 12px center; background-size: 1em;
	border: .125em solid #eee;
	border-radius: .25em;
	appearance: none;
}
/*グッズ*/




/*備考*/
.reservation .menu .container .block textarea {
	padding: 1em;
	width: 100%;
	min-height: 100px;
	font-size: 1rem;
	border: .125em solid #eee;
	border-radius: .25em;
	resize: vertical;
}
/*カレンダー*/
.reservation .calendar {
	
}
.reservation .calendar .container {
	
}
.reservation .calendar .container .day-section {
	margin-bottom: 1em;
	padding-bottom: 1.5em;
	border-bottom: .0625em solid #eee;
}
.reservation .calendar .container .day-section .day-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 0 0 1em .125em;
	font-size: 1.125em;
	font-weight: bold;
}
.holiday-badge {
	background: #fff1f0;
	color: #d32f2f;
	font-size: 0.7rem;
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid #ffa39e;
	white-space: nowrap;
}
.reservation .calendar .container .day-section .slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
	gap: .375em;
}
.reservation .calendar .container .day-section .slot-grid .slot,
.reservation .calendar .container .day-section .slot-grid .slot-disabled {
	display: block;
	padding: .5em .375em;
	font-family: inherit;
	font-weight: bold;
	line-height: 1.6;
	border: .125em solid #007bff;
	border-radius: .25em;
	text-align: center;
	text-decoration: none;
	color: #007bff;
	transition: 0.2s;
}
.reservation .calendar .container .day-section .slot-grid .slot:hover,
.reservation .calendar .container .day-section .slot-grid .slot.selected {
	color: #fff;
	background: #007bff;
}
.reservation .calendar .container .day-section .slot-grid .slot-disabled { 
	border: .125em solid #ddd;
	color: #ccc;
	background: #fafafa;
	cursor: not-allowed;
}
@media (max-width: 769px) {


}
/*お客様情報入力*/
.reservation .customer {
	
}
.reservation .customer .container {
	
}
.reservation .customer .container form {
	
}
.reservation .customer .container form .input-group {
	
}
.reservation .customer .container form .input-group table {
	width: 100%;
	border-collapse: collapse;
}
.reservation .customer .container form .input-group table tbody {
	width: 100%;
}
.reservation .customer .container form .input-group table tbody tr {
	width: 100%;
}
.reservation .customer .container form .input-group table tbody tr th,
.reservation .customer .container form .input-group table tbody tr td {
	padding: .5em 0;
}
.reservation .customer .container form .input-group table tbody tr th {
	width: 10em;
}
.reservation .customer .container form .input-group table tbody tr th label {
	
}
.reservation .customer .container form .input-group table tbody tr td {
	width: calc(100% - 10em);
}
.reservation .customer .container form .input-group table tbody tr td input,
.stripe-input {
	padding: 1em;
	width: 100%;
	font-size: 1rem;
	font-weight: bold;
	font-family: inherit;
	border: .125em solid #eee;
	border-radius: .25em;
}
.reservation .customer .container form .input-group table tbody tr td input::placeholder {
	color: #ccc; /* ここに希望の色を指定してください */
	opacity: 1;  /* Firefoxで色が薄くなるのを防ぐために記述を推奨 */
}
.reservation .customer .container form .input-group table tbody tr td .stripe-row {
	display: flex;
	margin: .25em 0 0;
	gap: .25em;
}
.reservation .customer .container form .input-group table tbody tr td .stripe-row > div {
	flex: 1;
}
#card-errors {
	color: #d32f2f;
	font-size: 0.85rem;
	margin-top: 8px;
}




@media (max-width: 769px) {


}



/*サマリー*/
.reservation aside .summary {
	position: sticky;
	top: 5em;
	padding: 3em;
	box-shadow: .125em .125em 1em 0 rgba(0, 0, 0, .125);
	border-radius: .5em;
}
.reservation aside .summary h4 {
	margin: 0 0 1em;
	font-size: 1.25em;
	text-align: center;
}
.reservation aside .summary table {
	width: 100%;
	font-weight: bold;
	border-collapse: collapse;
}
.reservation aside .summary table tbody {
	width: 100%;
}
.reservation aside .summary table tbody tr {
	width: 100%;
}
.reservation aside .summary table tbody tr th,
.reservation aside .summary table tbody tr td {
	padding: .5em 0;
}
.reservation aside .summary table tbody tr th {
	width: 7em;
	text-align: left;
}
.reservation aside .summary table tbody tr td {
	text-align: left;
}
.reservation aside .summary table tbody tr td #displayPriceExTax,
.reservation aside .summary table tbody tr td #displayDuration {
	font-size: 1.125em;
}
.reservation aside .summary table tbody tr td .unit {
	padding: 0 .125em;
	font-size: .75em;
}
.reservation aside .summary table tbody tr td .tax {
	font-size: .75em;
}
.reservation aside .summary table tbody tr td .tax #displayPriceInTax {
	
}
.reservation aside .summary table tbody tr td .tax .unit {
	padding: 0 .125em;
	font-size: .75em;
}
.summary td span:empty::before { content: "未選択"; color: #ccc; font-size: 0.9rem; }
.reservation aside .summary .btn-next {
	margin: 2em 0 0;
	padding: 1em;
	width: 100%;
	font-weight: bold; 
	color: white;
	background: #007bff;
	border: none;
	border-radius: .25em;
	cursor: pointer;
}
.reservation aside .summary .btn-next:disabled {
	background: #ccc;
	cursor: not-allowed;
}
.reservation aside .summary ul.note {
	margin: 2em 0 0;
	padding: 0;
	font-size: .75em;
	list-style-type: none;
}






/*--------------------------------------------------------------
/booking.php
--------------------------------------------------------------*/
/*.inquiry*/
.inquiry {

}
.inquiry .container {
	margin: 10em auto;
	width: 92%;
	max-width: 480px;
}
.inquiry .container h1 {
	margin: 0 0 1em;
	font-size: 1.5em;
	text-align: center;
}
.inquiry .container .description {
	font-size: .875em;
}
.inquiry .container form {
	margin: 2em 0 0;
}
.inquiry .container form input {
	margin: 0 0 .25em;
	padding: 1em;
	width: 100%;
	font-size: 1rem;
	font-weight: bold;
	font-family: inherit;
	border: .125em solid #eee;
	border-radius: .25em;
}
.inquiry .container form button.btn-check {
	margin: 1em 0 0;
	padding: 1em;
	width: 100%;
	font-weight: bold; 
	color: white;
	background: #007bff;
	border: none;
	border-radius: .25em;
	cursor: pointer;
}
.inquiry .container form button.btn-check:disabled {
	background: #ccc;
	cursor: not-allowed;
}
.inquiry .container .alert {
	margin: 1em 0 0;
	font-size: .875em;
	font-weight: bold;
	color: red;
}
.inquiry .container table {
	margin: 2em 0 0;
	width: 100%;
	font-weight: bold;
	border-collapse: collapse;
}
.inquiry .container table tbody {
	width: 100%;
}
.inquiry .container table tbody tr {
	width: 100%;
}
.inquiry .container table tbody tr th,
.inquiry .container table tbody tr td {
	padding: .5em 0;
}
.inquiry .container table tbody tr th {
	width: 10em;
	text-align: left;
}
.inquiry .container table tbody tr td {
	text-align: left;
}
.inquiry .container table tbody tr td #displayPriceExTax,
.inquiry .container table tbody tr td #displayDuration {
	font-size: 1.125em;
}
.inquiry .container table tbody tr td .unit {
	padding: 0 .125em;
	font-size: .75em;
}
.inquiry .container table tbody tr td .tax {
	font-size: .75em;
}
.inquiry .container table tbody tr td .tax #displayPriceInTax {
	
}
.inquiry .container table tbody tr td .tax .unit {
	padding: 0 .125em;
	font-size: .75em;
}
.inquiry .container button.btn-cancel {
	margin: 2em 0 0;
	padding: 1em;
	width: 100%;
	font-weight: bold; 
	color: white;
	background: red;
	border: none;
	border-radius: .25em;
	cursor: pointer;
}
.inquiry .container button.btn-cancel:hover {
	opacity: .75;
}
/*#cancelModal*/
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}
.modal-content {
	background: white;
	width: 90%;
	max-width: 400px;
	padding: 30px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modal-text { font-size: 1rem; line-height: 1.6; margin-bottom: 25px; white-space: pre-wrap; font-weight: bold; }
.modal-btns { display: flex; gap: 10px; }
.modal-btn { flex: 1; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }



	.status-badge { padding: 5px 10px; border-radius: 4px; font-size: 0.85em; font-weight: bold; color: white; }
	.status-pending { background: #ffc107; color: #333; }
	.status-confirmed { background: #28a745; }
	.status-cancelled { background: #6c757d; }
	.success { color: #155724; background-color: #d4edda; padding: 12px; border-radius: 6px; margin: 10px 0; font-weight: bold; text-align: center; }

	.btn-secondary { background: #eee; color: #333; }
	.btn-danger { background: #dc3545; color: white; }
</style>