@charset "UTF-8";

/* link
/* ------------------------------------- */
a {
transition: 0.5s;
}
a:hover {
opacity: 0.5;
}

#main img {
border: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
}

/*全体見出し
---------------------------------------------------------------------------*/
.section-title-f{
text-align:center;
font-size: 140%;
font-weight: normal;
line-height: 1.2;
margin: 0 0 20px 0;
color: #fff;
white-space: nowrap;
padding: 0
}
.section-title-f span{
font-size: .5em;
display: block;
letter-spacing:.05em;
color: #d08d04;
padding-bottom: 10px
}
@media screen and (min-width: 1024px) {
.section-title-f{
font-size: 160%;
}
}

/* more ボタン */
.more_box0 a{
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin:0 auto;
padding: .9em 2em;
border: none;
border-radius: 100vh;
color: #fff;
font-weight:normal;
font-size: 1em;
background: #d08d04;
text-decoration:none;
}
.more_box0 a:hover {
color: #fff;
background: #d08d04;
}

/* 施術 ボタン */
.more_box_menu a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:0 auto;
padding: 1em;
border-radius: 100vh;
color: #38261e;
font-weight: 400;
background: #f9be00;
text-decoration:none;
border: solid 2px #f9be00;
cursor: pointer;
transition: all 0.3s;
position: relative;
font-size: 1.1em;
}
.more_box_menu a:hover {
color: #f9be00;
background: initial;
transition: all 0.3s;
}
.more_box_menu a::after {
content: '';
position: absolute;
top: 45%;
right: 30px;
width: 10px;
height:10px;
border-width: 2px 2px 0 0;
border-style: solid;
border-top: 1px solid #d08d04;
border-right: 1px solid #d08d04;
transform: rotate(45deg);
transition: all 0.2s;
}
.more_box_menu a:hover:after {
right: 20px;
}

@media screen and (min-width: 767px) {
.more_box_menu a{
font-size: 1.2em;
width: 450px;
}}

/*画像
---------------------------------------------------------------------------*/
.slide_box{
width: 100%;
height: auto;
margin: 30px 0
}
.gazou:after{
content: "";
display: block;
clear: both}
.gazou {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: auto;
position:relative;
}
.outside-right img,
#metaslider-id-20 img{
  width: 100%;
  height: 380px;
object-fit: cover;
border-radius:50px 0 0 50px;
}
.outside-right{
margin-right: calc(50% - 50vw);
margin-left: 20%;
}
.badge{
position: absolute;
bottom: 0;
left: 20px;
}
.badge img{
width: 45px;
height: auto
}
@media screen and (min-width: 600px) {
.outside-right{margin-left: 25%;}
.badge img{width: 50px;}
.badge{
bottom: 30px;
}
}
@media screen and (min-width: 767px) {
.outside-right{
margin-left: 15%;
}
.outside-right img,
#metaslider-id-20 img{
height: auto
}
.badge img{
width: 60px;
}
}
@media screen and (min-width: 980px) {
.badge img{
width: 70px;
}
}

@media screen and (min-width: 1024px) {
.gazou {
max-width: 1000px;
}
.badge img{
width: 80px;
}
}
@media screen and (min-width: 1540px) {
.gazou {
max-width: 1100px;
}
.badge{
left: -60px;
}
.badge img{
width: 90px;
}
.outside-right{
margin-right: 0;
margin-left: 5%;
}
.outside-right img,
#metaslider-id-20 img{
  width: 100%;
  height: 700px;
object-fit: cover;
border-radius:50px;
}
}

/* 外観内観img
/* ------------------------------------- */
.omise_img {
padding: 0;
margin: auto;
}
@media screen and (min-width: 1024px) {
.omise_img {
max-width: 1000px;
margin: 30px auto auto;
}
}

/* message
/* ------------------------------------- */
.message section{
display: block;
max-width: 100%;
padding: 30px 0;
margin: auto;
}
.message_i{
width: 100%;
}
.message_i img{
width: 100%;
height: auto
}
.message_t {
width: 100%;
box-sizing: border-box;
padding: 6%;
}
.message_t .message_p {
margin: 10px 0 0 0;
}
.message h4 {
color: #fff;
font-size: 140%;
line-height:1.8em;
font-weight: normal;
margin: 0 auto;
text-align: left
}
.message h4 span{
font-size: .5em;
line-height:1.8em;
display: block;
letter-spacing:.05em;
color: #d08d04;
}
.message_p {
margin: 4% 0 6% 0;
text-align: justify;
line-height: 2.2em;
}
.message:after{content: "";
display: block;
clear: both}

@media screen and (min-width: 768px) {

.message h4 {
line-height:1.8em;
}
.message_p {
line-height:2.2em;
margin: 15px 0 30px 0;
}
}
@media screen and (min-width: 1024px) {
.message section{
padding: 60px 0;
}
.message_i {
width: 50%;
float: left;
}
.message_i img{
border-radius:0 50px 50px 0;
width: 100%;
height: auto
}
.message_t {
width: 45%;
float: right;
padding: 0 10% 0 0;
}
.message_p {
line-height:2.2em;
margin: 20px 0 40px 0;
}
}


/* Profile
/* ------------------------------------- */
.profile_bg {
max-width: 90%;
margin: 30px auto 30px auto;
color: #5e4032;
text-align: left;
box-sizing: border-box;
margin-inline: auto;
}
.item_inner {
background-color: #f4e9db;
margin-right: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
border-radius:50px 0 0 50px;
overflow:hidden;
}
.profile_boxA{
padding: 30px 0 30px 30px;
box-sizing: border-box;
}
.profile_boxA:after{
content: "";
display: block;
clear: both}
.boxC img{border-radius:50px}

.profile_bg h4{
font-size: 140%;
font-weight: normal;
line-height: 1.2;
margin: 0 0 30px 0;
}
.profile_bg h4 span{
font-size: .6em;
vertical-align: 5px;
}
.Profile{
font-size: .7em;
display: block;
letter-spacing:.05em;
color: #d08d04;
padding-bottom: 10px
}

@media screen and (min-width: 768px) {
.boxB{float: left;width: 60%;}
.boxC{float: right;width: 35%;}
}
@media (max-width:767px){
.boxB{margin-bottom: 5%
}
}
@media screen and (min-width: 1024px) {
.profile_bg {
max-width: 1000px;
margin: 60px auto;
}
.profile_boxA{
padding: 50px 0 50px 50px;
}
.profile_bg h4{
font-size: 160%;
line-height: 1.4;
}
}

/* table_profile
/* ------------------------------------- */
.table_profile {
border-collapse: collapse;
width: 100%;
}
.table_profile td:nth-of-type(2){
padding: .5em 0;
}
.table_profile td:nth-of-type(1) {
width: 130px
}


/* 3つのステップ
/* ------------------------------------- */
.step_bg {
max-width: 100%;
margin: 30px auto 60px auto;
text-align: center;
}

.steps_box {
flex-wrap: wrap;
display: flex;
justify-content: space-between;
margin-bottom: 30px
}
.steps_box .box_new {
padding:0;
box-sizing: content-box;
position:relative;
}
.steps_box_tex {
padding:15px 0;
text-decoration: none;
text-align: center;
color: #fff;
}
.steps_box_tex h5 {
font-size: 1.5em;
line-height: 2;
clear: both;
font-weight: normal
}
.steps_box_tex p {
font-size: 1em;
line-height: 1.5;
clear: both;
}
.steps_box .box_new a {
text-decoration: none;
}

.steps_box .box_new {
list-style:none;
padding:0;
}


@media screen and (min-width: 768px) {
.steps_box .box_new {
width: 30%;
}
.steps_box:after {
content: "";
display: block;
width: 32%;
height: 0;
}
.steps_box .box_new:not(:last-child)::before {
content: '';
position: absolute;
top: -20%;
bottom: 0;
width: 20px;
height: 20px;
margin: auto;
border-top: 1px solid #d08d04;
border-right: 1px solid #d08d04;
transform: rotate(45deg);
box-sizing: border-box;
right: -25px;
}
}
@media screen and (min-width: 1024px) {
.step_bg {
margin: 60px auto;
}
}
@media (max-width:767px){
.steps_box .box_new {
margin-bottom: 30px;
padding: 0 10%
}

.steps_box .box_new:not(:last-child)::before {
content: '';
position: absolute;
bottom: -5%;
left: 5%;
right: 27px;
width: 20px;
height: 20px;
margin: auto;
border-top: 1px solid #d08d04;
border-right: 1px solid #d08d04;
transform: translateY(-2px) rotate(135deg);
box-sizing: border-box;
}
}

/* info
/* ------------------------------------- */
.info_bg {
padding: 10% 0;
text-align: center;
background: #38261e
}
@media screen and (min-width: 768px) {
.info_bg {
padding: 60px 0;
}
.news_list {
width: 630px;
}
}

/* map・お問い合わせ
/* ------------------------------------- */
.map_box h3{
text-align:left;
font-size: 110%;
line-height: 1.5;
font-weight: bold;
margin-bottom: 10px;
}
address {
font-style: normal;
}
address h4{
text-align:left;
font-size: 180%;
line-height: 1.5;
font-weight: bold;
letter-spacing:.05em;
display:block;
}
address h4 a{
color: #fff;
text-decoration: none;
}
address h4 span{
font-size: .4em;
line-height: 1;
font-weight: normal;
display:block;
letter-spacing:0;
}
.map_box p{
font-weight: normal;
line-height: 2.5;
}
.column {
height: auto;
width: 100%;
text-align: left;
display: flex;
align-items: stretch;
}
.info_toiawase {
margin: 10% 6%;
}

.flex_toiawase {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-bottom: 20px;
margin-top:  20px;
}

.flex-item {
width: calc((100% - 3%) / 2);
height: auto;
margin-right: 3%;
font-size: 100%;
color: #fff;
text-align: center
}

.flex-item:nth-child(2n) {
margin-right: 0;
}

.flex-item a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:0 auto;
padding: .9em 0;
border: none;
border-radius: 100vh;
color: #fff;
font-weight:normal;
font-size: 1em;
text-decoration:none;
}
.flex-item.yoyaku a{
background: #ec6c00;
}
.flex-item.toi a{
background: #d08d04;
}

@media screen and (min-width: 768px) {
.map_box {
display: flex;
border-top: 1px solid #f4e9db;
}
.info_toiawase {
margin: 50px 10% 0 10%;
}
.flex-item a{
padding: .5em 0;
font-size: 1.3em;
}
}

/* 診療時間 */
.biz-hour {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 20px 0 10px 0
}

.biz-hour th {
border-top: none;
font-weight: bold;
font-size:90%;
padding:0 0 5px 0;
border-bottom: 1px solid #fff;
}
.biz-hour td {
color: #fff;
vertical-align: middle;
line-height: 0.8;
font-size:110%;
font-weight: normal;
border-bottom: 1px solid #fff;
padding: 25px 0
}

.biz-hour th, .biz-hour td {
text-align: center;
}
/*1列目だけ変更*/
.biz-hour th:nth-of-type(1),
.biz-hour td:nth-of-type(1){
text-align:left;
width: 120px;
padding:0;
font-size:100%;
line-height: 1.2
}
.biz-hour td:nth-of-type(1) span{
font-size:80%;
}

@media screen and (min-width: 981px) {
.biz-hour th {
font-size:100%
}
.biz-hour th:nth-of-type(1),
.biz-hour td:nth-of-type(1){
width: 140px;
}
}

/* <br>の表示切替 */
.br_sp {
    display: none !important;
}

@media screen and (max-width:980px) {
    .br_pc {
        display: none !important;
    }
    .br_sp {
        display: block !important;
    }
}