@charset "UTF-8";

/* 共通部分
------------------------------- */
* {
  box-sizing: border-box;
}

html {
    front-size: 100%;
}
body {
    font-family:  'Philosppher', serif;
      line-height: 1.7;
        color: #432;
}
a{
  text-decoration: none;
}
img {
  max-width: 100%;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/* 大きな背景画像 */
.big-bg {
     background-size: cover;
     background-position: center top;
     background-repeat: no-repeat;
}


/* 見出し */
#home .page-title{
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  text-shadow:1px 0 5px  #b1921b;
}
.page-title {
           font-family:  'Philosppher', serif;
           text-transform: uppercase;
           font-weight: bold;
}


 /* header
 ------------------------------- */

 header {
   height: 70px;
   width: 100%;
   padding: 0px 15px;
   background-color: #fff;
   position: fixed;
   top: 0;
   z-index: 10;
   display: flex;
 }

 .logo {
   width: 130px;
   margin-top: 3px;
 }

 .reserve::after{
   font-family: "Font Awesome 5 Free";
   content: "\f3cd";
   font-weight: 1000;
   position: absolute;
 }


 nav {
   margin: 30px 0 0 auto;
 }

 .pc ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .pc a {
   color: #432;
   text-decoration: none;
   display: block;
   line-height: 40px;
   padding: 0 20px;
 }

 .sm {
   display: none;
 }

.first{
  padding: 20px;
}

 /**********************************　
 以下、ハンバーガーメニューの設定　
 ************************************/

 @media (max-width: 600px) {

   .pc {
     display: none;
   }

   #hamburger {
     background-color: transparent;
     position: relative;
     cursor: pointer;
     margin: 0 0 0 auto;
     height: 60px;
     width: 60px;
   }

   .icon span {
     position: absolute;
     left: 15px;
     width: 30px;
     height: 4px;
     background-color: black;
     border-radius: 8px;
     transition: ease 0.75s;
   }

   .icon span:nth-of-type(1) {
     top: 16px;
   }
   .icon span:nth-of-type(2) {
     top: 28px;
   }
   .icon span:nth-of-type(3) {
     bottom: 16px;
   }

   .close span:nth-of-type(1) {
     transform: rotate(45deg);
     top: 28px;
   }

   .close span:nth-of-type(2) {
     opacity: 0;
   }

   .close span:nth-of-type(3) {
       transform: rotate(-45deg);
       top: 28px;
   }

   .sm {
       top: 40px;
       left: 0px;
       position: absolute;
       z-index: 10;
       width: 100%;
       background-color: #fff;
   }

   .sm ul {
     flex-direction: column;
     list-style: none;
     line-height: 40px;
     text-align: center;
     border-top: solid 0.5px gray;

   }

   .sm li{
     border-top: solid 0.5px gray;

   }

   .sm a {
     text-align: center;
      text-decoration: none;
      color: #432;
   }
 }


/*home
------------------------------------*/

#home {
     background-image: url(../images/-0013.jpg);
     min-height: 100vh;
}
#home .page-title{
   text-transform: none;
   text-align: center;
}
#home p{
      text-transform: none;
      text-align: center;
}
#home .page-title span{
}

.main-title{
  padding: 1rem 2rem;
    border-bottom: 3px solid #000;
    background: #f4f4f4;
    margin-top: 40px;
    margin-bottom: 30px;
}

.countdown{
  text-align: center;
  background-color: gray;
  font-size: 2.5rem;
  color: white;
}


/*ワードプレス埋め込み*/
.topics{
padding: 20px;
color: #432;
text-decoration: none;
}

.topics ul{
  list-style: none;
  color: 432;
}

.news-title{
  text-align: center;
  border-bottom: 1px solid #432;
  font-size: 1.5rem;
}

.title{
  border-bottom: 1px solid #432;

}

.titleWrap a {
  color: #432;
  text-decoration: none;
}

.category{
font-size: 1.25rem;
color: #432;
text-decoration: none;
}

.date {
  margin-bottom: : 15px;

}

.improve{
  display: flex;
  text-align: center;
  padding: 30px ;
  font-size: 1rem;
}

.improve-one{
  box-shadow: 15px 15px 0px 0px #432;
  border: dashed 0px gray;
  padding: 1em ;
  color: #454545;
  width: calc(33.3% - 10px);
  margin: 20px 20px;
  font-size: 24px;
  font-weight: bold;
  background-color: rgba(255,255,255,.5);
}


.improvement{
  text-align: center;
  background: rgba(255,255,255,.5);
}

/*こだわり*/

obsession-point div.obsession{
  margin: 20px 5px;
}

.obsession{
  margin-top: 50px;


}


.obsession h4 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #000;
}

.obsession h4:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #000;
}

.obsession h4 span {
  font-size: 20px;
  font-size: 2rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}

/*写真横並び*/
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 15%;
  margin-bottom: 50px;
  text-align: center;
}



/*診療時間*/
.time-table {
  display: block;
  border-collapse: collapse;
  margin-top: 30px;
}

.time-table {
  display: block;
  border-collapse: collapse;
}

.time-table th {
  border-top: 1px solid #432;
}

.time-table th, .time-table td {
  padding: 0px 10px;
  text-align: center;
  height:50px;
  border-bottom: 1px solid #432;
}

.time-table td {
	  width: 100%;
    min-width: 58px;
    color:#432;
    font-weight: bold;
}

.time-table td .time {
 color:#432;
}

@media screen and (max-width: 764px)  {
 .time-table td {
  min-width: auto;
  width:100%;
  max-width:5%;
  font-size:12px;
 }

 .time-table th, .time-table td {
  min-width: 40px;
  width:100%;
  padding:0px 15px;
  font-size:10px;
 }
}


/* snsリンク
-------------------------------*/
.flowbtn18{
font-family:'Georgia',sans-serif;
display:inline-block;
position:relative;
width:90%;
height:50px;
font-size:23px;
border-radius:5px;
background-color:#444;
color:#fff!important;
text-decoration:none;
}

.snsbtniti2 li{
list-style: none;
}

.flowbtn18 i{
position:relative;
bottom:5px;
}
.flowbtn18:hover{
text-decoration:none;
}
.flowbtn18 div{
font-size:15px;
position:relative;
bottom:22px;
}
/* Twitterマウスホバー時 */
.flowbtn18.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn18.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
/* Facebookマウスホバー時 */
.flowbtn18.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedlyマウスホバー時 */
.flowbtn18.fl_fd2:hover{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocketマウスホバー時 */
.flowbtn18.fl_pk2:hover{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
.flowbtn18.fl_hb2{
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn18.fl_hb2:hover{
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTubeマウスホバー時 */
.flowbtn18.fl_yu2:hover{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn18.fl_li2:hover{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn18.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* プロフィールマウスホバー時 */
.flowbtn18.fl_pf2:hover{
background:linear-gradient(135deg, #fad961 0%,#f8a33f 100%);
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}


/* スタッフ
-------------------------------*/
.container wrapper{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}

.container{
  margin-top: 40px;
  border-bottom: solid 2px #432;
}
/* content */
 .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.staff-image{
    border-radius: 100%;
}
.wrapper .content-item {
    width:100%;


}
 .content-item {
        width:50%;
    }
    .wrapper .image{
        display:block;
        max-width:100%;
        margin:0px auto;
    }
    .wrapper .text{
        padding:20px;
    }
    .wrapper .text .heading{
        margin:0px 0px 40px 0px;
        font-size: 24px;
        font-weight: normal;
        text-align: center;
    }



/* 症状別
-------------------------------*/
.symptoms-example{
  list-style: none;
  text-decoration: none;
  display: flex;
  flex-wrap:wrap;
  gap:10px;
  align-items: center;
}

.symptoms-btn{
  font-family:'Georgia',sans-serif;
  display:inline-block;
  position:relative;
  width:20%;
  height:50px;
  font-size:15px;
  border-radius:5px;
  background-color:#444;
  color:#fff!important;
  text-decoration:none;
  padding: 10px;
  }

.symptoms-example li{
  text-align: center;
}

.symptoms-example a{
  color: #fff !important;

}






/* price
-------------------------------*/
.price{
    max-width: 700px;
    margin: 0 auto;
    font-size: 1,125rem;
    padding: 100px 0;
}
.price dl {
    display: table;
    width: 100%;
    border: solid #e4e4e4;
    border-width: 1px 0;
}
.price dt{
    display: table-cell;
    padding:0.4rem;
}
.price dd{
    text-align: right;
    display: table-cell;
    padding:0.4rem;
}
.price dd:after{
    display: inline-block;
    content: "";
    width: 1em;
    font-size: 0.7em;
}
.price dd.from:after {
    content: "〜";
}
.notes{
    font-size: 0.7rem;
    font-family:"Yu Mincho", "YuMincho";
}



/***ステップバーデザイン5***/
.step-wrap5 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content5 {
 padding: 4em 0 2em;
 margin: 0;
 position: relative;
 text-align: center;
}
.step-content5::before {
 content: "";
 display: block;
 width: 55px;
 height: 55px;
 background: #432;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: calc(50% - 27.5px);
}
.step-label5 {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 position: absolute;
 top: 6px;
 left: calc(50% - 15px);
}
.step-label5::after {
 counter-increment: count;
 content: counter(count);
 position: absolute;
 font-size: 30px;
 top: 8px;
 left: 7px;
}
.step-title5 {
 font-weight: bold;
 font-size: 120%;
}
.step-title5::first-line {
 text-align: center;
}
.step-body5 {
 margin-top: 1em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-image{
  width: 400px;
  margin: 0 auto;
}

/***ステップバーデザイン5***/

/*リスト*/
.service ul{
border-top: solid ＃432 2px;/*上のボーダー*/
  border-bottom: solid #432 2px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
  margin-bottom: 30px;
}
.service{
  margin-top: 30px;
}

.service h2 {
  text-align: center;
}
.service li + li {
  margin-top: 30px;
}

.service p{
  margin-top: 10PX;
  margin-left: 40px;
}
.service li {
  position: relative;
  line-height: 1.2;
  padding-left: 1.7em;
  margin-top: 30px;
  list-style: none;
}

.service li::before {
  position: absolute;
  left: 0;
  content: "";
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #F2F2F2;

}

.service li::after {
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  content: "";
  display: block;
  width: 1em;
  height: 0.5em;
  border-left: 4px solid #5AB43F;
  border-bottom: 4px solid #5AB43F;
  transform: rotate(-45deg);

}

/*リスト*/
.service ul{
border-top: solid orange 2px;/*上のボーダー*/
  border-bottom: solid orange 2px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
  margin-bottom: 30px;
}
.service{
  margin-top: 30px;
}

.service h2 {
  text-align: center;
}
.service li + li {
  margin-top: 30px;
}

.service p{
  margin-top: 10PX;
  margin-left: 40px;
}
.service li {
  position: relative;
  line-height: 1.2;
  padding-left: 1.7em;
  margin-top: 30px;
  list-style: none;
}

.service li::before {
  position: absolute;
  left: 0;
  content: "";
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #F2F2F2;

}

.service li::after {
  position: absolute;
  left: 0.2em;
  top: 0.3em;
  content: "";
  display: block;
  width: 1em;
  height: 0.5em;
  border-left: 4px solid #5AB43F;
  border-bottom: 4px solid #5AB43F;
  transform: rotate(-45deg);
}

.side-menu{
  margin-bottom: 60px;
  list-style: none;
}
.side-menu li{
  border-bottom: 1px #ddd solid;
}
.side-menu a {
    color: #432;
    padding: 10px;
    display: block;

}





/*faq*/
#faq{
  background-image: url(../images/faq.jpg);
height: 400px;
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	overflow-x: hidden;
	margin: 0 auto;
	color: #333333;
}
.cp_qa .cp_actab {
	padding: 20px 0;
	border-bottom: 1px dotted #cccccc;
}
.cp_qa label {
	font-size: 1.2em;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 10px 0 48px;
	cursor: pointer;
}
.cp_qa .cp_actab-content {
	font-size: 1em;
	position: relative;
	overflow: hidden;
	height: 0;
	margin: 0 40px;
	padding: 0 14px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
	height: auto;
	padding: 14px;
	opacity: 1;
}
.cp_qa .cp_plus {
	font-size: 2.4em;
	line-height: 100%;
	position: absolute;
	z-index: 5;
	margin: 3px 0 0 10px;
	-webkit-transition: 0.2s ease;
	        transition: 0.2s ease;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.cp_qa .cp_actab input[type=checkbox] {
  display: none;
}


/*CONTACT
-----------------------------------*/
#contact{
  background-image: url(../images/1234.jpg);
  height: 400px;;
  margin-bottom: 40px;
}

/* 店舗情報・地図 */
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* ifram */
iframe{
  width: 100%;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 50px;
}
.sns-box {
    width: 50%;
}





/*　フッター
-------------------------------*/
/***追従するトップへ戻るボタン***/
#page_top{
  width: 50%;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  background:   #2c3148;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f3cd';
  font-size: 20px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0px;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: '初回WEB予約';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top1{
  width: 50%;
  height: 60px;
  position: fixed;
  left: 0;
  bottom: 0;
  background:  gray;
}

#page_top1 a{
  position: relative;
  display: block;
  width: 95%;
  height: 60px;
  text-decoration: none;
}
#page_top1 a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f879';
  font-size: 20px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top1 a::after{
  content: 'TEL問合せ';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/***トップへ戻るボタンここまで***/

footer {
     background: black;
     text-align: center;
     padding: 26px 0;
}
footer p {
     color: #fff;
     front-size: 0.875rem;
}

.privacy{
  color: white;
  font-size: 0.5rem;
}


/* モバイル
---------------------------------*/
@media (max-width: 600px) {



  #home .page-title {
     font-size: 2rem;
     margin-top: 100px;
  }
     .page-title {
         font-size: 2.5rem;
     }
     .btn-edge{
       margin-top:auto;
     }
     .page-header {
        flex-direction: column;
        align-items: center;
     }

  .btn{
    margin-top: 60px;
    text-align: center;
  }

  .label{
    margin:20px auto 20px 0;
  }

.improve-one{
  font-size: 15px;
}

/* スタッフ*/
/* container */






/* 症状別 */
.symptoms-example{
  flex-direction: column;
}

.symptoms-btn{
  width: 100%
}


     /* HEADER */
     .main-nav {
       font-size: 0.9rem;
       margin-top: 10px;
     }
     .main-nav li {
       margin: 0 20px;
     }

     /* HOME */

  /* NES*/
.news li{
  flex-direction: column;
}



    /* CONTACT */
   #contact .page-title {
       margin-top: 30px;
   }

   /* 店舗情報・地図 / SNS */
   #location .wrapper,
   #sns .wrapper {
       flex-direction: column;
   }
   .location-info,
   .location-map,
   .sns-box {
       width: 100%;
   }
   .sns-box {
       margin-bottom: 30px;
   }

}