@charset "utf-8";

ib {display: inline-block;}

h2 {color: #14345d;}

.tcenter {text-align: center;}
.tleft {text-align: left;}
.tright {text-align: right;}

.clear {clear: both;}

/* color */
.bg-blue {background-color: #0071be;}
.bg-deepblue {background-color: #14345d;}
.bg-gray {background: url("../img/section-bg.webp")repeat;}
.white {color: #fff;}


/* 見出し */
section h2.heading {border-left: 8px solid #0071be; padding: 0 0 0 15px; font-weight: 600;}


/* ボタン */
.btn-secondary {color: #fff; background-color: #14345d; border-color: #14345d; font-size: 0.8em;}


/* フェードイン */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeRight{
animation-name:fadeLeftAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeLeft{
animation-name:fadeRightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

.fadeUpTrigger, .fadeDownTrigger, .fadeRightTrigger, .fadeLeftTrigger {opacity: 0;}



@media screen and (max-width: 991.98px) {
}

@media screen and (max-width: 767.98px) {
	.bg-deepblue {margin-bottom: 60px;}
}

@media screen and (max-width: 576.98px) {
	section h2.heading {font-size: 22px;}
	section p.d-inline-block {display: inherit!important; padding-left: 15px;}
}

/* マーカーアニメーション */
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(240,246,84) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(240,246,84) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(240,246,84) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(240,246,84) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(240,246,84) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1.5s ease 0.8s;
    font-weight: bold;
}
.marker-animation.active{background-position: -100% .5em;}

.marker-animation-dark {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(180,144,0) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(180,144,0) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(180,144,0) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(180,144,0) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(180,144,0) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1.5s ease 0.8s;
    font-weight: bold;
}
.marker-animation-dark.active{background-position: -100% .5em;}


/* ------------------------------------------------------------------------------------
 ヘッダー
------------------------------------------------------------------------------------ */
.header-logo {font-size: 0.7em; color: #14345d;}
.header-logo img {width: 224px; height: 42px;}
.header-box .h2 {line-height: 0.8; color: #01923e;}
.header-menu-box a:hover {text-decoration: none;}
.header-menu-box a .btn-secondary:hover {background-color: #f7cf2f; border-color: #f0c61e; color: #14345d;}

.btn-group-lg>.btn, .btn-lg {border-radius: 0.25rem;}

@media screen and (max-width: 991.98px) {
	.jumbotron {height: 400px;}
}

@media screen and (max-width: 767.98px) {
	.jumbotron {height: 320px;}
}

@media screen and (max-width: 576.98px) {
	.jumbotron {background-image: url("../img/top-image_sp.webp");}
}

@media screen and (max-width: 480px) {
	.header-logo img {width: 100%; height: auto;}
}


/* ------------------------------------------------------------------------------------
 ナビゲーション
------------------------------------------------------------------------------------ */
.navbar-dark .navbar-nav a.nav-link {color: #fff; transition: all .5s;}
.navbar-dark .navbar-nav a.nav-link:hover {color: #fbe33e;}

@media screen and (max-width: 767.98px) {
	.text-white span.tel a {color: #a2fec9;}
}

@media screen and (max-width: 576.98px) {
	.btn-group-lg>.btn, .btn-lg {font-size: 0.9rem; padding: 5px 10px;}
}


/* ------------------------------------------------------------------------------------
 クリニックの特徴
------------------------------------------------------------------------------------ */
#sec1 {position: relative; margin-top: 130.8px;}
#sec1 .message {position: absolute; left: 0; background-color: #fff; padding: 0 2rem 2rem;}
#sec1 .message p {line-height: 1.8;}
#sec1 .column-12 {display: none;}
#sec1 .col-md-6 {padding-top: 6rem;}
.scrolldown {position: absolute; top: -60px; left: 50%; height: 50px;}
.scrolldown span {position: absolute; left:-15px; top: -15px; color: #eee; font-size: 0.7rem; letter-spacing: 0.05em;}
.scrolldown::after {content: ''; position: absolute; top: 0; width: 1px; height: 30px; background: #eee; animation: pathmove 1.4s ease-in-out infinite; opacity:0;}
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

#sec1 h2.h2 span {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-top: solid 1px #0071be; border-bottom: solid 1px #0071be; padding: 20px; color: #0071be;}
#sec1 h2.h2 span::before {content: ''; position: absolute; top: -15px; left: 20px; width: 50px; height: 70px; background-color: #0071be; z-index: 1;}
#sec1 h2.h2 span::after {content: ''; position: absolute; bottom: -15px; right: 20px; width: 30px; height: 50px; background-color: #0071be; z-index: 1;}

@media screen and (max-width: 991.98px) {
	#sec1.container-fluid {padding-left: 0; padding-right: 0;}
	#sec1 .col-md-6 {display: none;}
	#sec1 .message {position: relative; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	#sec1 .column-12 {display: block; text-align: center; margin: 3rem auto 0;}
	#sec1 .column-12 img {width: 100%; max-width: 540px;}
}

@media screen and (max-width: 767.98px) {
	#sec1, #sec2, #sec3, #sec4, #sec5 {padding: 2rem 0 1.5rem!important;}
	#sec1 {margin-top: 72px;}
	section .text-muted {margin: 0;}
	#sec1 .col-12 {padding: 0;}
}

@media screen and (max-width: 576.98px) {
	#sec1 h2.h2 {font-size: 22px;}
	#sec1 h2.h2 span::before {width: 25px; height: 40px;}
	#sec1 h2.h2 span::after {width: 15px; height: 30px;}
}



/* ------------------------------------------------------------------------------------
 診療のご案内
------------------------------------------------------------------------------------ */
#sec2 .card {height: 460px; margin-bottom: 30px;}
#sec2 .card p {font-size: 0.95rem;}
#sec2 .py-5 {padding: 3rem 15px 1.5rem!important;}
#sec2 .card .card-body {position: relative; color: #121212;}
#sec2 .card .card-img-box {overflow: hidden; width: 100%; height: auto; display: flex; position: relative; z-index: 2;}
#sec2 .card a .card-img-box img {width: 100%; height: auto; transition: transform 0.75s ease; backface-visibility: hidden;}
#sec2 .card a .card-img-box span {position: absolute; background-color: #14345d; color: #fff; top: 10px; right: 10px; padding: 2px 10px; border-radius: calc(0.25rem - 1px);}
#sec2 .card a:hover {text-decoration: none;}
#sec2 .card a:hover .card-img-box img {transform: scale(1.2, 1.2); opacity: 0.7;}
#sec2 .card a h3.card-title {position: relative; overflow: hidden;}
#sec2 .card a h3.card-title span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
#sec2 .card a h3.card-title::before {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #0071be; -webkit-transition: width 0.2s ease; -moz-transition: width 0.2s ease; -o-transition: width 0.2s ease; transition: width 0.2s ease;}
#sec2 .card a:hover h3.card-title::before {width: 100%;}
#sec2 .card a p {overflow: hidden;}
#sec2 .card a p span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-align: left;}


@media screen and (max-width: 1199.98px) {
	#sec2 .card {height: 410px;}
}

@media screen and (max-width: 991.98px) {
	#sec2 {height: auto;}
	#sec2 .card a p span {-webkit-line-clamp: 4;}
}

@media screen and (max-width: 767.98px) {
	#sec2 .card {height: 314px;}
	#sec2 h3 {font-size: 1.25rem;}
	#sec2 .card a p span {-webkit-line-clamp: 3;}
}

@media screen and (max-width: 576.98px) {
	#sec2 .card {height: auto; margin-bottom: 10px;}
	#sec2 .card .card-body {text-align: center;}
	#sec2 .card a h3.card-title {margin: 0; font-size: 18px;}
	#sec2 .card a .card-text {display: none;}
}


/* ------------------------------------------------------------------------------------
 こんなお悩みありませんか？
------------------------------------------------------------------------------------ */
#worries {background: url("../img/parallax-bg.webp")no-repeat fixed; background-size: cover; height: 520px;}
#worries .worries-left img {width: 100%; height: auto; max-width: 469px;}
#worries .worries-right {color: #fff;}
#worries .worries-right ul {position: relative; list-style-type: none; padding: 10px;}
#worries .worries-right ul li {font-size: 1.4rem; font-weight: bold; margin-bottom: 1rem; vertical-align: middle;}
#worries .worries-right ul li::before {content: ''; background-image: url("../img/check-img.webp"); background-size: contain; background-repeat: no-repeat; width: 36px; height: 46px; display: inline-block; vertical-align: middle;}
#worries .worries-right ul li span {font-size: 1.8rem; padding: 0 5px; color: #f7cf2f; margin-left: 10px;}

@media screen and (max-width: 767.98px) {
	#worries {height: auto;}
	#worries .worries-left {display: none;}
	#worries .worries-right {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	#worries .worries-right ul {padding: 10px 10px 0; margin: 0;}
	#worries .worries-right ul li:last-child {margin: 0;}
}

@media screen and (max-width: 576.98px) {
	#worries .worries-right ul {padding: 0;}
	#worries .worries-right ul li {font-size: 20px; line-height: 1; text-indent: -2em; padding-left: 2em;}
	#worries .worries-right ul li span {font-size: 24px;}
}

/* ------------------------------------------------------------------------------------
 当院が選ばれる理由
------------------------------------------------------------------------------------ */
.card-body h3 {text-align: center;}
.card-body span {text-align: center;}
.card-body p.card-text {overflow: hidden;}
.card-body p.card-text span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-align: left;}
.elected {position: relative; text-align: center;}
.elected span {position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); line-height: 1.1; background-color: #0071be; padding: 5px 15px; font-size: 1.2rem; color: #fff;}
.elected span b {font-size: 2rem;}

@media screen and (max-width: 991.98px) {
	.card-body h3 {font-size: 20px;}
	.elected span {font-size: 1rem;}
	.elected span b {font-size: 1.2rem;}
}

@media screen and (max-width: 576.98px) {
	section .container .col-md-6.col-lg-4 {padding: 0 5px;}
}

/* ------------------------------------------------------------------------------------
 初めての方へ
------------------------------------------------------------------------------------ */
@media screen and (max-width: 767.98px) {
	#sec3 h3 {font-size: 22px;}
}



/* ------------------------------------------------------------------------------------
 新着情報
------------------------------------------------------------------------------------ */
section#sec4 {background: url("../img/whatsnews-bg.webp")no-repeat; background-size: cover;}
#sec4 .column-12 {padding: 5px;}
#sec4 .whatsnew {padding: 10px; border-bottom: 1px dotted #14345d;}
#sec4 .whatsnew a:hover {text-decoration: none;}
#sec4 .whatsnew a span.rounded {background-color: #14345d; padding: 4px 10px;}
#sec4 .whatsnew a h3 {color: #14345d; font-size: 1.2rem; margin: 0; font-weight: 600; padding-left: 10px;}
#sec4 .whatsnew a p {color: #121212; overflow: hidden; margin: 10px 0 0;}
#sec4 .whatsnew a p span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}

@media screen and (max-width: 767.98px) {
	#sec4 .whatsnew a h3 {margin-top: 10px; padding: 0; font-size: 1rem;}
	#sec4 .whatsnew a p {margin: 0; font-size: 0.9rem;}
}


/* ------------------------------------------------------------------------------------
 診療時間
------------------------------------------------------------------------------------ */
.m-hours table tr.day_of_week {background-color: #0071be; color: #fff;}
.m-hours table tr th.sun {background-color: #f8c8c8;}
.m-hours table tr th.sat {background-color: #c8def8;}
.m-hours table tr th.wdays {background-color: #efefef;}

/* ------------------------------------------------------------------------------------
 クリニック案内
------------------------------------------------------------------------------------ */
.map iframe {margin-bottom: -6px;}



/* ------------------------------------------------------------------------------------
 フッター
------------------------------------------------------------------------------------ */
footer h2, footer p {color: #fff!important;}
footer ul.footer-ul {list-style-type: none;}
footer ul.footer-ul li {position: relative;}
footer ul.footer-ul li::after, footer ul.footer-ul li::before {content: ''; position: absolute;border-radius: 50%;}
footer ul.footer-ul li::before {left: -30px; width: 17px; height: 17px; background: rgba(255,255,155,0.5); top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
footer ul.footer-ul li::after {top: 8px; left: -22px; width: 14px; height: 14px; background: rgba(255,255,55,0.4);}
footer ul.footer-ul li a {color: #fff;}
footer .shadow-sm {margin: 10px 10px 10px 0; max-width: 240px;}

@media screen and (max-width: 991.98px) {
	.footer-logo {width: 100%; max-width: 224px;}
}

@media screen and (max-width: 767.98px) {
	footer .column-4 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	footer .column-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	footer .column-4 p.mb-0 {font-size: 0.8rem;}
}

@media screen and (max-width: 576.98px) {
	footer .column-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	footer .column-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	footer .column-4 p.mb-0, footer .column-4 h2.h4 {text-align: center;}
	footer .column-6 .shadow-sm {margin: 10px auto;}
	footer ul.footer-ul {max-width: 240px; margin: 0 auto 1rem;}
}


/* トップへ戻る */
#page-top {position: fixed; right: 1em; bottom: 4em; z-index: 999; background-color: initial!important; opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s; animation: fuwafuwa 3s infinite;}
#page-top a {display: inline-block; width: 60px; height: 60px; border-radius: 50%; line-height: 65px; background-color: #14345d; transition: all .5s;}
#page-top a:hover {background-color: #4c92bf;}
#page-top a i {font-size: x-large;}
#page-top.topshow {opacity: 1; visibility: visible; transform: translateY(0px);}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}