/**************
カルテページ
**************/
/** 顧客一覧画面 **/
.p-dem__page-number {
    margin: 16px 0;
}

/** 個人カルテ画面 **/
.client-name-box {
    position: relative;
}

a.btn.btn-flat {
    position: absolute;
    top: 50%;
    right: 8px;
    translate: 0 -50%;
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
    margin: auto;
    border-radius: 100vh;
    color: #fefefe;
    background: linear-gradient(0deg, #6694ea 40%, #aad2f7 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
}

@media(hover: hover) {
    a.btn.btn-flat:hover {
        opacity: .7;
    }
}

.menuSub__wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.menuSub__wrapper.open {
    height: auto;
    overflow: visible;
}

.karte-sticky-btn {
    position: sticky;
    width: fit-content;
    top: calc(var(--hvh) + var(--hbvh) + 10px);
    margin: 10px 0 10px auto;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.karte-sticky-btn button {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #000066;
    border-radius: 9999px;
    color: #000066;
}

table.menuSub,
table tbody.menuSub__item tr,
table tbody.menuSub__item tr th,
table tbody.menuSub__item tr td {
    border: none;
}

table tbody.menuSub__item tr {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    padding: 12px 0px;
}

table tbody.menuSub__item tr td:first-child {
    display: table-cell;
    width: 10em;
    vertical-align: top;
}

table tbody.menuSub__item tr td:last-child {
    display: table-cell;
    width: calc(100% - 10em);
}

table tbody.menuSub__item tr img {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.karte-det-table th {
	vertical-align: middle;
}

img.color-img {
    margin-top: 14px;
}

/** 過去カルテ表示css **/
ul.old_karte_list li {
	position: relative;
}

img.arrow-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    translate: 0 -50%;
    height: 150%;
}

img.popup {
    display: none;
}

#modal-container {
  display: none;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
}
#modal-container > div {
	position: relative;
	width: fit-content;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

#modal-container > div > img {
    max-width: 90vw;
    max-height: 80vh;
}

#modal-container > div > img.popup-img {
	object-fit: contain;
}

#modal-container > div > img.cross-mark {
    position: absolute;
    top: 0;
    right: 0;
    translate: 125% -125%;
    width: 30px;
}

p.popup-title,
img.cross-mark{
  cursor: pointer;
}

ul.old_karte_list li:last-child p.popup-title {
	margin: 0;
}

/********/

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

/**************
カルテページ
**************/
    /** 顧客一覧画面 **/
    .nav-open.active::before {
        width: 12px;
        height: 12px;
    }

    p.p-filter__title__shop,
    p.p-filter__title {
        font-size: 16px;
        margin: 12px 0 10px 0;
    }

    .p-filter__line {
        display: inline-flex;
        flex-direction: column;
        gap: 8px;
    }

    .p-filter__block.p-filter__keyword .p-filter__line {
        width: 100%;
    }

    .p-filter {
        padding: 10px;
    }

    .nav-open::before {
        width: 12px;
        height: 12px;
    }

    table.karte-table {
        border: none;
    }

    .karte-table tr:nth-child(even) {
        background-color: #f0f8ff;
    }

    table.karte-table tbody tr th,
    table.karte-table tbody tr td {
        border-right: unset;
        border-bottom: 1px solid #ccc;
    }

    table.karte-table tbody tr th.border-right,
    table.karte-table tbody tr td.border-right {
        border-right: 1px solid #ccc;
    }

    .karte-table th:last-child {
        border-right: unset;
    }

    .karte-table th {
        display: table-cell;
        width: 50%;
    }

    .karte-table th:first-child,
    .karte-table th:last-child {
        border-radius: 0;
    }

    .karte-table tr:first-child th:first-child {
        border-radius: 5px 0 0 0;
    }

    .karte-table tr:first-child th:last-child {
        border-radius: 0 5px 0 0;
    }

    .karte-table .rowlink a {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    td.rowlink ul {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    td.rowlink ul li {
        width: 50%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px dashed #efefef;
    }

    td.rowlink ul li:nth-child(odd) {
        border-right: 1px dashed #efefef;
    }

    /** 個人カルテ画面 **/
    table tbody.menuSub__item tr td:first-child,
    table tbody.menuSub__item tr td:last-child {
        display: block;
        width: 100%;
    }

    table tbody.menuSub__item tr td:first-child {
        font-size: 14px;
        margin-bottom: 4px;
    }

    a.btn.btn-flat {
        position: relative;
        display: block;
        width: fit-content;
        top: unset;
        right: unset;
        translate: unset;
        margin: 14px 0 0 auto;
    }

    .karte-sticky-btn {
        top: 10px;
    }

/** 過去カルテ表示css **/
#modal-container > div > img {
    max-width: 80vw;
    max-height: 90vh;
}

	#modal-container > div > img.cross-mark {
    width: 20px;
}

}

/**** 2025.01.20追加 ****/
.menu__item.hidden {
	display: none;
}

/** カルテページ　店舗販売リスト **/
.sales-item-list ul {
	background: #f1f8ff;
	border: dashed 2px #668ad8;
	border-radius: 9px;
	padding: 0.5em 1em;
	margin: 0;
}

.sales-item-list li {
	display: flex;
	padding: 0.5em 0;
}

.sales-item-list p {
	margin: 0;
}

.sales-item-list p.sales-item-details {
	margin-left: 1em;
}

@media screen and (max-width: 768px) {
	table.karte-det-table tr th, table.karte-det-table tr td {
		width: 100%;
		display: block;
		padding: 10px 10px !important;
		text-align: start;
	}
	
	.karte-det-table td:not(:first-child) {
		
	}

	.sales-item-list li {
		display: flex;
		flex-direction: column;
	}

	.sales-item-list p.sales-item-details {
		margin-left: 0;
		margin-top: 4px;
		text-align: justify;
	}
}