@charset "UTF-8";

@keyframes flash {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
#main {
padding: 0 10px;
}
#main .post-content {
margin: 0 0 30px;
font-size: 1.4rem;
}
.post-content {
font-size: 1.4rem;
}
.post-content p {
margin: 0 0 1.7rem;
line-height: 1.7;
}
.post-content table {
width: 100%;
max-width: 100%;
border: 2px solid #e5e5e5;
border-collapse: collapse;
font-size: 1.2rem;
table-layout: auto;
}
.post-content table th {
background-color: #e5e5e5;
color: #333;
font-weight: normal;
}
.post-content table th,
.post-content table td {
border: 1px solid #e5e5e5;
padding: 5px;
text-align: center;
}
.post-footer > * {
margin: 0 auto 30px;
}
.post-footer > *:last-child {
margin: 0;
}
.post-footer .related-post-area {
margin: 0 auto 25px;
}
.post-footer.amp-footer {
padding: 0 10px;
}
.related-post-area .side-title,
.related-tags h3,
.other-clinic-title,
.appeard-clinic-info-title {
width: 100%;
margin: 0 0 15px;
padding: 10px;
font-weight: bold;
border-top: 2px solid #d2c094;
border-bottom: 2px solid #d2c094;
background-color: #f3f3f3;
font-size: 1.6rem;
line-height: 1.5;
}
.amp-wp-meta {
margin: 1.5em 16px;
display: block;
font-size: 1.4rem;
}
.amp-wp-meta .taxonomy-list {
display: inline;
}
.amp-wp-meta .taxonomy-list li {
display: inline;
}
.dentist-banner-area {
text-align: center;
}
.dentist-banner-area img {
display: block;
}
.dentist-banner-area .dentist-text {
display: block;
border: 1px solid #D8E8E8;
border-top: none;
color: #a37e39;
font-size: 1.3rem;
line-height: 250%;
}
#create_banner_wrap {
margin: 20px 0 0;
text-align: center;
}
#create_banner_wrap .img-sp {
padding: 0;
list-style: none;
}
img {
width: auto;
max-width: 100%;
}
.main-content h2 {
counter-increment: senzai_h2;
counter-reset: senzai_h3;
margin: 36px 0 18px;
padding: 15px 20px 10px;
border-bottom: 2px solid #d2c094;
background-color: #f3f3f3;
color: #333;
font-size: 2rem;
font-weight: bold;
}
.main-content h2::before {
content: counter(senzai_h2) ".";
display: inline-block;
}
.main-content h2:first-of-type {
margin: 0 0 18px;
}
.main-content h3 {
counter-increment: senzai_h3;
margin: 36px 0 18px;
padding: 0 5px 6px;
border-bottom: 2px solid #d2c094;
color: #333;
font-size: 1.8rem;
font-weight: bold;
}
.main-content h3::before {
content: counter(senzai_h2) "-" counter(senzai_h3) ".";
display: inline-block;
} #main .talk-area {
margin: 0;
word-wrap: break-word;
}
#main .talk-area .speacker {
width: 54px;
line-height: 1;
text-align: center;
}
#main .talk-area .speacker .name {
margin: 5px 0 0;
font-size: 1.2rem;
line-height: 1.3;
}
#main .talk-area .balloon {
position: relative;
width: calc(100% - 66px);
height: 100%;
margin: 0;
padding: 15px;
border: 1px solid #d2c094;
border-radius: 1px;
}
#main .talk-area .balloon::before, #main .talk-area .balloon::after {
content: '';
display: block;
position: absolute;
top: 23px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
#main .talk-area .left-speacker {
display: flex;
flex-direction: row;
}
#main .talk-area .left-speacker .speacker {
margin: 0 5px 0 0;
}
#main .talk-area .left-speacker .balloon {
margin: 0 0 40px 7px;
}
#main .talk-area .left-speacker .balloon::before {
left: -7px;
border-right: 6px solid #d2c094;
}
#main .talk-area .left-speacker .balloon::after {
left: -5px;
border-right: 6px solid #fff;
}
#main .talk-area .right-speacker {
display: flex;
flex-direction: row-reverse;
}
#main .talk-area .right-speacker .speacker {
margin: 0 0 0 5px;
}
#main .talk-area .right-speacker .balloon {
margin: 0 7px 40px 0;
}
#main .talk-area .right-speacker .balloon::before {
right: -7px;
border-left: 6px solid #d2c094;
}
#main .talk-area .right-speacker .balloon::after {
right: -5px;
border-left: 6px solid #fff;
} .bold {
font-weight: bold;
}
.bold-green {
color: #1d839d;
font-weight: bold;
}
.bold-bg {
background-color: #bbdae1;
font-weight: bold;
}
.bold-18 {
font-size: 1.8rem;
font-weight: bold;
}
.bold-green-18 {
color: #1d839d;
font-size: 1.8rem;
font-weight: bold;
}
#main .talk-area .speacker img {
width: 54px;
max-width: none;
height: 54px;
border: 1px solid #d2c094;
border-radius: 50%;
} #page-header {
margin: 0 0 30px;
padding: 0;
}
#page-header .post-header-area {
margin: 25px 0 0;
}
#page-header .post-header-area .header-top {
padding: 0 10px;
}
#page-header .post-header-area .header-middle {
padding: 10px 10px 20px;
background-color: #f3f3f3;
}
#page-header .post-header-area .header-bottom {
padding: 0 10px;
}
#page-header .post-title {
margin: 0 0 15px;
font-size: 2.4rem;
line-height: 1.3;
}
#page-header .thumb-image {
display: none;
}
#page-header .thumb-image-sp {
width: 100%;
margin: 0 0 20px 0;
padding-top: 70%;
background-position: center center;
background-size: cover;
}
#page-header .post-thumbnail {
margin: 0 0 20px 0;
}
#page-header .post-description {
font-size: 1.4rem;
}
#page-header .post-description .auto-text {
margin: 0;
}
#page-header .post-date {
margin: 0 0 25px 0;
font-size: 1.2rem;
}
#page-header .date.updated {
margin: 0 10px 0 0;
}
#page-header .date::before {
margin: 0 5px 0 0;
font-family: "eparkfont";
}
#page-header .date.updated::before {
content: "\e003";
}
#page-header .date.Modified::before {
content: "\e115";
vertical-align: baseline;
}
#page-header .post-meta {
flex-wrap: wrap;
flex-direction: column;
margin: 15px 0 0;
font-size: 1.2rem;
}
#page-header .post-meta .sns-area {
margin: 0;
}
#page-header .post-meta .sns-area .sns-btn-list {
flex: 0 0 100%;
width: 100%;
margin: 0;
padding: 0;
}
#page-header .post-meta .views {
font-size: 1.6rem;
font-weight: bold;
}
#page-header h1.post-title a,
#page-header .post-description a {
color: #333;
}
.post-index {
position: relative;
margin: 30px 0;
overflow: hidden;
border: 2px solid #e6d8d8;
border-radius: 10px;
}
.post-index:first-child {
margin: 0 0 30px;
}
.post-index .index-title {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background-color: #e6d8d8;
color: #333;
font-size: 1.4rem;
line-height: 40px;
font-weight: bold;
text-align: center;
}
.clinic-table-list {
margin: 0;
padding: 30px 10px;
}
.clinic-table-list a {
display: block;
margin: 0 0 20px 0;
color: #333;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.2;
}
.clinic-table-list a .clinic-access {
padding: 0 0 0 5px;
color: #333;
}
.clinic-table-list .table-list-parent {
counter-increment: clinic_table;
position: relative;
}
.clinic-table-list .table-list-parent > a {
display: block;
margin: 0 0 15px 0;
color: #a37e39;
}
.clinic-table-list.post-index-more {
position: relative;
z-index: 0;
padding: 30px 15px 50px 15px;
height: 21rem;
overflow: hidden;
}
.post-index-more-btn {
display: block;
position: relative;
z-index: 8;
width: 180px;
height: 40px;
margin: 0 auto 30px;
padding: 12px 0;
border-radius: 4px;
background-color: #e6d8d8;
color: #333;
font-size: 1.6rem;
text-align: center;
line-height: 1;
}
.post-index-more-btn::before {
content: "もっと見る";
margin: 0 0 0 -3px;
font-weight: bold;
}
.post-index-more-btn::after {
content: "\e158";
position: absolute;
right: 10px;
color: #a37e39;
font-size: 1.4rem;
font-family: "eparkfont";
background-color: #fff;
border-radius: 50%;
}
.bg-btn {
position: absolute;
display: block;
bottom: 0;
z-index: 2;
width: 100%;
height: 115px;
background: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, white 30%, white 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, white 30%, white 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, white 30%, white 100%);
border-radius: 10px;
}
#post-index-toggle {
display: none;
}
#post-index-toggle:checked ~ .clinic-table-list.post-index-more {
height: auto;
padding: 30px 15px;
overflow: visible;
}
#post-index-toggle:checked ~ .post-index-more-btn {
margin: 0 auto 20px;
}
#post-index-toggle:checked ~ .post-index-more-btn::before {
content: "閉じる";
}
#post-index-toggle:checked ~ .post-index-more-btn::after {
content: "\e156";
font-family: "eparkfont";
}
#post-index-toggle:checked ~ .bg-btn {
z-index: -1;
background: transparent;
}
.clinic-table-list .table-list-parent > a {
display: table;
color: #a37e39;
}
.clinic-table-list .table-list-parent > a::before {
content: counter(clinic_table) ".";
display: table-cell;
font-weight: bold;
}
.clinic-table-list .table-list-child {
padding: 0 0 0 16px;
}
.clinic-table-list .table-list-child > a {
counter-increment: clinic_table_h3;
display: table;
}
.clinic-table-list .table-list-child > a::before {
content: counter(clinic_table) "-" counter(clinic_table_h3) ".";
display: table-cell;
min-width: 31px;
font-weight: bold;
}
.list-senzai .clinic-table-list .table-list-parent > a::before,
.list-senzai .clinic-table-list .table-list-child > a::before {
display: none;
}
.post-cta-apparent {
visibility: hidden;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 10px 0;
text-align: center;
-webkit-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, bottom 0.3s ease-out;
-moz-transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, bottom 0.3s ease-out;
transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, bottom 0.3s ease-out;
}
.post-cta-apparent.on {
visibility: visible;
opacity: 1;
z-index: 900;
transition-delay: 0s;
}
.post-cta-apparent .post-cta-button {
display: block;
position: relative;
width: 90%;
margin: auto;
padding: 10px;
border-bottom: 3px solid #dd5900;
border-radius: 15px;
background: #e67e22;
color: #fff;
font-size: 15px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.post-cta-apparent .post-cta-button span {
display: inline;
margin: 2px 0 0 0;
}
.post-cta-apparent .post-cta-button:hover {
background-color: #dd5900;
}
.post-cta-area {
display: flex;
align-items: center;
padding: 5px;
border: 1px solid #cdcdcd;
background-color: #f3f3f3;
color: #333;
text-decoration: none;
}
.post-cta-area > div {
width: 50%;
}
.post-cta-area .post-cta-content {
padding: 10px;
}
.post-cta-area .cta-post-title {
margin: 0;
color: #a37e39;
font-size: 2.5rem;
font-weight: bold;
}
.post-cta-area p {
margin: 0 0 5px;
font-size: 1.5rem;
line-height: 1.7;
}
.post-cta-area dl,
.post-cta-area dd {
margin: 0;
font-size: 1.4rem;
}
.post-cta-area dt {
display: inline-block;
padding: 1px 5px;
border-radius: 2px;
background-color: #62a732;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
@media only screen and (max-width: 415px) {
.post-cta-area {
display: block;
}
.post-cta-area > div {
width: unset;
}
.post-cta-area .post-cta-img img {
width: 100%;
}
.post-cta-area p {
margin: 0 0 20px;
font-size: 1.4rem;
line-height: 1.7;
}
}
.related-tags .taxonomy-list {
list-style: none;
padding: 0;
font-size: 0;
line-height: 1;
}
.related-tags .taxonomy-list li {
display: inline-block;
margin: 0 10px 10px 0;
padding: 0 12px 0 10px;
height: 26px;
border-radius: 12px;
background-color: #e8e8e8;
line-height: 26px;
}
.related-tags .taxonomy-list li a {
display: block;
color: #198772;
font-size: 1.4rem;
}
.related-tags .taxonomy-list li a:before {
content: "#";
display: inline-block;
}
.related-post-area .post-inner {
width: 100%;
padding: 0 0 15px;
overflow-x: scroll;
}
.related-post-area .post-inner .related-post-list {
display: flex;
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0 0 15px;
}
.related-post-area .post-inner .related-post-list .related-post {
display: block;
width: 140px;
margin: 0 10px 0 0;
padding: 0;
}
.related-post-area .post-inner .related-post-list .related-post:last-child {
margin: 0;
}
.related-post-area .post-inner .related-post-list .related-post .post-thumbnail {
position: relative;
width: 140px;
height: 105px;
margin: 0 0 15px;
overflow: hidden;
}
.related-post-area .post-inner .related-post-list .related-post .post-thumbnail img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-width: initial;
height: 100%;
}
.related-post-area .post-inner .related-post-list .related-post .post-title {
color: #333;
font-size: 1.2rem;
font-weight: normal;
line-height: 1.5;
}
.related-post-area .post-inner .related-post-list .related-post .post-title a {
color: inherit;
}
.side-post-list.amp-related {
display: flex;
}
.side-post-list.amp-related .post-thumbnail {
position: static;
width: 68px;
height: 68px;
margin: 0 10px 0 0;
overflow: visible;
}
.side-post-list.amp-related .post-thumbnail a {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.side-post-list.amp-related .post-thumbnail a img {
display: block;
width: auto;
height: 100%;
}
.clinic-area .clinic-reserve {
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 20px 0 60px;
}
.reserve-btn {
position: relative;
width: calc( ( 100% - 10px ) / 2);
}
.reserve-btn:nth-of-type(2) {
margin: 0 0 0 10px;
}
.reserve-btn .reserve-btn-link {
display: flex;
width: 100%;
height: 55px;
padding: 2px 0 0 43px;
border-radius: 4px;
box-shadow: 0 2px 0 0 #af6a15;
background-color: #fe9917;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.reserve-btn .reserve-btn-link:before {
display: inline-block;
position: absolute;
top: 2px;
left: 0;
width: 57px;
margin: 0;
font-family: 'eparkfont';
font-size: 3.4rem;
font-weight: normal;
}
.reserve-btn.tel a {
flex-direction: column;
justify-content: center;
}
.reserve-btn.tel a:before {
content: "\e132";
top: 2px;
transform: rotate(-14deg);
}
.reserve-btn.tel a .btn-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.reserve-btn.tel a .btn-text .tel-reserve-inner {
width: 79px;
height: 18px;
margin: 5px auto 2px;
padding: 0;
background: #fff;
color: #fe9917;
font-size: 1.4rem;
font-weight: bold;
line-height: 19px;
}
.reserve-btn.tel a .tel-number {
display: none;
}
.reserve-btn.web a {
flex-direction: column;
align-content: space-between;
justify-content: center;
}
.reserve-btn.web a:before {
content: "\e131";
}
.reserve-btn.web a .net-reserve-inner {
width: 67px;
height: 14px;
margin: 5px auto 2px;
padding: 0;
box-sizing: border-box;
background: #fff;
color: #fe9917;
font-size: 1.5rem;
font-weight: bold;
line-height: 16px;
}
.reserve-btn.web a .btn-text {
align-self: center;
}
.tel-reserve-note {
display: flex;
flex-direction: column;
position: absolute;
top: 55px;
left: 25%;
margin: 10px 0 0 0;
}
.tel-reserve-note .tel-reserve-note-popup {
display: none;
position: absolute;
bottom: calc( 100% + 5px);
z-index: -1;
width: 300px;
height: 195px;
margin: 0;
padding: 0 10px;
border: 1px solid #9E9365;
border-radius: 6px;
background-color: #fff;
}
.tel-reserve-note .tel-reserve-note-popup:before, .tel-reserve-note .tel-reserve-note-popup:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.tel-reserve-note .tel-reserve-note-popup:before {
bottom: -10px;
border-width: 10px 10px 0 10px;
border-color: #9E9365 transparent transparent transparent;
}
.tel-reserve-note .tel-reserve-note-popup:after {
bottom: -9px;
border-width: 10px 9px 0 9px;
border-color: #fff transparent transparent transparent;
}
.tel-reserve-note .tel-reserve-note-popup dt {
margin: 0 0 9px;
padding: 0 0 6px;
border-bottom: 1px dashed #ccc;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
.tel-reserve-note .tel-reserve-note-popup dd {
margin: 0;
font-size: 1.2rem;
line-height: 1.7;
}
.tel-reserve-note .tel-reserve-note-close-btn {
position: absolute;
top: 0;
right: 0;
padding: 15px;
}
.tel-reserve-note .tel-reserve-note-close-btn:before {
content: "\e040";
display: block;
font-family: 'eparkfont';
font-size: 1.6rem;
line-height: 1.2;
}
.tel-reserve-note input:checked ~ .tel-reserve-note-btn::before {
content: "\e042";
}
.tel-reserve-note input:checked ~ .tel-reserve-note-popup {
display: block;
z-index: 1;
padding: 10px;
}
.tel-reserve-note .tel-reserve-note-btn {
display: inline-block;
padding: 5px 0;
margin: 0;
color: #333;
font-size: 1rem;
line-height: 1.2;
}
.tel-reserve-note .tel-reserve-note-btn:before {
content: "\e041";
display: inline-block;
margin: 0 5px 0 0;
font-family: 'eparkfont';
vertical-align: middle;
}
.tel-reserve-note .tel-reserve-note-popup {
left: -47%;
}
.tel-reserve-note .tel-reserve-note-popup:before {
left: calc( 100% / 4);
}
.tel-reserve-note .tel-reserve-note-popup:after {
left: calc( 100% / 4 + 1px);
}
.reserve-btn.web ~ .tel-reserve-note {
left: 3px;
}
.reserve-btn.web ~ .tel-reserve-note .tel-reserve-note-popup {
left: -3px;
} #neighbor-clinic .reserve_area .availability {
margin: 0 0 14px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#neighbor-clinic .reserve_area .availability .enable-wrapper {
display: block;
}
#neighbor-clinic .reserve_area .availability .enable-wrapper .enable {
margin: 0 6px;
padding: 3px 8px;
border-radius: 3px;
background-color: #FFF;
}
#neighbor-clinic .reserve_area .availability .enable-wrapper .enable::before {
content: "\e077";
margin: 0 5px 0 0;
color: #b30006;
font-family: 'eparkfont';
}
#neighbor-clinic {
margin: 20px 0 40px;
padding: 10px;
border-top: 2px solid #a37e39;
border-bottom: 2px solid #a37e39;
background-color: #f3f3f3;
}
#neighbor-clinic .neighbor-clinic-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 10px;
}
#neighbor-clinic .neighbor-clinic-title {
margin: 0;
color: #000;
font-weight: bold;
}
#neighbor-clinic .refresh-button {
display: flex;
align-content: center;
padding: 5px 10px;
border-radius: 10px;
background: #a37e39;
color: #fff;
font-size: 1.2rem;
line-height: 1;
}
#neighbor-clinic .refresh-button::after {
content: "\e111";
margin: 0 0 0 3px;
font-size: 1.2rem;
font-family: 'eparkfont';
font-style: normal;
}
#neighbor-clinic .clinic-box {
margin: 0 0 10px;
padding: 7px;
background: #fff;
}
#neighbor-clinic .clinic-info-box {
display: flex;
justify-content: space-between;
margin: 0 0 15px;
}
#neighbor-clinic .clinic-info-box img {
height: 70px;
margin: 0 0 4px 10px;
}
#neighbor-clinic .clinic-name {
margin: 0 0 5px;
padding: 0;
background-color: transparent;
}
#neighbor-clinic .clinic-name a {
color: #a37e39;
font-size: 1.4rem;
font-weight: bold;
}
#neighbor-clinic .clinic-access {
display: flex;
align-content: center;
margin: 0 0 5px;
color: #040404;
font-size: 1.2rem;
}
#neighbor-clinic .clinic-access::before {
content: "\e002";
margin: 0 3px 0 0;
color: #a37e39;
font-family: 'eparkfont';
font-style: normal;
}
#neighbor-clinic .clinic-phoneno {
margin: 0 0 5px;
color: #040404;
font-size: 1.2rem;
}
#neighbor-clinic .clinic-address {
margin: 0;
color: #040404;
font-size: 1.2rem;
}
#neighbor-clinic .clinic-address a {
color: #a37e39;
}
#neighbor-clinic .attention {
margin: 5px 0 10px;
font-size: 1.2rem;
}
#neighbor-clinic .reserve_area {
position: relative;
margin: 10px 0 0;
padding: 10px 5px;
background-color: #fef8f8;
}
#neighbor-clinic .reserve_area .availability {
margin: 0 0 14px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#neighbor-clinic .reserve_area .availability .enable-wrapper .enable {
margin: 0 6px;
padding: 3px 8px;
border-radius: 3px;
background-color: #FFF;
}
#neighbor-clinic .reserve_area .availability .enable-wrapper .enable::before {
content: "\e077";
margin: 0 5px 0 0;
color: #b30006;
font-family: 'eparkfont';
}
#neighbor-clinic .reserve_area .clinic-reserve {
position: relative;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 5px;
}
#neighbor-clinic .reserve_area p {
margin: 10px auto;
}
#neighbor-clinic .reserve-btn {
width: 48%;
}
#neighbor-clinic .reserve-btn.tel {
padding: 0 0 20px;
}
#neighbor-clinic .price-btn {
width: 100%;
margin: 15px 0;
}
#neighbor-clinic .price-btn a,
#neighbor-clinic .price-btn a:hover {
display: block;
position: relative;
padding: 0;
border: 4px solid #a37e39;
border-radius: 7px;
background-color: #fff;
color: #a37e39;
font-size: 1.6rem;
font-weight: bold;
line-height: 40px;
text-decoration: none;
text-align: center;
}
#neighbor-clinic .price-btn a:after {
content: "\e149";
position: absolute;
margin: 0 0 0 10px;
color: #a37e39;
font-size: 1.5rem;
font-family: 'eparkfont';
}
#neighbor-clinic .time_table {
display: table;
width: 100%;
margin: 10px auto;
border: 2px solid #f3f3f3;
color: #4d4d4d;
font-size: 1.2rem;
}
#neighbor-clinic .time_table tr th,
#neighbor-clinic .time_table tr td {
padding: 3px 2px;
border: 1px solid #f3f3f3;
background-color: #fff;
font-size: 1.2rem;
text-align: center;
}
#neighbor-clinic .time_table tr:first-of-type th {
border: 1px solid #fff;
background-color: #e6d8d8;
color: #333;
font-weight: bold;
}
#neighbor-clinic .time_table tr .close {
color: red;
}
#neighbor-clinic .detail_btn2,
#neighbor-clinic .online_btn {
height: 55px;
}
#neighbor-clinic .detail_btn2 {
padding: 0 5px 0 0;
}
#neighbor-clinic .online_btn {
padding: 0 0 0 5px;
}
#neighbor-clinic .tel-reserve,
#neighbor-clinic .web-reserve {
display: inline-flex;
flex-direction: column;
flex-flow: column;
align-items: center;
font-size: 1.2rem;
line-height: 1.5;
}
#neighbor-clinic .tel-reserve::before,
#neighbor-clinic .web-reserve::before {
display: inline-block;
width: auto;
height: 12px;
margin: 0 0 5px;
padding: 2px 4px;
border-radius: 10px;
box-sizing: border-box;
background: #fff;
color: #FE4647;
font-size: 9px;
font-weight: bold;
line-height: 1;
text-shadow: none;
vertical-align: middle;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup {
display: none;
position: absolute;
bottom: 60px;
z-index: -1;
width: 294px;
height: 195px;
margin: 0;
padding: 0 10px;
border: 1px solid #9E9365;
border-radius: 6px;
background-color: #fff;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::before, #neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::before {
bottom: -10px;
border-width: 10px 10px 0 10px;
border-color: #9E9365 transparent transparent transparent;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::after {
bottom: -9px;
border-width: 10px 9px 0 9px;
border-color: #fff transparent transparent transparent;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup dt {
margin: 0 0 9px;
padding: 0 0 6px;
border-bottom: 1px dashed #ccc;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup dd {
margin: 0;
font-size: 1.2rem;
line-height: 1.7;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-close-btn {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-close-btn::before {
content: "\e040";
display: block;
font-family: 'eparkfont';
font-size: 1.6rem;
line-height: 1.2;
}
#neighbor-clinic .tel-reserve-note input:checked ~ .tel-reserve-note-btn::before {
content: "\e042";
}
#neighbor-clinic .tel-reserve-note input:checked ~ .tel-reserve-note-popup {
display: block;
z-index: 1;
padding: 10px;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-btn {
display: inline-block;
padding: 5px 0;
margin: 0;
color: #333;
font-size: 1rem;
line-height: 1.2;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-btn::before {
content: "\e041";
display: inline-block;
margin: 0 5px 0 0;
font-family: 'eparkfont';
vertical-align: middle;
}
#neighbor-clinic .reserve_notice .add_info {
font-size: 1.2rem;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup {
left: -83px;
bottom: 28px;
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::before {
left: calc( 100% / 4);
}
#neighbor-clinic .tel-reserve-note .tel-reserve-note-popup::after {
left: calc( 100% / 4 + 1px);
}
#neighbor-clinic .reserve-btn.web ~ .tel-reserve-note .tel-reserve-note-popup {
left: -22px;
}
@media screen and (max-width: 320px) {
#neighbor-clinic .reserve-btn .reserve-btn-link {
padding: 2px 0 0 34px;
font-size: 1.2rem;
}
#neighbor-clinic .reserve-btn .reserve-btn-link::before {
top: 7px;
width: 40px;
font-size: 3rem;
}
#neighbor-clinic .reserve-btn.tel a .btn-text .tel-reserve-inner {
width: 61px;
height: 16px;
font-size: 1.1rem;
}
}
@media screen and (min-width: 768px) {
#neighbor-clinic .clinic-info-box img {
height: 150px;
}
#neighbor-clinic .price-btn {
width: 70%;
margin: 15px auto;
}
}