/*医療解説*/

body.teachings h1 {
	margin: 0 auto;
    position: relative; text-indent: -9999px; background-repeat: no-repeat; background-size: contain; background-position:center top;
    background-image: url(../img/teachings/h1.jpg);
  }


.teachings #read, .teachingsBlock .tit {
	font-family: "zen-old-mincho", sans-serif;
	font-weight: 900;
	font-style: normal;
}
.teachings .teachingsBlock .contents ul li a { color: #fff; text-align: left; display: block;}

.teachings .teachingsBlock .contents ul li span.thumb {
display: block;
position: relative;
background-size: 100%;
}
.teachings .teachingsBlock .contents ul li span.thumb img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.teachings .teachingsBlock .contents ul li a .nb {
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
color: #FBE800;
display: block;
}
.teachings .teachingsBlock .contents ul li a span.thumb {
 	transition:0.8s;
}
.teachings .teachingsBlock .contents ul li a:hover span.thumb {opacity:0.7;}

.teachings .backnumber { text-align: center; padding-bottom: 2em;}
.teachings .backnumber h2 { padding-bottom: 0.5em; line-height: 1.5em;}

.teachings .prof section {border: solid 1px #fff;}
.teachings .prof h3 {
    border-bottom: 1px solid;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
	font-size: 1.2em;
	line-height: 1.5em;
}


.tsume {letter-spacing: -0.04em; }

@media all and (min-width: 768px) {
	 div.wrap {
    width: 900px;
    margin: 0 auto;
  }
	body.teachings h1 { width: 900px; height: 200px; margin: 0 auto 35px; }
	.teachings #read { font-size: 1.3em; line-height: 1.6em; padding-bottom: 35px;}
	
	.teachings .teachingsBlock .contents { padding: 50px 0 30px;}
	
	.teachings .teachingsBlock .contents ul { width: 880px; margin: 0 auto; padding-bottom: 2em; text-align: left;}
	.teachings .teachingsBlock .contents ul li { margin-bottom: 30px; width: 270px; display: inline-block; vertical-align: top;}
	.teachings .teachingsBlock .contents ul li:not(:nth-child(3n)){ margin-right: 30px;}
	.teachings .teachingsBlock .contents ul li span.thumb {
    width: 270px;
    height: 180px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	
}
	.teachings .teachingsBlock .contents ul li a .txtarea { display: block; padding: 10px 0 0; line-height: 1.5em;}
	.teachings .teachingsBlock ul li .nb { font-size: 1.1em;}
	.teachingsBlock .tit { font-size: 1.1em; display: inline-block;}
	
	.teachings .backnumber h2 { font-size: 1.2em;}
	.teachings .teachingsBlock .contents .backnumber ul li { width: 100%;}
	.teachings .backnumber ul li a .bn { font-size: 1.1em;}
	.teachingsBlock .backnumber .tit { font-size: 1.2em;}
	
	.teachings .prof { width: 880px; margin: 1em auto;}
	.teachings .prof section { margin-bottom:30px; padding: 20px 30px 30px;}
	.teachings .prof p.txt {width: 545px; display: inline-block; vertical-align: top;}
	.teachings .prof .phArea {width: 240px; margin: 0 15px 0 0; display: inline-block; vertical-align: top;}
	.teachings .prof .ph_cut, .teachings .prof .ph_cut span {
    width: 240px;
    height: 160px;
	margin: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;}

}
@media all and (max-width: 767px) {
	body.teachings h1 {height:100px; margin:0 3% 15px; background-size: cover;
  }
	.teachings #read { font-size: 0.9em; line-height: 1.5em;}
	.teachings .teachingsBlock .contents { padding: 25px 0 15px;}
	.teachingsBlock { padding: 20px 0;}
	.teachings .teachingsBlock .contents ul { width: 95%; margin: 0 auto; padding-bottom: 1em;}
	.teachings .teachingsBlock .contents ul li a{ margin: 0 0 20px;
	        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;}
	.teachings .teachingsBlock .contents ul li span.thumb {
		-webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 140px;
        height: 92px;
}
	.teachings .teachingsBlock .contents ul li a .txtarea { box-sizing: border-box; padding:0 0 0 10px; line-height: 1.4em;}
	.teachings .teachingsBlock ul li .nb { font-size: 0.8em;}
	.teachingsBlock .tit { font-size: 0.9em;}
	
	.teachings .backnumber h2 { padding-bottom: 1em;}

	
	.teachings .prof section { padding: 3.125vw; margin-bottom: 25px;}
	.teachings .prof p.txt { line-height: 1.5em;}
	.teachings .prof h3 {font-size: 1.0em; }
	
	.teachings .prof .phArea { width: 60%; max-width: 240px; margin: 0 auto; }
	.teachings .prof .ph_cut {margin: 1em 0;}
	.teachings .prof .ph_cut span {
    height: 0;
    padding: 66.666% 0 0;
    position: relative;
}

}


/*	butten
============================== */
p.button { padding-bottom: 0.5em;}
p.button a {
    margin: 0 auto;
    background-color: #000;
    display: block;
    transition: 0.8s;
	color: #fff;
	text-align: center;
	font-family: "zen-old-mincho", sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 1.2em; line-height: 1.5em; letter-spacing: 0.02em;
	position: relative;
}
p.button a:before {
    position: absolute;
    inset: 6px -6px -6px 6px;
    border: 1px solid rgba(251,232,0,0.7);
    content: '';
}
p.button a span.btn{display: block;
	background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-image: url(../img/btn_off.png);
	transition: 0.5s;}
p.button a:hover span.btn {
	background-image: url(../img/btn_on.png);
}


@media all and (min-width: 768px) {
	p.button a {width: 400px;}
	p.button a span.btn { padding:25px 0 20px 10px;}
	p.button.tall a span.btn { padding:20px 0 15px 10px;}
}

@media all and (max-width: 767px) {
	p.button a {width: 280px; font-size: 1.0em;}
	p.button a span.btn { padding: 25px 0 20px 10px;}
	p.button.tall a span.btn { padding: 15px 0 10px 10px;}
}