/* ======================================== *
* 歯科診療ページ用 -for SP
/* ======================================== */
/* ---------- 歯科診療 共通（.dental） ---------- */
.dental main h1 {
background-image: url("../img/dental_1_h1_1.jpg"), url("../img/dental_1_h1_2.jpg");
background-position: -10px bottom, right -20px bottom;
background-repeat: no-repeat, no-repeat;
background-size: auto 120px, auto 114px;
background-color: #fff;
}
.dental .tab li {
width: 33.3%;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.dental .tab li:nth-of-type(3),
.dental .tab li:nth-of-type(6) {
border-right: none;
}
/* PC版への影響回避 */
@media screen and (max-width: 999px) {
.dental .tab li:nth-of-type(2) a,
.dental .tab li:nth-of-type(3) a,
.dental .tab li:nth-of-type(6) a {
line-height: 18px;
padding-top: 8px;
height: 50px;
}
}
.dental.en .col {
padding-top: 3em;
}
.dental.en .col .pdf li {
background: url(../img/ico_pdf.svg) no-repeat -10px 0.3em;
background-size: 165% auto;
padding: 1.2em 1em 1em calc(1em + 30px);
}
/* ---------- インプラント ---------- */
#implant .vis {
margin-top: 5rem;
min-height: 580px;
background-image: url(../img/dental_2_vis_1.jpg), url(../img/dental_2_vis_bk.jpg);
background-position: right bottom, right 500px bottom;
background-repeat: no-repeat, repeat-x;
background-size: 500px auto, 0.5% auto ;
background-color: #fff;
text-align: center;
}
#implant .vis_1 ul {
list-style:disc;
padding: 0rem 1rem 1rem 1rem;
margin: 1rem 1.5rem 1rem;
}
#implant .vis_1 h3 {
margin: 1.5rem auto;
}
#implant .vis_1 .merit {
margin: 0%;
padding: 0%;
background-color: #fff0f6;
position: relative;
z-index:1 ;
min-height: 180px;
}
#implant .vis_1 .demerit {
margin: 0%;
padding: 0%;
background: #e8f1fa;
z-index:2 ;
position: relative;
min-height: 180px;
}
#implant .vis_1 .merit div,
#implant .vis_1 .demerit div {
padding: 5%;
}
#implant .vis_1 svg {
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: 55%;
overflow: hidden;
z-index: -99;
opacity: 0.7;
}
#implant .vis_1 .merit svg {
background-image: url('data:image/svg+xml;utf8,');
background-position: right -10px top -10px;
background-size: 50%;
fill: #fff;
}
#implant .vis_1 .demerit svg {
background-image: url('data:image/svg+xml;utf8,');
background-position: right -10px top -10px;
background-size: 50%;
}
#implant .vis_2 {
background: url(../img/dental_2_vis_2.jpg) no-repeat;
background-position: right -10px bottom 0px;
background-size: 49% auto;
margin: 4rem auto 0;
padding: 1rem 2rem 3rem 2rem;
width: 100%;
}
#implant .vis_2 h2 {
margin: 1rem 0.5rem 4rem;
}
#implant .vis_2 ul {
list-style:disc;
padding: 0rem 1rem 1rem 1rem;
margin: 1rem 1.5rem 1rem;
}
#implant .vis_2 .mb30 {
margin: 0.5rem 0rem 30px;
}
.dental .vis_2 p:last-of-type {
margin: 0 2rem 1rem;
font-family: 'Shippori Mincho B1', serif;
}
/* ---------- 歯周病 ---------- */
#periodontal .vis {
text-align: center;
}
#periodontal .subtitle {
margin-top: 5rem;
}
#periodontal .wrap:nth-of-type(4) {
width: 95%;
}
#periodontal .arrow:nth-of-type(2) .annotated_box,
#periodontal .arrow:nth-of-type(3) .annotated_box {
margin-bottom: 2em;
}
/* ---------- 根管治療 ---------- */
#root_canal .tab + h2 {
margin: 0 0 3rem;
padding: 5rem 0 0;
height: 20.5rem;
background-image: url(../img/dental_5_vis.jpg), url(../img/dental_5_vis_bk.jpg);
background-position: bottom right, bottom right;
background-repeat: no-repeat, repeat-x;
background-size: auto 60%, auto 60%;
}
#root_canal .col.vis {
margin: 0 auto 100px;
}
/* 治療の流れ */
#root_canal .annotated_box img {
display: block;
width: 80%;
margin: 0 auto;
background: #fff;
}
#root_canal .annotated_box p {
text-align: center;
}
#root_canal .arrow:last-of-type .annotated_box {
position: relative;
}
#root_canal .arrow:last-of-type .annotated_box p:first-of-type {
position: absolute;
top: 28%;
left: calc(50% - 1em);
color: #a2710d;
}
#root_canal .arrow:last-of-type .annotated_box img {
padding-top: 1rem;
}
/* 料金内訳表 */
.dental .price_dl dl .root {
width: 50%;
}
/* ---------- ホワイトニング ---------- */
#whitening .subtitle {
margin-top: 5rem;
}
#whitening .vis {
padding: 0 0 4rem;
}
#whitening .vis div {
padding: 0 0 200px;
background: url(../img/dental_6_vis_2.png) right -30px bottom no-repeat;
background-size: auto 240px;
}
#whitening h3:nth-of-type(2) {
margin-top: 0;
}
#whitening h4 {
margin: 2rem 0;
width: 100%;
}
#whitening main ul:not(.tab) {
margin: 0;
padding: 1em 0 1em 2.5em;
}
#whitening .bg_light_beige {
padding-bottom: 100px;
}