@charset "utf-8";

/* ==================================================================
	index.css
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Noto+Sans+JP&display=swap');

/* --------------------------------
   □ 共通
------------------------------- */ 
header .tops{
	text-align:center;
	margin-bottom: 40px;
}
header .tops img{
	width:100%;
	max-width:640px;
}

.dental ul {
    margin: 8% 2% 0;
    display: flex;
    justify-content: space-between;
}
.dental ul li {
    width: 49%;
    align-items: stretch;
    -webkit-border-radius: 10px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2);
}
.dental ul li a {
    width: 100%;
    font-size: 190%;
    font-weight: bold;
    line-height: 1.2;
    display: inline-block;
	text-align: center;
    padding: 20px 0 20px 8px;
    box-sizing: border-box;
    -webkit-border-radius: 10px;
}
li.jun {
	background: url(../../images/index/blank_icon_blue.png) no-repeat 95% 50% #fff;
}
li.jun a {
    color: #035db0;
    border: 3px solid #035db0;
	background: url(../../images/index/blog_icon_blue.png) no-repeat 5% 47% transparent;
}
li.sunport {
	background: url(../../images/index/blank_icon_pink.png) no-repeat 95% 50% #fff;
}
li.sunport a {
    color: #981c57;
    border: 3px solid #981c57;
	background: url(../../images/index/blog_icon_pink.png) no-repeat 5% 47% transparent;
}


.main h2{
	font-size:210%;
	margin-bottom:30px;
	margin-top:23px;
	letter-spacing:0.3em;
	border:solid 1px #ddd;
    padding: 17px;
    background: -webkit-gradient(linear, left top, left bottom, from(#177BD6), to(#035EAF));
	color:#FFF;
}

.main .attention h2.title{
	text-align: center;
	margin: -24px 0 52px;
	padding: 0;
	font-weight: bold;
	background: #FFF;
	font-size:210%;
    background-color: #fff;
	color: #e03464;
	text-decoration: underline;
	border: none;
}

	
.main h2#info{
	margin-top:0;
}

.main .division.event{
	clear:both;
	background:#fff;
	padding:0;
}
.main .division.event p{
	margin-bottom:0;
}


.main p.tel{
	background:url(../../images/index/tel.png),-webkit-gradient(linear, left top, left bottom, from(#2676BE), to(#035EAF));
    background-repeat:no-repeat;
    background-position:3% center;
    -webkit-border-radius: 10px;
    text-indent:58pt;
	width:48%;
    margin-right:15px;
	padding:15px 0;
	font-size:150%;
	font-weight:bold;
	float:left;
	margin-bottom:20px;
}

.main p.tel a{
	color:#FFF;
	display:block;
	text-decoration:none;
}


.main span.call{
	font-size:24px;
	margin-left:93px;
	letter-spacing:0em;
}

.main p.map{
	background:url(../../images/index/map.png),-webkit-gradient(linear, left top, left bottom, from(#2676BE), to(#035EAF));
    background-repeat:no-repeat;
    background-position:5% center;
    -webkit-border-radius: 10px;
    text-indent:60pt;
	width:48%;
    float:right;
	padding-top:29px;
	padding-bottom:29px;
	font-size:183%;
	font-weight:bold;
	margin-bottom:20px;
}


.main p.map a{
	color:#FFF;
	display:block;
	text-decoration:none;
}

.main p.tels{
	background:url(../../images/index/tel.png),-webkit-gradient(linear, left top, left bottom, from(#b02261), to(#941b51));
    background-repeat:no-repeat;
    background-position:3% center;
    -webkit-border-radius: 10px;
    text-indent:62pt;
	letter-spacing:0.2em;
	width:48%;
    margin-right:15px;
	padding-top:15px;
	padding-bottom:15px;
	font-size:150%;
	font-weight:bold;
	float:left;
	margin-bottom:20px;
}


.main p.tels a{
	color:#FFF;
	display:block;
	text-decoration:none;
}

.main p.maps{
	background:url(../../images/index/map.png),-webkit-gradient(linear, left top, left bottom, from(#b02261), to(#941b51));
    background-repeat:no-repeat;
    background-position:5% center;
    -webkit-border-radius: 10px;
    text-indent:60pt;
	width:48%;
    float:right;
	padding-top:29px;
	padding-bottom:29px;
	font-size:183%;
	font-weight:bold;
	margin-bottom:20px;
	
	
}

.main p.maps a{
	color:#FFF;
	display:block;
	text-decoration:none;
}



.main p.blog{
	position:relative;
	background:#E9872E;
    -webkit-border-radius: 10px;
   text-align:center;
	width:100%;
	padding:15px 0;
	font-size:50%;
	font-weight:bold;
	float:left;
	margin-bottom:20px;
}
.main p.blog span{
	font-size:80%;
	padding-right:10px;
}

.main p.blog a{
	color:#FFF;
	display:block;
	text-decoration:none;
}
.main p.blog a:before{
	content: " ";
    text-align: center;
    color: #fff;
    position: absolute;
    background:url(../../images/index/blog.png) no-repeat center left;
	background-size:48px auto;
    display: block;
    height: 48px;
    width: 48px;
	top:13%;
	left:12%;
}


.main dt{
	margin-left:38px;
	font-size:23px;
	font-weight:bold;
	line-height:60px;
}
.main dd{
	margin-left:38px;
	font-size:19px;
	margin-bottom:40px;
	width:576px;
}


.main dt span{
	padding-left:1.5em;
	font-size:70%;
	font-weight:normal;
}

.main dt.accese{
	font-size:22px;
	height:40px;
	line-height:2;
	text-align:center;
	margin-left:0px;
}

.main dd.accese{
	margin-left:15px;
	margin-top:5px;
	margin-bottom:5px;
}

.main span.tel{
	font-weight:bold;
	font-size:23px;
	background-image:url(../../images/index/number.png);
	background-repeat:no-repeat;
	background-position:0pt 2pt;
	padding-left:27px;
}

.main .contact{
	margin:40px auto;
	padding:20px;
	border-radius: 6px;
	background:#f1f1f1;
	width:80%;
}
.main .contact dl
.main .contact dt,
.main .contact dd{
	margin:0;
	padding:0;
	text-indent:0;
	overflow:hidden;
	width:100%;
}

* .main .contact dt{
	margin-left:0;
}


.main p.sentence{
	font-size:19px;
	margin-left:38px;
	margin-top:13px;
	margin-bottom:40px;
}


.main h3{
	position:relative;
    padding:10px 15px;
    font-size:24px; 
	color: #000;
	
}


.main h3.off{
    position: relative;
    background:#edf4ff;
    line-height: 1;
    margin: 0px 20px -5px 20px;
    padding: 14px 5px 10px 50px;
    border-radius: 22px;
    color:#035EAF;
	letter-spacing:0.1em;
}

.main h3.off:before {
	content: "";
    position: absolute;
    background: #eee;
    top: 50%;
    left: 14px;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #777 inset;
}

.main h3.shika{
    position: relative;
    background:#2676BE;
    line-height: 1;
    margin: 0px 20px 20px 20px;
    padding: 14px 5px 10px 50px;
    border-radius: 22px;
    color:#FFF;
}
.main h3.shika:before {
    content: "";
    position: absolute;
    background: #eee;
    top: 50%;
    left: 14px;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #777 inset;
}

.main h3.shikas{
    position: relative;
    background:#b02261;
    line-height: 1;
    margin: 0 0 10px 0;
    padding: 14px 5px 20px 50px;
    border-radius: 22px;
    color:#FFF;
}
.main h3.shikas:before {
    content: "";
    position: absolute;
    background: #eee;
    top: 50%;
    left: 14px;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #777 inset;
}

.main .section{
	margin:0 auto;
	width:95%;
	font-size:200%;
}

.main .clinic p.medical{
	margin-bottom:14px !important;
}


.main p.offs{
	margin-left:15px;
	margin-top:5px;
	width:600px;
	font-size:19px;
}


.main table {
	margin:0;
	margin-bottom:20px;
	border-top:#CCC 4px ;
	width:100%;
} 
.main th{
	background-color:#edf4ff;
	text-align: center;
	padding:7px 20px 7px 20px;
	border: #CCC solid 1px;
	font-size:23px;
} 

.main th.shika{
	background-color:#ffe7ff;
	text-align: center;
	padding:7px 20px 7px 20px;
	border: #CCC solid 1px;
	font-size:23px;
} 

.main td {
	font-size:22px;
	text-align: center;
	border: #CCC solid 1px;
	padding:4px;
	
}

.main span.spred{
	color:#F00;
}

.main .clinic li.mp{
	padding:2px;
	color:#DC143C;
	text-align:center;
	background:#FFF0F5;
}

/* recruit ***/
.main dl.recruit{
	margin:0 42px;
}
.main dl.recruit dt,
.main dl.recruit dd{
	margin:0;
	width:100%;
}
.main dl.recruit dd.apply{
	margin-top:10px;
}

.main .recruit ul{
	float:none;
	margin-bottom:5px;
}

.main .list.disc{
	margin-left:24px;
}
.main .list.disc li{
	list-style-type:disc;
}


.main h3.recruit{
	color:#fff;
	background:#f39c12;
}


.main .recruit dd h4{
	margin-bottom:6px;
	text-align:center;
}
.main .recruit p.tel{
	background:url(../../images/index/tel.png),-webkit-gradient(linear, left top, left bottom, from(#f39c12), to(#d35400));
    background-repeat:no-repeat;
    background-position:3% center;
    -webkit-border-radius: 10px;
    text-indent:58pt;
	width:100%;
    margin:0 auto;
	padding:15px 0;
	font-size:150%;
	font-weight:bold;
	float:none;
	margin-bottom:20px;
	text-align:center;
}

.main .recruit p.tel small{
	padding-left:6px;
	font-size:70%;
}

/* --------------------------------
   □ introduction
-------------------------------- */ 

img{
	max-width:100%;
}

#introduction{
	font-size:200%;
	background:url(../../images/index/bg.jpg) 100% 0 no-repeat;
	padding: 0 2% 45px;
}

#introduction .clinic{
	overflow: hidden;
}

#introduction .clinic ul.list{
}

#introduction .clinic ul.list > li{
	border:3px solid #035db0;
    width: 48%;
    margin-right: 2%;
    float: left;
	background: #fff;
}

#introduction .clinic ul.list > li:last-child{
	border:3px solid #981c57;
	margin-right:0;
}

#introduction .clinic ul.list li p.image{
}

#introduction .clinic ul.list li dl{
	padding:0 15px;
	text-align: center;
}

#introduction .clinic ul.list li dl dt{
    margin-left: 0;
}

#introduction .clinic ul.list li dl dt img{
	max-width:100%;
	text-align:center;
}

#introduction .clinic ul.list li p.image img{
	width:100%;
}

#introduction .clinic ul.list li dl dd{
	width: auto;
    margin-left: 0;
	margin-bottom: 10px;
}

#introduction .clinic ul.list li ul.buttonStyle{
	padding:0 15px;
}

#introduction .clinic ul.list li ul.buttonStyle li{
	margin-bottom:15px;
	position:relative;
}

#introduction .clinic ul.list li ul.buttonStyle li:after{
	content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right:5%;
    margin-top: -4px;
}

#introduction .clinic ul.list li ul.buttonStyle li a{
	background:#6c6b6b;
	color:#fff;
	border-radius:5px;
	display:block;
	padding:3%;
	font-size: 90%;
}

#introduction .clinic ul.list li ul.buttonStyle li.tel a{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#024fa3+0,056bb9+100,ffffff+100,ffffff+100 */
	background: rgb(2,79,163); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(2,79,163,1) 0%, rgba(5,107,185,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(2,79,163,1) 0%,rgba(5,107,185,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(2,79,163,1) 0%,rgba(5,107,185,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024fa3', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

#introduction .clinic ul.list li:last-child ul.buttonStyle li.tel a{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#981c57+0,a32866+100,ffffff+100,ffffff+100 */
	background: rgb(152,28,87); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(152,28,87,1) 0%, rgba(163,40,102,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(152,28,87,1) 0%,rgba(163,40,102,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(152,28,87,1) 0%,rgba(163,40,102,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#981c57', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

#introduction .clinic ul.list li ul.buttonStyle li a span{
}

#introduction .clinic ul.list li ul.buttonStyle li.more{
}

#introduction .clinic ul.list li ul.buttonStyle li.tel a span{
	background:url(../../images/index/tel_icon.png) 5% 50% no-repeat;
	padding-left:40px;
}

/* diagnosis **/
#diagnosis{
	margin-bottom:2em;
}
#diagnosis ul{
	margin:0;
	display:flex;
	width:100%;
	flex-wrap:wrap;
	justify-content:space-between;
}

#diagnosis ul li{
	margin-bottom:3%;
	width:33%;
	text-align:center;
}
#diagnosis ul li img{
	width:75%;
}


#diagnosis p.btn{
	margin:1em auto;
	position:relative;
	text-align:center;
	font-weight:bold;
	width:85%;
}

#diagnosis p.btn small{
	display:block;
}

#diagnosis p.btn a{
	position:relative;
	display:block;
	padding:0.5em;
	text-shadow:0 0 6px #3186CD;
/*	border:3px solid #3186CD;*/
	border-radius:2em;
color:#fff;
background:linear-gradient(to left, #4284ed, #003994, #0052d4);
}

#diagnosis p.btn a::before {
	content: '';
	position: absolute;
	top: calc(50% - 5px);
	right: -35px;
	transform: rotate(30deg);
	width: 12px;
	height: 2px;
	background-color: #3186CD;
}

#diagnosis p.btn a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -35px;
	transform: translateY(-50%);
	width: 70px;
	height: 2px;
	background-color: #3186CD;
}


/* --------------------------------
   □ guideline
-------------------------------- */ 
#guideline{
	margin-bottom:2em;
	font-size:1.8rem;
	font-family: 'Noto Serif JP', serif;
	line-height:1.7;
}
#guideline p{
	line-height:1.7;
}

/* --------------------------------
   □ about
-------------------------------- */ 

#about .clinic{
	margin-top: 20%;
    padding-top: 10%;
	margin-bottom: 60px;
}

#about .clinic p.kv{
	margin-top: -25%;
	margin-bottom:40px;
}

#about .clinic h3{
	margin-bottom:30px;
}

#about .clinic p.staffblog{
	text-align:center;
	margin-top:40px;
}

#about .clinic#junshika{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ddebf7+0,ffffff+100,ffffff+100,ffffff+100 */
background: rgb(221,235,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,235,247,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(221,235,247,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(221,235,247,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddebf7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#about .clinic#junshika p.medical{
	padding:20px 0;
	border-top:2px solid #005fb0;
	border-bottom:2px solid #005fb0;
}

#about .clinic#sunport{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7e7ee+0,ffffff+100,ffffff+100,ffffff+100 */
background: rgb(247,231,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(247,231,238,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(247,231,238,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(247,231,238,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7e7ee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#about .clinic#sunport p.kv{
	float:right;
}

#about .clinic#sunport p.medical{
	padding:20px 0;
	border-top:2px solid #981c57;
	border-bottom:2px solid #981c57;
}



#about .section{
	
}

#about .section dl{
}
#about .section dt,
#about .section dd{
	margin:0;
	padding:0;
	line-height:1.4;
	font-size:1.4rem;
}

/* blog *******/
#about .blog{
	position:relative;
	margin-top:1em;
}

#about .blog h4{
	margin-bottom:1em;
	font-family: 'Josefin Sans', sans-serif;
	font-size:2.2rem;
}
#about .blog h4 span{
	display:inline-block;
	font-family: "Noto Sans JP";
	font-size:1.4rem;
	color:#666;
}

#about .section.blog li{
	padding:0.7em;
	border-radius:0.3em;
}
#about #junshika .section.blog li:nth-child(odd){background:rgb(217, 235, 250);}
#about #sunport .section.blog li:nth-child(odd){background:rgb(252, 222, 235);}

#about .section.blog dt{
	position:relative;
	display:inline;
	margin-bottom:0;
	z-index:100;
}

#about .section.blog dd{
	position:relative;
	margin-top:-1.5em;
	margin-left:7.5em;
	width:auto;
}


#about #sunport .section.blog dd a{color:#981c57;}

#about .blog p.more{
	position:absolute;
	top:0.1em;
	right:0;
	font-size:1.3rem;
	z-index:10;
}
#about .blog p.more a{
	display:inline-block;
	background:#005fb0;
	padding:0.3em 1em;
	border-radius:0.5em;
	color:#fff;
}
#about #junshika .blog p.more a{ background:#005fb0;}
#about #sunport .blog p.more a{background:#981c57;}


/* medical **/
.main ul.medical{
	position:relative;
	margin-bottom:-14px;
	zoom:1;
	overflow:hidden;
}

ul.medical li{
	float:left;
}
ul.medical li:after{
	content:"/";
	padding:0 5px;
}
ul.medical li:last-child:after{
	content:"";
}


.main .infoarea{
	margin-top:1.5em;
	padding:0 38px;
	box-sizing:border-box;
}
.contents .main .infoarea dl{
}


.main .infoarea dt{
	line-height:1.4;
	margin-left:0;
	font-size:1.6rem;
}
.main .infoarea dd{
	margin-left:0;
	font-size:1.5rem;
}

dt.toggle{
cursor:pointer;
margin-bottom:1em;
}

dt.toggle+dd{
	display:none;
}

dt.toggle+dd strong{
	display:block;
	font-size:110%;
}


/* attention ***/

.attention{
	margin:1.5em auto;
	width:95%;

}

.attention div{
	display:none;
	font-size:180%;
}

.attention div strong{
display:block;
}