@charset "utf-8";
/* CSS Document */
#header_area {
  background: #fff;
  position: relative;
}
#header_area h1 {
  text-align: center;
  padding: 0.5em 0;
}
#msg {
  position: absolute;
  top: 0;
  right: 5px;
  background: url("../images/common/bg.png") no-repeat;
  width: 312px;
  height: 180px;
  padding-top: 1.5em;
  text-align: center;
}
#msg p {
  font-size: 0.81em;
  text-align: center;
  line-height: 1.4;
  padding-top: 0.8em;
}
@media screen and (max-width: 777px) {
  #top_contents {
    margin-top: 14vw;
  }
}
/* /////////////////////////////
コンテンツ
///////////////////////////// */
#contents {
  background: #fff;
  padding-left: 3.6%;
  padding-right: 3.6%;
  padding-top: 30px;
  padding-bottom: 60px;
}
@media screen and (max-width: 777px) {
  #contents {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 4vw;
    padding-bottom: 6.5vw;
  }
}
/* /////////////////////////////
     パン屑
///////////////////////////// */
.breadcrumbs {
  line-height: 1.4;
  font-size: 0.81em;
  text-align: left;
  margin-bottom: 5px;
}
.breadcrumbs ul li {
  display: inline;
  vertical-align: middle;
  color: #75c6e5;
}
.breadcrumbs ul li:before {
  content: " > ";
}
.breadcrumbs ul li:first-child:before {
  content: none;
}
.breadcrumbs ul li a {
  text-decoration: none;
  color: #75c6e5;
  text-decoration: underline;
}
.breadcrumbs ul li a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 777px) {
  .breadcrumbs {
    font-size: 2.4vw;
    margin-bottom: 3vw;
  }
}
/* /////////////////////////////
タイトル
///////////////////////////// */
#contents h2 {
  text-align: center;
  font-size: 3.6em;
  color: #8bc8e0;
}
#contents h3 {
  padding: 0.5em 1em;
  font-size: 1.5em;
  font-weight: 600;
  background-image: url("../images/content/stripe.png");
}
#contents h3.pink {
  background-image: url("../images/content/stripe-pink.png");
}
#contents h4 {
  font-size: 1.4em;
  font-weight: 600;
  color: #8bc8e0;
}
#contents h5.blue-h5{
	background:#8bc8e0;
	color: #fff;
	padding: 0.3em 1em;
	display: inline-block;
	font-size: 1.1em;
	font-weight: 600;
}
#contents h5.pink-h5{
	background:#da96ad;
	color: #fff;
	padding: 0.3em 1em;
	display: inline-block;
	font-size: 1.1em;
	font-weight: 600;
}
#contents h4.pink{
	color: #da96ad;
	
}
@media screen and (max-width: 777px) {
  #contents h2 {
    font-size: 9.8vw;
  }
}
@media screen and (max-width: 480px) {
#contents h3.male img{
	width: 100px;
 }
#contents h3.pink img{
	width: 100px;
}
}
/* /////////////////////////////
message
///////////////////////////// */
.pet {
  position: relative;
  z-index: 999;
  padding-left: 10px;
}
.brwaku {
  position: relative;
  z-index: 10;
  border: #634435 solid 4px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 1em;
  margin-top: -10px;
}
.blue-box {
  background: #eaf1f4;
  padding: 2em;
}
.pink-box{background: #fbedf2;
  padding: 2em;}
.white-box {
  border: #8bc8e0 solid 1px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 1.5em;
}

@media screen and (max-width: 777px) {
 .blue-box {
 
  padding: 4vw;
}
	.pink-box{
  padding: 4vw;}
}
/* /////////////////////////////
clinic
///////////////////////////// */
.tabs-box {
  border-bottom: #8bc8e0 solid 4px;
}
.tabs {
  margin: 0 auto 0 0;
  display: table;
  border-collapse: separate;
  border-spacing: 5px 0;
}
.tabs .tab_item {
  display: table-cell;
  font-size: 1.3em;
  background: #eaf1f4;
  padding: 0.5em 1.2em;
  font-weight: bold;
  transition: all 0.2s ease;
  margin: 0 auto;
  border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}
.tabs .active {
  background: #8bc8e0;
  color: #fff;
}
.tabs .tab_item:hover {
  opacity: 0.75;
  cursor: pointer;
  cursor: hand;
}
.greeting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
align-self: stretch;
}
.greeting > div.first {
  width: 60%;
  margin-right: 3%;
}
.greeting > div.last {
  width: 37%;
}
.treatment {
  padding-left: 15px;
  padding-right: 15px;
}
.treatment dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
}
.treatment dl dt {
  width: 140px;
}
.treatment dl dd {
  width: calc(100% - 140px);
}
.treatment dl dt p {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 2.5em;
  color: #fff;
  display: inline-block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #8bc8e0;
  text-align: center;
  line-height: 110px;
  letter-spacing: -0.04em;
}
.treatment dl dt p em {
  font-size: 1.15em;
  font-style: normal;
}
.treatment dl dd p {
  background: #eaf1f4;
  padding: 1.2em 1.5em;
  position: relative;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
}
.treatment dl dd p::before, .treatment dl dd p::before {
  position: absolute;
  z-index: 99;
  top: calc(50% - 0.6em);
  display: inline-block;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
}
.treatment dl dd p::before {
  left: -1.5em;
  border-width: 0.6em 1.6em 0.6em 0;
  border-color: transparent #eaf1f4 transparent transparent;
}
.staff-box>div{
	margin-bottom: 30px;
	text-align: center;
}
.staff-box>div dt{
	margin-bottom: 10px;
}
.staff-box>div dd p{
text-align: center;
	margin-top: 10px;
}
.staff-box>div dd h4 span{
	padding-left: 1em;
	font-size: 0.75em;
	color: #333;
	
	
}
@media screen and (max-width: 777px) {
  .tabs {
    margin: 0 auto 0;
    border-spacing: 0 0;
    width: 100%;
  }
  .tabs .tab_item {
    font-size: 3.5vw;
    padding: 0.5em 0.5vw;
    font-weight: bold;
    text-align: center;
    border-left: #8bc8e0 solid 1px;
    border-right: #8bc8e0 solid 1px;
    border-top: #8bc8e0 solid 1px;
  }
  .greeting {
    display: block;
  }
  .greeting > div.first {
    width: auto;
    margin-right: 0;
    margin-bottom: 3vw;
  }
  .greeting > div.last {
    width: auto;
  }
  .treatment {
    padding-left: 0;
    padding-right: 0;
  }
  .treatment dl dt {
    width: 20vw;
  }
  .treatment dl dd {
    width: calc(100% - 20vw);
  }
  .treatment dl dt p {
    font-size: 4.5vw;
    width: 18vw;
    height: 18vw;
    line-height: 18vw;
  }
  .treatment dl dt p em {
    font-size: 6.8vw;
  }
  .treatment dl dd p {
    font-size: 3.4vw;
    padding: 0.8em;
  }
  .treatment dl dd p::before {
    left: -0.9em;
    border-width: 0.6em 1em 0.6em 0;
  }
	.staff-box>div{
	margin-bottom: 8vw !important;
}
}
/* /////////////////////////////
ケア
///////////////////////////// */

#senior table {
	width: 55%;
	margin-left: 10px;

}
#senior table, #senior table td, #senior table th {
  border: 1px solid #ddd;
  border-collapse: collapse;
 
}
#senior table th {
  padding: 0.3em 1em;
  background: #eaf1f4;
	font-size: 0.94em;
	white-space: nowrap;

 
}
#senior table td {
  padding: 0.3em 1em;
	vertical-align: middle;
	font-size: 0.94em;
}

#senior ol {
	margin-left: 10px;
  list-style: square; 
  border: dashed 2px #4baacf;
  background: #eaf1f4; 
  padding: 0.5em 0.5em 0.5em 2em;
}

#senior ol li {
font-weight: 600;
  padding: 0.2em 0;
}
#senior ol.dental{
	width: 90%;
}
#senior .ssize1{
	display: block;
	background: url("../images/content/senior-img1.png") no-repeat;
	background-position: center bottom;
	background-size: auto 100%;
}
#senior .ssize2{
	display: block;
	background: url("../images/content/senior-img2.png") no-repeat;
	background-position: center bottom;
	background-size: auto 210px;
}
#senior .ssize3{
	min-height: 220px;
	display: block;
	background: url("../images/content/senior-img3.png") no-repeat;
	background-position: center bottom;
	background-size: auto 210px;
}
#senior .ssize4{
	display: block;
	background: url("../images/content/senior-img4.png") no-repeat;
	background-position: center bottom;
	background-size: auto 200px;
}
#senior .ssize5{
	display: block;
	background: url("../images/content/senior-img5.png") no-repeat;
	background-position: center bottom;
	background-size: auto 100%;
}
#senior .ssize6{
	display: block;

	background: url("../images/content/dental-img.png") no-repeat;
	background-position: center bottom;
	background-size: auto 100%;
}
.marker {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
@media screen and (max-width: 777px) {
	#senior .ssize1{
		height: 30vw;
	/*background: url("../images/content/senior-img1.png") no-repeat;
	background-position: center bottom;
	background-size: auto 100%;*/
		margin-bottom: 4vw;
}
#senior .ssize2{
	height: 30vw;
	background-size: auto 100%;
	margin-bottom: 4vw;
}
#senior .ssize3{
	min-height: none;
	height: 30vw;
	background-size: auto 100%;
	margin-bottom: 4vw;
}
#senior .ssize4{
	height: 28vw;
	background-size: auto 100%;
	margin-bottom: 4vw;
}
#senior .ssize5{
height: 30vw;
	background-size: auto 100%;
	margin-bottom: 5vw;
}
	#senior .ssize6{
height: 30vw;
	background-size: auto 100%;
	margin-bottom: 5vw;
}
	#senior table {
	width: auto;
	margin-left: 2vw;
	margin-right: 2vw;

}
	#senior ol {
		width: auto;
	margin-left: 2vw;
	margin-right: 2vw;
	}
#senior ol.dental{
	width: auto;
}	
#senior	.dental-img{
	
	margin-left: 2vw;
	margin-right: 2vw;
	}
	#senior table th {
  padding: 0.3em 0.7em;
 
}
#senior table td {
  padding: 0.3em 0.7em;
}
}
/* /////////////////////////////
surgery
///////////////////////////// */
h3.male,h3.female{
	position: relative;
}
h3.male p,h3.female p{
	position:absolute;
	right: 0;
	bottom: 0;
}
.gray-box{
	background:#f8f8f8;
	padding: 1em;
	position: relative;
	
}
.gray-box .btm-txt{
	position:absolute;
	bottom: 1em;
	left:0;
	right: 0;
}
.gray-box .left-txt{
	width: 280px; position:absolute;
	bottom: 1em;
	left:1em;
	}

.l-blue-box{
	border:#8bc8e0 solid 1px;
	padding: 1em;
}
div.pink{border:#f9dce6 solid 1px;}
.l-blue-box ul{
	 margin: 0;
	 padding: 0;
}
.l-blue-box li{
	display: inline-block;
	vertical-align: top;
	width: 28%;
	padding-right:4%;
	margin-right: 4%;
	background:url("../images/content/m-arrow.png") no-repeat;
	background-position: right 150px;
	text-align: center;
}
.l-blue-box li:last-child{
	padding-right: 0;
	margin-right:0;
	background:none;
}
div.pink li{
	background:url("../images/content/f-arrow.png") no-repeat;
	background-position: right 150px;
}

.l-blue-box li h6{
	font-size: 1.2em;
	line-height: 1.3;
}
.l-blue-box li h6 em{
	font-family: 'Questrial', sans-serif;
	font-size: 2em;
	font-style:normal;
}
.l-blue-box li p{
	font-size: 0.88em;

	padding-left: 20px;
	padding-right: 20px;
	line-height: 1.3;
	text-align: left;
}
.surgery{ display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;}

.surgery > div.first {
 width: calc(100% - 190px);
  margin-right: 30px;
}
.surgery > div.last {
  width: 160px;
}
.surgery > div.last p{
border: #8bc8e0 solid 1px;
	padding: 0.5em;
	text-align: center;

}
.surgery > div.last p.bl{
border: #8bc8e0 solid 1px;
}
.surgery > div.last p.pink{
border: #f9dce6 solid 1px;
}
.surgery > div.last p span{
	display:block;
}
ul.square{list-style: square;
margin-left:1em;
padding-left: 0;}

@media screen and (max-width: 777px) {
.gray-box .btm-txt{
	position: static;
	line-height: 1.3;
	text-align: left !important;
}
.gray-box .left-txt{
	width:auto; position: static;
	
	}
.surgery{ display:block;}

.surgery > div.first {
 width:auto;
  margin-right: 0;
	margin-bottom: 3vw;
}
.surgery > div.last {
  width: auto;
	text-align: center;
}
	.surgery > div.last p{
		display: inline-block;
		
		margin-left: auto;
		margin-right:auto;


}
	.l-blue-box{
	padding: 4vw 3vw;
}
.l-blue-box li{
	display: block;
	width: 100%;
	padding-right:0;
	margin-right:0;
	padding-bottom: 5vw;
	margin-bottom:1vw;
	background:url("../images/content/m-arrow-sp.png") no-repeat;
	background-position: center bottom;
}

.l-blue-box li:last-child{

	background:none;
		padding-bottom: 0;
	margin-bottom: 0;
}
div.pink li{

	background:url("../images/content/f-arrow-sp.png") no-repeat;
	background-position: center bottom;
}	
.l-blue-box li p{
	font-size: 3.2vw;
	padding-top:0;
	padding-left: 0;
	padding-right: 0;
}	
}
/* /////////////////////////////
news
///////////////////////////// */
.category {
  padding: 0.3em 0.8em;
  font-size: 0.75em;
  color: #fff;
  display: inline-block;
  background: #8bc8e0;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  border-radius: 1em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
}
.date {
  font-size: 0.94em;
  padding: 0.2em 0.5em;
  font-weight: 600;
	color: #333;
}
.blogtxt {
	color: #333;

  font-size: 0.94em;
  line-height: 1.2;
  margin-top: 0.4em;
}
.news-box-con{
	border-bottom:#ddd dotted 1px;
	padding-bottom: 1.5em;
}
.text-box{
	padding-left: 1.5em;
	padding-right: 1.5em;
	text-align: justify;
  text-justify: inter-ideograph;
}
.text-box p{
	margin-bottom: 0.8em;
	
}
@media screen and (max-width: 777px) {
.text-box{
	padding-left: 2vw;
	padding-right:2vw;
}
.new {
  padding: 0.3em 0.5em;
}	
.category {
  padding: 0.3em 0.8em;
}
.date {
  padding: 0.2em 0 0.2em 0.5em;
}
.blogtxt {
	margin-top: 1.5vw;
}

}

/* /////////////////////////////
card
///////////////////////////// */
.card {
    padding: 0.2rem 0.15rem 0.18rem;
}

.card ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
}

@media print, screen and (min-width: 780px) {
    .card ul li {
        width: 14.25%;
        margin: 0.7rem 1.2%;
    }
}
@media screen and (max-width: 779.99px) {
    .card ul li {
        width: 16%;
        margin: 0.3rem 2%;
    }
}