@charset "UTF-8";



/* therapist */
.therapist {margin-top:32px;}

.therapist:nth-of-type(1) {margin-top:0;}

.therapist_ttl {
	margin-bottom:24px;
	text-align:center;
}

.therapist_ttl img {max-width:752px;}


@media screen and (min-width:1024px) {
	.therapist {margin-top:56px;}

	.therapist_ttl {margin-bottom:48px;}
}



/* therapist_list */
.therapist_list {
	display:flex;
	flex-wrap:wrap;
}

.detail {
	width:calc(33.3% - 6px);
	margin:8px 9px 0 0;
	padding:4px 4px 8px;
	text-align:center;
	background:#FFF;
	box-shadow:2px 2px 3px 0 rgba(0,0,0,0.2);
	box-sizing:border-box;
	position:relative;
}

.detail:nth-of-type(-n+3) {margin-top:0;}
.detail:nth-of-type(3n) {margin-right:0;}

h3 a {
	top:0;
	left:0;
	position:relative;
	z-index:1;
}

h3 a .tag {
	width:32px;
	top:0;
	left:0;
	position:absolute;
	z-index:90;
}

.icon {position:absolute; bottom: 2px;display: block; width: 100%; padding-left: 0.5%;}
.icon img {width:33%;display:block;float:left;}

.name {margin-top:8px;}

.name a {display:inline-block;}

.schedule {
	margin-top:8px;
	padding:4px 0;
	color:#FFF;
	font-size:84%;
	background:#86A18A;
}


@media screen and (min-width:1024px) {
	.detail {
		width:calc(33.3% - 16px);
		margin:24px 24px 0 0;
		padding:8px 8px 16px;
		box-shadow:3px 3px 4px 0 rgba(0,0,0,0.2);
	}

	h3 a .tag {width:71px;}

	.name {margin-top:16px;}

	.schedule {
		margin-top:16px;
		padding:8px 0;
		font-size:100%;
	}
}


/* schedule alert*/
.schedule_alert_box {
	margin-bottom: 20px;
	text-align: right;
}

.schedule_input {
	background: linear-gradient(to top, #649b98, #70adaa);
	padding-right: 48px;
	width: calc(80% - 48px);
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	border-radius: 22px 22px 22px 22px;
	position: relative;
	cursor: pointer;
	color: #f0f0f0;
	transition: 1.8s;
}

.schedule_input_toggle {
	border-radius: 22px 22px 0 0;
	transition: 5ms;
}

.schedule_input_toggle2 {
	transform: rotate(90deg);
}

.schedule_input span:nth-child(2) {
	background: #f0f0f0;
	position: absolute;
	width: 2px;
	height: 38px;
	top: 2px;
	right: 48px;
}

.schedule_input span:nth-child(3),
.schedule_input span:nth-child(4) {
	background: #f0f0f0;
	position: absolute;
	top: 12px;
	right: 24px;
	width: 2px;
	height: 18px;
	transition: 300ms;
}

.schedule_input span:nth-child(3) {
	transform: rotate(90deg);
}

.schedule_alert {
	padding: 15px;
	border: 2px #649b98 solid;
	justify-content: space-between;
	box-sizing: content-box;
	letter-spacing: 0.1em;
}

.schedule_alert > .txt {
	margin: 0 0 5px 0;
	font-size: 14px;
	text-align: left;
}

.schedule_alert > .txt span {color: red; text-decoration: underline;}

.schedule_alert > .form > input {height: 40px; margin-bottom: 5px;}

.form_button {padding-top: 8px; display: flex;}

.form_button p{width: 49%;}

.form_button p:nth-child(1){margin-right: 2%;}

.form_button input{
	color: #1a1a1a;
	height: 40px;
	border-radius: 10px;
}

.form_button input:hover{color: #9a9a9a;}

.alert_chk {
	background: rgba(255,255,255,0.5);
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 98;
	display: none;
}

.alert_chk p {
	position:absolute;
	top: 8px;
	right: 56px;
	z-index:99;
}

.alert_chk p input {
	-webkit-appearance: auto;
	display: none;
}

.ch{
    cursor: pointer;
    user-select: none;
    position: relative;
}

.ch::before {
	background: rgba(255,255,255,0.7);
	border: 1px solid #231815;
	border-radius: 3px;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
}

.ch::after {
    border-right: 12px solid #ea5532;
    border-bottom: 6px solid #ea5532;
    content: '';
    display: block;
    width: 20px;
    height: 56px;
    top: -18px;
    left: 10px;
    margin-top: 1px;
    opacity: 0;
    position: absolute;
    transform: rotate(45deg);
}

.alert_chk p input:checked + .ch::after {
    opacity: 1;
}

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

	.schedule_input {
		width: calc(40% - 48px);
	}

	.schedule_alert {
		display: flex;
	}

	.schedule_alert > .txt {
		width: calc(100% - 350px);
		margin: 0 10px 0 0;
	}

	.schedule_alert > .form {
		width: 350px;
	}

	.ch::before {
	    background: #fff;
	}
}

.toggle_box{ display: none }