@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
/* Google font Icon */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");


/*========================
医院情報
========================*/
.cliniclogo{
	margin-bottom: 24px;
}
.cliniclogo img{
	width: 100%;
	max-width: 360px;
}
@media screen and (max-width: 480px) {
.cliniclogo img{
	max-width: 240px;
	}
}

/*-------------------------
院内風景
--------------------------*/
.clinicphoto {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
	flex-wrap: wrap;
}
.clinicphoto li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding: 0 12px 32px;
}
.clinicphoto li img{
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border: 1px solid #CCC;
}
.clinicphoto li h4{
	max-width: 96%;
	font-size: 0.9em;
	line-height: 1.65;
	font-weight: 400;
	margin: 0.4em auto 0;
	position: relative;
	padding: 0 0 0 1.4em;
}
.clinicphoto li h4:after {
	position: absolute;
  top: 0.15em;
  left: 0;
  font-size: 1.25em;
	line-height: 1;
	color: #555;
  font-family:"Material Symbols Rounded";
	content: "\e86b"; /*上向き三角*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
@media screen and (max-width: 767px) {
.clinicphoto {
  display: block;
	flex-direction: column;
	}
.clinicphoto li{
  width: 100%;
  max-width:100%;
  padding: 0 0 24px;
	}
.clinicphoto li img{
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
	}
}

/*========================
初めての方へ
========================*/
/*-------------------------
初診の流れ
--------------------------*/
.stepguide {
  width:100%;
  margin: 0 auto 32px;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
	flex-wrap: wrap;
}
.stepguide li{
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding: 0;
}
.stepguide li div:first-child{
	text-align: center;
	padding: 24px 12px 0;
	position: relative;
	z-index: 0;
}
.stepguide li div:first-child:before{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 100%;
  height: 3px;
  content: "";
  background-color: #2D5986;
	z-index: -1;
}
.stepguide li:first-child div:first-child:before{
  width: 50%;
}
.stepguide li:last-child div:first-child:before{
  left: 0;
  width: 50%;
}
.stepguide li img{
	width: 100%;
	max-width: 260px;
}
.stepguide li h4{
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1.6;
	text-align: center;
	margin: 15px auto 8px;
	color: #2D5986;
}
.stepguide li p{
	font-size: 0.9em;
	line-height: 1.6;
	padding: 0 1em;
}
@media screen and (max-width: 960px) {
.stepguide li h4{
	font-size: 1.1em;
	}
.stepguide li p{
	font-size: 0.85em;
	}
}
@media screen and (max-width: 767px) {
.stepguide {
  display: block;
	flex-direction: column;
  margin: 0 auto;
	}
.stepguide li{
  width: 100%;
  max-width:100%;
  padding: 0 0 32px;
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:center;
	}
.stepguide li div:first-child{
	width: 200px;
	text-align: left;
	padding: 0;
	}
.stepguide li div:last-child{
	flex: 1;
	padding: 0 0 0 24px;
	}
.stepguide li h4{
	font-size: 1.2em;
	text-align: left;
	}
.stepguide li p{
	font-size: 0.9em;
	padding: 0;
	}
.stepguide li div:first-child:before{
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 3px;
  height: 150%;
  content: "";
  background-color: #2D5986;
	z-index: -1;
	}
.stepguide li:first-child div:first-child:before{
  width: 3px;
	}
.stepguide li:last-child div:first-child:before{
  left: auto;
  width: 3px;
  height: 0;
	}
}
@media screen and (max-width: 640px) {
.stepguide li div:first-child{
	width: 164px;
	}
.stepguide li div:first-child:before{
  width: 2px;
	}
.stepguide li:first-child div:first-child:before{
  width: 2px;
	}
}
@media screen and (max-width: 480px) {
.stepguide li{
  padding: 0 0 24px;
  align-items:flex-start;
	}
.stepguide li h4{
	font-size: 1.1em;
	margin: 12px auto 3px;
	}
.stepguide li p{
	font-size: 0.85em;
	}
.stepguide li div:first-child{
	width: 100px;
	}
.stepguide li div:last-child{
	padding: 0 0 0 18px;
	}
.stepguide li div:first-child:before{
  width: 1px;
	}
.stepguide li:first-child div:first-child:before{
  width: 1px;
	}
}

/*-------------------------
ご持参いただくもの
--------------------------*/
.bringguide {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
	flex-wrap: wrap;
}
.bringguide li{
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
}
@media screen and (max-width: 960px) {
.bringguide {
  max-width: 480px;
	}
.bringguide li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
	padding: 12px 0 0;
	}
}


/*========================
歯科医師紹介
========================*/
.doctorprofile {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
}
.doctorprofile li:first-child{
	width: 360px;
}
.doctorprofile li:last-child{
	flex: 1;
	padding: 0 0 0 42px;
}
.doctorprofile li:first-child img{
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
}
.doctorprofile .timeline{
	margin: 18px auto 0;
	padding: 0.8em 0 0;
	border-top: 1px solid #A6A8AE;
}
.doctorprofile dl{
	display: flex;
	margin: 0.3em auto;
	line-height: 1.55;
	font-size: 0.9em;
}
.doctorprofile dl dt{
  font-family: "Roboto", sans-serif;
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
	width: 4.2em;
}
.doctorprofile dl dd{
	flex: 1;
}
.doctorprofile h4{
  font-family: 'Zen Old Mincho', serif;
	font-size: 2em;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.doctorprofile li:last-child h4 span{
	display: block;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
	font-weight: 300;
	color: #A5A6AC;
	letter-spacing: 0.06em;
	font-size: 0.65em;
	margin-top: 0.6em;
}
.doctorprofile ruby rt{
	letter-spacing: 0.05em;
	ruby-align: center;
	font-size: 100%;
	zoom: 0.4;
	margin-bottom: 0.2em;
}
.doctorprofile li:last-child h5{
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 12px;
}
@media screen and (max-width: 1000px) {
.doctorprofile li:first-child{
	width: 260px;
	}
.doctorprofile li:last-child h4{
	font-size: 1.8em;
	}
.doctorprofile li:last-child h5{
	font-size: 1.05em;
	}
}
@media screen and (max-width: 767px) {
.doctorprofile {
  display: block;
	flex-direction: column;
	max-width: 480px;
	}
.doctorprofile li:first-child{
	width: 100%;
	text-align: center;
	}
.doctorprofile li:first-child img{
	width: 100%;
	max-width: 320px;
}
.doctorprofile li:last-child{
	padding: 24px 0 0 0;
	}
.doctorprofile li:first-child img{
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
	}
}


/*========================
一般歯科
========================*/
/*-------------------------
根管治療の流れ
--------------------------*/
.rootstep {
  width:100%;
  margin: 24px auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.rootstep li{
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
  padding: 0 12px;
}
.rootstep li p{
  font-size: 0.95em;
  line-height: 1.6;
  margin-top: 12px;
  padding: 0 0 0 1.6em;
  position: relative;
}
.rootstep li:nth-child(1) p:before{
	position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 1.5em;
  line-height: 0;
  font-family:"Material Symbols Rounded";
	content: "\f784"; /*①*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
.rootstep li:nth-child(2) p:before{
	position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 1.5em;
  line-height: 0;
  font-family:"Material Symbols Rounded";
	content: "\f783"; /*②*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
.rootstep li:nth-child(3) p:before{
	position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 1.5em;
  line-height: 0;
  font-family:"Material Symbols Rounded";
	content: "\f782"; /*③*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
.rootstep li:nth-child(4) p:before{
	position: absolute;
  top: 0.5em;
  left: 0;
  font-size: 1.5em;
  line-height: 0;
  font-family:"Material Symbols Rounded";
	content: "\f781"; /*④*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
  
@media screen and (max-width: 960px) {
.rootstep {
  max-width: 480px;
  margin: 24px auto 0;
  }
.rootstep li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding: 0 12px 18px;
  }
}
@media screen and (max-width: 480px) {
.rootstep {
  margin: 18px auto 0;
  }
.rootstep li p{
  font-size: 0.9em;
  }
}


/*========================
インプラント
========================*/
/*-------------------------
治療の流れ
--------------------------*/
.implantstep {
  display: block;
	flex-direction: column;
  margin: 0 auto;
}
.implantstep li{
  width: 100%;
  max-width:100%;
  padding: 0 0 32px;
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:center;
}
.implantstep li:last-child{
  padding: 0 0 0;
}
.implantstep li div:first-child{
	width: 240px;
	padding: 0;
	position: relative;
	z-index: 0;
}
.implantstep li div:last-child{
	flex: 1;
	padding: 0 0 0 32px;
}
.implantstep li div:first-child:before{
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 2px;
  height: 150%;
  content: "";
  background-color: #2D5986;
	z-index: -1;
}
.implantstep li:first-child div:first-child:before{
  width: 2px;
}
.implantstep li:last-child div:first-child:before{
  left: auto;
  width: 2px;
  height: 0;
}
.implantstep li img{
	width: 100%;
	max-width: 240px;
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border: 2px solid #2C5985;
}
.implantstep li h4{
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.6;
	margin: 15px auto 8px;
	color: #2D5986;
}
.implantstep li p{
	line-height: 1.6;
}
@media screen and (max-width: 640px) {
.implantstep li{
  padding: 0 0 24px;
  align-items:flex-start;
	}
.implantstep li div:first-child{
	width: 200px;
	}
.implantstep li h4{
	margin: 12px auto 3px;
	}
}
@media screen and (max-width: 480px) {
.implantstep li img{
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border: 1px solid #2C5985;
  }
.implantstep li h4{
	font-size: 1.05em;
	margin: 0 auto 3px;
	}
.implantstep li p{
	font-size: 0.9em;
	}
.implantstep li div:first-child{
	width: 124px;
	}
.implantstep li div:last-child{
	padding: 0 0 0 18px;
	}
.implantstep li div:first-child:before{
  width: 1px;
  height: 200%;
	}
.implantstep li:first-child div:first-child:before{
  width: 1px;
	}
}

/*-------------------------
安心してご相談ください
--------------------------*/
.implantfeature {
  width:100%;
  margin: 24px auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
	flex-wrap: wrap;
}
.implantfeature li{
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding: 0 12px;
}
.implantfeature li img{
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border: 1px solid #CCC;
}
.implantfeature li h4{
	max-width: 96%;
	font-size: 0.9em;
	line-height: 1.65;
	font-weight: 400;
	margin: 0.4em auto 0;
	position: relative;
	padding: 0 0 0 1.4em;
}
.implantfeature li h4:after {
	position: absolute;
  top: 0.15em;
  left: 0;
  font-size: 1.25em;
	line-height: 1;
	color: #555;
  font-family:"Material Symbols Rounded";
	content: "\e86b"; /*上向き三角*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}
@media screen and (max-width: 960px) {
.implantfeature {
  display: block;
	flex-direction: column;
  max-width: 480px;
	}
.implantfeature li{
  width: 100%;
  max-width:100%;
  padding: 0 0 24px;
	}
.implantfeature li:last-child{
  padding: 0 0 0;
}
.implantfeature li img{
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
	}
}