@charset "utf-8";

/* ■■■メインイメージ■■■*/

#header-bg {
width: 100%;
background-position: center 0 !important;
background-repeat: no-repeat !important;
background-size: 1170px auto;
height: 500px !important;
background-color: #f0f8ff;
}



#header-bg-base,
#header-bg-base_sp {
position: relative;
}



#header-bg-base p.ty01,
#header-bg-base_sp p.ty01 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 598px;
max-height: 108px;
}

#header-bg-base .ty01 img {
width: 598px;
height: auto;
}

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){

#header-bg-base_sp {
display: none;
}

}
/* min-width: 769px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){

#header-bg_sp {
width: 100%;
background-position: center 0 !important;
background-repeat: no-repeat !important;
background-size: cover;
height: 300px !important;
background-color: #f0f8ff;
}

#header-bg-base {
display:none;
}


#header-bg-base_sp .ty01 img {
width: 80%;
height: auto;
}

}
/* max-width: 768px @end */


.news_j {
border: 3px solid #DC0000;
padding: 15px;
font-size: 16px;
margin-bottom: 40px;
}

.news_j span {
background-color: #CC6666;
padding: 2px 4px;
}




/* ■■■最新情報・診療カレンダー■■■*/


.contL01 {
float: left;
width: 585px;
padding-top: 40px;
}

.contR01 {
float: right;
width: 545px;
padding-top: 40px;
}

#newsArea1 {
text-align: left;
}

.contL01 .ty01,
.contR01 .ty01 {
background : url(../images/icon01.png) #FFF no-repeat 0 0;
padding: 0 0 10px 30px;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px solid #DEDEDE;
}


.news_cont dl {
margin: 0;
padding: 10px 0 10px 0;
border-bottom: 1px solid #DEDEDE;
}



.news_cont dt {
width: 100%;
margin: 0 0 4px 0;
padding: 0;
color: #FFF;
font-size: 14px;
}

.news_cont dt span {
background-color: #CC6666;
padding: 2px 4px;
}

.news_cont dd {
margin: 0 0 0 0;
padding: 0 5px 0 0;
font-size: 14px;
}

.news_ttl01 {
font-size: 14px;
}

.news_cont .Button1 {
width: 300px;
margin: 0 auto;
}

.line_bt a {
background-color: #06c755;
height: 89px;
text-align: center;
padding: 0 10px;
display: block;
}

/* max-width: 1170px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1170px){

.contL01 {
float: left;
width: 505px;
}

.contR01 {
float: right;
width: 100%;
margin-left: -525px;
padding-left: 525px;
}


}
/* max-width: 1170px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){

#newsArea1 {
padding: 20px 0 0 0;
text-align: left;
}

.contL01 {
float: none;
width: 100%;

}

.contR01 {
float: none;
width: 100%;
margin-left: 0;
padding-left: 0;
}

}
/* max-width: 768px @end */


/* ■■■サブナビ■■■*/

#t_subNavi {
display: none;
}


/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
#t_subNavi {
padding: 0 20px;
}

.contL02 {
float: left;
text-align: center;
width: 48%;
border-bottom: 3px solid #c2ba9e;
}

.contR02 {
float: right;
text-align: center;
width: 48%;
border-bottom: 3px solid #c2ba9e;
}

}
/* max-width: 768px @end */

/* ■■■当院の矯正について■■■*/

#t_treatArea {
padding: 40px 20px;
background: url(../images/breath_bg.png) center center no-repeat;
background-size: cover;
margin-top: 40px;
text-align: left;
font-size: 14px;
}

#t_treatArea .cont02 {
font-size: 20px;
margin-top: 40px;
}

.cont02_1 {
width: 700px;
margin: 0 auto;
}

.cont02_2 {
width: 300px;
margin: 0 auto;
}

.contL02_1 {
float: left;
text-align: center;
width: 300px;
}

.contR02_1 {
float: right;
text-align: center;
width: 300px;
}

#t_treatArea ul {
font-size: 0;
letter-spacing: 0;
}

#t_treatArea ul li a {
text-decoration: none;
}

/* max-width: 1170px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1170px){

.cont02_1 {
width: 100%;
margin: 0 auto;
}


}
/* max-width: 1170px @end */


/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){


#t_treatArea ul li {
width: 24.4%;
display: inline-block;
margin: 20px 0.8% 0 0;
font-size: 14px;
font-weight: bold;
text-align: center;
}

#t_treatArea ul li:nth-child(4n) {
margin: 20px 0 0 0;
}



}
/* min-width: 769px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
#t_treatArea {
padding: 20px 0;
margin-top: 20px;
}

.contL02_1 {
float: left;
text-align: center;
width: 48%;
}

.contR02_1 {
float: right;
text-align: center;
width: 48%;
}


#t_treatArea .cont02 {
font-size: 18px;
margin-top: 20px;
}

#t_treatArea ul li {
width: 49%;
display: inline-block;
margin: 20px 2% 0 0;
font-size: 14px;
font-weight: bold;
text-align: center;
}

#t_treatArea ul li:nth-child(2n) {
margin: 20px 0 0 0;
}

}
/* max-width: 768px @end */

/* ■■■ほんだ式口臭外来■■■*/

#t_breathArea {
padding: 40px 20px;
margin-top: 40px;
text-align: left;
}

.ebac_mark img {
width: 120px;
height: auto;
}

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
#t_breathArea {
padding: 20px 0;
margin-top: 20px;
text-align: left;
}

.ebac_mark img {
width: 60px;
height: auto;
}
}
/* max-width: 768px @end */

/* ■■■様々な取り組み■■■*/

#t_approachArea {
padding: 40px 20px;
text-align: left;
}

#t_approachArea ul {
font-size: 0;
letter-spacing: 0;
}

#t_approachArea ul li {
background-color: #fcfce8;
overflow: hidden; /*画像拡大時にはみ出た部分を隠す*/
padding:0;
position: relative;
}

#t_approachArea ul li p {
width: 90%;
}


.colorfilter1:hover {
transform: scale(1.2,1.2); /*画像の拡大*/
cursor: pointer; /*カーソルをポインターにする*/
}


#t_approachArea ul li .colorfilter1 {
opacity: 0.3;
display: block;
transition-duration: 0.5s; /*変化の時間*/
}

#t_approachArea ul li .colorfilter1:hover {
opacity: 0.6;
}

#t_approachArea ul li .ty01 {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
pointer-events: none;
color: #333;
font-weight: bold;
text-align: center;
text-shadow:
        1px 1px 1px #fff,
        1px -1px 1px #fff,
        -1px 1px 1px #fff,
        -1px -1px 1px #fff,
        0 0 22px #fff;
}

#t_approachArea ul li .ty01 {
font-size: 18px;
line-height: 24px;
}


/* max-width: 1170px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1170px){

#t_approachArea ul li .ty01 {
font-size: 16px;
line-height: 20px;
}

}
/* max-width: 1170px @end */

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){


#t_approachArea ul li {
width: 24.4%;
display: inline-block;
margin: 20px 0.8% 0 0;
}

#t_approachArea ul li:nth-child(4n) {
margin: 20px 0 0 0;
}



}
/* min-width: 769px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){

#t_approachArea {
padding: 20px 0;
}

#t_approachArea ul li {
width: 49%;
display: inline-block;
margin: 20px 2% 0 0;
}

#t_approachArea ul li:nth-child(2n) {
margin: 20px 0 0 0;
}

#t_approachArea ul li .ty01 {
font-size: 16px;
line-height: 20px;
}

}
/* max-width: 768px @end */