@charset "UTF-8";
/*
Theme Name: kawakami-theme
Description: 川上矯正歯科 専用テーマ
Author: attractBlue
Author URI: 
Version: 1.0
*/
/* ---------------------------------------

ヘッダー

--------------------------------------- */
section.headerArea {
position: relative;
padding-bottom: 0;
background: #eaf9fb;
z-index: 9999;
}
header {
width: 98%;
max-width: 1880px;
margin: 0 auto;
z-index: 99;
position: relative;
}
header .tpl-inner-wrap {
width: 98%;
max-width: 100%;
position: fixed;
background-color: #fff;
z-index: 100;
border-radius: 0 0 22px 22px;
box-shadow: 0px 1px 6px 0px #c7c7c7;
}
/* ---------------------------------------
ヘッダーロゴ
--------------------------------------- */
.topInfoBlock {
padding: 16px 50px;
-js-display: flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
align-items: center;
}
.logoBlock {
width: 278px;
}
.logoBlock_sp, #top-head.fixed .logoBlock {
display: none;
}
/* ---------------------------------------
右エリア
--------------------------------------- */
.infoRightBlock {
-js-display: flex;
display: flex;
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
align-items: center;
width: 100%;
}
.infoRightBlock .btnBlock {
-js-display: flex;
display: flex;
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
}
/*電話番号*/
.infoRightBlock .tel {
padding: 0 10px;
}
.infoRightBlock .tel a {
color: #0fadb9;
font-size: 187.5%;
}
.infoRightBlock .tel a::before {
content: "";
background: url("images/common/icon-tel.png") no-repeat center;
background-size: contain;
width: 34px;
height: 28px;
display: inline-block;
margin-right: 6px;
}
.infoRightBlock .e_time {
font-size: 94%;
line-height: 0;
}
/*初回無料相談*/
.btn_soudan a {
font-family: 'Jun 501';
width: 190px;
height: 50px;
text-align: center;
background: #e7fffb;
color: #10c3dc;
line-height: 50px;
border-radius: 40px;
-js-display: flex;
display: flex;
-webkit-justify-content: center; /* Safari */
justify-content: center;
align-items: center;
margin: 0 10px;
}
.btn_soudan span.icon_mail {
content: "";
background: url("images/common/icon-mail.png") no-repeat center;
background-size: contain;
width: 25px;
height: 19px;
display: inline-block;
margin-right: 6px;
}
/*診療中の方へ*/
.btn_shiryochu a {
font-family: 'Jun 501';
width: 190px;
height: 50px;
text-align: center;
background: #10c3dc;
color: #fff;
line-height: 50px;
border-radius: 40px;
-js-display: flex;
display: flex;
-webkit-justify-content: center; /* Safari */
justify-content: center;
align-items: center;
}
.btn_shiryochu span.icon_tooth {
content: "";
background: url("images/common/icon-tooth_wh.png") no-repeat center;
background-size: contain;
width: 21px;
height: 25px;
display: inline-block;
margin-right: 6px;
}
.visible_tab {
  display: none;
}
@media screen and (max-width:1024px) {

  .btn_soudan a {
    font-size: 90%;
    width: 140px;
    height: 35px;
  }
  .btn_shiryochu a {
    font-size: 90%;
    width: 140px;
    height: 35px;
  }

  .visible_tab {
    display: block;
    padding: 0 10px;
    text-align: center;
    width: 40%;
  }
  .visible_tab a {
    color: #0fadb9;
    font-size: 130%;
  }
  .visible_tab a::before {
    content: "";
    background: url("images/common/icon-tel.png") no-repeat center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 0px;
  }
  .visible_tab .e_time {
    font-size: 75%;
    line-height: 0;
  }
}
@media screen and (max-width:640px) {
  .visible_tab {
    display: none;
  }
}
/* ---------------------------------------
スライダー
--------------------------------------- */
.s-three-wrap {
position: relative;
max-height: 897px;
margin: 0 auto;
}
.s-three-text, .s-three-sub, .s-three-button {
position: absolute;
width: 100%;
left: 15%;
color: #fff;
}
.headerArea .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 20px;
}
img.s-img.pc {
display: block;
}
img.s-img.sp {
display: none;
}
/* メインコピー
-------------------------------------- */
.s-three-text {
top: 10%;
font-size: 2.5vw;
color: #000;
}
/* サブコピー
-------------------------------------- */
.s-three-sub {
top: 50%;
font-size: 2vw;
color: #000;
}
.s-three-sub-sub {
font-size: 1.2vw;
}
/* ボタン
-------------------------------------- */
.s-three-button {
top: 74%;
display: block;
width: 264px;
padding: 12px 10px;
box-sizing: border-box;
border: #292929 1px solid;
color: #292929;
text-align: center;
text-decoration: none;
transition: all .25s ease;
}
.s-three-button:hover {
background: rgba(41, 41, 41, .8);
border: rgba(41, 41, 41, .6) 1px solid;
color: #fff;
}
.swiper-slide-active .s-three-text {
animation: slideFromRight 1.5s ease 0s 1 normal;
line-height: 4.8rem;
}
.swiper-slide-active .s-three-sub {
animation: slideFromRightSub 2.0s ease 0s 1 normal;
line-height: 2.8rem;
}
.swiper-slide-active .s-three-button {
animation: slideFromRightBtn 2.5s ease 0s 1 normal;
}
/*スライドナビボタン*/
.swiper-pagination-bullet {
border: #fff 2px solid;
background: #e7fffb!important;
width: 10px!important;
height: 10px!important;
opacity: 1!important;
}
.swiper-pagination-bullet-active {background: #0fadb9!important;}
@keyframes slideFromRight {
0%, 25% {
transform: translateX(50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideFromRightSub {
0%, 45% {
transform: translateX(50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideFromRightBtn {
0%, 65% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* ---------------------------------------

コンテンツ＜全体＞

--------------------------------------- */
section {margin: 0;}
.wrapper {
width: 1200px;
margin: 0 auto;
padding: 60px 0;
position: relative;
}
/* ---------------------------------------

リード

--------------------------------------- */
.leadArea {
background: #eff7fb;
position: relative;
margin-bottom: 60px;
}
.leadArea .wrapper {padding: 100px 0 0;}
.leadArea #svg-bg {
position: absolute;
width: 100%;
height: 400px;
bottom: -80px;
left: 0;
z-index: -1;
}
/* ---------------------------------------

５ステップ

--------------------------------------- */
.stepArea .wrapper {}
ul.step {
width: 720px;
margin: 0 auto;
}
ul.step li {
text-align: center;
color: #0e9eb6;
font-size: 150%;
font-family: 'Jun 501';
display: block;
padding: 20px 0;
border-radius: 40px;
margin: 0 auto 66px;
}
ul.step li:nth-child(even) {
background: #f1f7f9;
}
ul.step li:nth-child(odd) {
background: #e7fffb;
}
ul.step li {
position: relative;
padding-left: 18px;
}
/**ul.step li:not(:last-child)::before {
position: absolute;
content: '';
width: 74px;
height: 14px;
background-color: #9ff1f7;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -30px;
}**/
ul.step li:not(:last-child)::after {
/**position: absolute;
content: "";
border: solid 60px transparent;
border-top: solid 22px #9ff1f7;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -110px;**/
position: absolute;
content: "";
border: solid 40px transparent;
border-top: solid 30px #9ff1f7;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -90px;
}

/* ---------------------------------------

こんなことでも大丈夫

--------------------------------------- */
.safeArea.wave_up #svg-bg {
height: 100%;
}
.safeArea .wrapper {
padding: 40px 0 100px;
overflow: hidden;
}
.swiper-carousel {
width: 100%;
height: 100%;
position: relative;
}
.swiper-carousel .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-carousel .swiper-slide .imgBlock figure figcaption {
font-family: 'Jun 201';
background: #fff;
font-size: 88%;
line-height: 1.4rem;
}
.swiper-carousel .swiper-button-prev, .swiper-carousel .swiper-carousel .swiper-button-next {
margin-top: 0;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.swiper-carousel.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: -46px!important;
}
/* ---------------------------------------

Information / Blog

--------------------------------------- */
ul.infomationBlock {}
ul.infomationBlock li, ul.blogListBlock li {border-bottom: #e3e4e4 1px solid;-js-display: flex;display: flex;-webkit-justify-content: flex-start; /* Safari */justify-content: flex-start;/* align-items: center; */flex-direction: column;}
ul.infomationBlock li a, ul.blogListBlock li a {color: #333333;padding: 10px 0;margin: 0 0 7px;line-height: 1.6rem;position: relative;}
ul.infomationBlock li a:hover, ul.blogListBlock li a:hover {
color: #10c3dc;
text-decoration: underline;
}
ul.infomationBlock span.date, ul.blogListBlock span.date {/* background: #0fadb9; *//* border-radius: 40px; */color: #0fadb9;padding: 16px 0 0;width: 140px;/* text-align: center; */}
/* ---------------------------------------

Menu

--------------------------------------- */
.brnMenu_l {
position: relative;
}
.brnMenu_l a {
display: block;
}
.brnMenu_l a .menuTit {
font-family: 'Jun 501';
position: absolute;
left: 100px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 125%;
color: #fff;
background: rgba(15, 173, 185, .75);
border-radius: 30px 0 30px 30px;
width: 280px;
height: 152px;
text-align: center;
}
img.icon_brnMenu_l {
display: block;
margin: 0 auto 20px;
width: auto;
}
.menuArea a:hover img {
opacity: 1;
}
.menuArea a:hover {
opacity: .8;
}
.brnMenu_3column ul {
-js-display: flex;
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
margin: 40px auto;
}
.brnMenu_l a .menuTit span.tit {
line-height: 1;
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.brnMenu_3column ul li {
position: relative;
}
.brnMenu_3column ul li a {
display: block;
}
.brnMenu_3column ul li a .menuTit {
font-family: 'Jun 501';
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 125%;
color: #fff;
background: rgba(15, 173, 185, .75);
border-radius: 30px 0 30px 30px;
width: 180px;
height: 152px;
text-align: center;
}
img.icon_brnMenu_s {
display: block;
margin: 0 auto 20px;
width: auto;
}
.brnMenu_3column ul li a .menuTit span.tit {
line-height: 1;
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
/* ---------------------------------------

フッター上 院情報エリア

--------------------------------------- */
.footerInfoArea {
background: url("images/top/background-top.jpg") center no-repeat;
background-size: cover;
min-height: 475px;
margin: 120px auto 0;
}
.footerInfoArea .wrapper {
padding: 80px 0;
}
.fBox {
background: #fff;
border-radius: 0 40px 40px 40px;
padding: 40px;
}
.fBox_wrapper {
background: #eff7fb;
border-radius: 0 40px 40px 40px;
-js-display: flex;
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
align-items: center;
}
.fBox .imgBlock {
max-width: 200px;
}
.fBox .imgBlock img {
border-radius: 0 0 0 40px;
}
/* 病院情報エリア
-------------------------------------- */
.f_infoBlock {
width: 30%;
margin: 0 auto;
padding: 0 30px;
}
.f_infoBlock p {
line-height: 1.4rem;
padding: 8px 0;
}
.f_infoBlock p.name {
font-family: 'Jun 501';
font-size: 113%;
}
.f_infoBlock p.add {
font-size: 94%;
}
.f_infoBlock a.btn_map {
display: inline-block;
background: #10c3dc;
border-radius: 24px;
color: #fff;
text-align: center;
padding: 6px 0;
width: 160px;
}
/* 診療時間
-------------------------------------- */
.hyoBlock {
margin: 0 40px;
width: 42%;
}
.hyoBlock table {
width: 100%;
}
.hyoBlock tr {
border-bottom: #e3e4e4 1px solid;
}
.hyoBlock tr th {
text-align: left;
padding-right: 0;
padding-left: 0;
font-weight: bold;
}
.hyoBlock tr.yobi td {
font-weight: bold;
}
.hyoBlock tr th, .hyoBlock tr td {
font-family: 'Jun 501';
font-size: 88%;
padding: 1.2em 0.2em;
}
.hyoBlock tr td.day {
color: #10c3dc;
}
.hyoBlock p.bussiness_day_txt {
padding: 0;
line-height: 1.4rem;
}
/* ---------------------------------------

フッター

--------------------------------------- */
footer {
width: 100%;
margin: 0 auto;
padding: 80px 0 0;
}
footer a.f_logo {
margin: 0 auto 40px;
max-width: 278px;
display: block;
}
.addBlock {
text-align: center;
background: #10c3dc;
}
.addBlock p {
color: #fff;
line-height: 1.4rem;
padding: 20px 0;
}
/* フッターメニュー
-------------------------------------- */
.f_menuBlock {
background: #e7fffb;
padding: 22px 0 20px;
}
.f_menuBlock ul {
-js-display: flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.f_menuBlock ul li {
font-family: 'Jun 201';
}
.f_menuBlock ul li a {
padding: 0 18px;
}
.f_menuBlock ul.mainMenu li + li a {
border-left: 1px solid #0fadb9;
}
.f_menuBlock ul li a {
color: #333333;
font-size: 88%;
}
.f_menuBlock ul.subMenu {
padding: 14px 0 40px;
}
p.copyright {
font-size: 75%;
text-align: center;
}
/* ---------------------------------------

スマホ固定メニュー

--------------------------------------- */
.sp_menu_fiexd {display: none;}

/* ---------------------------------------

カレンダー

--------------------------------------- */
.calBlock {
width: 100%;
max-width: 820px;
margin: 0 auto 60px;
}