@charset "UTF-8";
@import "reset.css";
/* CSS Document */

:root {
	--main-color: #EF8E50;
	--sub-color: #90D0FF;
	--blue: #5B9CF5;
	--bg-color1: #FFEDE2;
	--bg-color2:#FFF7F2;
	--bg-gray:#f7f1ee;

	--white: #FFFFFF;
	--black: #000000;
	
	--color-kennan: #FFB1CC;
	--color-kenou: #F7D933;
	--color-kenhoku: #A2CFFF;
	
	--marker-yellow: #FFD800;

	--main-font: "Zen Kaku Gothic New", sans-serif;
}

/*************************************

   common

**************************************/
html {
  scroll-behavior: smooth;
}
body{
	font-family: var(--main-font);
	font-weight: 500;
	font-style: normal;
	margin: 0;
	padding: 0;
	position: relative;
	background: #FFFCF8;
	color: #2E2E2E
}
p,span,li,dt,dd{
	line-height: 2em;
	font-size: 1em
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	word-break: break-all;
	transition: all 0.3s ease-out;
}
picture,
img{max-width: 100%}
.obc{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom
}
.wrap{
	width: 95%;
	max-width: 1240px;
	margin: 0 auto
}
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
@media screen and (max-width:667px){
	.sp-none{display: none!important}
}
@media screen and (min-width:668px){
	.sp-size{display: none!important}
}
@media (min-width:1000px){
	p,span,li,dt,dd{font-size: 16px}
}

@media (max-width:999px){
	.pcbr{display: none}
}
@media (min-width:1600px){
	.wrap{
		max-width: 1400px;
	}
}

/*-------------------------

  フォント

-------------------------*/

.c_orange{
	color: var(--main-color);
}
.c_blue{
	color: var(--sub-color);
}
.c_blue2{
	color: var(--blue);
}


.bg_orange{
	background: var(--main-color);
	color: #fff
}
.bg_blue{
	background: var(--blue);
	color: #fff;
}

.bg_sub{
	background: var(--sub-color);
	color: #fff
}

/*-------------------------

 背景

-------------------------*/

.bg_color1{
	background: var(--bg-color1);
}
.bg_color2{
	background: var(--bg-color2);
}
.bg_gray{
	background: var(--bg-gray);
}

/*************************************

   header

**************************************/


header{
	position: relative;
	height: 650px;
}
@media (min-width:768px){
	header{
		height: 80vh;
	}
}
/*背景*/
header:before,
header:after{
	content: '';
	display: block;
	position: absolute;
	width: clamp(200px, 30%, 500px);
	height: clamp(200px, 40%, 500px);
	z-index: -1
}
header:before{
	background: url("../img/header_parts1.png") no-repeat left top / contain;
	top:0;
	left: 0;
}
header:after{
	background: url("../img/header_parts2.png") no-repeat right bottom / contain;
	bottom:0;
	right: 0;
}

.header_title{
	position: relative;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center
	
}
/*イラスト*/
.header_title:before,
.header_title:after{
	content: '';
	position: absolute;
	display: block;
	width: clamp(200px, 30%, 500px);
	
}
.header_title:before{
	background: url("../img/header_img1.png") no-repeat center top/ contain;
	height: clamp(200px, 40%, 300px);
}
.header_title:after{
	background: url("../img/header_img2.png") no-repeat center bottom/ contain;
	height: clamp(200px, 45%, 300px);
}

@media (max-width:999px){
	.header_title:before{
		right: 5%;
		top:10px;
	}
	.header_title:after{
		left: 5%;
		bottom: 0;
	}
}
@media (min-width:768px) and (max-width:999px){
	.header_title:before,
	.header_title:after{
		width: clamp(200px, 40%, 500px);

	}
	.header_title:before{
		height: clamp(200px, 40%, 500px);
	}
	.header_title:after{
		height: clamp(200px, 45%, 500px);
	}
}
@media (min-width:1000px){
	.header_title:before{
		left: 5%;
		bottom: 5%;
	}
	.header_title:after{
		right: 5%;
		bottom: 0;
	}
}
@media (min-width:1800px){
	.header_title:before{
		height: clamp(200px, 45%, 600px);
	}
	.header_title:after{
		height: clamp(200px, 45%, 600px);
	}
}
	

.header_title h1{
	font-weight: bold;
	font-size: clamp(2.625rem, 1.8rem + 4.13vw, 6.75rem);
	line-height: 1;
	margin: 0 auto 1em;
}

.header_title h1 span{
	font-size: 1em;
}
.header_title > span{
	font-weight: normal;
	font-size: 1em;
}


/*************************************

   リンク

**************************************/

.link_wrap{
	justify-content: center;
	gap:10px;
	margin: 1.5em auto;
}
.link_wrap a{
	display: block;
	text-align: center;
	font-weight: bold;
	padding: 1.1em;
	width: 100%;
	border-radius: 5px;
}

@media (min-width:500px){
	.link_wrap a{
		width: calc(47% - 10px);
		max-width: 500px;
		padding: 1.5em 1em;
		font-size: 1.2rem
	}
}



/*************************************

   patient

**************************************/

.patient_title{
	margin: 5em auto;
	text-align: center;
}
.patient_title h2{
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 1em
}
.patient_title p{
	font-weight: bold;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	width: 100%;
	max-width: 600px;
	padding: 1em;
	border-radius: 2em;
	margin: 0 auto;
}

#okomari_l{
	gap:10px;
}
#okomari_l li{
	width: 100%;
	border-radius: 8px;box-shadow: 0 3px 6px #eee;
	padding: 1em
}

#okomari_l li div{
	width: 120px;
	height: 120px;
}
#okomari_l li div > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom;
}
#okomari_l li p{
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.6;
}

@media (max-width:767px){
	#okomari_l li{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap:5px
	}
	#okomari_l li p{
		width: calc(100% - 125px)
	}
	
}
@media (min-width:480px) and (max-width:767px){
	#okomari_l li div{
		width: 150px;
		height: 150px;
	}
	#okomari_l li p{
		width: calc(100% - 155px)
	}
}

@media (min-width:768px){
	#okomari_l li{
		width: calc((100% / 3) - 10px);
		text-align: center;
		
	}
	#okomari_l li div{
		width: 200px;
		height: 200px;
		margin:0 auto 1em;
	}
}
@media (min-width:1100px){
	#okomari_l li{
		padding: 2em
	}
	#okomari_l li div{
		width: 250px;
		height: 250px;
	}
}

#okomari_s{
	gap:5px;
	margin: 1em auto 2em;
}
#okomari_s li{
	background: var(--main-color);
	color: #fff;
	text-align: center;
	padding: 1em;
	border-radius: 5px;
	width: calc(50% - 5px);
	font-weight: bold;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	justify-content: center
}

@media (min-width:1000px){
	#okomari_s li{
		width: calc(25% - 15px);
		padding: 1.3em
	}
}

.arrow_wrap{
	text-align: center;
	margin: 2em auto;
}

#possibility{
	padding: 3em 0;
	margin: 3em auto;
}

.possibility_info > span{
	font-weight: bold;
	font-size: clamp(1.063rem, 0.95rem + 0.56vw, 1.625rem);
	display: block
}
.possibility_info > p{
	font-size: clamp(1.5rem, 1.337rem + 0.81vw, 2.313rem);
	font-weight: bold;
}
.possibility_info > p > span{
	font-weight: bold;
	font-size: clamp(2.375rem, 2.125rem + 1.25vw, 3.625rem);
	margin: 0 5px;
}
.possibility_info > p > span.bg_orange{
	padding: 0 .3em
}

@media (max-width:480px){
	.possibility_info > span {
		margin-bottom: 1em
	}
	.possibility_info > p > span{
		display: block;
		line-height: 1.2
	}
	.possibility_info > p > span.bg_orange{
		display: inline-block;
		line-height: 1.5
	}
}
@media (max-width:480px){
	.possibility_info > p br{
		display: none
	}
}
@media (min-width:820px){
	.possibility_info > p br{
		display: none
	}
}

.possibility_answer{
	padding: 1em;
	border-radius: 8px;
	margin: 1em auto;
}
.possibility_answer > span{
	font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1.2rem);
	display: block;
	line-height: 1.6
}
.possibility_answer > p{
	font-size:clamp(1.8rem, 1.42rem + 1.9vw, 3.7rem);
	font-weight: bold;
	line-height: 1.5
}
.possibility_answer > p > span{
	font-size: 1em;
	font-weight: bold;
	background:linear-gradient(transparent 80%,var(--marker-yellow) 80%);
}

.teikou{
	width: 100%;
	max-width: 650px;
	padding: 1em;
	border: solid 1px #D8D8D8;
	border-radius: 8px;
	align-items: center;
	margin: 2em auto;
	background: #fff;
}

.teikou dt{
	font-weight: bold;
	width: 100%;
	font-size: 1.1em;
	text-align: left
}
.teikou dd{
	width: 100%;
	text-align: left;
	font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem)
}

@media (min-width:768px){
	.teikou dt{
		width: 30%
	}
	.teikou dd{width: 70%}
}

#case{
	margin-top: 5em;
	padding: 5em 0;
	border-top-left-radius: 50px;
	position: relative
}
#case:before{
	content: '';
	background: url("../../kurozapin/img/medicine.png") no-repeat center / contain;
	width: clamp(4rem, 1.8rem + 11vw, 15rem);
	height: clamp(4rem, 1.8rem + 11vw, 15rem);
	position: absolute;
	right: 5%;
	top: 6%
}
@media (min-width:768px){
	#case:before{
		top: -3%
	}
}
@media (min-width:12008px){
	#case:before{
		right: 10%;
		top: -5%
	}
}

#case h3{
	font-size: clamp(1.8rem, 1.46rem + 1.7vw, 3.5rem);
	font-weight: bold;
	margin-bottom: .5em;
}
#case h3:before{
	content: '●';
	color: var(--main-color);
	font-size: 1em;
	margin-right: 10px;
}

.case_wrap{
	margin: 6em auto;
}
@media (max-width:1400px){
	.case_wrap{
		max-width: 1000px;
	}
}
@media (min-width:768px){
	.case_wrap{
		margin: 3em auto
	}
}
.case_list{
	background: #fff;
	box-shadow: 0 3px 6px #eee;
	border-radius: 10px;
	margin-bottom: 3em
}
.case_title{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: .8em;
	align-items: center;
}
.case_title dl{
	align-items: center;
}
.case_title dt{
	background: #fff;
	color: var(--main-color);
	font-weight: bold;
	border-radius: 2em;
	padding: 0 1em;
}
.case_title dd{
	font-weight: bold;
	font-size: clamp(1.1rem, 0.975rem + 0.75vw, 1.8rem);
	letter-spacing: .5px;
}
.case_inner{
	align-items: center;
	padding: 1em;
	gap:5px
}
.case_img img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom;
}
.case_inner_contents{
	width: 100%;
}
.case_inner_contents dt{
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: .5em;
}

@media (max-width:767px){
	.case_img{
		width: 250px;
		height: 250px;
		margin: 0 auto;
	}
	.case_title dl,
	.case_title dt,
	.case_title dd,
	.case_title > p{
		width: 100%;
		text-align: center
	}
	.case_inner > span{
		width: 100%;
		text-align: center;
	}
	.case_inner span img{
		max-height: 50px;
		margin: 1em auto;
	}
}

@media (min-width:768px){
	.case_title dt{
		margin-right: .5em;
	}
	.case_img{
		width: 100%;
		height: 250px;
	}
	.case_inner_contents{
		width: calc(50% - 50px);
	}
	.case_inner > span{
		width: 50px;
		height: 50px;
	}
	.case_inner > span img{
		transform: rotate(-90deg);
		width: 100%;
		height: 100%;
		object-fit: contain;
		vertical-align: bottom;
	}
}
@media (min-width:1000px){
	.case_img{
		width: 250px;
	}
	.case_inner_contents{
		width: calc((100% - 350px) / 2);
	}
}



#hope{
	padding: 4em 0
}
.hope_title{
	text-align: center;
	margin: 2em auto;
}
.hope_title span{
	font-weight: bold;
	line-height: 1.6;
	display: block;
}
.hope_title span:first-child{
	font-size:clamp(1.25rem, 1rem + 1.25vw, 2.5rem)
}
.hope_title_wrap{
	font-size: clamp(1.875rem, 1.5rem + 1.88vw, 3.75rem);
	background: var(--bg-color1);
	padding: 0 2em;
	position: relative;
	margin: .3em auto;
	display: inline-block!important
}

.hope_title_wrap:before,
.hope_title_wrap:after{
	content: '';
	width: 20px;
	height: calc(100% - 6px);
	border: solid 3px var(--main-color);
	display: block;
	position: absolute;
	top: 0;
}

.hope_title_wrap:before{
	border-right: none;
	left: 0;
}
.hope_title_wrap:after{
	border-left: none;
	right: 0;
}

#hope_wrap{
	margin: 5em auto;
	gap:10px;
}
#hope_wrap li{
	width: calc(50% - 10px);
	margin-bottom: 2em;
	text-align: center;
}

#hope_wrap li img{
	max-width: 280px;
	margin: 0 auto;
}

@media (min-width:768px){
	#hope{
		padding: 8em 0;
	}
	.hope_title_wrap{
		padding: 0 1em;
	}
	#hope_wrap li{
		width: calc((100% / 3) - 10px);
		margin-bottom: 5em
	}
	#hope_wrap li:nth-child(2),
	#hope_wrap li:nth-child(5){
		margin-top: -50px;
	}
}

.hope_contents{
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 3px 6px #eee;
	padding: 1em;
	text-align: center;
}

.hope_contents h3{
	font-weight: bold;
	font-size: clamp(1.563rem, 1.25rem + 1.56vw, 3.125rem);
	line-height: 1.8;
	margin-bottom: 1em;
}

.hope_contents > p{
	line-height: 1.8;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
	padding-bottom: 60px;
	position: relative;
	margin-bottom: 1em;
}
.hope_contents > p:before{
	content: '';
	width: clamp(8.125rem, 7.125rem + 5vw, 13.125rem);
	height: clamp(13.75rem, 12.5rem + 6.25vw, 20rem);
	background: url("../../kurozapin/img/doctor.png") no-repeat center / contain;
	display: block;
	margin: 0 auto 1.4em;
}

@media (min-width:768px){
	.hope_contents{
		padding: 1.5em;
	}
	.hope_contents > p{
		margin-bottom: 2em;
	}
	
}
@media (min-width:1000px){
	.hope_contents > p:before{
		position: absolute;
		right: 5%;
		bottom: 0;
	}
}
.medicine_att{
	background: var(--bg-color2);
	padding: 2em 1em;
	border-radius: 5px;
	max-width: 850px;
	margin: 0 auto;
	text-align: left;
}
.medicine_att h4{
	margin-bottom: 1.5em;
	font-size: 1.2em;
	line-height: 1.8
}
.att_list_wrap{
	padding-left: 1.2em;
	margin: 1em auto;
}
.att_list_wrap li{
	list-style: decimal;
	font-size: .9rem;
}
.kakaritsuke{
	background: #fff;
	padding: 1.5em;
	border-radius: 10px;
}
.kakaritsuke h5{
	font-size: 1.2em;
	margin: 0 auto .5em;
	line-height: 1.8;
}
.kakaritsuke p{
	font-size: .9rem;
}
@media (min-width:768px){
	.medicine_att h4{
		text-align: center;
	}
	.att_list_wrap li,
	.kakaritsuke p{
		font-size: .95rem
	}
}

#medical{
	border-top: solid 8px var(--sub-color);
	padding-top: 5em;
	margin-top: 5em;
}

.medical_title{
	margin-bottom: 1.5em;
	font-weight: bold;
	font-size:clamp(1.5rem, 1.28rem + 1.1vw, 2.6rem);
	text-align: center;
}

.medical_title + p{
	text-align: left;
	line-height: 2;
	margin-bottom: 80px;
}

@media (min-width:768px){
	.medical_title + p{
		text-align: center;
	}
}

.about{
	border-radius: 20px;
	border: solid 3px var(--sub-color);
	padding: 1.5em;
	background: #fff;
	margin: 3em auto;
	position: relative;
}

.about h3{
	background: var(--sub-color);
    color: #fff;
    border-radius: 5em;
    font-weight: bold;
    font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.5rem);
    text-align: center;
    padding: 1em 2em;
    display: inline-block;
    letter-spacing: .5px;
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
	min-width: 300px;
	max-width: 600px;
	line-height: 1.6
}

@media (min-width:1400px){
	.about h3{
		max-width: 800px;
		top: -3em
	}
}

.about > p{
	line-height: 2;
	margin: 3em auto;
}
@media (min-width:768px){
	.about{
		padding: 2em;
	}
	.about > p{
		text-align: center;
		line-height: 2.5;
	}
}

.use h4{
	border-top: solid 1px #ccc;
	padding-top: 50px;
	font-weight: bold;
	font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem);
	margin-bottom: 1em;
	text-align: center;
	line-height: 1.8
}
.use h4 span{
	font-size: 1.2em;
	display: block;
	line-height: 1.8;
	margin-bottom: .5em;
}
@media (min-width:768px){
	.use h4 span{
		font-size: 1.6em;
	}
}
.contact_wrap{
	text-align: center;
	margin-top: 3em;
}

.contact_wrap > p.bg_blue{
	display: inline-block;
	padding: .3em 1em;
	font-weight: bold;
	text-align: center;
	margin: .5em auto;
	border-radius: 2em
}
.tel_wrap{
	align-items: center;
	font-weight: bold;
	justify-content: center;
	display: block;
	color: #2E2E2E
}
.tel_wrap > *{
	font-size: 2em;
	font-weight: bold;
	line-height: 1;
}
.tel_wrap i{
	font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
	margin: .3em .3em 0 0;
}
.tel_wrap span{
	font-size:clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
}
.uketsuke{
	font-size: 1em;
	font-weight: bold;
}
.mail{
	font-size:clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
	font-weight: bold;
	display: block;
	margin: .5em auto;
}
.mail i{
	font-size: 80%;
	margin: .3em .3em 0 0;
}
.jimukyoku{
	font-size: .9rem;
}


.map h3{
	font-size: clamp(1.5rem, 1.24rem + 1.3vw, 2.8rem);
	line-height: 2em;
	margin: 3em auto;
}
@media (max-width:667px){
	.map h3{
		text-align: center;
	}
}

.map figure{
	margin: 0 auto 5em;
	text-align: center;
	width: 90%;
	max-width: 600px;
}
@media (min-width:1400px){
	.map figure{
		max-width: 800px;
	}
}
.map figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom;
}

.medical_map_wrap{
	gap:20px;
	margin-bottom: 5em;
}

.medical_map_wrap > div{
	width: 100%;
	margin-bottom: 1em;
}

.medical_map_wrap > div:first-child h4:last-of-type,
	.medical2 > div:last-child{
		margin-top: 2em;
	}

@media (min-width:768px){
	.medical_map_wrap > div{
		width: calc(50% - 20px)
	}
	.medical_map_wrap > div:first-child h4:last-of-type,
	.medical2 > div:last-child{
		margin-top: 100px;
	}
	
}
@media (min-width:1200px){
	.medical1{
		width: 33%!important
	}
	.medical2{
		width: calc(66% - 10px)!important;
		gap:20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between
	}
	.medical2 > div{
		width: calc(50% - 20px)
	}
	.medical2 > div:last-child{
		margin-top: 0!important
	}
}


.medical_map_title{
	font-weight: bold;
	font-size: clamp(1.5rem, 1.32rem + 0.9vw, 2.4rem);
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	border-bottom: solid 1px #ccc;
	padding-bottom: .5em;
}
.medical_map_title:before{
	content: '■';
	color: var(--blue);
	margin-right: .3em;
	display: inline-block;
}

.medical_list{
	margin-bottom: 1em;
	line-height: 1.6;
}
.medical_list h5{
	font-weight: bold;
	font-size: clamp(1.4rem, 1.34rem + 0.3vw, 1.7rem);
	display: inline-block;
	margin: 0 .5em 0 0;
}
.medical_list h5 span.num{
	font-size: 1.1em;
	margin-right: 10px;
}
.medical_list span.area{
	color: #fff;
	font-weight: bold;
	display: inline-block;
	padding: 3px .5em;
	text-align: center;
	border-radius: 2em;
	line-height: 1;
}
.kennan{
	background: var(--color-kennan);
}
.kenou{
	background: var(--color-kenou);
}
.kenhoku{
	background: var(--color-kenhoku);
}
.medical_list p{
	text-indent: calc(1em + 20px);
	line-height: 1.5
}
.medical_list p a{
	color: inherit
}


#footer h3{
	padding: .8em 0;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: .4em;
}
.contact_info{
	padding: .5em 1em;
	color: var(--main-color);
	background: var(--bg-color1);
	text-align: center;
	display: inline-block;
	border-radius: 10px;
	font-weight: bold;
	margin: 1em auto 0;
	font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
}
#footer .contact_wrap{
	margin-top: 1em;
}

.copy{
	margin: 3em auto.5em;
	border-top: solid 1px #ccc;
	padding-top: 1em;
	text-align: center;
	font-size: 13px;
	display: block;
	width: 90%;
	
}