@charset "UTF-8";
body {
position: relative;
font-family: "Roboto", "Noto Sans JP", sans-serif;
color: #6b5b4f;
font-size: 15px;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.05em;
text-align: justify;
}
body::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/bg.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
content: '';
z-index: -1;
}
a {
color: #6b5b4f;
text-decoration: none;
}
a:hover {
color: #64a8d9;
}
::-moz-selection {
background-color: #def0ff;
}
::selection {
background-color: #def0ff;
}
::-moz-selection {
background-color: #def0ff;
}
body, #mainvisual .inner, header, footer {
min-width: 1080px;
}
figure {
margin: 0;
}
@keyframes bgAnim {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -46018px;
}
}
@keyframes bgAnimSp {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -15339px;
}
}
summary[id], access[id], featurephoto[id], covid[id], facility[id], acility[id], flow[id], notice[id], payment[id], price_01[id], price_02[id], price_03[id], price_04[id], price_05[id], decay[id], periodontal[id], prosthesis[id], child[id], orthodontic[id], oralsurgery[id], aesthetic[id], whitening[id] {
position: relative;
}
summary[id], access[id], featurephoto[id], covid[id], facility[id], acility[id], flow[id], notice[id], payment[id], price_01[id], price_02[id], price_03[id], price_04[id], price_05[id], decay[id], periodontal[id], prosthesis[id], child[id], orthodontic[id], oralsurgery[id], aesthetic[id], whitening[id] {
content: '';
display: block;
height: 70px;
margin-top: -70px;
}
/*============================================================================

header

============================================================================*/
header {
position: relative;
width: 100%;
height: 125px;
margin-bottom: 83px;
background: #fff;
}
header::before {
position: absolute;
background: #fff;
top: 0;
left: 0;
width: 100%;
height: 208px;
content: '';
z-index: -1;
}
header .inner {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 1080px;
height: inherit;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: auto;
padding-top: 15px;
z-index: 21;
}
header .header_logo {
position: relative;
top: -2px;
/* ロゴ */
}
header .header_logo img {
width: 450px;
height: 90px;
}
header .reserve_btn {
position: fixed;
top: 560px;
right: 0;
z-index: 10;
-webkit-transition: all .3s;
transition: all .3s;
}
header .reserve_btn:hover {
opacity: 0.8;
}
header .reserve_btn_2 {
position: fixed;
top: 430px;
right: 0;
z-index: 10;
-webkit-transition: all .3s;
transition: all .3s;
}
header .reserve_btn_2:hover {
opacity: 0.8;
}
@keyframes topLeaf {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -390px;
}
}
/* 住所 */
.header_info {
text-align: right;
}
.header_info .header_contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header_info .header_contact .sns_btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 17px;
}
.header_info .header_contact .sns_btn li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
color: #fff;
font-size: 22px;
-webkit-transition: all .3s;
transition: all .3s;
}
/* SNSボタン */
.tw {
background: #4B9AE9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 40px;
margin-left: 8px;
border-radius: 50px;
-webkit-transition: all .3s;
transition: all .3s;
}
.ig {
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 40px;
margin-left: 8px;
border-radius: 50px;
-webkit-transition: all .3s;
transition: all .3s;
}
.header_info .header_contact .sns_btn li a:hover {
opacity: 0.7;
}
/* ご予約・お問合せ */
.header_tel .tel {
position: relative;
color: #68a5da;
font-size: 36px;
font-weight: bold;
-webkit-transition: all .3s;
transition: all .3s;
}
.header_tel .tel:hover {
opacity: 0.8;
}
.header_tel .tel::before {
position: absolute;
top: -7px;
left: -43px;
width: 33px;
height: 32px;
content: url(../images/head_tel.svg);
}
@media(min-width: 768px){
    a[href^="tel:"]{
        pointer-events: none;
    }
}
/*============================================================================

nav

============================================================================*/
nav {
position: absolute;
top: 113px;
width: 100%;
height: 95px;
background-color: #def0ff;
z-index: 20;
}
nav ul {
width: 1080px;
height: inherit;
margin: 0 auto;
text-align: center;
}
nav li {
display: inline-block;
position: relative;
height: inherit;
}
nav li a {
display: table;
padding: 25px 16px 0;
vertical-align: middle;
line-height: 25px;
font-size: 18px;
color: #6b5b4f;
text-align: center;
-webkit-transition: all .3s;
transition: all .3s;
}
nav li a:hover span::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
nav li a span {
position: relative;
display: block;
font-size: 12px;
color: #517cc9;
}
nav li a span::before {
/* ホバーボーダー */
position: absolute;
left: 0;
right: 0;
bottom: -7px;
width: 100%;
height: 1px;
margin: auto;
background-color: #a9a9a9;
-webkit-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transform: scaleX(0);
transform: scaleX(0);
content: "";
z-index: 1;
}
nav li a::after {
/* 間のボーダー */
content: "";
position: absolute;
left: -1px;
width: 0;
height: 29px;
top: 0;
bottom: 0;
margin: auto;
border-right: 1px dotted #75665a;
font-weight: 100;
color: #666;
font-size: 13px;
}
nav li.active2 a {
color: #75665a;
}
nav li.active2 a span::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
nav li:first-child a::after {
display: none;
}
/* 矢印 */
.nav_arrow img {
display: block;
position: absolute;
top: 0;
right: 5%;
bottom: 0;
margin: auto;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
nav ul li div a:hover .nav_arrow img {
right: 3%;
}
/* スクロールで追加されるクラス */
.fixed {
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .8);
}
/*============================================================================

main

============================================================================*/
/* 下層ページのメインビジュアル */
#mainvisual {
display: block;
position: relative;
height: 240px;
background-image: url(../images/mainvisual_slide1.jpg);
background-color: #f0f0f0;
background-position: center;
background-repeat: no-repeat;
}
#mainvisual .inner {
display: table;
position: relative;
height: inherit;
width: 1080px;
margin: 0 auto;
background-repeat: no-repeat;
}
#mainvisual h1 {
position: relative;
}
.main_pay {
display: flex;
position: absolute;
top: 25px;
right: 0;
}
.main_pay_inner:first-of-type {
margin-right: 10px;
}
.main_pay_inner a {
display: inline-block;
}
.main_pay p {
padding: 4px 0;
background: #75665a;
color: #ffffff;
font-size: 13px;
text-align: center;
}
/* キャッチフレーズ */
.mv_open {
position: absolute;
bottom: 36px;
right: 20px;
width: 296px;
height: 262px;
}
.mv_open img {
width: 100%;
}
/* 下層ページ見出し */
.mv_headline {
display: table-cell;
padding-bottom: 2px;
letter-spacing: 0.15em;
vertical-align: middle;
text-align: center;
}
.mv_headline h1 {
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: bold;
font-size: 27px;
color: #54463d;
}
.mv_headline p {
display: inline-block;
font-size: 18px;
color: #517cc9;
position: relative;
font-family: 'Great Vibes', cursive;
font-weight: 400;
text-align: center;
line-height: 1.7;
}
/*==================================================================

contents

==================================================================*/
main {
display: block;
}
#container {
padding-top: 0;
padding-bottom: 0;
}
#contents {
position: relative;
width: 1080px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 50px;
}
#contents::after {
display: block;
clear: both;
content: "";
}
/*============================================================================

$footer

============================================================================*/
footer {
position: relative;
width: 100%;
}
/* フッターの医院概要 */
.footer_info .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 1160px;
margin: 0 auto;
padding: 30px 0 60px;
}
.footer_info_overview {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 22px;
}
.footer_logo, .footer_logo img {
width: 145px;
height: 163px;
}
.footer_info_overview .footer_contact .footer_info_overview_tel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footer_info_overview .footer_contact .footer_info_overview_tel .tel {
position: relative;
padding-left: 44px;
color: #68a5da;
font-size: 34px;
font-weight: bold;
letter-spacing: -1px;
-webkit-transition: all .3s;
transition: all .3s;
}
.footer_info_overview .footer_contact .footer_info_overview_tel .tel:hover {
opacity: 0.8;
}
.footer_info_overview .footer_contact .footer_info_overview_tel .tel::before {
position: absolute;
top: 3px;
top: 3px;
top: 3px;
left: 0;
width: 33px;
height: 32px;
content: url(../images/head_tel.svg);
}
.footer_info_overview .footer_contact .footer_info_overview_tel .sns_btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 17px;
}
.footer_info_overview .footer_contact .footer_info_overview_tel .sns_btn li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
color: #fff;
font-size: 22px;
-webkit-transition: all .3s;
transition: all .3s;
}
.footer_info_overview .footer_contact .footer_info_overview_tel .sns_btn li a:hover {
opacity: 0.7;
}
.footer_info_overview .footer_contact p {
font-size: 13px;
}
.footer_info_overview .footer_contact p.treatment {
margin-top: 10px;
border: 1px solid #517cc9;
border-radius: 16px;
color: #517cc9;
overflow: hidden;
}
.footer_info_overview .footer_contact p.treatment span {
display: inline-block;
margin-right: 9px;
padding: 4px 10px 4px 14px;
background: #517cc9;
color: #fff;
}
/* 診療時間 */
.footer_info_sche {
width: 620px;
font-size: 14px;
margin-top: 4px;
}
.schedule table {
width: 100%;
}
.schedule table tr:first-child {
background: #ffffdd;
}
.schedule table tr:first-child th, .schedule table tr:first-child td {
color: #6b5b4f;
}
.schedule table tr:last-child th, .schedule table tr:last-child td {
border: 1px solid #96908c;
}
.schedule table tr th, .schedule table tr td {
padding: 15px 13px 13px 13px;
color: #6b5b4f;
font-weight: normal;
text-align: center;
border: 1px solid #96908c;
}
.schedule p {
margin-left: 22px;
margin-bottom: 2px;
}
.schedule p strong {
color: #6b5b4f;
}
.schedule p:last-child {
margin-bottom: 0;
}
.schedule_note {
margin-left: 3px;
}
.schedule_note li {
display: inline-block;
margin-right: 8px;
color: #6b5b4f;
}
/* フッターナビ */
.footer_navi {
background: #def0ff;
}
.footer_navi .inner {
width: 1160px;
margin: 0 auto;
padding: 40px 0 45px;
}
.footer_navi ul {
position: relative;
width: 100%;
height: 80px;
z-index: 9999;
width: 1160px;
height: inherit;
margin: 0 auto;
text-align: center;
}
.footer_navi ul li {
display: inline-table;
position: relative;
height: inherit;
}
.footer_navi ul li a {
display: table;
padding: 25px 16px 0;
vertical-align: middle;
line-height: 25px;
font-size: 18px;
color: #6b5b4f;
text-align: center;
-webkit-transition: all .3s;
transition: all .3s;
}
.footer_navi ul li a:hover {
color: #517cc9;
}
.footer_navi ul li a:hover span::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.footer_navi ul li a span {
position: relative;
display: block;
font-size: 12px;
color: #517cc9;
}
.footer_navi ul li a span::before {
/* ホバーボーダー */
position: absolute;
left: 0;
right: 0;
bottom: -7px;
width: 100%;
height: 1px;
margin: auto;
background-color: #517cc9;
-webkit-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transform: scaleX(0);
transform: scaleX(0);
content: "";
z-index: 1;
}
.footer_navi ul li a::after {
/* 間のボーダー */
content: "";
position: absolute;
left: -1px;
width: 0;
height: 29px;
top: 0;
bottom: 0;
margin: auto;
border-right: 1px dotted #6b5b4f;
font-weight: 100;
color: #75665a;
font-size: 13px;
}
.footer_navi ul li.active2 a {
color: #75665a;
}
.footer_navi ul li.active2 a span::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.footer_navi ul li:first-child a::after {
display: none;
}
/* ページトップ */
.pagetop {
position: relative;
margin: 30px auto 10px;
text-align: center;
cursor: pointer;
}
.pagetop, .pagetop img {
width: 150x;
height: 27px;
}
.pagetop img {
display: inline-block;
position: relative;
top: 0;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
/* コピーライト */
.copy {
padding: 28px 0;
background: #68a5da;
text-align: center;
color: #fff;
}
.copy small {
line-height: 1;
letter-spacing: 0.2em;
}
/*==================================================================

タイトル

==================================================================*/
/* 虹色見出し */
h1.tit_1 {
margin-bottom: 30px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
font-style: normal;
font-size: 86px;
text-align: center;
line-height: 1.7;
    
background: linear-gradient(170deg, #f19ca7 35%, #f7de8f 45%, #81d8d0 55%, #68a5da 60%);
-webkit-background-clip: text;
color: transparent;
}
h1.tit_1 span {
position: relative;
display: block;
font-family: monospace;
font-weight: bold;
font-size: 20px;
color: #6b5b4f;
}
h2.tit_1 {
margin-bottom: 30px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
font-style: normal;
font-size: 86px;
color: #68a5da;
text-align: center;
line-height: 1;
}
h2.tit_1 span {
display: block;
font-family: monospace;
font-weight: bold;
font-size: 20px;
color: #6b5b4f;
}
h2.tit_2 {
margin-bottom: 30px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
font-style: normal;
font-size: 86px;
color: #64a8d9;
text-align: center;
line-height: 1.7;
}
h2.tit_2 span {
position: relative;
display: block;
font-family: monospace;
font-weight: bold;
font-size: 20px;
color: #6b5b4f;
}
h2.tit_3 {
position: relative;
margin-top: 170px;
margin-bottom: 30px;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: bold;
font-size: 26px;
color: #6b5b4f;
text-align: center;
line-height: 1.7;
}
h2.tit_3::before {
position: absolute;
top: -90%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
content: url(../images/tit_icon.svg);
}
h2.tit_4 {
margin-bottom: 30px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
font-style: normal;
font-size: 86px;
color: #64a8d9;
text-align: center;
line-height: 1;
}
h2.tit_4 span {
display: block;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: bold;
font-size: 20px;
color: #6b5b4f;
color: #6b5b4f;
}
/* 小見出し */
h3.tit_1 {
position: relative;
margin-top: 20px;    
margin-bottom: 20px;
letter-spacing: 0.15em;
line-height: 1.5;
color: #6b5b4f;
font-size: 23px;
font-weight: bold;
}
h3.tit_1 span {
margin-left: 15px;
font-size: 13px;
color: #4d4d4d;
}
h3.tit_1 p {
font-size: 15px;
color: #64A8D9;
}
/* 小見出し スタッフ */
h3.tit_2 {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
border-bottom: dotted 1px #ffc47c;
letter-spacing: 0.1em;
line-height: 1.5;
color: #6b5b4f;
font-size: 23px;
font-weight: bold;
}
h3.tit_2 span {
margin-left: 15px;
font-size: 13px;
color: #4d4d4d;
}
h3.tit_2 p {
font-size: 15px;
color: #8ec8ef;
margin-bottom: 30px;
}
/* 子見出し 料金表 */
h3.tit_3 {
position: relative;
margin-top: 100px;
margin-bottom: 20px;
letter-spacing: 0.15em;
line-height: 1.5;
color: #6b5b4f;
font-size: 24px;
font-weight: bold;
}
/* 小見出し 診療案内1-8*/
h3.tit_m1 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc;  
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m1:before {
content: url("../images/medical_i_01.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m1 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m2 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc;
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m2:before {
content: url("../images/medical_i_02.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m2 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m3 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m3:before {
content: url("../images/medical_i_03.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m3 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m4 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m4:before {
content: url("../images/medical_i_04.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m4 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m5 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m5:before {
content: url("../images/medical_i_05.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m5 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m6 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m6:before {
content: url("../images/medical_i_06.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m6 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m7 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.15em;
}
h3.tit_m7:before {
content: url("../images/medical_i_07.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m7 {
padding: 30px 5px 25px;
color: #6b5b4f;
}
h3.tit_m8 {
padding: 10px 20px 25px 5px;
border-bottom: 1px dashed #ccc; 
color: #6b5b4f;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.05em;
}
h3.tit_m8:before {
content: url("../images/medical_i_08.svg"); 
margin-right: 20px; 
position: relative;
top: 30px; /*アイコンの位置(上)*/
}
p.tit_m8 {
padding: 30px 5px 25px;
color: #6b5b4f;
}

/* 子見出し左水色ボーダー */
h4.tit_1 {
position: relative;
margin-top: 30px;
margin-bottom: 18px;
padding: 5px 0 2px 10px;
letter-spacing: 0.15em;
line-height: 1.4;
color: #517cc9;
border-left: 5px solid;
font-size: 19px;
font-weight: bold;
text-align: left;
}
h4.tit_1 i {
margin-right: 7px;
}
h4.tit_1 span {
display: inline-block;
position: relative;
letter-spacing: 2.5px;
color: #8ec8ef;
font-size: 18px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
}
h4.tit_1 span::before {
margin-left: 15px;
margin-right: 15px;
content: "/";
}
h4.tit_r {
color: #6b5b4f;
font-size: 15px;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: bold;
}
/* コロナ項目 */
h5.tit_1 {
position: relative;
margin-bottom: 12px;
letter-spacing: 0.1em;
color: #6b5b4f;
font-size: 15px;
font-weight: bold;
}
/* 水色テーブル内タイトル */
h6.tit_1 {
position: relative;
margin-bottom: 12px;
letter-spacing: 0.1em;
color: #6b5b4f;
font-size: 20px;
font-weight: bold;
}

/* 料金表 被せ物 */
.price-text01 {
font-size: 19px;
font-weight: bold;
letter-spacing: 2.5px;
color: #6b5b4f;
line-height: 1.4em;
padding: 15px;
background: #def0ff;
}
/* 料金表メニュー */
.price ul {
border: solid 3px #ffc47c;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
.price ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.price ul li:before {
font-family: "Font Awesome 5 Free";
content: "\f0ab";/*アイコンの種類*/
position: absolute;
left : 1em;
color: #ffc47c;
}
/*==================================================================

共通

==================================================================*/
/* アクセントフォント */
.font_blue {
color: #517cc9;
}
/* 線 */
hr {
border: none;
border-bottom: 2px solid #ffc47c;
margin-bottom: 0;
padding-bottom: 30px;
}
/* アンダーライン */
.line1 {
background: linear-gradient(transparent 95%, #ff0000  80%);
    } 
.line2 {
background: linear-gradient(transparent 95%, #ff0000 0%);
} 
.borderline {
border-bottom: 1px solid red;
}
/* moreボタン */
.more_btn a {
position: relative;
display: inline-block;
width: 230px;
height: 66px;
padding: 18px 0 0;
border-radius: 10px;
background: #64A8D9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 18px;
color: #fff;
text-align: center;
-webkit-transition: all .3s;
transition: all .3s;
}
.more_btn a::after {
position: absolute;
top: 19px;
right: 40px;
width: 8px;
height: 14px;
content: url(../images/btn_arrow.svg);
-webkit-transition: all .3s;
transition: all .3s;
}
.more_btn a:hover {
background: #8ec8ef;
}
.more_btn a:hover::after {
right: 30px;
}
/* 院長略歴 */
.list01 {
margin: 0 0 15px;
padding: 0;
border-width: 0 1px 1px;
}
.list01 dt {
margin: 0;
padding: 14px 3px 0px;
}
.list01 dd {
margin: -38px 0 0;
padding: 12px 4px 10px 100px;
border-bottom: 1px dotted #6b5b4f;
}
/* ボタン googlrmapで見る */
.btn01 a {
display: inline-block;
padding: 8px 20px;
border: 1px solid #ffffdd;
border-radius: 10px;
color: #ffffff;
background: #517cc9;
font-weight: bold;
-webkit-transition: ease-in-out 0.2s;
transition: ease-in-out 0.2s;
}
.btn01 a i {
margin-right: 7px;
}
.btn01 a:hover {
background-color: #ffffdd;
color: #6b5b4f;
}
/* 医院概要 写真 */
.img_clinic {
margin-bottom: 20px;
}
.img_clinic {
display: block;
position: relative;
float: center;
margin-left: 0
margin-bottom: 0 !important;
text-align: center;
}
.img_clinic img {
margin-bottom: 5px;
}
/* 画像右寄せ */
.img_rig {
display: block;
position: relative;
float: right;
margin-left: 30px;
margin-bottom: 0 !important;
text-align: center;
}
.img_rig img {
border-radius: 3px;
margin-bottom: 7px;
}
.img_rig dd {
padding-left: 20px;
line-height: 1.3;
font-size: 15px;
font-weight: bold;
color: #6b5b4f;
text-align: left;
}

/*==================================================================

.anchor

==================================================================*/
.anchor {
margin-top: -100px;
padding-top: 100px;
}
/*==================================================================

table

==================================================================*/
/*フッター診療時間*/
.tb_foot {
margin-bottom: 12px;
border-spacing: 0;
border-collapse: collapse;
white-space: nowrap;
}
.tb_foot td, .tb_foot th {
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
.tb_foot tr:last-child td, .tb_foot tr:last-child th {
border: none;
}
.tb_foot th {
padding: 10px 22px 8px 22px;
line-height: 1;
white-space: nowrap;
font-weight: bold;
text-align: left;
}
.tb_foot td {
padding: 10px 13px 8px 13px;
}
/*スタッフプロフィール*/
.tb_career {
border-spacing: 0;
text-align: left;
}
.tb_career td, .tb_career th {
border-bottom: #a9a9a9 1px dotted;
line-height: 1.4;
font-size: 15px;
vertical-align: top;
}
.tb_career th {
padding: 8px 24px 8px 0;
white-space: nowrap;
text-align: left;
font-weight: normal;
color: #6b5b4f;
}
.tb_career td {
padding: 8px 0;
padding-right: 0 !important;
text-align: left;
}
.tb_career tr:last-child td, .tb_career tr:last-child th {
border: none;
}
/* 料金表 */
.tb_price {
width: 100%;
border: 1px solid #ccc;
white-space: nowrap;
}
.tb_price td, .tb_price th {
padding: 12px 15px;
}
.tb_price th {
width: 22%;
font-weight: bold;
white-space: nowrap;
text-align: left;
color: #6b5b4f;
background-color: #f2f2f2;
border: 1px solid #ccc;
font-size: 16px;
}
.tb_price th span {
font-size: 13px;
}
.tb_price td {
width: 39%;
color: #6b5b4f;
border: 1px solid #ccc;
text-align: right;
}
.tb_price td p {
width: 39%;
color: #6b5b4f;
font-weight: bold;
text-align: right;
}
.tb_price {
border: 1px solid #ccc;
width: 100%;
font-size: 14px;
color: #6b5b4f;
}
/* 料金表 被せ物 横並び */
.pricelist {
display: flex;
}
.pricelist .image {
width: 540px;
margin: 0 0 20px 0;
padding: 0;
}
.pricelist .image img {
width: 100%;
height: auto;
}
.pricelist .right {
margin: 0 0 0 20px;
padding: 0;
text-align: left;
}
.pricelist .title {
display: inline-block;
font-size: 16px;
font-weight: bold;
letter-spacing: 2.5px;
color: #6b5b4f;
line-height: 1.4em;
padding: 10px;
background: #f7de8f;
}
.pricelist .text {
margin: 10px 0 0;
padding: 0;
}
/*==================================================================

box

==================================================================*/
.box1 {
position: relative;
width: 1080px;
margin: 0 auto 100px;
}
.box2 {
margin-bottom: 100px;
}
.text {
position: relative;
margin-bottom: 50px;
}
.text p {
margin-bottom: 1em;
}
.text:last-child {
margin-bottom: 0;
}
.clear_box {
clear:  both;
}
/*==================================================================

.top_closed_day

==================================================================*/
.top_closed_day .box1 {
top: -170px;
margin-bottom: 200px;
}
.top_closed_day .text {
position: relative;
top: 150px;
text-align: center;
}
.top_closed_day .text p {
text-align: center;
margin-bottom: 7px;
}
.top_closed_day .img {
text-align: center;
line-height: 1.4;
margin-bottom: 7px;
}
/*==================================================================

.top_doctor

==================================================================*/
.top_doctor > .box1:first-of-type{
margin-bottom: 10px;
}
.top_doctor .box1 h2 {
display: inline-block;
text-align: left;
line-height: 1.4;
}
.top_doctor .box1 h2 span {
position: relative;
padding-left: 70px;
}
.top_doctor .box1 h2 span::before {
position: absolute;
top: -14px;
left: 71px;
width: 0;
height: 0;
background: #6b5b4f;
content: '';
}
.top_doctor .text {
position: relative;
top: -30px;
float: left;
width: 520px;
}
.top_doctor .text p {
margin-left: 70px;
margin-bottom: 40px;
}
.top_doctor .text .more_btn {
margin-left: 70px;
}
.top_doctor_img {
float: right;
color: #6b5b4f;
line-height: 1.4;
font-weight: bold;
}
.top_doctor_img dt {
margin-top: 120px;
margin-bottom: 7px;
font-size: 15px;
}
.top_doctor_img dd {
font-size: 16px;
}
.top_doctor_img dd span {
display: block;
letter-spacing: 2px;
font-size: 13px;
font-family: 'Great Vibes', cursive;
font-weight: 400;
color: #6b5b4f;
}
.top_doctor_bnr_flx{
display: flex;
justify-content: space-between;
}
.top_doctor_bnr_flx div:hover{
background: #64a8d9;
}
/*==================================================================

.top_clinic

==================================================================*/
.top_clinic .title_bg {
height: 447px;
padding: 130px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-attachment: fixed;
}
.top_clinic .box1 {
top: -145px;
margin-bottom: 0;
}
.top_clinic .box1 .top_clinic_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-around;
}
.top_clinic .box1 .top_clinic_list li {
margin-top: 60px;
margin-bottom: 40px;
}
.top_clinic .box1 .top_clinic_list li .feature_item {
display: block;
width: 339px;
}
.top_clinic .box1 .top_clinic_list li .feature_item figure {
margin-bottom: 20px;
}
.top_clinic .box1 .top_clinic_list li .feature_item .feature_text {
padding: 0 3px;
}
.top_clinic .box1 .top_clinic_list li .feature_item .feature_text h3 {
margin-bottom: 7px;
color: #517cc9;
font-size: 18px;
font-weight: bold;
}
.top_clinic .box1 .top_clinic_list li .feature_item .feature_text p {
color: #6b5b4f;
}
/*==================================================================

.top_medical

==================================================================*/
.top_medical .title_bg {
height: 398px;
margin-bottom: 80px;
padding: 150px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-attachment: fixed;
}
.top_medical .box1 {
margin-bottom: 80px;
}
.top_medical_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.top_medical_list li {
margin-bottom: 17px;
}
.top_medical_list li .medical_item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 262px;
height: 205px;
border: 8px solid #def0ff;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.top_medical_list li .medical_item::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
border-radius: 50%;
background: #def0ff;
content: '';
opacity: 0;
-webkit-transition: all .5s;
transition: all .5s;
z-index: -1;
}
.top_medical_list li .medical_item figure {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 91px;
height: 55px;
margin-bottom: 10px;
}
.top_medical_list li .medical_item figure img {
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.top_medical_list li .medical_item h3 {
margin-bottom: 5px;
font-weight: bold;
color: #6b5b4f;
}
.top_medical_list li .medical_item p {
color: #6b5b4f;
}
.top_medical_list li .medical_item:hover::before {
-webkit-transform: scale(90);
transform: scale(90);
opacity: 1;
}
.top_medical_list li .medical_item:hover figure img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
/*--矯正治療について--*/
.medical_bnr_bg {
position: relative;
width: 804px;
margin: 0 auto;
}
.medical_bnr_bg a {
display: block;
}
.medical_bnr_bg img {
width: 100%;
}
/*--根管治療について--*/
.medical_bnr_bg_2 {
position: relative;
width: 804px;
margin: 20px auto 0;
}
.medical_bnr_bg_2 a {
display: block;
}
.medical_bnr_bg_2 img {
width: 100%;
}
.medical_bnr_btns {
position: absolute;
display: flex;
justify-content: center;
bottom: 20px;
left: 0;
right: 0;
width: 100%;
}
.medical_bnr_btns a {
display: block;
width: 20%;
margin-right: 2%;
padding: 10px 0;
background-color: rgba(255,255,255,0.4);
text-align: center;
border: 1px solid #fff;
box-sizing: border-box;
font-size: 1.1em;
letter-spacing: .1em;
box-shadow: 0 0 10px 5px rgba(110,110,110,0.15);
font-weight: bold;
}
.medical_bnr_btns a:last-child {
margin-right: 0;
}
.medical_bnr_bg.medical03_bnr {
width: 100%;
}
.medical03_bnr .medical_bnr_btns {
bottom: 0px;
}
/*==================================================================

clinic

==================================================================*/
.clinic_sec1 {
position: relative;
font-size: 14.5px;
}
.clinic_sec1 ul {
margin-bottom: 15px;
}
.clinic_sec1 li {
padding: 8px 0;
border-bottom: 1px dotted #ccc;
}
.clinic_sec1 li:first-child {
padding: 0 0 8px 0;
}
.clinic_sec1 li:last-child {
border: none;
}
.clinic_sec1 dl:after {
display: block;
clear: both;
content: "";
}
.clinic_sec1 dt {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
padding-left: 2px;
font-weight: bold;
color: #6b5b4f;
}
.clinic_sec1 dd {
float: left;
width: 75%;
}
.clinic_sec1 .schedule .tb_foot {
border: 1px solid #e4e4e4;
width: 100%;
font-size: 14px;
}
.clinic_sec1 .schedule .tb_foot tr:first-child th, .clinic_sec1 .schedule .tb_foot tr:first-child td {
background-color: #ffffdd;
color: #6b5b4f;
font-weight: bold;
}
.clinic_gd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.clinic_gd h4.tit_1 {
margin-bottom: 7px;
}
.clinic_gd_s1 {
width: 42%;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 20px;
padding: 20px 30px;
background-color: #def0ff;
font-size: 13px;
border-radius: 10px;
}
.clinic_gd_s1 h3 {
margin-bottom: 10px;
text-align: center;
}
.clinic_gd_s1:last-child {
margin-right: 0;
}
.clinic_gd_s1 table {
width: 100%;
}
.clinic_gd_s1 .list01 {
font-size: 15px;
}
.clinic_gd_s1 .list02 {
font-size: 15px;
}
/* 院内紹介 */
.clinic_gd_s2 {
width: 42%;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 20px;
padding: 20px 30px 0 30px;
background-color: #ffffdd;
font-size: 13px;
border-radius: 10px;
}
.clinic_gd_s2 h3 {
margin-bottom: 10px;
text-align: center;
}
.clinic_gd_s2:last-child {
margin-right: 0;
}
.clinic_gd_s2 table {
width: 100%;
}
/*==================================================================

doctor staff

==================================================================*/
.doctor_greet {
margin-bottom: 30px;
}
.doctor_greet .text {
float: left;
width: 1030px;
}
.doctor_greet .btn02 {
text-align: center;
margin-bottom: 50px;
}
.doctor_career {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.doctor_career h4.tit_1 {
margin-bottom: 7px;
}
.doctor_career_1 {
width: 43%;
margin-right: 20px;
padding: 20px 30px;
background-color: #def0ff;
font-size: 13px;
border-radius: 10px;
}
.doctor_career_1 h3 {
margin-bottom: 10px;
text-align: center;
}
.doctor_career_1:last-child {
margin-right: 0;
}
.doctor_career_1 table {
width: 100%;
}
.doctor_career_1 .list01 {
font-size: 15px;
}
.doctor_career_1 .list02 {
font-size: 13px;
}
/*　ドクター写真　*/
.doctor_career_2 {
width: 43%;
margin-right: 10px;
padding: 0 20px;
font-size: 14px;
border-radius: 10px;
text-align: center;
}
.doctor_career_2 h3 {
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.doctor_career_2:last-child {
margin-right: 0;
}
.doctor_career_2 table {
width: 100%;
}
.doctor_career_2 .list01 {
font-size: 15px;
}
.doctor_career_2 .list02 {
font-size: 13px;
}
/*==================================================================

$notification 

==================================================================*/
.notification {
margin: 35px 0 40px;
padding: 30px 35px;
border: 3px solid #ffc47c;
background: none;
}
.notification h3 {
margin-bottom: 25px;
padding: 5px 0;
text-align: center;
font-weight: bold;
font-size: 25px;
color: #808080;
border-bottom: 1px solid;
border-top: 1px solid;
}
.notification .noti_num {
margin-bottom: 30px;
}
.notification .noti_num li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
.notification .noti_num li div h4 {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.notification .noti_num li div h4 span {
font-size: 25px;
margin-right: 10px;
color: #64a8d9;
}
.notification .noti_num li figure {
margin-left: 20px;
}
/*==================================================================

$flow

==================================================================*/
.flow > li {
margin-top: 15px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
.flow > li h4 {
font-size: 20px;
font-weight: bold;
color: #6b5b4f;
}
.flow > li h4 span {
margin-right: 13px;
font-size: 30px;
}
.flow > li .flow_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flow > li .flow_text figure {
margin-right: 20px;
}
.flow > li .flow_text div h5 {
font-size: 18px;
font-weight: bold;
color: #75665a;
}
.flow > li .flow_text div ul li {
margin-left: 20px;
list-style: disc;
}
/*==================================================================

$notice

==================================================================*/
.notice > li {
margin-top: 30px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
.notice > li h4 {
font-size: 20px;
font-weight: bold;
color: #6b5b4f;
}
.notice > li h4 span {
margin-right: 13px;
font-size: 30px;
}
.notice > li .notice_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.notice > li .notice_text figure {
margin-right: 20px;
}
.notice > li .notice_text div h5 {
font-size: 18px;
font-weight: bold;
color: #8EC8EF;
}
.notice > li .notice_text div ul li {
margin-left: 20px;
list-style: disc;
}
/*==================================================================

.news

==================================================================*/
.top_news {
background: #def0ff;
font-size: 18px;
}
.top_news .box1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 180px;
padding: 30px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto 80px;
}
.top_news .box1 h2 {
width: 258px;
margin-bottom: 0;
padding: 25px 0 0;
color: #6b5b4f;
font-size: 57px;
border-right: 1px dotted #75665a;
}
.top_news .box1 h2 span {
font-size: 13px;
font-weight: normal;
}
.news_up {
-webkit-overflow-scrolling: touch;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
display: -webkit-box;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
max-width: 700px;
height: 7em;
margin: 0 auto;
overflow-y: scroll; 
}
@media (min-width:768px) {
.news_up {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap
}
}
.news_up dd,
.news_up dt {
box-sizing: border-box;
width: 100%;
padding-bottom: .1em;
padding-left: .5em
}
.news_up dt {
font-size: .8em;
font-family: "Roboto", "Noto Sans JP", sans-serif;
}
@media (min-width:768px) {
.news_up dt {
width: 12.5em;
margin-bottom: .1em;
}
}
.news_up dt:first-of-type {
padding-top: 0;
}
.news_up dt time {
margin-right: .5em
}
.news_up dt span {
box-sizing: border-box;
display: inline-block;
width: 7em;
margin-right: .5em;
padding: 0 .5em;
background-color: #6b5b4f;
border-radius: 10px;
color: #ffffff;
font-size: .8em;
line-height: 1.75;
text-align: center
}
.news_up time {
color: #6b5b4f;
}
.news_up dd {
margin-left: 0;
margin-bottom: .5em;
font-size: .8em;
font-family: "Roboto", "Noto Sans JP", sans-serif;
color: #6b5b4f; 
}
@media (min-width:768px) {
.news_up dd {
width: calc(100% - 12.5em)
}
news_up dd:first-of-type {
padding-top: 0;
}
}
.news_up dd:nth-of-type(-n+3) {
position: relative
}
/*==================================================================

.access

==================================================================*/
.access {
text-align: center;
}
.access .btn01 {
text-align: center;
margin-bottom: 50px;
}
.access_map {
margin-bottom: 40px;
text-align: center;
}
.access_map dt {
margin-bottom: 10px;
}
.access_map dt i {
margin-right: 7px;
}
.access_guide {
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.access_info {
border: 4px solid #ffc47c;
padding: 25px 30px 5px;
text-align: left;
}
.access_info dt i {
margin-right: 7px;
}
.access_train, .access_car {
margin-bottom: 25px;
}
.access_train dt, .access_car dt {
padding-left: 0;
margin-bottom: 5px;
font-size: 15px;
font-weight: bold;
}
.access_train dd, .access_car dd {
font-size: 16px;
}
/*==================================================================

.breadcrumbs

==================================================================*/
.breadcrumbs {
position: relative;
max-width: 1150px;
width: auto;
margin: 0 auto 30px;
font-size: 14px;
z-index: 10;
}
.breadcrumbs:last-child {
margin: 0 auto;
}
.breadcrumbs i {
/*margin-left: 35px;*/
margin-right: 5px;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs li {
float: left;
margin-right: 5px;
}
.breadcrumbs li:after {
font-family: 'Roboto';
content: ">";
padding-left: 10px;
}
.breadcrumbs li:last-child::after {
content: "";
}
.color_red {
color: #B3184A;
}
.bold {
font-weight: bold;
}
.center {
text-align: center;
}
.director_tb_detail {
white-space: normal;
}
.director_tb_detail td {
width: auto;
text-align: left;
}
.director_tb_detail td:first-of-type {
text-align: center;
background-color: #e3f2fb;
vertical-align: middle;
font-family: 'Great Vibes', cursive;
font-size: 1.2em;
font-weight: normal;
color: #6b5b4f;
}
.director_tb_detail td:last-of-type {
white-space: nowrap;
text-align: right;
}
.director_tb_career {
display: inline-block;
width: auto;
padding: 20px 30px;
background-color: #e3f2fb;
}
.case_img dl,
.case_img02 dl {
background-color: #e3f2fb;
margin-bottom: 20px;
padding: 4% 2%;
box-sizing: border-box;
text-align: center;
}
.case_img dt,
.case_img02 dt {
margin-bottom: 10px;
font-size: 1.1em;
font-weight: bold;
}
.case_img dd {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.case_img p {
display: inline-block;
width: 49%;
margin-right: 2%;
}
.case_img p:nth-of-type(2) {
margin-right: 0;
}
.case_img02 p {
margin-bottom: 2%;
}
.case_img02 p:nth-of-type(2) {
margin-right: 2%;
}
.case_img img,
.case_img02 img {
max-width: 100%;
}
.pc_center {
text-align: center;
}
.zindex02 {
position: relative;
z-index: 2;
}