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

body.modal-open {
    overflow: hidden!important;
}

.modal {
  padding: 80px 20px 0;
}

.inner {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 20px;
}

.modal_thumb {
  cursor: pointer;
	position: relative;
	height: 200px;
	overflow: hidden;
	z-index: 1;
}
.modal_thumb::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.5) 100%);
}

.open-btn {
	position: absolute;
	bottom: 80px;
	left: 10%;
	background-color: #4b4b4b;
	color: #fff;
	padding: 0.5em;
	font-size: 14px;
	width: 80%;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 3;
}

/* モーダル内のコンテンツ */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: rgba(79, 79, 79, 0.5);
	z-index: 99999;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* モーダル表示状態 */
.modal.active {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

/* モーダルの中身*/
.modal-content {
	position: relative;
	top:20px;
	background: #fff;
	padding:10px;
	margin: auto;
	max-width: 800px;
	height:calc(100vh - 120px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	opacity: 0;
	overflow-y: scroll;
	border: none;
	border-radius: 0;
}

/* アニメーション*/
.modal.active .modal-content {
	animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* モーダルを閉じるボタン */
.close-btn {
  position: fixed;
  top: 124px;
  right:calc(50% - 360px);
  width: 44px;
  height: 44px;
  background: #4b4b4b;
  cursor: pointer;
  transition: opacity .6s;
	z-index: 99;
        border: none;
}
.close-btn:before,
.close-btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}
.close-btn:before {transform: translate(-50%, -50%) rotate(45deg);}
.close-btn:after {transform: translate(-50%, -50%) rotate(-45deg);}

.modaloverflow{
	display: block;
	position: relative;
	overflow-x: scroll;
	overflow-y: visible;
	min-height: 520px;
	width: 100%;
}
.modaloverflow img{
	max-width: 3200px;
	height: 500px;
}


@media only screen and (max-width:800px) {
.close-btn {
  right: 40px;
}
}

@media only screen and (max-width:576px) {
.modal_thumb {
	height: 120px;
}
.modal_thumb::before {
	background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0.5) 100%);
}
.modal {
  padding: 20px 10px 0;
}
.modal-content {
	top:60px;
	height:calc(100vh - 160px);
}
.modaloverflow{
	min-height: 310px;
}
.modaloverflow img{
	height: 300px;
}
.open-btn {
	bottom: 40px;
}
.close-btn {
	top: 105px;
  right: 30px;
  width: 36px;
  height: 36px;
  background: #4b4b4b;
  cursor: pointer;
  transition: opacity .6s;
	z-index: 99;
        border: none;
}
}


/* 症例用テーブル */

table.com4{
	margin:0 auto;
	padding: 4px;
	width:100%;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
.com4 th{
	font-size: 12px;
	letter-spacing: 1px;
    padding:5px;
    text-align:center;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
	color: #333;
	font-weight: 500;
}
.com4 tr:last-child th {
  border-bottom: 1px solid #ccc; }
.com4 td{
	font-size: 12px;
	color: #333; 
  padding: 5px;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
	font-weight: 500;
}
.com4 li{
	font-size: 12px;
	color: #333; 
	font-weight: 500;
}
.com4 ul{
	padding:0 0 0 20px;
}