@charset "utf-8";

/*=================================================================================================================================*/
/** 個別指定 for スマートフォン
/*=================================================================================================================================*/

/*---------------------------------------------
 ** 740px
---------------------------------------------*/
@media screen and (max-width: 415px) {
  /*---------------------------------------------
	body
---------------------------------------------*/
  html {
    scroll-behavior: smooth;
    font-size: 55%;
  }
  body {
    color: #444;
  }

  /* display none */
  .only_sp_none {
    display: none !important;
  }

  /*画像*/
  img {
    max-width: 100%;
    height: auto;
  }

  p{
    text-align: justify;
  }
  /*---------------------------------------------
 ** h1
---------------------------------------------*/
  h1 {

  }

  h4 {
    padding: 0rem 0 2.6rem;
  }

  /*---------------------------------------------
 **  カラム
---------------------------------------------*/
  #main {
    width: 90%;
    margin: 0 auto;
  }
  #top #main {
    width: 100%;
    padding: 0rem 0 2rem;
  }

  /*---------------------------------------------
 ** セクション
---------------------------------------------*/
  .section_block {
    margin-bottom: 5rem;
  }

  /*---------------------------------------------
 ** h2
---------------------------------------------*/
  h2 {
    font-size: 2.4rem;
    font-feature-settings: "palt";
  }
  /*---------------------------------------------
 ** h3
---------------------------------------------*/

  h3 {
    font-size: 2.2rem;
    padding: 0.8rem 5% 1rem;
    margin-bottom: 1rem;
  }
  .h3_inner_page {
    font-size: 2.6rem;
    margin-bottom: 3rem;
  }

  h3 {
    background: #c8b597; /* Old browsers */
    background: -moz-linear-gradient(left,  #c8b597 0%, #f3efe4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #c8b597 0%,#f3efe4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #c8b597 0%,#f3efe4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8b597', endColorstr='#f3efe4',GradientType=1 ); /* IE6-9 */
  }

  /*---------------------------------------------
 **  flexbox
---------------------------------------------*/
  .flex_item_clounm_3 {
    width: 100%;
  }
  .flex_item_clounm_2 {
    width: 100%;

  }
  .flex_item_clounm_4 {
    width: 100%;
  }

  /*---------------------------------------------
 **  文字サイズ
---------------------------------------------*/
  .fz_L {
    font-size: 2rem;
  }
  /*---------------------------------------------
 **  メイン画像
---------------------------------------------*/

  /*---------------------------------------------
 **  ボタン
---------------------------------------------*/
  .bt_base {
    margin: 0 auto;
    display: block;
  }

  /*---------------------------------------------
 ** ヘッダー記述
---------------------------------------------*/
  header {
  }

  .header_wrapper {
    height: 62px;
    padding: 6px 0 0 3%;
    border-bottom:2px solid #EAEDF4;
    box-sizing: border-box; /*通常の記述*/
    -webkit-box-sizing: border-box;  /*Google ChromeやSafariの機能を利用*/
    -moz-box-sizing: border-box;  /*Firefoxの機能を利用*/
}

  /* ロゴ */
  .logo {
    max-width: 201px;
  }

  #footer .logo {
    max-width: 186px;
  }
  #footer .kyushin{
    margin:10px auto 0  ;
  }
  #footer .tel {
    padding-bottom: 2rem;
    margin: 0 auto !important;
  }
  .header_L {
    background: none !important;
    position: relative;
  }
  .header_R{
    display: none;
  }

  #footer .yoyaku{
    position: relative;
    margin-left: 55px;
    font-size: 1.8rem;
    color: #5560A6;
    font-weight: bold;
  }

  .sub-menu {
    padding: 0 12% 0 7%;
    background: #F9F8F4;
  }
  .sub-menu li {
    border-bottom: 1px dashed #ccc;
  }
  .sub-menu li:last-of-type {
    border: none;
  }
  .sub-menu li a {
    padding: 0.8em 1em 0.7em 2em;
    font-size: 12px;
  }
  .sub-menu li a:after {
    position: absolute;
    top: 7px;
    left: 5px;
    content: "≫";
    color: #C8B896;
  }
  .sub-menu li:last-of-type a:after {
    content: "≫";
  }
  #nav01 {
    border-bottom: none;
  }

  .sub-menu li a:before {
    display: none;
  }

  .sub-menu {
    border-top: 1px solid #dcdddd;
    /* border-bottom: 1px solid #dcdddd; */
  }
  .sub-menu li:last-of-type{
       border-bottom:none;
       border-top:none;
  }

  header nav  {

  }

  header nav ul li a:hover {
    background: rgba(255, 255, 255, 0) !important;
  }





  /*---------------------------------------------
 ** フッター記述
---------------------------------------------*/
  .footer_wrapper {
    margin: 0;
    padding-bottom: 10px;
  }

  /* フッターナビ */
  #footer nav ul {
    background: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1px 0 1px 0;
  }
  #footer nav li {
    width: 49.3%;
    margin: 1px;
  }
  #footer nav a {
    width: 100%;
    background: #fff;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
  }
  #footer nav a:after {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 15px;
    right: 11px;
    background-size: 100%;
    content: "";
  }

  /* ページTOPへ */
  #pageTop {
    right: 6%;
    bottom: 0;
  }
  #pageTop a {
    width: 40px;
    height: 57px;
  }

/* SNS */
.sns {
  padding: 2rem 0%;
}

/* インスタグラム */
.instagram_footer:before {
  width: 20px;
  height: 20px;
    top: 4px;
  left: 10%;
}
/* LINE@ */
.line_footer {
  position: relative;
  width: 41%;
  }
.line_footer:before {
  width: 20px;
  height: 20px;
  top: 4px;
  left: 0px;
}

/* 電話番号 */
.icon_tel::after {
  right: -52%;
  left: 0;
  margin: 0 auto;
}
@media screen and (min-width: 320px) and (max-width: 329px) {
  .icon_tel::after {
    right: -62%;
  }
}
@media screen and (min-width: 330px) and (max-width: 349px) {
  .icon_tel::after {
    right: -60%;
  }
}
@media screen and (min-width: 350px) and (max-width: 360px) {
  .icon_tel::after {
    right: -57%;
  }
}
@media screen and (min-width: 361px) and (max-width: 370px) {
  .icon_tel::after {
    right: -55%;
  }
}

  /*---------------------------------------------
 **  スマホナビ（
---------------------------------------------*/
  #nav03 ul {
    padding: 0px 5% 0 7%;
    background: #f6f6f6;
  }
  #nav03 ul li {
    border-bottom: 1px dashed #ccc;
  }
  #nav03 ul li:last-of-type {
    border: none;
  }
  #nav03 ul li a {
    padding: 0.8em 1em 0.7em 2em;
    font-size: 12px;
  }
  #nav03 ul li a:after {
    position: absolute;
    top: 7px;
    left: 5px;
    content: "≫";
    color: #0059b2;
  }
  #nav03 ul li:last-of-type a:after {
    content: "≫";
  }
  #nav03 {
    border-bottom: none !important;
  }

  #nav03 ul li a:before {
    display: none;
  }

  #nav03 ul {
    border-top: 1px solid #dcdddd;
    border-bottom: 1px solid #dcdddd;
  }

  .navBtn{
    width:54px;
    height:62px !important;
    background: #3b5198;
    top: 0px !important;
    right:  0px !important;
    padding: 24px 16px 0px 20px !important;
    box-sizing: border-box; /*通常の記述*/
    -webkit-box-sizing: border-box;  /*Google ChromeやSafariの機能を利用*/
    -moz-box-sizing: border-box;  /*Firefoxの機能を利用*/
    display: flex;
  }



  /*=================================================================================================================================*/
  /**  TOPコンテンツ	*/
  /*=================================================================================================================================*/

  .tel_sp{
    width: 20px;
    height: 31px;
    background: url(/img/sp/sp_tel.jpg) center top no-repeat;
    background-size:cover;
    position: absolute;
    top: 9px;
    right: 72px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
  }
  .tel_sp a{
    width:100%;
    height:100%;
    display:block;
  }

  /* お知らせ */
  .news {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .news_item_wrapper dd{
    position: relative;
    margin: 0;
  }

  /* お知らせのアイコン */
  .icon_typ_01.news_item_wrapper:after {
    right: 3%;
    top: 33px;
    width: 15px;
  }

  .news_category{
    position: absolute;
    top: -19px;
    left: 81px;
    line-height: 1.1;
    font-size: 10px;
  }

  .news_btn a:before {
    width: 3rem;
    height: 3rem;
  }
  .news dl {
    width: 100%;
    display: block;
    padding: 20px 20px 20px 5%;
    box-sizing: border-box ; /*通常の記述*/
-webkit-box-sizing: border-box ;  /*Google ChromeやSafariの機能を利用*/
-moz-box-sizing: border-box ;  /*Firefoxの機能を利用*/
  }
  .news_right div a{
    width:100%;
  }

  .top_menu_btn{
    margin-bottom: 1.5rem !important;
  }

  #medical-guide .clounm_3 .mptn_01 ,
  #beauty-guide .clounm_3 .mptn_01 {
    padding: 0;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-bottom: 6rem !important;
  }
  #medical-guide .clounm_2 .mptn_01 ,
  #beauty-guide .clounm_2 .mptn_01 {
    padding: 0;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-bottom: 6rem !important;
  }

  /*=================================================================================================================================*/
  /**  内部ページ	*/
  /*=================================================================================================================================*/

  .top_bottom_wide_img {
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 15px;
  }

  .bt_LR_m {
    width:90%;
    margin: 0 5%;
    display: block;
  }

  .mb50.mbsp{
    margin-bottom: 2.5rem;
  }
.mbsp_60{
  margin-bottom: 6rem;
}

  .bt_base {
    padding: 1.8rem 8rem;
  }

  .top_banner {
    position: absolute;
    bottom: 4%;
    margin: auto 0;
    right: 4%;
    z-index: 1;
    display: block;
    width: 46%;
  }
  .top_banner a img {
    width: 100%;
    display:block;
  }

  .top_banner{
    display: none;
  }
  #top .top_banner{
    display: block;
  }

  .main_img {
    background-size: cover;
    position: relative;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: 50% 0 !important;
  }
  #top .main_img {
    display: block;
    height: 100%;
  }
  #doctor  .main_img {
    background-position: 70% 0 !important;
  }
  /* スライドショー位置調整 */
  .main_img_slide_01 {
    background-position: center top;
  }
  .main_img_slide_02 {
    background-position: 45% 0 !important;
  }
  .main_img_slide_03 {
    background-position: 10% 0 !important;
  }
  .main_img_slide_04 {
    background-position: 15% 0 !important;
  }


  .main_h1_wrapper{
    padding: 0;
  }
  .main_h1{
    text-align: left;
    font-size: 2rem;
    margin-left: 2em;
    width: 10em;
  }


  .slideshow{
    width: 100%;
    position: relative;
    left: 0;
  }

  .news_item{
    padding-bottom: 1.5rem;
  }
  .treat_guide {
    height: 165px;
    padding: 2.45rem 0 0 0;
  }

  .treat_guide_inner {
    width: 50%;
  }


  .treat_guide_inner {
    width: 59%;
    margin: 0 0 0 5%;
  }

  .treat_bg_01,
  .treat_bg_02,
  .treat_bg_03,
  .treat_bg_04  {
    background-size: cover;
  }
  .treat_bg_01{
    background-position: 40px 0;

  }
  .treat_bg_02{
    background-position: 140px 0;
  }
  .treat_bg_03{
    background-position: 102px 0;
    background-size: 71%;
  }
  .treat_bg_04{
    background-position: 200px 0;
    background-size: 60%;
  }
  .treat_bg_05{
    background-position: 116px 0;
    background-size: 71%;
  }
  .treat_bg_06{
    background-position: 215px 0;
    background-size: 60%;
  }

  .bgc_ptn_01 {
    font-size: 10px;
    padding: 0.4rem 1rem 0.5rem;
  }

  .multi {
    padding: 1rem 0 0rem;
  }

  .treat_list {
    padding: 0;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 6rem;
  }
  .treat_list li{
    width: 100%;
    font-size: 14px;
  }


  .sp-effect-off{
    transform: translateX(0) !important;
    transition: 0s !important;
  }

  /*---------------------------------------------
 **  共通　形成外科一覧 呼び出し
---------------------------------------------*/
.inner_page_treat_list{
  width: 100%;
}
.inner_page_treat_list .treat_list li a {
  padding: 1.3rem 1.5rem 1.2rem 4.5rem;
 }
 .inner_page_treat_list  .treat_list {
  margin-bottom: 1rem;
}


.wp-block-columns{
  margin-bottom: 4rem !important;
}

p{
  padding: 0 3%;
  /* text-align: justify !important; */
}


/*---------------------------------------------
 **  クリニック紹介スライドショー
---------------------------------------------*/
.lSAction > .lSNext {
  background-size: 30px !important;
  right: 2% !important;
}
.lSAction > .lSPrev {
  background-size: 30px !important;
  left: 2% !important;

}
/* slider actions */
.lSAction > a {
  width: 30px !important;
  height: 30px !important;
}


.bg_cover2 {
  background: #eaedf4;
  padding: 3rem 2rem 2rem;
  margin-bottom: 2rem;
}
.bg_cover2 .wp-block-columns {
  margin-bottom: 0 !important;

}
.bg_cover2 .wp-block-columns >.wp-block-column:last-of-type{
  margin-bottom: 0 !important;
}

.wp-block-group__inner-container{
  padding: 0 !important;
}


/* スマホ３カラム */
.sp_clounm_wrapper{
  display: flex;
  margin-bottom: 0 !important;
  flex-direction: row !important;
}
.sp_clounm_wrapper .wp-block-column{
  margin-bottom: 0 !important;
}

.alignright,
.alignleft{
  text-align: center !important;
}

.flow_wrap h5:after {
  display: none;
}

.flow_wrap .wp-block-group{ position: relative;}
.flow_wrap .wp-block-group:after {
  position: absolute;
  top: unset;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -24px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 26px 0 26px;
  border-color: #c8b597 transparent transparent transparent;
}

.flow_wrap .wp-block-column:last-of-type .wp-block-group:after  {
  display:none;
}

.faq h3 + p {
  padding-left: 0;
}

.faq h3 {
  height: auto;
  min-height: 60px;
  line-height: 1.4;
  font-size: 1.6rem;
}


/*---------------------------------------------
 **  診療ページ
---------------------------------------------*/
/* テーブル横スクロール */
.wp-block-table {
  overflow: auto;
  white-space: nowrap;
}
.wp-block-table table{

  font-size: 80%;
}

/* リスト */
.treat_main ul li{
  margin-right: 10px;
  font-size: 1.7rem;
}
.treat_main ul {
  padding: 1.8rem 5% .7rem;
}
ul.attention_list li {
  margin-right: unset;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

/*---------------------------------------------
 **  治療方法
---------------------------------------------*/

.cf_pricelist table tr th:nth-of-type(1){
  width: 200px !important;

}

/* th幅固定 */
.cf_pricelist table tr:nth-of-type(1) th{
  width: 120px !important;
}
.cf_pricelist table tr:nth-of-type(1) th:nth-of-type(2){
  width: unset !important;
  max-width: unset  !important;
}
.cf_pricelist table tr:nth-of-type(1) th:nth-of-type(3){
  width: unset !important;
  max-width: unset  !important;
}
.cf_pricelist table tr:nth-of-type(1) th:nth-of-type(4){
  width: unset !important;
  max-width: unset  !important;
}
.cf_pricelist table tr:nth-of-type(1) th:nth-of-type(5){
  width: unset !important;
  max-width: unset  !important;
}
.cf_pricelist table tr:nth-of-type(1) th:nth-of-type(6){
  width: unset !important;
  max-width: unset  !important;
}


 /*---------------------------------------------
 **  インスタfeed CSS
---------------------------------------------*/
/* インスタfeed用(本番) */
  #sb_instagram{
     margin-bottom:3rem !important;
  }
  #sbi_images .sbi_item {
    width: 46% !important;
    _zoom: 1; overflow: hidden;
  }
  #sbi_images .sbi_photo{
    margin-right: 10px;
    margin-bottom:10px;
  }
  #sbi_images .sbi_item:nth-of-type(2n) .sbi_photo{
    margin-right: 0 !important;
  }
  #sb_instagram #sbi_images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ベタ書きコード(サンプルコード) */
.instagram_wrapper{
  margin-bottom:3rem;
}
.instagram_wrapper >div{
  width: 46%;
  margin-right: 10px;
  _zoom: 1;
  overflow: hidden;
}
.insta_h2:before {
  width: 20px;
  height: 20px;
}


/*---------------------------------------------
 **  ドクター紹介
---------------------------------------------*/
.h2_doctor{
  font-size: 2rem;
  text-align: left;
  letter-spacing: 2px;
}
.h2_doctor br{
  display: none;
}
.doctor_img_sp {
  width: 80% !important;
  margin: 0 auto 10px;
}
.doctor_name img {
  margin-left: 3%;
}


/*---------------------------------------------
 **  営業日カレンダー　付与クラス
---------------------------------------------*/

.xo-month-wrap{
	padding:0 10px;
  widows: 98%;
  margin: 10px auto;
	}
.xo-event-calendar table.xo-month .month-header > span{
  font-weight:bold;
  font-size: 150%;
}

.news-ttl{
  letter-spacing: 0;
}

/* メディカルコスメ追加 20200831　*/

.medi_cosme_read_bs{
  background:url(../info/wp-content/uploads/2020/08/bs_img00.png) no-repeat right top;
  background-size:30% auto;
  padding:0% 0 5% 0;
}
.medi_cosme_read_bs strong{
  padding-right:30%;
}


.media_cosme h3{
  font-size:90%;
  display: block;
}
.media_cosme h3 em{
  font-size:70%;
  display: block;
}

ol.zo_list{
  width:95%;
  margin:30px auto;
  font-size:1.8rem;
  display: block;
}
.zo_list li{
  width:90%;
  margin-bottom:10px;
}
.zo_program > div{
  margin-bottom:10px!important;
}
.zo_program > div:nth-child(2) img{
  max-width:50px;
  margin-top:0;
}
.zo_read{
  font-size:110%;
  line-height: 1.8;
}
.zo_text{
  font-size:110%;
  line-height: 1.8;
  padding:5% 5% 5% 130px;
}

.media_cosme .media_cosme_ul_detail{
  padding:0;
  margin-bottom:-30px;
}

.media_cosme ul{
  font-size: 2.3rem;
  font-weight: normal;
  border-radius: 4px;
  padding: 0.5rem 0 0.5rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-top: none;
  border-bottom: none;
  justify-content: flex-start;
  margin-bottom:0;
}

.media_cosme img{
  max-width:150px;
  margin:0 auto;
}

/* ダーマペン */
.derma_img01{
  max-width:200px;
  margin:30px auto 10px;
}
.derma_merit div{
  margin-bottom:10px!important;
}
.derma_merit ul{
  padding:0 5%;
}
.derma_merit ul li{
  margin:10px 0 0;
}
.derma_osusume{
  background:none;
  padding-right:0!important;
  margin-top:0px;
  padding-bottom:0;
}
.derma_osusume ul{
  background:url(../info/wp-content/uploads/2020/12/derma_img02_sp.png) no-repeat bottom center;
  background-size:auto 100%;
}
.derma_osusume li{
  width:100%;
  text-indent: -1.0em;
  margin-left:1.0em;
  margin-right:1em!important;
  font-size:1.8rem!important;
}
.derma_osusume h4{
  font-size:140%;
  padding-bottom:0.5rem;
}
.derma_flow{
  margin:0 0 0 -1.5em!important;
}
.derma_flow2{
  width:100%;
  margin:0 0 0 -0.5em!important;
}
.derma_flow2 li{
  padding-bottom:10px;
}
.derma_flow li{
  flex-direction: column;
  width: 100%;
  padding: 1.5em;
}

.derma_flow li strong{
  min-width:inherit;
  font-size:110%;
  padding-left:10px;
  padding-right:0;
}
.derma_flow2 li strong{
  width:80%;
  text-align: left;
  font-size:100%!important;
}
.derma_flow li em{
  display: block;
  margin-top:5px;
  padding-right:10px!important;
}
.derma_ba div{
  margin-bottom:0!important;
}
.derma_ba p{
  margin-bottom:30px!important;
}
.derma_ba_small, .derma_ba_big{
  display: flex;
  justify-content: space-between;
}
.derma_ba_small div, .derma_ba_big div{
  width:45%;
}
.derma_ba_small .wp-block-image, .derma_ba_big .wp-block-image{
  margin-bottom:0;
}
.derma_ba_small img{
  padding:0;
}
.derma_before::after{
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #2e4692;
  position: absolute;
  right: -16%;
  top:25%;
  z-index: 999;
}

.derma_ba2 .derma_before::after{
  right: -20%;
}

.derma_ba_big .derma_before::after{
  top:35%;
}

.darma_m_box img {
  max-width:60px;
}
.darma_m_box2 img {
  max-width:140px;
}
.derma_m_point li{
  font-size:65%!important;
  margin-right:5px!important;
}
.derma_mask_p p{
  padding:0;
}
.derma_mask_p h4{
  padding:1.0em 0 0;
}
.derma_mask_p .media_cosme h4{
  padding:0;
}
.derma_seibun + ul li{
  font-size:1.4rem;
  margin-right:5px;
}
.derma_vel p{
  font-size:130%;
}
.derma_vel p br{
  display: inline-block;
}


/* PlusRestore */
.plusrestore{ text-align: center;}
.plusrestore img{  max-height: 200px; width: unset;}
.plusrestore_box ul{
  display: flex;
  flex-direction: column;
  justify-content: unset;
  padding: 1.8rem 7% 0.7rem !important;

}

/*---------------------------------------------
 **  20221124　メディカルコスメに料金追加
---------------------------------------------*/
.cosume_price{
  border-top: 1px solid #eaedf4;
  border-bottom:1px solid  #eaedf4;
  text-align: center;
  padding: 0.5rem 0;
}
.m-b-none{
  margin-bottom: 0 !important;
}



.bnr_area{
  display: flex;
  flex-wrap: wrap;
flex-direction: column;
}
.bnr_area .item{
  width: 100%;
  margin-bottom: 1rem;
}
.bnr_area .item img{
  width: 100%;
}


} /*■■ ここまで ■■*/