@charset "utf-8";
/*
* "スマートフォントUI / SmartFontUI" licensed under the IPA Font License Agreement v1.0
* https://www.flopdesign.com/freefont/smartfont.html（配布元のURL）
* http://ipafont.ipa.go.jp/（IPAフォントのURL）
* http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
*/
@font-face {
font-family: 'SmartFontUI';
src: url('../font/SmartFontUI.woff') format('woff'), url('../font/SmartFontUI.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* -----------------------------------------------------------------------
カラー
----------------------------------------------------------------------- */
.org {
color: #ee7d31;
}
@media screen and (min-width:1025px) {
/* :::::::::: フォント :::::::::: */
p, li, dt, dd, th, td, caption, figcaption {
-webkit-text-size-adjust: none;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.6em;
}
/* -----------------------------------------------------------------------
構造
----------------------------------------------------------------------- */
html {
overflow: auto;
}
body {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 62.5%;
color: #2d2d2d;
overflow: hidden;
}
header {
width: 1200px;
margin: 0 auto;
position: relative;
overflow: hidden;
padding: 20px 0;
}
nav {
border-top: 1px solid #eaeaea;
}
.mainVisual {
background-image: url(../images/keyv.jpg);
background-repeat: no-repeat;
background-size: 1200px auto;
background-position: top center;
background-color: #f7f7f5;
height: 650px;
box-sizing: border-box;
padding: 200px 0 0;
}

main {}
/* -----------------------------------------------------------------------
見出し
----------------------------------------------------------------------- */
h1 {
width: 250px;
height: 48px;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
position: absolute;
right: 0;
left: 0;
margin: auto;
}
h1 a {
display: block;
width: 250px;
height: 48px;
}
.h2index {
width: 420px;
height: 300px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.85);
text-align: center;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 2.6em;
color: #bf8c00;
line-height: 1.8em;
box-sizing: border-box;
padding: 30px 0 0;
}
h3 {
font-size: 2.6em;
}
h4 {
font-size: 3.8em;
line-height: 1.5em;
}
h5 {}
h6 {}
.midashi {
font-weight: bold;
font-size: 2.3em !important;
margin-bottom: 1.0em;
}
.midashi2 {
font-size: 2.7em !important;
}

.flex{
    display: flex;
}

.mt50{
    margin-top: 50px;
}

.gap40{
    gap: 40px;
}

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

全体

======================================================================= */
/* -----------------------------------------------------------------------
header
----------------------------------------------------------------------- */
.h_address {
float: left;
font-size: 1.5em;
}
.h_phone {
float: right;
font-size: 2.3em;
color: #bf8c00;
font-weight: bold;
}
.h_phone_inner {
font-size: 0.66em;
color: #2d2d2d;
font-weight: normal;
}
.h_phone_inner:after {
content: "";
display: inline-block;
width: 10px;
height: 18px;
background: url(../images/icon_phone.png) no-repeat;
background-size: 100% auto;
margin: 0 10px;
}
.btn_rsv {
display: block;
text-align: center;
background: #df8b00;
color: #fff;
font-size: .8em;
}
/* :::::::::: nav :::::::::: */
nav ul {
overflow: hidden;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 40px;
}
nav li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.8em;
display: inline-block;
min-width: 90px;
}
nav li a {
display: block;
padding: 25px 0;
}
nav li a:after {
display: block;
color: #bf8c00;
font-size: 0.9em;
font-family: 'Allura', cursive;
text-align: center;
margin: 5px 0 0;
}
nav li a:hover {
color: #bf8c00;
}
nav li a:hover:after {
color: #2d2d2d;
letter-spacing: 0.08em;
}
.nav01 a:after {
content: "Home";
}
.nav02 a:after {
content: "Doctor";
}
.nav03 a:after {
content: "About";
}
.nav04 a:after {
content: "Services";
}
.nav05 a:after {
content: "Clinic";
}
.nav06 a:after {
content: "Hours / Access";
}
.nav07 a:after {
content: "Endodontics";
}
.drawer-hamburger, .closeMenu {
display: none !important;
}
/* :::::::::: key visual :::::::::: */
/* -----------------------------------------------------------------------
footer
----------------------------------------------------------------------- */
footer {
text-align: center;
color: #bf8c00;
}
.footer_lnk{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1170px;
    margin: 6rem auto 0;
    gap: 1rem;
}
.footer_lnk li::after{
    content: "｜";
    display: inline-block;
    margin-left: 1rem;
    color: #eaeaea;
}
.footer_lnk li:first-of-type::before{
    content: "｜";
    display: inline-block;
    margin-right: 1rem;
    color: #eaeaea;
}
.footer_lnk li a:hover{
    text-decoration: underline;
}
.footer_lnk li a::after{
    content: none;
}
footer p {
font-size: 1.2em;
padding: 50px 0;
}
/* =======================================================================

個別

======================================================================= */
/* -----------------------------------------------------------------------
index.html
----------------------------------------------------------------------- */
/* :::::::::: ごあいさつ :::::::::: */
.greetings {
width: 920px;
margin: 0 auto;
overflow: hidden;
padding: 60px 0;
}
.greetings section {
width: 570px;
float: right;
}
.greetings h3 {
font-size: 3.8em;
color: #bf8c00;
margin: 0 0 15px;
}
.greetings p {
margin: 0 0 30px;
line-height: 2.2em;
}
.greetings p:last-child {
margin: 0;
}
.doctor_name {
text-align: right;
}
.greetings img {
width: 286px;
float: left;
}
/* :::::::::: 新型コロナウィルス感染対策 :::::::::: */
.text_box_o {
width: 100%;
max-width: 1170px;
margin: 0 auto 3rem;
padding: 1.5rem;
border: solid 3px #df8b00;
border-radius: 0.6rem;
}
.text_box_o span {
color: #df8b00;
font-weight: bold;
}
.text_r {
text-align: right;
}
/* :::::::::: メディア掲載・動画ページ・歯内療法 :::::::::: */
.greetings_link {
background: #fbfbfa;
padding: 60px 0;
}
.greetings_link ul {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
.greetings_link li {
width: 288px;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 2.2em;
box-sizing: border-box;
line-height: 1.8em;
}
.greetings_link li br {
display: none;
}
.greetings_link li span {
display: block;
padding: 26px 34px 0;
box-sizing: border-box;
height: 288px;
}
.greetings_link li:first-child span {
background: url(../images/service_image01.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.greetings_link li:nth-child(2) span {
background: url(../images/service_image02.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.greetings_link li:nth-child(3) span {
background: url(../images/service_image03.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.greetings_link li:not(:last-child) {
margin: 0 18px 0 0;
}
.greetings_link li a {
display: block;
font-weight: bold;
font-size: 0.7em;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
padding: 17px 34px;
position: relative;
}
.greetings_link li a:before {
content: "";
display: block;
width: 34px;
height: 1px;
right: 34px;
bottom: 34px;
position: absolute;
background: #bf8c00;
}
.greetings_link li a:after {
content: "";
display: block;
width: 1px;
height: 10px;
right: 36px;
bottom: 33px;
position: absolute;
transform: rotate(-40deg);
background: #bf8c00;
}
.greetings_link li a:hover {
background: #bf8c00;
color: #fff;
}
.greetings_link li a:hover:before {
background: #fff;
right: 10px;
}
.greetings_link li a:hover:after {
background: #fff;
right: 12px;
}
/* :::::::::: 診療内容 :::::::::: */
.w1170{
width: 1170px;
margin: 0 auto;
overflow: hidden;
padding: 100px 0;
}
.service {
background: #f8f8f8;
}
.service h3 {
text-align: center;
background: #fff;
padding: 30px 0;
position: relative;
}
.service h3:before {
content: "Services";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 0.9em;
margin: 0 0 5px;
}
.service h3:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: #fff;
position: absolute;
right: 0;
bottom: -10px;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.service li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 2.2em;
box-sizing: border-box;
line-height: 1.8em;
}
.service li img {
display: block;
}
.service li a {
display: block;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 0.75em;
font-weight: bold;
position: relative;
}
.service li a:before {
content: "";
display: block;
width: 34px;
height: 1px;
right: 34px;
bottom: 34px;
position: absolute;
}
.service li a:after {
content: "";
display: block;
width: 1px;
height: 10px;
right: 36px;
bottom: 33px;
position: absolute;
transform: rotate(-40deg);
}
.sevice_list01 a:before, .sevice_list01 a:after, .sevice_list02 a:before, .sevice_list02 a:after {
background: #bf8c00;
}
.sevice_list03 a:before, .sevice_list03 a:after, .sevice_list04 a:before, .sevice_list04 a:after {
background: #2680af;
}
/* :::::::::: できうる限り歯を残す治療 :::::::::: */
.service01 {
height: 750px;
margin: 0 auto;
box-sizing: border-box;
padding: 100px 0 0;
background: url(../images/service01_bg.jpg) no-repeat;
background-size: cover;
background-position: center top;
}
.service01 h4 {
width: 1280px;
color: #bf8c00;
margin: 0 auto 20px;
}
.service01 > p {
width: 1280px;
box-sizing: border-box;
padding: 0 650px 0 0;
line-height: 2.2em;
margin: 0 auto 40px;
}
/* ::::::::: 診療案内×4 ::::::::::: */
.sevice_list01 {
width: 1280px;
margin: 0 auto;
overflow: hidden;
}
.sevice_list01 li {
width: 288px;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #bf8c00;
margin: 0 20px 20px 0;
}
.sevice_list01 li br {
/*display: none;*/
}
.sevice_list01 li span {
display: block;
padding: 26px 34px 0;
box-sizing: border-box;
height: 288px;
}
.sevice_list01 li:first-child span {
background: url(../images/service_image04.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list01 li:nth-child(2) span {
background: url(../images/service_image05.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list01 li:nth-child(3) span {
background: url(../images/service_image12.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list01 li:nth-child(4) span {
background: url(../images/service_image06.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list01 li a {
color: #bf8c00;
padding: 17px 34px;
}
.sevice_list01 li a:hover {
background: #bf8c00;
color: #fff;
}
.sevice_list01 li a:hover:before {
background: #fff;
right: 10px;
}
.sevice_list01 li a:hover:after {
background: #fff;
right: 12px;
}
/* ::::::::: 診療案内×4 ::::::::::: */
.sevice_list02 {
background: #fff;
padding: 70px 0;
overflow: hidden;
}
.sevice_list02 ul {
width: 1170px;
margin: 2px auto;
padding: 2px 0;
}
.sevice_list02 li {
width: 575px;
float: left;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list02 li:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
}
.sevice_list02 li:hover a:before {
right: 10px;
}
.sevice_list02 li:hover a:after {
right: 12px;
}
.sevice_list02 li:not(:nth-child(2n)) {
margin: 0 20px 20px 0;
}
.sevice_list02 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.35em;
font-weight: normal;
}
.sevice_list02 li a {
color: #bf8c00;
padding: 17px 50px 17px 140px
}
.sevice_list02 li:first-child a {
background: url(../images/icon01.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
.sevice_list02 li:nth-child(2) a {
background: url(../images/icon07.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
.sevice_list02 li:nth-child(3) a {
background: url(../images/icon02.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
.sevice_list02 li:nth-child(4) a {
background: url(../images/icon03.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
/* :::::::::: 歯をきれいにすることで口元を美しく魅せる :::::::::: */
.service02 {
height: 800px;
margin: 0 auto;
box-sizing: border-box;
padding: 100px 0 0;
background: url(../images/service02_bg.jpg) no-repeat;
background-size: cover;
background-position: center top;
}
.service02 h4 {
width: 1170px;
color: #2680af;
margin: 0 auto 20px;
box-sizing: border-box;
padding: 0 0 0 620px;
}
.service02 > p {
width: 1170px;
box-sizing: border-box;
padding: 0 0 0 620px;
line-height: 2.2em;
margin: 0 auto 40px;
}
/* ::::::::: 診療案内×3 ::::::::::: */
.sevice_list03 {
overflow: hidden;
width: 1680px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 0 0 266px;
}
.sevice_list03 li {
width: 288px;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #2680af;
}
.sevice_list03 li br {
display: none;
}
.sevice_list03 li:not(:last-child) {
margin: 0 20px 0 0;
}
.sevice_list03 li span {
display: block;
padding: 34px 34px 0;
box-sizing: border-box;
height: 288px;
}
.sevice_list03 li:first-child span {
background: url(../images/service_image07.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list03 li:nth-child(2) span {
background: url(../images/service_image09.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list03 li:nth-child(3) span {
background: url(../images/service_image10.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list03 li:nth-child(4) span {
background: url(../images/service_image11.jpg) no-repeat;
background-size: 200px 150px;
background-position: center bottom;
}
.sevice_list03 li a {
color: #2680af;
padding: 17px 34px;
}
.sevice_list03 li a:hover {
background: #2680af;
color: #fff;
}
.sevice_list03 li a:hover:before {
background: #fff;
right: 10px;
}
.sevice_list03 li a:hover:after {
background: #fff;
right: 12px;
}
/* ::::::::: 診療案内×2 ::::::::::: */
.sevice_list04 {
background: #d0e4f0;
padding: 70px 0;
overflow: hidden;
}
.sevice_list04 ul {
width: 1170px;
margin: 0 auto;
padding: 2px 0;
}
.sevice_list04 li {
width: 575px;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list04 li:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
}
.sevice_list04 li:hover a:before {
right: 10px;
}
.sevice_list04 li:hover a:after {
right: 12px;
}
.sevice_list04 li:not(:nth-child(2n)) {
margin: 0 20px 0 0;
}
.sevice_list04 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.35em;
font-weight: normal;
}
.sevice_list04 li a {
color: #2680af;
padding: 17px 50px 17px 140px
}
.sevice_list04 li:first-child a {
background: url(../images/icon05.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
.sevice_list04 li:nth-child(2) a {
background: url(../images/icon06.png) no-repeat;
background-size: 70px auto;
background-position: 25px center;
}
/* :::::::::: 当クリニックの特徴 :::::::::: */
.features {
background: #fcfbf8;
}
.features h3 {
text-align: center;
background-color: #fff;
padding: 30px 0;
position: relative;
}
.features h3:before {
content: "Features";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 0.9em;
margin: 0 0 5px;
}
.features h3:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: #fff;
position: absolute;
right: 0;
bottom: -10px;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.features ul {
width: 1170px;
margin: 0 auto;
overflow: hidden;
padding: 100px 0;
}
.features li {
width: 575px;
height: 136px;
float: left;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
font-size: 2.2em;
box-sizing: border-box;
margin: 0 20px 20px 0;
}
.features li:before {
display: block;
font-family: 'Allura', cursive;
color: #2d2d2d;
font-size: 0.9em;
margin: 0 0 5px;
}
.features.philosophy h3:before {
content: "philosophy";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 0.9em;
margin: 0 0 5px;
}
.features li:first-child:before {
content: "Feature 01";
font-size: 1.1em;
}
.features li:nth-child(2):before {
content: "Feature 02";
}
.features li:nth-child(3):before {
content: "Feature 03";
}
.features li:nth-child(4):before {
content: "Feature 04";
}
.features li:nth-child(5):before {
content: "Feature 05";
}
.features li:nth-child(2n) {
margin: 0 0 20px;
}
.features li:last-child {
margin: 0 20px 0 0;
}
.features li:first-child {
font-size: 1.8em;
line-height: 1.7em;
background: url(../images/feature_image01.jpg) no-repeat;
background-size: 136px auto;
padding: 6px 0 0 176px;
}
.features li:nth-child(2) {
background: url(../images/feature_image02.jpg) no-repeat;
background-size: 136px auto;
padding: 40px 0 0 176px;
}
.features li:nth-child(3) {
background: url(../images/feature_image03.jpg) no-repeat;
background-size: 136px auto;
padding: 40px 0 0 176px;
}
.features li:nth-child(4) {
background: url(../images/feature_image04.jpg) no-repeat;
background-size: 136px auto;
padding: 40px 0 0 176px;
}
.features li:nth-child(5) {
background: url(../images/feature_image05.jpg) no-repeat;
background-size: 136px auto;
padding: 40px 0 0 176px;
}
/* :::::::::: お知らせ :::::::::: */
.notice h3 {
background: #f4f8fb;
text-align: center;
color: #2680af;
padding: 30px 0;
position: relative;
}
.notice h3:before {
content: "News";
display: block;
font-family: 'Allura', cursive;
font-size: 0.9em;
color: #2d2d2d;
margin: 0 0 5px;
}
.notice h3:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: #f4f8fb;
position: absolute;
right: 0;
bottom: -10px;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.notice dl {
width: 770px;
margin: 0 auto;
padding: 70px 0;
}
.notice dt {
display: none;
line-height: 2.2em;
}
.notice dd {
border-bottom: 1px solid #2680af;
line-height: 2.2em;
padding: 0 0 34px;
}
.notice dd:not(:last-child) {
margin: 0 0 34px;
}
/* :::::::::: クリニック概要 :::::::::: */
.clinic {
overflow: hidden;
}
.clinic h3 {
text-align: center;
background: #fcfbf8;
padding: 30px 0;
position: relative;
}
.clinic h3:before {
content: "Info";
display: block;
font-family: 'Allura', cursive;
font-size: 0.9em;
color: #bf8c00;
margin: 0 0 5px;
}
.clinic h3:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: #fcfbf8;
position: absolute;
right: 0;
bottom: -10px;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.clinic_inner {
width: 50%;
float: left;
box-sizing: border-box;
padding: 50px;
}
.clinic_inner p {
width: 250px;
height: 48px;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
margin: 0 0 20px;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
.clinic_inner ul {
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding: 20px 0;
}
.clinic_inner li:first-child {
margin: 0 0 20px;
}
.clinic_inner li:last-child {
width: 50%;
background: url(../images/icon_phone2.png) no-repeat;
background-size: 10px auto;
background-position: 20px center;
background-color: #bf8c00;
color: #fff;
padding: 15px 20px 15px 40px;
}
.clinic_inner dl {
border-bottom: 1px solid #eaeaea;
padding: 20px 0;
margin: 0 0 20px;
}
.clinic_inner dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 10px;
}
.clinic_inner dd {
line-height: 2.2em;
}
.clinic_inner table {
color: #bf8c00;
width: 100%;
}
.clinic_inner caption {
caption-side: bottom;
text-align: left;
padding: 10px 0;
border-bottom: 1px solid #eaeaea;
}
.clinic_inner th {
border: 1px solid #bf8c00;
padding: 10px;
font-weight: normal;
}
.clinic_inner td {
border: 1px solid #bf8c00;
text-align: center;
padding: 10px;
}
th.hours, td.hours {
width: 30%;
text-align: left;
}
td.saturaday_pm {
background: #bf8c00;
color: #fff;
}
.clinic .map {
width: 50%;
height: 654px;
float: right;
}
.clinic .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* =======================================================================

下層

======================================================================= */
/* -----------------------------------------------------------------------
共通
----------------------------------------------------------------------- */
.subpage section {
overflow: hidden;
clear: both;
}
.subpage article > section {
width: 1200px;
margin: 0 auto 50px;
}
.subpage article > section > section:not(:last-child) {
margin: 0 auto 50px;
}
.subpage h2 {
text-align: center;
font-size: 2.6em;
color: #bf8c00;
line-height: 1.8em;
padding: 30px 0 30px;
}
.subpage h3 {
font-size: 2.4em;
margin: 0 0 25px;
}
.subpage h4 {
font-size: 2em;
margin: 0 0 25px;
}
.subpage h5 {
font-size: 1.8em;
}
.subpage main p, .subpage main li {
line-height: 2.2em;
}
.subpage article > section > section > p {
margin: 0 0 25px;
}
.border_box {
box-sizing: border-box;
padding: 2%;
border: 1px solid #bf8c00;
margin: 20px 0 25px;
}
.link_btn a {
display: inline-block;
border: 1px solid #bf8c00;
color: #bf8c00;
padding: 10px 20px;
}
.text_link {
color: #bf8c00;
text-decoration: underline;
font-weight: bold;
}
/* -----------------------------------------------------------------------
list
----------------------------------------------------------------------- */
.normal_list {
padding: 2%;
}
.normal_list li:not(:last-child) {
margin: 0 0 10px;
}
.normal_list li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #bf8c00;
margin: 0 10px 0 0;
}
.subpage main dt {
color: #bf8c00;
margin: 0 0 5px;
}
.subpage main dd {
padding: 0 0 15px;
margin: 0 0 15px;
}
/* -----------------------------------------------------------------------
image
----------------------------------------------------------------------- */
.imageright {
display: block;
max-width: 400px;
float: right;
margin: 0 0 50px 50px;
}
.figureright {
display: block;
width: 400px;
float: right;
margin: 0 0 50px 50px;
}
.figureright img {
width: 100%;
margin: 0 0 2%;
}
.imageleft {
display: block;
width: 400px;
float: left;
margin: 0 50px 50px 0;
}
.case {
background-color: #f7f7f5;
box-sizing: border-box;
padding: 3% 5%;
text-align: center;
margin: 0 0 25px;
clear: both;
}
.case figcaption {
text-align: left;
}
.case figure {
display: inline-block;
width: 25%;
margin: 0 3.0em 2.0em 0;
position: relative;
vertical-align: top;
}
.case figure img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
.case figure.img1 {
display: inline-block;
width: 75%;
margin: 0 3.0em 2.0em 0;
position: relative;
vertical-align: top;
}
.case figure.img1 img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
/*.case figure:nth-child(3n),
.case figure:last-child {
margin: 0;
}*/
.case figure:not(:first-child):after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 12px;
border-color: transparent transparent transparent #bf8c00;
position: absolute;
top: 1.0rem;
left: -2.2em;
margin: auto;
}
.case.not figure:not(:first-child):after {
border: none;
}
.case iframe {
display: block;
border: none;
width: 400px;
height: 225px;
margin: auto;
}
.symptom {
box-sizing: border-box;
padding: 2%;
text-align: center;
margin: 0 0 10px;
}
.symptom figcaption {
text-align: left;
}
.symptom figure {
display: inline-block;
width: 20%;
margin: 0 4.5% 0 0;
position: relative;
vertical-align: top;
}
.symptom figure img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
.symptom figure:nth-child(3n) {
margin: 0;
}
/* -----------------------------------------------------------------------
douga.html
----------------------------------------------------------------------- */
.movie iframe {
width: 600px;
height: 450px;
border: 0;
}
.movie2 iframe {
width: 1000px;
height: 640px;
border: 0;
}
/* -----------------------------------------------------------------------
clinic.html
----------------------------------------------------------------------- */
.equipment {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.equipment figure {
width: 31%;
float: left;
margin: 0 3.5% 3.5% 0;
}
.equipment figure img {
width: 100%;
margin: 0 0 10px;
}
.equipment figure:nth-child(3n + 1) {
margin: 0 0 3.5%;
}
/* -----------------------------------------------------------------------
chiryo.html
----------------------------------------------------------------------- */
.chiryo article > section > section {
width: 32%;
float: left;
clear: none;
margin: 0 2% 2% 0 !important;
}
.chiryo article > section > section:nth-child(3n + 1) {
margin: 0 0 2% !important;
}
.chiryo article > section > section img {
width: 100%;
margin: 0 0 30px;
}
/* -----------------------------------------------------------------------
access.html
----------------------------------------------------------------------- */
.access table {
width: 100%;
color: #bf8c00;
}
.access table caption {
padding: 15px 0 0;
caption-side: bottom;
text-align: left;
}
.access table th {
font-weight: normal;
border: 1px solid #bf8c00;
padding: 15px;
}
.access table td {
text-align: center;
border: 1px solid #bf8c00;
padding: 15px;
}
.access .hours {
text-align: left;
}
.access dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 10px;
}
.access dd {
border-bottom: 1px solid #eaeaea;
}
.access .map {
width: 100%;
height: 800px;
}
.access .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* -----------------------------------------------------------------------
implant.html
----------------------------------------------------------------------- */
.implantimage {
box-sizing: border-box;
text-align: center;
margin: 0 0 25px;
clear: both;
overflow: hidden;
}
.implantimage img {
float: none;
display: inline-block;
margin: 0;
width: 30%;
}
.implantimage img:not(:last-child) {
margin: 0 2% 0 0;
}
}
@media screen and (min-width:641px) and (max-width:1024px) {
/* :::::::::: フォント :::::::::: */
p, li, dt, dd, th, td, caption, figcaption {
-webkit-text-size-adjust: none;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.4vw;
}
/* -----------------------------------------------------------------------
構造
----------------------------------------------------------------------- */
html {
overflow: auto;
}
body {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2d2d2d;
overflow: hidden;
}
header {
width: 95%;
margin: 0 auto;
position: relative;
overflow: hidden;
padding: 2% 0;
}
nav {
border-top: 1px solid #eaeaea;
}
.mainVisual {
background-image: url(../images/keyv.jpg) ;
background-repeat: no-repeat;
background-size: 95% auto;
background-position: top center;
background-color: #f7f7f5;
height: 50vw;
box-sizing: border-box;
padding: 17% 0 0;
}
main {}
/* -----------------------------------------------------------------------
見出し
----------------------------------------------------------------------- */
h1 {
width: 20%;
height: 3.7vw;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
position: absolute;
right: 0;
left: 0;
margin: auto;
}
h1 a {
display: block;
width: 100%;
height: 3.7vw;
}
.h2index {
width: 33%;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.85);
text-align: center;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 2.2vw;
color: #bf8c00;
line-height: 1.8em;
box-sizing: border-box;
padding: 3% 0;
}
h3 {
font-size: 2.2vw;
}
h4 {
font-size: 3vw;
line-height: 1.5em;
}
h5 {}
h6 {}
.midashi {
font-weight: bold;
font-size: .8em !important;
margin-bottom: 1.0em;
}
.midashi2 {
font-size: 1.0em !important;
}
.mb_mt10{
    margin:10px auto 10px;
}
/* =======================================================================

全体

======================================================================= */
/* -----------------------------------------------------------------------
header
----------------------------------------------------------------------- */
.h_address {
float: left;
font-size: 1.3vw;
}
.h_phone {
float: right;
width: 35%;
font-size: 1.7vw;
color: #bf8c00;
font-weight: bold;
text-align: right;
}
.h_phone_inner {
font-size: 1.3vw;
color: #2d2d2d;
font-weight: normal;
}
.h_phone_inner:after {
content: "";
display: inline-block;
width: 3%;
height: 1.4vw;
background: url(../images/icon_phone.png) no-repeat;
background-size: auto 100%;
margin: 0 0.6vw;
}
.btn_rsv {
display: inline-block;
text-align: center;
background: #df8b00;
color: #fff;
font-size: .8em;
padding: 0 5.5em;
}
/* :::::::::: nav :::::::::: */
nav ul {
overflow: hidden;
text-align: center;
}
nav li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.5vw;
display: inline-block;
}
nav li:not(:nth-child(6)) {
margin: 0 2.5% 0 0;
}
nav li a {
display: block;
padding: 12% 0 9%;
}
nav li a:after {
display: block;
color: #bf8c00;
font-size: 1.3vw;
font-family: 'Allura', cursive;
text-align: center;
margin: 0.5vw 0 0;
}
.nav01 a:after {
content: "Home";
}
.nav02 a:after {
content: "Doctor";
}
.nav03 a:after {
content: "About";
}
.nav04 a:after {
content: "Services";
}
.nav05 a:after {
content: "Clinic";
}
.nav06 a:after {
content: "Hours / Access";
}
.nav07 a:after {
content: "Endodontics";
}
.drawer-hamburger, .closeMenu {
display: none !important;
}
/* :::::::::: key visual :::::::::: */
/* -----------------------------------------------------------------------
footer
----------------------------------------------------------------------- */
footer {
text-align: center;
color: #bf8c00;
}
.footer_lnk{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 6rem auto 0;
    gap: 0.6rem;
}
.footer_lnk li::after{
    content: "｜";
    display: inline-block;
    margin-left: 0.6rem;
    color: #eaeaea;
}
.footer_lnk li:first-of-type::before{
    content: "｜";
    display: inline-block;
    margin-right: 0.6rem;
    color: #eaeaea;
}
.footer_lnk li a:hover{
    text-decoration: underline;
}
.footer_lnk li a::after{
    content: none;
}
footer p {
font-size: 1.2vw;
padding: 3% 0;
}
/* =======================================================================

個別

======================================================================= */
/* -----------------------------------------------------------------------
index.html
----------------------------------------------------------------------- */
/* :::::::::: ごあいさつ :::::::::: */
.greetings {
width: 73%;
margin: 0 auto;
overflow: hidden;
padding: 6% 0;
}
.greetings section {
width: 64%;
float: right;
}
.greetings h3 {
font-size: 3.2vw;
color: #bf8c00;
margin: 0 0 3%;
}
.greetings p {
margin: 0 0 3%;
line-height: 2.2em;
}
.greetings p:last-child {
margin: 0;
}
.doctor_name {
text-align: right;
}
.greetings img {
width: 30%;
float: left;
}
/* :::::::::: 新型コロナウィルス感染対策 :::::::::: */
.text_box_o {
width: 95%;
max-width: 700px;
margin: 0 auto 3rem;
padding: 1.5rem;
border: solid 3px #df8b00;
border-radius: 0.6rem;
}
.text_box_o span {
color: #df8b00;
font-weight: bold;
}
.text_r {
text-align: right;
}
/* :::::::::: メディア掲載・動画ページ・歯内療法 :::::::::: */
.greetings_link {
background: #fbfbfa;
padding: 6% 0;
}
.greetings_link ul {
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.greetings_link li {
width: 32%;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.9vw;
box-sizing: border-box;
line-height: 1.8em;
}
.greetings_link li br {
display: none;
}
.greetings_link li span {
display: block;
box-sizing: border-box;
height: 25vw;
padding: 7%;
}
.greetings_link li:first-child span {
background: url(../images/service_image01.jpg) no-repeat;
background-size: 80% auto;
background-position: center bottom;
}
.greetings_link li:nth-child(2) span {
background: url(../images/service_image02.jpg) no-repeat;
background-size: 80% auto;
background-position: center bottom;
}
.greetings_link li:nth-child(3) span {
background: url(../images/service_image03.jpg) no-repeat;
background-size: 80% auto;
background-position: center bottom;
}
.greetings_link li:not(:last-child) {
margin: 0 2% 0 0;
}
.greetings_link li a {
display: block;
font-weight: bold;
font-size: 0.7em;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
position: relative;
padding: 7%;
}
.greetings_link li a:before {
content: "";
display: block;
width: 3.4vw;
height: 1px;
right: 12%;
bottom: 2.5vw;
position: absolute;
background: #bf8c00;
}
.greetings_link li a:after {
content: "";
display: block;
width: 1px;
height: 1vw;
right: 12.5%;
bottom: 2.4vw;
position: absolute;
transform: rotate(-40deg);
background: #bf8c00;
}
/* :::::::::: 診療内容 :::::::::: */
.service {
background: #f8f8f8;
}
.service h3 {
text-align: center;
background: #fff;
padding: 3% 0;
position: relative;
}
.service h3:before {
content: "Services";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 1.4vw;
margin: 0 0 0.5%;
}
.service h3:after {
content: "";
display: block;
width: 2vw;
height: 2vw;
background: #fff;
position: absolute;
right: 0;
bottom: -1vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.service li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.8vw;
box-sizing: border-box;
line-height: 1.8em;
}
.service li img {
display: block;
}
.service li a {
display: block;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.3vw;
font-weight: bold;
position: relative;
}
.service li a:before {
content: "";
display: block;
width: 3.4vw;
height: 1px;
right: 12%;
bottom: 2.5vw;
position: absolute;
}
.service li a:after {
content: "";
display: block;
width: 1px;
height: 1vw;
right: 12.5%;
bottom: 2.4vw;
position: absolute;
transform: rotate(-40deg);
}
.sevice_list01 a:before, .sevice_list01 a:after, .sevice_list02 a:before, .sevice_list02 a:after {
background: #bf8c00;
}
.sevice_list03 a:before, .sevice_list03 a:after, .sevice_list04 a:before, .sevice_list04 a:after {
background: #2680af;
}
/* :::::::::: できうる限り歯を残す治療 :::::::::: */
.service01 {
margin: 0 auto;
box-sizing: border-box;
padding: 10% 0 0;
background: url(../images/service01_bg.jpg) no-repeat;
background-size: cover;
background-position: center top;
}
.service01 h4 {
width: 90%;
color: #bf8c00;
margin: 0 auto 20px;
}
.service01 > p {
width: 90%;
box-sizing: border-box;
padding: 0 45% 0 0;
line-height: 2.2em;
margin: 0 auto 4%;
}
/* ::::::::: 診療案内×3 ::::::::::: */
.sevice_list01 {
width: 95%;
overflow: hidden;
margin: 0 0 5% 5%;
}
.sevice_list01 li {
width: 24%;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #bf8c00;
margin: 0 1% 1% 0;
}
.sevice_list01 li br {
display: none;
}
.sevice_list01 li span {
display: block;
padding: 8% 12% 0;
box-sizing: border-box;
height: 22.8vw;
}
.sevice_list01 li:first-child span {
background: url(../images/service_image04.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list01 li:nth-child(2) span {
background: url(../images/service_image05.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list01 li:nth-child(3) span {
background: url(../images/service_image12.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list01 li:nth-child(4) span {
background: url(../images/service_image06.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list01 li a {
color: #bf8c00;
padding: 6% 12%;
}
/* ::::::::: 診療案内×4 ::::::::::: */
.sevice_list02 {
background: #fff;
padding: 7% 0;
overflow: hidden;
}
.sevice_list02 ul {
width: 90%;
margin: 2px auto;
padding: 2px 0;
}
.sevice_list02 li {
width: 49%;
float: left;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list02 li:not(:nth-child(2n)) {
margin: 0 2% 2% 0;
}
.sevice_list02 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.35em;
font-weight: normal;
}
.sevice_list02 li a {
color: #bf8c00;
padding: 6% 10% 6% 22%;
}
.sevice_list02 li:first-child a {
background: url(../images/icon01.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
.sevice_list02 li:nth-child(2) a {
background: url(../images/icon07.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
.sevice_list02 li:nth-child(3) a {
background: url(../images/icon02.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
.sevice_list02 li:nth-child(4) a {
background: url(../images/icon03.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
/* :::::::::: 歯をきれいにすることで口元を美しく魅せる :::::::::: */
.service02 {
margin: 0 auto;
box-sizing: border-box;
padding: 5% 0 5%;
background: url(../images/service02_bg.jpg) no-repeat;
background-size: cover;
background-position: center top;
}
.service02 h4 {
width: 90%;
color: #2680af;
margin: 0 auto 20px;
box-sizing: border-box;
padding: 0 0 0 46%;
}
.service02 > p {
width: 90%;
box-sizing: border-box;
padding: 0 0 0 46%;
line-height: 2.2em;
margin: 0 auto 4%;
}
/* ::::::::: 診療案内×3 ::::::::::: */
.sevice_list03 {
overflow: hidden;
width: 72%;
margin: 0 0 0 23%;
box-sizing: border-box;
}
.sevice_list03 li {
width: 32%;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #2680af;
}
.sevice_list03 li br {
display: none;
}
.sevice_list03 li:not(:last-child) {
margin: 0 2% 0 0;
}
.sevice_list03 li span {
display: block;
padding: 8% 12% 0;
box-sizing: border-box;
height: 22.8vw;
}
.sevice_list03 li:first-child span {
background: url(../images/service_image07.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list03 li:nth-child(2) span {
background: url(../images/service_image08.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list03 li:nth-child(3) span {
background: url(../images/service_image09.jpg) no-repeat;
background-size: 70% auto;
background-position: center bottom;
}
.sevice_list03 li a {
color: #2680af;
padding: 6% 12%;
}
/* ::::::::: 診療案内×2 ::::::::::: */
.sevice_list04 {
background: #d0e4f0;
padding: 7% 0;
overflow: hidden;
}
.sevice_list04 ul {
width: 90%;
margin: 0 auto;
padding: 2px 0;
}
.sevice_list04 li {
width: 49%;
float: left;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list04 li:not(:nth-child(2n)) {
margin: 0 2% 0 0;
}
.sevice_list04 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.35em;
font-weight: normal;
}
.sevice_list04 li a {
color: #2680af;
padding: 6% 10% 6% 22%;
}
.sevice_list04 li:first-child a {
background: url(../images/icon05.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
.sevice_list04 li:nth-child(2) a {
background: url(../images/icon06.png) no-repeat;
background-size: 14% auto;
background-position: 5% center;
}
/* :::::::::: 当クリニックの特徴 :::::::::: */
.features {
background: #fcfbf8;
}
.features h3 {
text-align: center;
background-color: #fff;
padding: 3% 0;
position: relative;
}
.features h3:before {
content: "Features";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 1.4vw;
margin: 0 0 0.5%;
}
.features h3:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: #fff;
position: absolute;
right: 0;
bottom: -10px;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.features ul {
width: 90%;
margin: 0 auto;
overflow: hidden;
padding: 100px 0;
}
.features li {
width: 49%;
height: 11vw;
float: left;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
font-size: 1.7vw;
box-sizing: border-box;
margin: 0 2% 2% 0;
}
.features li:before {
display: block;
font-family: 'Allura', cursive;
color: #2d2d2d;
font-size: 1.4vw;
margin: 0 0 1%
}
.features li:first-child:before {
content: "Feature 01";
font-size: 1.1em;
}
.features li:nth-child(2):before {
content: "Feature 02";
}
.features li:nth-child(3):before {
content: "Feature 03";
}
.features li:nth-child(4):before {
content: "Feature 04";
}
.features li:nth-child(5):before {
content: "Feature 05";
}
.features li:nth-child(2n) {
margin: 0 0 2%;
}
.features li:last-child {
margin: 0 2% 0 0;
}
.features li:first-child {
font-size: 1.5vw;
line-height: 1.7em;
background: url(../images/feature_image01.jpg) no-repeat;
background-size: 25% auto;
padding: 0.6% 0 0 16%;
}
.features li:nth-child(2) {
background: url(../images/feature_image02.jpg) no-repeat;
background-size: 25% auto;
padding: 0.6% 0 0 16%;
}
.features li:nth-child(3) {
background: url(../images/feature_image03.jpg) no-repeat;
background-size: 25% auto;
padding: 0.6% 0 0 16%;
}
.features li:nth-child(4) {
background: url(../images/feature_image04.jpg) no-repeat;
background-size: 25% auto;
padding: 0.6% 0 0 16%;
}
.features li:nth-child(5) {
background: url(../images/feature_image05.jpg) no-repeat;
background-size: 25% auto;
padding: 0.6% 0 0 16%;
}
/* :::::::::: お知らせ :::::::::: */
.notice h3 {
background: #f4f8fb;
text-align: center;
color: #2680af;
padding: 3% 0;
position: relative;
}
.notice h3:before {
content: "News";
display: block;
font-family: 'Allura', cursive;
font-size: 1.4vw;
color: #2d2d2d;
margin: 0 0 0.5%;
}
.notice h3:after {
content: "";
display: block;
width: 2vw;
height: 2vw;
background: #f4f8fb;
position: absolute;
right: 0;
bottom: -1vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.notice dl {
width: 77%;
margin: 0 auto;
padding: 7% 0;
}
.notice dt {
display: none;
line-height: 2.2em;
}
.notice dd {
border-bottom: 1px solid #2680af;
line-height: 2.2em;
padding: 0 0 3.4%;
}
.notice dd:not(:last-child) {
margin: 0 0 3.4%;
}
/* :::::::::: クリニック概要 :::::::::: */
.clinic {
overflow: hidden;
}
.clinic h3 {
text-align: center;
background: #fcfbf8;
padding: 3% 0;
position: relative;
}
.clinic h3:before {
content: "Info";
display: block;
font-family: 'Allura', cursive;
font-size: 1.4vw;
color: #bf8c00;
margin: 0 0 0.5%;
}
.clinic h3:after {
content: "";
display: block;
width: 2vw;
height: 2vw;
background: #fcfbf8;
position: absolute;
right: 0;
bottom: -1vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.clinic_inner {
width: 50%;
float: left;
box-sizing: border-box;
padding: 5%;
}
.clinic_inner p {
width: 50%;
height: 4.8vw;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
margin: 0 0 2%;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
.clinic_inner ul {
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding: 4% 0;
}
.clinic_inner li:first-child {
margin: 0 0 4%;
}
.clinic_inner li:last-child {
width: 50%;
background: url(../images/icon_phone2.png) no-repeat;
background-size: 3% auto;
background-position: 8% center;
background-color: #bf8c00;
color: #fff;
padding: 3% 2% 3% 8%;
}
.clinic_inner dl {
border-bottom: 1px solid #eaeaea;
padding: 2% 0;
margin: 0 0 2%;
}
.clinic_inner dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 1%;
}
.clinic_inner dd {
line-height: 2.2em;
}
.clinic_inner table {
color: #bf8c00;
width: 100%;
}
.clinic_inner caption {
caption-side: bottom;
text-align: left;
padding: 2% 0;
border-bottom: 1px solid #eaeaea;
}
.clinic_inner th {
border: 1px solid #bf8c00;
padding: 2%;
font-weight: normal;
}
.clinic_inner td {
border: 1px solid #bf8c00;
text-align: center;
padding: 2%;
}
th.hours, td.hours {
width: 30%;
text-align: left;
}
td.saturaday_pm {
background: #bf8c00;
color: #fff;
}
.clinic .map {
width: 50%;
height: 52vw;
float: right;
}
.clinic .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* =======================================================================

下層

======================================================================= */
/* -----------------------------------------------------------------------
共通
----------------------------------------------------------------------- */
.subpage section {
overflow: hidden;
clear: both;
}
.subpage article > section {
width: 90%;
margin: 0 auto 2%;
}
.subpage article > section > section:not(:last-child) {
margin: 3% auto 5%;
}
.subpage h2 {
text-align: center;
font-size: 2.2vw;
color: #bf8c00;
line-height: 1.8em;
padding: 5% 0;
}
.subpage h3 {
font-size: 1.8vw;
margin: 0 0 2.5%;
}
.subpage h4 {
font-size: 1.7vw;
margin: 0 0 2.5%;
}
.subpage h5 {
font-size: 1.6vw;
}
.subpage main p, .subpage main li {
font-size: 1.4vw;
line-height: 2.2em;
}
.subpage article > section > section > p {
margin: 0 0 2.5%;
}
.border_box {
box-sizing: border-box;
padding: 3%;
border: 1px solid #bf8c00;
margin: 0 0 2.5%;
}
.link_btn a {
display: inline-block;
border: 1px solid #bf8c00;
color: #bf8c00;
padding: 1% 3%;
}
.text_link {
color: #bf8c00;
text-decoration: underline;
font-weight: bold;
}
/* -----------------------------------------------------------------------
list
----------------------------------------------------------------------- */
.normal_list {
padding: 2%;
}
.normal_list li:not(:last-child) {
margin: 0 0 1%;
}
.normal_list li:before {
content: "";
display: inline-block;
width: 1vw;
height: 1vw;
border-radius: 50%;
background: #bf8c00;
margin: 0 1% 0 0;
}
.subpage main dt {
color: #bf8c00;
margin: 0 0 0.5%
}
.subpage main dd {
padding: 0 0 1.5%;
margin: 0 0 1.5%
}
/* -----------------------------------------------------------------------
image
----------------------------------------------------------------------- */
.imageright {
display: block;
max-width: 40%;
float: right;
margin: 0 0 5% 5%;
}
.figureright {
display: block;
width: 40%;
float: right;
margin: 0 0 5% 5%;
}
.figureright img {
width: 100%;
margin: 0 0 2%;
}
.imageleft {
display: block;
width: 40%;
float: left;
margin: 0 5% 5% 0;
}
.case {
background-color: #f7f7f5;
box-sizing: border-box;
padding: 3% 5%;
text-align: center;
margin: 0 0 2.5%;
clear: both;
}
.case figcaption {
text-align: left;
}
.case figure {
display: inline-block;
width: 25%;
margin: 0 2.0em 0 0;
position: relative;
vertical-align: top;
}
.case figure img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
/*.case figure:nth-child(3n),
.case figure:last-child {
margin: 0;
}*/
.case figure:not(:first-child):after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0.7vw 0 0.7vw 1vw;
border-color: transparent transparent transparent #bf8c00;
position: absolute;
top: 1.0rem;
left: -1.4em;
}
.case.not figure:not(:first-child):after {
border: none;
}
.case iframe {
display: block;
border: none;
width: 300px;
height: 169px;
margin: auto;
}
.symptom {
box-sizing: border-box;
padding: 2%;
text-align: center;
margin: 0 0 2.5%;
}
.symptom figcaption {
text-align: left;
}
.symptom figure {
display: inline-block;
width: 20%;
margin: 0 4.5% 0 0;
position: relative;
vertical-align: top;
}
.symptom figure img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
.symptom figure:nth-child(3n) {
margin: 0;
}
/* -----------------------------------------------------------------------
douga.html
----------------------------------------------------------------------- */
.movie iframe {
width: 100%;
height: 50vw;
border: 0;
}
.movie2 iframe {
width: 100%;
height: 50vw;
border: 0;
}
/* -----------------------------------------------------------------------
clinic.html
----------------------------------------------------------------------- */
.equipment {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.equipment figure {
width: 48.5%;
float: left;
margin: 0 3% 3% 0;
}
.equipment figure img {
width: 100%;
margin: 0 0 1%;
}
.equipment figure:nth-child(2n + 1) {
margin: 0 0 3%;
}
/* -----------------------------------------------------------------------
chiryo.html
----------------------------------------------------------------------- */
.chiryo article > section > section {
width: 48%;
float: left;
clear: none;
margin: 0 4% 4% 0 !important;
}
.chiryo article > section > section:nth-child(2n + 1) {
margin: 0 0 4% !important;
}
.chiryo article > section > section img {
width: 100%;
margin: 0 0 3%;
}
/* -----------------------------------------------------------------------
access.html
----------------------------------------------------------------------- */
.access table {
width: 100%;
color: #bf8c00;
}
.access table caption {
padding: 1.5% 0 0;
caption-side: bottom;
text-align: left;
}
.access table th {
font-weight: normal;
border: 1px solid #bf8c00;
padding: 1.5%;
}
.access table td {
text-align: center;
border: 1px solid #bf8c00;
padding: 1.5%;
}
.access .hours {
text-align: left;
}
.access dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 1%;
}
.access dd {
border-bottom: 1px solid #eaeaea;
}
.access .map {
width: 100%;
height: 80vw;
}
.access .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* -----------------------------------------------------------------------
implant.html
----------------------------------------------------------------------- */
.implantimage {
box-sizing: border-box;
text-align: center;
margin: 0 0 2.5%;
clear: both;
overflow: hidden;
}
.implantimage img {
float: none;
display: inline-block;
margin: 0;
width: 30%;
}
.implantimage img:not(:last-child) {
margin: 0 2% 0 0;
}
}
@media screen and (max-width:640px) {
/* :::::::::: フォント :::::::::: */
p, li, dt, dd, th, td, caption, figcaption {
-webkit-text-size-adjust: none;
font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 3.65vw;
}
/* -----------------------------------------------------------------------
構造
----------------------------------------------------------------------- */
html {
overflow: auto;
}
body {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2d2d2d;
overflow: hidden;
position: relative;
}
header {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
padding: 6% 0;
}
nav {
border-top: 1px solid #eaeaea;
}
.mainVisual {
background-image: url(../images/keyv.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-color: #f7f7f5;
height: 114vw;
box-sizing: border-box;
padding: 37% 0 0
}
main {}
/* -----------------------------------------------------------------------
見出し
----------------------------------------------------------------------- */
h1 {
width: 64%;
height: 12vw;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
margin: 0 0 6% 5%;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
h1 a {
display: block;
width: 100%;
height: 12vw;
}
.h2index {
width: 82%;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.85);
text-align: center;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 4.85vw;
color: #bf8c00;
line-height: 2em;
box-sizing: border-box;
padding: 5% 0;
}
h3 {}
h4 {
font-size: 6vw;
line-height: 1.5em;
}
h5 {}
h6 {}
.midashi {
font-weight: bold;
font-size: .8em !important;
margin-bottom: 1.0em;
}
.midashi2 {
font-size: 1.0em !important;
}

.mb_mt10{
    margin:10px auto 10px;
}
/* =======================================================================

全体

======================================================================= */
/* -----------------------------------------------------------------------
header
----------------------------------------------------------------------- */
.h_address {
display: none;
}
header .phoneTapping {
display: block;
width: 90%;
padding: 0 0 3%;
margin: 0 auto;
font-size: 4vw;
color: #bf8c00;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #bf8c00;
}
.h_phone_inner {
font-weight: normal;
}
.h_phone_inner:after {
content: "";
display: inline-block;
width: 2vw;
height: 3.6vw;
background: url(../images/icon_phone.png) no-repeat;
background-size: 100% auto;
margin: 0 2vw;
}
.btn_rsv {
display: block;
text-align: center;
background: #df8b00;
color: #fff;
font-size: 1.2em;
width: 90%;
margin: auto;
}
/* :::::::::: nav :::::::::: */
nav {
height: 100vh;
box-sizing: border-box;
padding: 10%;
}
nav ul {
height: 100vh;
overflow: hidden;
text-align: center;
}
nav li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 4.4vw;
}
nav li a {
display: block;
padding: 5% 0 3%;
border-bottom: 1px solid #bf8c00;
}
nav li a:after {
display: block;
color: #bf8c00;
font-size: 4vw;
font-family: 'Allura', cursive;
text-align: center;
}
.nav01 a:after {
content: "Home";
}
.nav02 a:after {
content: "Doctor";
}
.nav03 a:after {
content: "About";
}
.nav04 a:after {
content: "Services";
}
.nav05 a:after {
content: "Clinic";
}
.nav06 a:after {
content: "Hours / Access";
}
.nav07 a:after {
content: "Endodontics";
}
.drawer-hamburger {
width: 15%;
height: 15vw;
border: 1px solid #bf8c00 !important;
position: absolute;
top: 5vw;
right: 5vw !important;
}
.drawer-hamburger-icon {
background: #bf8c00 !important;
height: 1px !important;
width: 40% !important;
margin: 0 auto !important;
top: -2vw;
}
.drawer-hamburger-icon:before {
background: #bf8c00 !important;
height: 1px !important;
top: -2.5vw !important;
}
.drawer-hamburger-icon:after {
background: #bf8c00 !important;
height: 1px !important;
top: 2.5vw !important;
}
.sr-only {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
clip: inherit !important;
color: #bf8c00;
box-sizing: border-box;
padding: 65% 0 0 !important;
}
.closeMenu {
display: block;
cursor: pointer;
padding: 5% 0;
}
/* :::::::::: key visual :::::::::: */
/* -----------------------------------------------------------------------
footer
----------------------------------------------------------------------- */
footer {
text-align: center;
color: #bf8c00;
}
.footer_lnk{
    margin: 3rem auto 0;
    width: 82%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 1px solid #eaeaea;
    padding-left: 1rem;
    text-align: left;
}

.footer_lnk li a::after{
    content: none;
}
footer p {
font-size: 3vw;
padding: 10% 0;
}
/* =======================================================================

個別

======================================================================= */
/* -----------------------------------------------------------------------
index.html
----------------------------------------------------------------------- */
/* :::::::::: ごあいさつ :::::::::: */
.greetings {
width: 82%;
margin: 0 auto;
overflow: hidden;
padding: 12% 0 0;
}
.greetings section {
width: 100%;
}
.greetings h3 {
font-size: 6vw;
text-align: center;
color: #bf8c00;
margin: 0 0 8%;
}
.greetings p {
margin: 0 0 6%;
line-height: 8.5vw;
}
.greetings p:last-child {
margin: 0;
}
.doctor_name {
text-align: right;
}
.greetings img {
width: 50%;
}
/* :::::::::: 新型コロナウィルス感染対策 :::::::::: */
.text_box_o {
width: 80%;
margin: 2rem auto;
padding: 1.5rem;
border: solid 3px #df8b00;
border-radius: 0.6rem;
}
.text_box_o span {
color: #df8b00;
font-weight: bold;
}
.text_r {
text-align: right;
}
/* :::::::::: メディア掲載・動画ページ・歯内療法 :::::::::: */
.greetings_link {
background: #fbfbfa;
padding: 10% 0;
}
.greetings_link ul {
overflow: hidden;
width: 82%;
margin: 0 auto;
}
.greetings_link li {
width: 100%;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 4.5vw;
box-sizing: border-box;
line-height: 1.8em;
}
.greetings_link li:not(:last-child) {
margin: 0 0 4%;
}
.greetings_link li span {
display: block;
box-sizing: border-box;
padding: 6% 6% 0;
height: 26vw;
}
.greetings_link li:first-child span {
background: url(../images/service_image01.jpg) no-repeat;
background-size: 35% auto;
background-position: 96% 1.6vw;
}
.greetings_link li:nth-child(2) span {
background: url(../images/service_image02.jpg) no-repeat;
background-size: 22% auto;
background-position: 96% 1.6vw;
}
.greetings_link li:nth-child(3) span {
background: url(../images/service_image03.jpg) no-repeat;
background-size: 35% auto;
background-position: 96% 1.6vw;
}
.greetings_link li a {
display: block;
font-size: 3.8vw;
font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
padding: 4% 6%;
position: relative;
border-top: 1px solid #eaeaea;
}
.greetings_link li a:before {
content: "";
display: block;
width: 6%;
height: 1px;
right: 5.5%;
bottom: 6.2vw;
position: absolute;
background: #bf8c00;
}
.greetings_link li a:after {
content: "";
display: block;
width: 1px;
height: 2vw;
right: 6%;
bottom: 6vw;
position: absolute;
transform: rotate(-40deg);
background: #bf8c00;
}
/* :::::::::: 診療内容 :::::::::: */
.service {
background: #f8f8f8;
}
.service h3 {
text-align: center;
background: #fff;
padding: 10% 0;
position: relative;
font-size: 6vw;
}
.service h3:before {
content: "Services";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 4vw;
margin: 0 0 2%;
}
.service h3:after {
content: "";
display: block;
width: 4vw;
height: 4vw;
background: #fff;
position: absolute;
right: 0;
bottom: -2vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.service li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 4.4vw;
box-sizing: border-box;
line-height: 1.8em;
}
.service li img {
display: block;
}
.service li a {
display: block;
font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 0.75em;
font-weight: bold;
position: relative;
}
.service li a:before {
content: "";
display: block;
width: 6%;
height: 1px;
right: 5.5%;
bottom: 6.2vw;
position: absolute;
}
.service li a:after {
content: "";
display: block;
width: 1px;
height: 2vw;
right: 6%;
bottom: 6vw;
position: absolute;
transform: rotate(-40deg);
}
.sevice_list01 a:before, .sevice_list01 a:after, .sevice_list02 a:before, .sevice_list02 a:after {
background: #bf8c00;
}
.sevice_list03 a:before, .sevice_list03 a:after, .sevice_list04 a:before, .sevice_list04 a:after {
background: #2680af;
}
/* :::::::::: できうる限り歯を残す治療 :::::::::: */
.service01 {
margin: 0 auto;
box-sizing: border-box;
padding: 62% 0 10%;
background: url(../images/service01_bg.jpg) no-repeat;
background-size: 210%;
background-position: 74% top;
}
.service01 h4 {
width: 82%;
margin: 0 auto 4%;
color: #bf8c00;
}
.service01 > p {
width: 82%;
margin: 0 auto 4%;
box-sizing: border-box;
line-height: 2.2em;
}
/* ::::::::: 診療案内×3 ::::::::::: */
.sevice_list01 {
overflow: hidden;
width: 82%;
margin: 0 auto;
}
.sevice_list01 li {
width: 100%;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #bf8c00;
}
.sevice_list01 li:not(:last-child) {
margin: 0 0 4%;
}
.sevice_list01 li span {
display: block;
box-sizing: border-box;
padding: 6% 6% 0;
height: 33vw;
}
.sevice_list01 li:first-child span {
background: url(../images/service_image04.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list01 li:nth-child(2) span {
background: url(../images/service_image05.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list01 li:nth-child(3) span {
background: url(../images/service_image12.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list01 li:nth-child(4) span {
background: url(../images/service_image06.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list01 li a {
display: block;
font-size: 3.8vw;
font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
padding: 4% 6%;
position: relative;
border-top: 1px solid #eaeaea;
}
/* ::::::::: 診療案内×4 ::::::::::: */
.sevice_list02 {
background: #fff;
overflow: hidden;
padding: 10% 0;
}
.sevice_list02 ul {
width: 82%;
margin: 0 auto;
}
.sevice_list02 li {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list02 li:not(:last-child) {
margin: 0 0 4%;
}
.sevice_list02 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 4.4vw;
font-weight: normal;
}
.sevice_list02 li a {
color: #bf8c00;
padding: 7% 5% 7% 25%;
}
.sevice_list02 li:first-child a {
background: url(../images/icon01.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
.sevice_list02 li:nth-child(2) a {
background: url(../images/icon07.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
.sevice_list02 li:nth-child(3) a {
background: url(../images/icon02.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
.sevice_list02 li:nth-child(4) a {
background: url(../images/icon03.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
/* :::::::::: 歯をきれいにすることで口元を美しく魅せる :::::::::: */
.service02 {
margin: 0 auto;
box-sizing: border-box;
background: url(../images/service02_bg.jpg) no-repeat;
background-size: 185%;
background-color: #eef7fc;
padding: 10% 0;
background-position: 39% 40vw;
}
.service02 h4 {
width: 82%;
color: #2680af;
margin: 0 auto 4%;
box-sizing: border-box;
text-align: right;
}
.service02 > p {
width: 60%;
box-sizing: border-box;
line-height: 2.2em;
margin: 0 0 27% 32%;
}
/* ::::::::: 診療案内×3 ::::::::::: */
.sevice_list03 {
overflow: hidden;
width: 82%;
margin: 0 auto;
}
.sevice_list03 li {
width: 100%;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
color: #2680af;
}
.sevice_list03 li:not(:last-child) {
margin: 0 0 4%;
}
.sevice_list03 li span {
display: block;
box-sizing: border-box;
padding: 6% 6% 0;
height: 26vw;
}
.sevice_list03 li:first-child span {
background: url(../images/service_image07.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list03 li:nth-child(2) span {
background: url(../images/service_image09.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list03 li:nth-child(3) span {
background: url(../images/service_image10.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list03 li:nth-child(3) span {
background: url(../images/service_image11.jpg) no-repeat;
background-size: 45% auto;
background-position: 110% bottom;
}
.sevice_list03 li a {
display: block;
font-size: 3.8vw;
font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #2680af;
padding: 4% 6%;
position: relative;
border-top: 1px solid #eaeaea;
}
/* ::::::::: 診療案内×2 ::::::::::: */
.sevice_list04 {
background: #d0e4f0;
overflow: hidden;
padding: 10% 0;
}
.sevice_list04 ul {
width: 82%;
margin: 0 auto;
}
.sevice_list04 li {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
transition-duration: 0.3s;
}
.sevice_list04 li:not(:last-child) {
margin: 0 0 4%;
}
.sevice_list04 li span {
display: block;
color: #2d2d2d;
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
font-size: 1.35em;
font-weight: normal;
}
.sevice_list04 li a {
color: #2680af;
padding: 7% 5% 7% 25%;
}
.sevice_list04 li:first-child a {
background: url(../images/icon05.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
.sevice_list04 li:nth-child(2) a {
background: url(../images/icon06.png) no-repeat;
background-size: 12vw auto;
background-position: 6% center;
}
/* :::::::::: 当クリニックの特徴 :::::::::: */
.features {
background: #fcfbf8;
}
.features h3 {
text-align: center;
background: #fff;
padding: 10% 0;
position: relative;
font-size: 6vw;
}
.features h3:before {
content: "Features";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 4vw;
margin: 0 0 2%;
}
.features h3:after {
content: "";
display: block;
width: 4vw;
height: 4vw;
background: #fff;
position: absolute;
right: 0;
bottom: -2vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.features ul {
width: 82%;
margin: 0 auto;
overflow: hidden;
padding: 11% 0;
}
.features li {
font-family: 'SmartFontUI', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'sans-serif';
color: #bf8c00;
font-size: 4.4vw;
line-height: 7vw;
box-sizing: border-box;
padding: 0 0 0 30%;
height: 22vw;
}
.features li:not(:last-child) {
margin: 0 0 9%;
}
.features li:before {
display: block;
font-family: 'Allura', cursive;
color: #2d2d2d;
font-size: 4.2vw;
margin: 0 0 1%;
}
.features.philosophy h3:before {
content: "philosophy";
display: block;
font-family: 'Allura', cursive;
color: #bf8c00;
font-size: 4vw;
margin: 0 0 2%;
}
.philosophy .w1170 {
    margin:0 11%;
}
.features li:first-child:before {
content: "Feature 01";
font-size: 4.4vw;
}
.features li:nth-child(2):before {
content: "Feature 02";
}
.features li:nth-child(3):before {
content: "Feature 03";
}
.features li:nth-child(4):before {
content: "Feature 04";
}
.features li:nth-child(5):before {
content: "Feature 05";
}
.features li:first-child {
font-size: 3.2vw;
line-height: 1.7em;
background: url(../images/feature_image01.jpg) no-repeat;
background-size: 27% auto;
}
.features li:nth-child(2) {
background: url(../images/feature_image02.jpg) no-repeat;
background-size: 27% auto;
}
.features li:nth-child(3) {
background: url(../images/feature_image03.jpg) no-repeat;
background-size: 27% auto;
}
.features li:nth-child(4) {
background: url(../images/feature_image04.jpg) no-repeat;
background-size: 27% auto;
}
.features li:nth-child(5) {
background: url(../images/feature_image05.jpg) no-repeat;
background-size: 27% auto;
}
/* :::::::::: お知らせ :::::::::: */
.notice h3 {
background: #f4f8fb;
text-align: center;
color: #2680af;
padding: 10% 0;
position: relative;
font-size: 6vw;
}
.notice h3:before {
content: "Features";
display: block;
font-family: 'Allura', cursive;
color: #2d2d2d;
font-size: 4vw;
margin: 0 0 2%;
}
.notice h3:after {
content: "";
display: block;
width: 4vw;
height: 4vw;
background: #f4f8fb;
position: absolute;
right: 0;
bottom: -2vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.notice dl {
width: 82%;
margin: 0 auto;
padding: 11% 0;
}
.notice dt {
display: none;
line-height: 2.2em;
}
.notice dd {
border-bottom: 1px solid #2680af;
line-height: 2.2em;
padding: 0 0 7%;
}
.notice dd:not(:last-child) {
margin: 0 0 7%;
}
/* :::::::::: クリニック概要 :::::::::: */
.clinic {
overflow: hidden;
}
.clinic h3 {
text-align: center;
background: #fcfbf8;
padding: 10% 0;
position: relative;
font-size: 6vw;
margin: 0 0 10%;
}
.clinic h3:before {
content: "Info";
display: block;
font-family: 'Allura', cursive;
font-size: 4vw;
color: #bf8c00;
margin: 0 0 2%;
}
.clinic h3:after {
content: "";
display: block;
width: 4vw;
height: 4vw;
background: #fcfbf8;
position: absolute;
right: 0;
bottom: -2vw;
left: 0;
margin: auto;
transform: rotate(45deg);
}
.clinic_inner {
width: 82%;
margin: 0 auto;
box-sizing: border-box;
}
.clinic_inner p {
width: 70%;
height: 11vw;
background: url(../images/logo.svg) no-repeat;
background-size: 100% auto;
margin: 0 auto 8%;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
.clinic_inner ul {
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding: 8% 0;
}
.clinic_inner li:first-child {
margin: 0 0 4%;
}
.clinic_inner li .phoneTapping {
display: block;
width: 100%;
box-sizing: border-box;
background: url(../images/icon_phone2.png) no-repeat;
background-size: 2vw auto;
background-position: 7% center;
background-color: #bf8c00;
color: #fff;
padding: 5% 0 5% 12%;
}
.clinic_inner dl {
border-bottom: 1px solid #eaeaea;
padding: 8% 0;
margin: 0 0 8%;
}
.clinic_inner dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 4%;
}
.clinic_inner dd {
line-height: 4.3vw;
}
.clinic_inner table {
color: #bf8c00;
width: 100%;
}
.clinic_inner caption {
caption-side: bottom;
text-align: left;
padding: 4% 0;
border-bottom: 1px solid #eaeaea;
margin: 0 0 8%;
}
.clinic_inner th {
border: 1px solid #bf8c00;
padding: 2%;
font-weight: normal;
}
.clinic_inner td {
border: 1px solid #bf8c00;
text-align: center;
padding: 2%;
}
th.hours, td.hours {
width: 36%;
text-align: left;
}
td.saturaday_pm {
background: #bf8c00;
color: #fff;
}
.clinic .map {
width: 82%;
margin: 0 auto;
height: 84vw;
}
.clinic .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* =======================================================================

下層

======================================================================= */
/* -----------------------------------------------------------------------
共通
----------------------------------------------------------------------- */
.subpage section {
overflow: hidden;
clear: both;
}
.subpage article > section {
width: 90%;
margin: 0 auto 5%;
}
.subpage article > section > section:not(:last-child) {
margin: 0 auto 5%;
}
.subpage article > section > section > section:not(:last-child) {
margin: 0 auto 5%;
}
.subpage h2 {
text-align: center;
font-size: 5vw;
color: #bf8c00;
line-height: 1.8em;
padding: 5% 0;
}
.subpage h3 {
font-size: 4.5vw;
margin: 0 0 2.5%;
}
.subpage h4 {
font-size: 4vw;
margin: 0 0 2.5%;
}
.subpage h5 {
font-size: 3.65vw;
}
.subpage main p, .subpage main li {
font-size: 3.65vw;
line-height: 8.5vw;
}
.subpage article > section > section > p {
margin: 0 0 2.5%;
}
.border_box {
box-sizing: border-box;
padding: 2%;
border: 1px solid #bf8c00;
margin: 0 0 2.5%;
}
.link_btn a {
display: block;
border: 1px solid #bf8c00;
color: #bf8c00;
padding: 4% 0;
text-align: center;
}
.text_link {
color: #bf8c00;
text-decoration: underline;
font-weight: bold;
}
/* -----------------------------------------------------------------------
list
----------------------------------------------------------------------- */
.normal_list {
padding: 2%;
}
.normal_list li:not(:last-child) {
margin: 0 0 1%;
}
.normal_list li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #bf8c00;
margin: 0 1% 0 0;
}
.subpage main dt {
color: #bf8c00;
margin: 0 0 0.5%
}
.subpage main dd {
padding: 0 0 1.5%;
margin: 0 0 1.5%
}
/* -----------------------------------------------------------------------
image
----------------------------------------------------------------------- */
.imageright {
display: block;
max-width: 80%;
margin: 0 auto 5%;
}
.figureright {
display: block;
width: 100%;
margin: 0 0 5%;
}
.figureright img {
width: 100%;
}
.imageleft {
display: block;
width: 80%;
margin: 0 auto 10%;
}
.case {
background-color: #f7f7f5;
box-sizing: border-box;
padding: 10%;
text-align: center;
clear: both;
}
.case figcaption {
text-align: left;
}
.case figure {
display: inline-block;
width: 100%;
position: relative;
vertical-align: top;
margin: 0 0 10%;
}
.case figure img {
display: block;
max-width: 100%;
margin: 0 auto 2%;
}
.case figure:not(:first-child):after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 9px 0 9px;
border-color: #bf8c00 transparent transparent transparent;
position: absolute;
right: 0;
top: -1.0em;
left: 0;
margin: auto;
}
.case.not figure:not(:first-child):after {
border: none;
}
.case iframe {
display: block;
border: none;
width: 1000px;
height: auto;
margin: auto;
}
.symptom {
box-sizing: border-box;
padding: 5%;
text-align: center;
}
.symptom figcaption {
text-align: left;
}
.symptom figure {
display: inline-block;
width: 100%;
position: relative;
vertical-align: top;
}
.symptom figure img {
display: block;
width: 100%;
}
.symptom figure:nth-child(3n) {
margin: 0;
}
/* -----------------------------------------------------------------------
douga.html
----------------------------------------------------------------------- */
.movie iframe {
width: 100%;
height: 50vw;
border: 0;
}
.movie2 iframe {
width: 100%;
height: 50vw;
border: 0;
}
/* -----------------------------------------------------------------------
clinic.html
----------------------------------------------------------------------- */
.equipment {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.equipment figure {
width: 100%;
margin: 0 0 6%;
text-align: center;
}
.equipment figure img {
width: 100%;
margin: 0 0 1%;
}
/* -----------------------------------------------------------------------
chiryo.html
----------------------------------------------------------------------- */
.chiryo article > section > section {
width: 100%;
clear: none;
margin: 0 0 2% !important;
}
.chiryo article > section > section img {
width: 100%;
margin: 0 0 3%;
}
/* -----------------------------------------------------------------------
access.html
----------------------------------------------------------------------- */
.access table {
width: 100%;
color: #bf8c00;
}
.access table caption {
padding: 1.5% 0 0;
caption-side: bottom;
text-align: left;
}
.access table th {
font-weight: normal;
border: 1px solid #bf8c00;
padding: 1.5%;
}
.access table td {
text-align: center;
border: 1px solid #bf8c00;
padding: 1.5%;
}
.access .hours {
text-align: left;
}
.access dt {
color: #bf8c00;
font-weight: bold;
margin: 0 0 1%;
}
.access dd {
border-bottom: 1px solid #eaeaea;
}
.access .map {
width: 100%;
height: 80vw;
}
.access .map iframe {
width: 100%;
height: 100%;
border: 0;
}
/* -----------------------------------------------------------------------
implant.html
----------------------------------------------------------------------- */
.implantimage {
box-sizing: border-box;
text-align: center;
margin: 0 0 2.5%;
clear: both;
overflow: hidden;
}
.implantimage img {
float: none;
display: inline-block;
margin: 0;
width: 50%;
}
.implantimage img:not(:last-child) {
margin: 0 0 2%;
}
}
/* -----------------------------------------------------------------------
モジュール
----------------------------------------------------------------------- */
@media screen and (min-width:641px) {
.sp_n {
display: block;
}
.pc_n {
display: none;
}
}
@media screen and (max-width:640px) {
.sp_n {
display: none;
}
}
.case .youtube {
text-align: center;
}
.case .youtube li.half {
display: inline-block;
width: 25%;
margin: 0 1.5em;
}
.case .youtube li.half a img {
width: 100%;
height: auto;
}
@media screen and (max-width:640px) {
.case .youtube li, .case .youtube li.half {
display: block;
width: 100%;
margin: 0;
}
.case .youtube li:not(:last-of-type) {
margin: 0 0 10%;
}
.case .youtube li a img {
width: 100%;
height: auto;
}
}
.case video.movie {
width: 640px;
height: auto;
margin: 0 auto;
}
@media screen and (max-width:640px) {
.case video.movie {
width: 90%;
height: auto;
margin: 0 auto;
}
}