*,
*::before,
*::after {
box-sizing: border-box;
}

/* =======================================================
1. ベース
======================================================= */

body {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.618;
font-family: "Meiryo UI", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
background: #e2fddd;
overflow-wrap: break-word;
}

ol,
ul {
margin: 0;
}

h1 {
font-size: 20px;
}

input,
select,
textarea {
font-size: 100%;
border: 1px solid #a9a9a9;
padding: 0.275em 0.55em;
border-radius: 0.2em;
background: #fff;
}

input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgb(96 165 250 / 20%);
}

select {
appearance: auto;
}

/* =======================================================
2. 共通レイアウト
======================================================= */

.header {
text-align: center;
background: #e2fddd;
border-bottom: 3px solid #888;
padding: 1em 0;
margin-bottom: 1em;
}

.footer {
border-top: 3px solid #888;
text-align: center;
margin-top: 2em;
padding: 1em 0;
background: #CEECF5;
}

.wrapper {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 0 16px;
}

.main {
max-width: 918px;
width: 100%;
padding: 20px;
border: 1px solid rgba(0, 0, 0, .1);
background: #FFFFFF;
border-radius: 10px;
margin: 0 auto;
}

/* =======================================================
3. ヘッダー・ロゴ
======================================================= */

.logo-wrapper {
font-size: 23px;
margin: 0;
padding: 0;
line-height: 1;
}

.logo {
width: 80px;
height: auto;
vertical-align: middle;
}

/* =======================================================
4. 共通部品
======================================================= */

.p1 {
padding: 0 0 0 .75em;
border-left: 6px solid #BDBDBD;
border-bottom: 1px solid #BDBDBD;
}

.p2 {
float: left;
}

.p3 {
float: right;
}

.select-area {
margin: 0 20px;
}

.select-area select {
width: 100%;
margin-top: 8px;
}

.button-area {
text-align: center;
}

.btnma {
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;
margin: 0 20px;
text-align: center;
padding: 8px 0 10px;
border-radius: 5px;
}

.btn,
.btn2,
.btn3,
.btn4,
.btnma {
transition: 0.2s ease;
box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}

.btn:hover,
.btn2:hover,
.btn3:hover,
.btn4:hover,
.btnma:hover {
filter: brightness(0.92);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
}

.btn,
.btn2,
.btn3,
.btn4 {
display: inline-block;
font-size: 20px;
text-decoration: none;
text-align: center;
margin: 10px 0;
padding: 8px 0 10px;
border-radius: 5px;
cursor: pointer;
width: auto;
min-width: 250px;
}

.btn {
background: #D8D8D8;
border: 1px solid #BDBDBD;
color: #111;
}
/* symview用*/
.btn2 {
background: #008080;
border: 1px solid #008080;
color: #fff;
}
/* melp用*/
.btn3 {
background: rgb(72, 162, 236);
border: 1px solid rgb(72, 162, 236);
color: #fff;
}
/*戻るなどシンプルなボタン*/
.btn4 {
background: #F8F8F8;
border: 1px solid #E0E0E0;
color: #111;
}

.my-checkbox {
accent-color: blue;
inline-size: 1.3rem;
block-size: 1.3rem;
}

.ChangeMsg a:link {
color: green;
}

.ChangeMsg a:visited {
color: green;
}

.ChangeMsg a:hover {
color: blue;
}

.box_sample,
.box_sample2 {
border: 2px solid #da4033;
border-radius: 4px;
margin: 1em;
position: relative;
}

.box_sample {
padding: 2em;
}

.box_sample2 {
padding: 1em;
}

.box_sample::before,
.box_sample2::before {
background-color: #fff;
color: #da4033;
font-weight: bold;
top: -.5em;
padding: 0 .5em;
position: absolute;
}

.box_sample::before {
content: "ご確認ください";
left: 1em;
}

.box_sample2::before {
content: "ご注意ください";
left: 0.5em;
}

.table_design01 {
border-collapse: collapse;
width: 100%;
max-width: 650px;
font-size: 85%;
}

.table_design01 th,
.table_design01 td {
border: 1px solid #fff;
background-color: #e6f1f6;
padding: 8px 15px;
}

.table_design01 th {
background-color: #4d9bc1;
color: #fff;
font-weight: bold;
text-align: center;
width: 30%;
}

.ql-align-center {
margin: 0;
text-align: center;
}

.ql-align-right {
margin: 0;
text-align: right;
}

/* =======================================================
5. カレンダー
======================================================= */

.calendar {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 1px;
background: #d9dee5;
margin: 0 auto;
}

.calendar-header {
position: relative;
width: 100%;
padding: 10px 0;
}

.calendar-header .title {
text-align: center;
font-size: 18px;
font-weight: bold;
}

.calendar-header .prev,
.calendar-header .next {
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
font-weight: 600;
color: #1d4ed8;
}

.calendar-header .prev {
left: 10px;
}

.calendar-header .next {
right: 10px;
}

.calendar tr.calendar-header-row td {
background: #f5f7fa;
height: auto;
padding: 6px 0;
}

.calendar th {
background: #f5f7fa;
padding: 8px 0;
font-size: 14px;
font-weight: 600;
color: #4b5563;
}

.calendar th.sun {
color: #dc2626;
}

.calendar th.sat {
color: #2563eb;
}

.calendar td {
width: auto;
text-align: center;
vertical-align: top;
background: #fff;
}

.calendar td.day,
.calendar td.empty {
height: 90px;
min-height: 90px;
}

.calendar .day-cell {
font-size: 16px;
padding-top: 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.calendar .date {
display: block;
margin-top: 8px;
font-size: 14px;
line-height: 1.2;
color: #222;
}

.calendar .status {
display: block;
margin-top: 4px;
color: #8b8b8b;
}

.calendar .status-text {
display: inline-block;
margin-top: 2px;
}

.calendar .available a {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 3px;
text-decoration: none;
color: #3b82f6;
font-size: 18px;
font-weight: 600;
line-height: 1;
}

.calendar .available a:hover {
color: #f63b92;
}

.calendar .holiday {
background: #fdcccc;
}

.calendar .empty {
background: #fafafa;
}

.calendar tr.calendar-footer-row td {
background: #f5f7fa;
padding: 10px 14px;
}

.calendar-note {
font-size: 11px;
line-height: 1.8;
color: #555;
text-align: center;
}

.time-check {
display: block;
border: none;
background: none;
color: #1d4ed8;
font-size: 11px;
line-height: 1;
padding: 0;
margin-top: 3px;
cursor: pointer;
text-decoration: underline;
}

.time-check:hover {
color: #f63b92;
}

#selected-times-text {
white-space: pre-line;
font-size: 12px;
color: #1d4ed8;
line-height: 1.6;
text-align: center;
}

.footer-wrap {
padding: 8px;
}

.next-area {
text-align: right;
margin-top: 8px;
}

#reserve-link {
display: none;
font-size: 12px;
text-decoration: none;
background: #1d4ed8;
color: #fff;
padding: 4px 10px;
border-radius: 4px;
margin-left: 10px;
}

#reserve-link:hover {
background: #3b82f6;
color: #fff;
}

/* =======================================================
6. 新患登録フォーム
form class="patient-form" 用
======================================================= */

.patient-form {
max-width: 640px;
margin: 0 auto;
line-height: 1.8;
}

.patient-form input[type="text"],
.patient-form input[type="tel"],
.patient-form input[type="email"],
.patient-form select,
.patient-form textarea {
width: 100%;
max-width: 420px;
margin: 2px 0 8px;
padding: 6px 12px;
border: 1px solid #bdbdbd;
border-radius: 6px;
background: #fff;
}

.patient-form input[type="text"]:focus,
.patient-form input[type="tel"]:focus,
.patient-form input[type="email"]:focus,
.patient-form select:focus,
.patient-form textarea:focus {
outline: none;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgb(96 165 250 / 20%);
}

.patient-form input[name="PatiAddress7"],
.patient-form input[name="year"],
.patient-form input[name="month"],
.patient-form input[name="day"] {
width: 8em;
}

.patient-form select[name="wareki"],
.patient-form select[name="sex"],
.patient-form select[name="egg"] {
width: auto;
min-width: 8em;
}

.patient-form input[name="PatiAddress"],
.patient-form input[name="address_detail"] {
max-width: 100%;
}

.form-label {
font-weight: bold;
margin-bottom: 8px;
}

.name-row {
display: flex;
gap: 16px;
margin-top: 6px;
}

.name-col {
flex: 1;
}

.name-row input[type="text"] {
max-width: 100%;
}

/* =======================================================
7. 確認画面
======================================================= */

.confirm-title {
margin-bottom: 20px;
font-weight: bold;
}

.confirm-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}

.confirm-table th,
.confirm-table td {
padding: 12px 14px;
border-bottom: 1px solid #e5e7eb;
text-align: left;
vertical-align: top;
}

.confirm-table th {
width: 32%;
background: #f8fafc;
font-weight: bold;
}

.confirm-table td {
background: #fff;
}

/* =======================================================
8. 領収書一覧
======================================================= */

.receipt-list-wrap {
width: 100%;
max-width: 650px;
margin: 0 auto;
}

.receipt-list-title {
margin: 0 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid #888;
font-size: 22px;
text-align: center;
}

.receipt-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 15px;
padding: 18px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
}

.receipt-info {
flex: 1;
min-width: 0;
}

.receipt-date {
margin-bottom: 5px;
font-size: 15px;
color: #555;
}

.receipt-name {
font-size: 18px;
font-weight: bold;
line-height: 1.5;
}

.receipt-pdf-button {
display: inline-block;
flex-shrink: 0;
min-width: 150px;
padding: 8px 16px 10px;
border: 1px solid #4d9bc1;
border-radius: 5px;
background: #4d9bc1;
color: #fff;
font-size: 16px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: 0.2s ease;
box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}

.receipt-pdf-button:hover {
filter: brightness(0.92);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
}
/* =======================================================
9. 予約内容変更確認
======================================================= */

.reservation-date {
max-width: 440px;
margin: 0 auto 28px;
padding: 12px 16px;
border: 1px solid #d6dbe3;
border-radius: 6px;
background: #f8fafc;
text-align: center;
font-weight: bold;
}

.change-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
align-items: stretch;
gap: 14px;
}

.change-card {
overflow: hidden;
border: 1px solid #d6dbe3;
border-radius: 8px;
background: #fff;
}

.change-card-title {
padding: 10px 14px;
text-align: center;
font-weight: bold;
}

.change-before .change-card-title {
background: #f1f3f5;
color: #555;
}

.change-after {
border-color: #4d9bc1;
}

.change-after .change-card-title {
background: #4d9bc1;
color: #ffffff;
}

.change-item {
padding: 14px 16px;
border-top: 1px solid #e5e7eb;
}

.change-value {
line-height: 1.7;
}

.change-arrow {
display: flex;
align-items: center;
justify-content: center;
color: #4d9bc1;
font-size: 28px;
font-weight: bold;
}

.arrow-sp {
display: none;
}

.change-confirm-message {
margin: 32px 0 20px;
text-align: center;
}
/* =======================================================
タブレット以下
======================================================= */

@media screen and (max-width:768px) {

.wrapper {
width: auto;
padding: 0 10px;
}

.main {
width: auto;
padding: 10px;
border: none;
}

.btnma {
width: auto;
font-size: 18px;
}

}

/* =======================================================
スマホ
======================================================= */

@media screen and (max-width:479px) {

body {
font-size: 18px;
}

h1 {
font-size: 18px;
}

.logo-wrapper {
font-size: 20px;
}

.logo {
width: 65px;
}

.p1 {
font-size: 18px;
}

.p2,
.p3 {
float: none;
}

select,
textarea {
font-size: 85%;
}
select {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 46px;
padding: 8px 12px;
font-size: 15px;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn,
.btn2,
.btn3,
.btn4 {
font-size: 18px;
padding: 8px 0;
min-width: 210px;
}
.patient-form {
font-size: 16px;
}

.patient-form input[type="text"],
.patient-form input[type="tel"],
.patient-form input[type="email"],
.patient-form select,
.patient-form textarea {
max-width: 100%;
font-size: 16px;
padding: 10px;
}

.name-row {
flex-direction: column;
gap: 8px;
}

.confirm-table th,
.confirm-table td {
display: block;
width: 100%;
padding: 10px;
}

.confirm-table th {
border-bottom: none;
background: #f1f5f9;
}

.confirm-table td {
padding-top: 0;
margin-bottom: 8px;
}

.receipt-item {
display: block;
padding: 15px;
}

.receipt-pdf-button {
display: block;
width: 100%;
margin-top: 14px;
}


.reservation-date {
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
}

.change-comparison {
grid-template-columns: 1fr;
gap: 10px;
}

.change-arrow {
min-height: 28px;
}

.arrow-pc {
display: none;
}

.arrow-sp {
display: inline;
}

.change-item {
padding: 12px;
}

.change-confirm-message {
margin-top: 24px;
font-size: 16px;
}

}
/* =======================================================
PC
======================================================= */

@media screen and (min-width:1024px) {

.calendar th {
font-size: 15px;
}

.calendar .day-cell {
font-size: 18px;
}

.calendar .available a {
font-size: 24px;
font-weight: 700;
}

.time-check {
font-size: 12px;
}
#selected-times-text {
font-size: 15px;
}

.calendar-note {
font-size: 13px;
}

#reserve-link {
font-size: 14px;
padding: 6px 14px;
}
}