@charset "UTF-8";
/*
Theme Name: ハロクリニック
*/


@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500&display=swap');

/* style.css */
body {
    margin: 0;
    padding: 0;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    max-width: 750px;
    margin: 0 auto;
    background-color: #fff;
	color:#333333;
}

h2,h3{font-weight:bold;}
h4,h5,p{font-weight:normal;}
h2{
	border-bottom:#bbaa85 solid 3px;
	background-color:#cbb890;
	color:#fff;
	padding:.2em .5em;}
h3{
	background-color:#f5f5f5;
	padding:.2em .5em;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 8px 20px;
    background-color:#cbb890;
    color: #fff;
    position: relative;
    z-index: 100;
}
header div.pc{font-size:1.2rem;margin-right:auto;}


nav {
    display: none;
}

.logo {
  margin-right: auto;
}

.logo img {
	max-height:60px;
}

nav ul {
    list-style: none;
    display: flex;
}


nav ul li a {
    color: #fff;
    text-decoration: none;
}

.reserve-btn {
margin-left: auto;
margin-right:1em;
}

.reserve-btn a {
background-color: #c09b91;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}

.reserve-btn a:hover{
	background-color:#b5897e;
}

@media (max-width: 749px) {
header {
padding: 8px 20px 0px 5px;
}
.reserve-btn {
margin-right:1em;
}
.reserve-btn a {
padding: 10px 20px;
}
}
@media (max-width: 389px) {
.reserve-btn a {
padding: 10px 10px;
}	
}

.reserve-tel{padding-right:1em;}
@media (max-width: 390px) {
.reserve-tel{padding-right:0.8em;}
}
@media (max-width: 389px) {
.reserve-tel{padding-right:0.5em;width:40px;}
.reserve-tel img{max-width:40px;}
}

.hamburger {
    display: block;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin-bottom: 5px;
}

nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #c09b91;
    z-index: 99;
	font-size:1.4rem;
}

nav.active ul {
    flex-direction: column;
    align-items: center;
	margin:0; padding:0;
}

nav.active ul li {
    margin: 0;
	width:100%;
}

@media (max-width: 749px) {
    nav {
        display: none;
    }

    .hamburger {
        display: block;
    }

    nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #c09b91;
    }

    nav.active ul {
        flex-direction: column;
        align-items: center;
    }

    nav.active ul li {
        margin: 10px 0;
    }
}

nav.active ul li a {
    display: block;
    padding:1em;
    transition: background-color 0.3s;
}

nav.active ul li a:hover {
    background-color: #b5897e;
}

@media (max-width: 749px) {
nav.active {
	font-size:1.2rem;
}
nav.active ul li a {
	padding:0.7em 1em;
}
}

.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

#fv {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.slider {
  width: 100%;
  height: 100%;
  position: relative;
}


.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1s ease-in-out, transform 5s linear;
}


.slider img.active {
  opacity: 1;
  transform: scale(1.1);
}

  .slider img:nth-child(1) {
    opacity: 1;
  }


.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

@media (max-width: 749px) {
#fv {
  height: 360px;
}
  .slider-text {
    font-size: 1.5rem;
  }
}

p.hajimeni {
  position: relative;
  display: inline-block;
  padding: 0 45px;
  font-size:1.2rem;
  margin-bottom:0;
}
p.hajimeni:before,
p.hajimeni:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 34px;
  height: 1px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
p.hajimeni:before {
  left:0;
}
p.hajimeni:after {
  right: 0;
}
p.hajimeni_text{
}

@media (max-width: 749px) {
p.hajimeni {
	font-size:1rem;
}
p.hajimeni:before,
p.hajimeni:after {
  width: 24px;
}
}

#about {
  background-image: url('http://biyou.yobouiryoukai.com/wp-content/uploads/2024/04/bg_01.jpg');
  background-size: cover;
  background-position: center;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 750px) {
#about {min-height: 80vh;}
}


#about .text-container {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  max-width: 600px;
  text-align: center;
}

#about .text-container p {
  line-height: 1.6;
}

#about .text-container p strong{
	font-size:1.2rem;
}

@media (max-width: 749px) {
#about {
padding: 1rem;
  }

#about .text-container {
    padding: 0.5rem;
    max-width: 100%;
  }
#about .text-container p strong{
	font-size:1rem;
}

}

#submenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	padding: 0.5em;
}

#submenu h2 {
  width: 100%;
}

.submenu-card {
  width: 32%;
  margin-bottom: 20px;
  text-align: center;
	background-color:#f7f7f7;
}

#submenu .submenu-card h3{ background-color:#efebe9; margin-top:0;}

.submenu-card h3 {
  font-size: 1.1rem;
  padding-top:0.5em;
	padding-bottom:0.5em;
  border-bottom: 1px solid #e7e3e2;
}

.submenu-card p {
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.submenu-card a{
	color:#333333;
	text-decoration:none;
	display:block;
}

.arrow {
  border: solid #c09b91;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

@media (max-width: 749px) {
  .submenu-card {
    width: 49%;
  }
}

#menu {

}

#menu .menu-item h3{
margin-bottom:0;
margin-top:0;}

.menu-item p{padding-left:.5em;
padding-right:.5em;}

.menu-item {
margin-bottom: 30px;
border:#f5f5f5 1px solid;
}

.menu-item img,
.menu_cat_img {
    width: 480px;
    height: 300px;
    object-fit: cover;
}

@media (max-width: 749px) {
.menu-item img,
.menu_cat_img {
    max-width: 100%;
    object-fit: cover;
}
}

@media (max-width: 500px) {
.menu-item img,
.menu_cat_img {
    height: 200px;
}
}

.price {
    color: #cbb890;
    font-weight: bold;
font-size:1.4rem;color:#968266;
}


.recommend {
    color: #95a5a3;
	font-size:1.2rem;
}
@media (max-width: 749px) {
.recommend{
	font-size:1rem;
}
}

#price {

}


h3.price_title{background-color:#fff; border-left:#cbb890 4px solid;}
h3.price_subtitle{background-color:#fff; border-left:#efebe9 4px solid;
font-size:1rem; margin-bottom:0.2em;font-weight:normal;}


.price-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.price-item {
    width: calc(33.33% - 30px);
    background-color: #c09b91;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 749px) {
.price-item {
    width: calc(48% - 20px);
}
}


#payment {

}

#contact {

}

.phone-number {
align-items: center;
justify-content: center;
position: relative;
font-size:1.8rem;
display: block;
padding: 10px 20px;
background-color: #95a5a3;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin: 0 auto;
width: 80%;
box-sizing: border-box;
text-align: center;
}

.phone-number span{font-size:1rem; padding-right:0.2rem;}
.phone-number::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translate(0, -50%) rotate(45deg);


}

@media (max-width: 749px) {
.phone-number{ font-size:1.3rem;}
.phone-number span{font-size:0.8rem;}
}


.contact-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.contact-btn {
    display: block;
    width: 200px;
    padding: 15px;
    margin: 0 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
	border:#cbb890 1px solid;
	background-color:#e9e3d8;
}

a.contact-btn {
  color: #bbaa85;
	font-weight:bold;
}


a.phone-number,
a.contact-btn{
	  transition: transform 0.2s;
}

a.phone-number:hover,
a.contact-btn:hover {
  transform: scale(1.1);
}

#access {

}
#access h3{text-align:center; margin:auto;}
.access-info{
	background-color: #f5f5f5;
}
.access-info p{ padding:0.5em;}
.access-info img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

#access p.recommend{font-size:1.4rem;color:#968266;
margin-bottom:0; font-weight: bold;}




.access_inner{ padding-left:1em;}

.access-adress {
  display: inline-block;
  border: 1px solid #cecbce;
  padding: 10px;
  margin-right: 10px;
  width:5em;
}
h3.access-adress{ font-size:1rem;}

#access p {
  display: inline-block;
  margin-right: 20px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}




.map {
    margin-bottom: 0 auto 20px;
	text-align:center;
}

.map-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.map-btn {
    display: block;
    width: 48%;
    padding: 10px;
    background-color: #c09b91;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 0.5em;
}
.map-btn.map-route{
	background-color: #95a5a3;
}

@media (max-width: 749px) {
.map iframe {max-width:100%;}	
}

.reception-hours {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 30px;
    text-align: center;
}

.hours-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.closed-days, .consultation-hours {
    margin: 0;
    flex-basis: 50%;
    text-align: left;
}

.closed-days h3, .consultation-hours h3 {
    color: #333;
	font-weight:normal;
    margin-bottom: 5px;
	border: 1px solid #cecbce;
    padding: 10px;
    display: inline-block;
}

.closed-days p, .consultation-hours p {
    color: #333;
    display: inline-block;
    padding: 5px 10px;
    margin: 0;
}




.sns {
    margin-top: 20px;
}

#reserve {

    text-align: center;
}

.tel-reserve,
.web-reserve {
    display: block;
    width: 90%;margin:0 auto 20px;
    padding: 20px;
    background-color: #c09b91;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
}
.web-reserve{background-color: #95a5a3;}

@media (max-width: 749px) {
#menu,#access,#price,#payment,#contact,#reserve,#first {padding: 0.5em;}
.tel-reserve,
.web-reserve {width: 80%;margin:0 auto 20px;}
}

footer {
    background-color: #333333;
    color: #fff;
    text-align: center;
    padding: 20px;
}


#page-top{position:fixed;right:20px;bottom:10px;z-index:2;}
@media screen and (max-width:749px){
#page-top{position:fixed;}	
}

#page-top img{max-height:50px;width:auto}
#page-top img:hover{opacity:.8}

.m-0 {margin: 0 !important;}
.mt-0 {margin-top: 0 !important;}
.mr-0 {margin-right: 0 !important;}
.mb-0 {margin-bottom: 0 !important;}
.ml-0 {margin-left: 0 !important;}
.mx-0 {margin-left: 0 !important;margin-right: 0 !important;}
.my-0 {margin-top: 0 !important;margin-bottom: 0 !important;}
.m-1 {margin: 0.25rem !important;}
.mt-1 {margin-top: 0.25rem !important;}
.mr-1 {margin-right: 0.25rem !important;}
.mb-1 {margin-bottom: 0.25rem !important;}
.ml-1 {margin-left: 0.25rem !important;}
.mx-1 {margin-left: 0.25rem !important;margin-right: 0.25rem !important;}
.my-1 {margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;}
.m-2 {margin: 0.5rem !important;}
.mt-2 {margin-top: 0.5rem !important;}
.mr-2 {margin-right: 0.5rem !important;}
.mb-2 {margin-bottom: 0.5rem !important;}
.ml-2 {margin-left: 0.5rem !important;}
.mx-2 {margin-left: 0.5rem !important;margin-right: 0.5rem !important;}
.my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}
.m-3 {margin: 0.75rem !important;}
.mt-3 {margin-top: 0.75rem !important;}
.mr-3 {margin-right: 0.75rem !important;}
.mb-3 {margin-bottom: 0.75rem !important;}
.ml-3 {margin-left: 0.75rem !important;}
.mx-3 {margin-left: 0.75rem !important;margin-right: 0.75rem !important;}
.my-3 {margin-top: 0.75rem !important;margin-bottom: 0.75rem !important;}
.m-4 {margin: 1rem !important;}
.mt-4 {margin-top: 1rem !important;}
.mr-4 {margin-right: 1rem !important;}
.mb-4 {margin-bottom: 1rem !important;}
.ml-4 {margin-left: 1rem !important;}
.mx-4 {margin-left: 1rem !important;margin-right: 1rem !important;}
.my-4 {margin-top: 1rem !important;margin-bottom: 1rem !important;}
.m-5 {margin: 1.5rem !important;}
.mt-5 {margin-top: 1.5rem !important;}
.mr-5 {margin-right: 1.5rem !important;}
.mb-5 {margin-bottom: 1.5rem !important;}
.ml-5 {margin-left: 1.5rem !important;}
.mx-5 {margin-left: 1.5rem !important;margin-right: 1.5rem !important;}
.my-5 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.m-6 {margin: 3rem !important;}
.mt-6 {margin-top: 3rem !important;}
.mr-6 {margin-right: 3rem !important;}
.mb-6 {margin-bottom: 3rem !important;}
.ml-6 {margin-left: 3rem !important;}
.mx-6 {margin-left: 3rem !important;margin-right: 3rem !important;}
.my-6 {margin-top: 3rem !important;margin-bottom: 3rem !important;}
.m-auto {margin: auto !important;}
.mt-auto {margin-top: auto !important;}
.mr-auto {margin-right: auto !important;}
.mb-auto {margin-bottom: auto !important;}
.ml-auto {margin-left: auto !important;}
.mx-auto {margin-left: auto !important;margin-right: auto !important;}
.my-auto {margin-top: auto !important;margin-bottom: auto !important;}
.p-0 {padding: 0 !important;}
.pt-0 {padding-top: 0 !important;}
.pr-0 {padding-right: 0 !important;}
.pb-0 {padding-bottom: 0 !important;}
.pl-0 {padding-left: 0 !important;}
.px-0 {padding-left: 0 !important;padding-right: 0 !important;}
.py-0 {padding-top: 0 !important;padding-bottom: 0 !important;}
.p-1 {padding: 0.25rem !important;}
.pt-1 {padding-top: 0.25rem !important;}
.pr-1 {padding-right: 0.25rem !important;}
.pb-1 {padding-bottom: 0.25rem !important;}
.pl-1 {padding-left: 0.25rem !important;}
.px-1 {padding-left: 0.25rem !important;padding-right: 0.25rem !important;}
.py-1 {padding-top: 0.25rem !important;padding-bottom: 0.25rem !important;}
.p-2 {padding: 0.5rem !important;}
.pt-2 {padding-top: 0.5rem !important;}
.pr-2 {padding-right: 0.5rem !important;}
.pb-2 {padding-bottom: 0.5rem !important;}
.pl-2 {padding-left: 0.5rem !important;}
.px-2 {padding-left: 0.5rem !important;padding-right: 0.5rem !important;}
.py-2 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}
.p-3 {padding: 0.75rem !important;}
.pt-3 {padding-top: 0.75rem !important;}
.pr-3 {padding-right: 0.75rem !important;}
.pb-3 {padding-bottom: 0.75rem !important;}
.pl-3 {padding-left: 0.75rem !important;}
.px-3 {padding-left: 0.75rem !important;padding-right: 0.75rem !important;}
.py-3 {padding-top: 0.75rem !important;padding-bottom: 0.75rem !important;}
.p-4 {padding: 1rem !important;}
.pt-4 {padding-top: 1rem !important;}
.pr-4 {padding-right: 1rem !important;}
.pb-4 {padding-bottom: 1rem !important;}
.pl-4 {padding-left: 1rem !important;}
.px-4 {padding-left: 1rem !important;padding-right: 1rem !important;}
.py-4 {padding-top: 1rem !important;padding-bottom: 1rem !important;}
.p-5 {padding: 1.5rem !important;}
.pt-5 {padding-top: 1.5rem !important;}
.pr-5 {padding-right: 1.5rem !important;}
.pb-5 {padding-bottom: 1.5rem !important;}
.pl-5 {padding-left: 1.5rem !important;}
.px-5 {padding-left: 1.5rem !important;padding-right: 1.5rem !important;}
.py-5 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}
.p-6 {padding: 3rem !important;}
.pt-6 {padding-top: 3rem !important;}
.pr-6 {padding-right: 3rem !important;}
.pb-6 {padding-bottom: 3rem !important;}
.pl-6 {padding-left: 3rem !important;}
.px-6 {padding-left: 3rem !important;padding-right: 3rem !important;}
.py-6 {padding-top: 3rem !important;padding-bottom: 3rem !important;}
.p-auto {padding: auto !important;}
.pt-auto {padding-top: auto !important;}
.pr-auto {padding-right: auto !important;}
.pb-auto {padding-bottom: auto !important;}
.pl-auto {padding-left: auto !important;}
.px-auto {padding-left: auto !important;padding-right: auto !important;}
.py-auto {padding-top: auto !important;padding-bottom: auto !important;}

.table{border-collapse:collapse;border-spacing:0}
.table td,
.table th{padding:0}
.table td:not([align]),
.table th:not([align]){text-align:inherit}

.table{background-color:#fff;color:#363636}
.table td,
.table th{border:1px solid #dbdbdb;border-width:0 0 1px;padding:.5em .75em;vertical-align:top}
.table th{color:#363636}
.table th:not([align]){text-align:inherit}
.table.is-bordered td,
.table.is-bordered th{border-width:1px}
.table.is-bordered tr:last-child td,
.table.is-bordered tr:last-child th{border-bottom-width:1px}
.table.is-fullwidth{width:100%}
.table.is-hoverable tbody tr:not(.is-selected):hover{background-color:#fafafa}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover{background-color:#fafafa}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even){background-color:#f5f5f5}

/* スマホ向けのスタイル */
@media (max-width: 767px) {
.sp		{display: block;}
.sp br	{display: inline;}
.pc		{display: none;}
}

/* PC向けのスタイル */
@media (min-width: 768px) {
.sp		{display: none;}
.pc		{display: block;}
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th {
  background-color: #efebe9; color:#555555;
}
.table td {
  background-color: #f7f7f7; color:#968266;
}



.table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.table th, .table td {
  border: 2px solid #fff;
  padding: 8px;
  text-align: center;
}
@media screen and (max-width:749px){
.table {
	font-size:0.9rem;
}
}

.small{padding:0;margin:0; font-size:0.8rem;}