/*
Theme Name: HEAL Child
Theme URI: https://tcd-theme.com/tcd077
Template: heal_tcd077
Author: TCD
Author URI: https://tcd-theme.com/
Description: "HEAL" is the WordPress theme for beauty salons. It makes it easy to create pages describing course menus and treatment flow. Make sure to use the schedule page that can be linked to the staff's workdays.
Version: 2.5.1729607711
Updated: 2024-10-22 23:35:11

*/


/* ----------------------------------------------------------------------
 アンカー位置調整
---------------------------------------------------------------------- */
#Anker2:before {
    content: "";
    display: block;
    height: 100px; 
    margin-top: -100px; 
    visibility: hidden;
}

/* ----------------------------------------------------------------------
 グローバルメニュー
---------------------------------------------------------------------- */

ul.menu li a:first-child{
  line-height: 1.4!important;
}
#global_menu > ul > li > a { 
  display:flex!important; 
  align-items: center!important;
  justify-content: center!important;
 }

/* ----------------------------------------------------------------------
 PCスマホ切り替え
---------------------------------------------------------------------- */
.pc{display: inherit}
@media screen and (max-width:1151px) {
  .pc{display: none;}
}

/* ----------------------------------------------------------------------
 見出し
---------------------------------------------------------------------- */
.h2-tit-top{
  font-size: 38px!important;
  color: #2F0033!important;
}
.h2-tit-top span{display: block;font-size: 18px!important;}
.h2-tit-trems{
  color: #2F0033!important;
}
@media screen and (max-width:750px) {
.h2-tit-top{font-size: 22px!important;}
.h2-tit-top span{font-size: 12px!important;}
}

/* ----------------------------------------------------------------------
 リンク装飾
---------------------------------------------------------------------- */

.topic-link{
  border-bottom: 1px dashed #2F0033;
  -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
  opacity: 1;
}
.topic-link:hover{
  border-bottom: 1px dashed #999999;
}

/* ----------------------------------------------------------------------
　tableレイアウト
---------------------------------------------------------------------- */
.table-design{
width: 100%;
white-space:  normal;
word-break: break-all;
word-wrap: break-all;
font-size: 14px;
}
.table-design th{
  color: #2F0033;
  white-space: nowrap;
}
@media screen and (max-width:950px) {
  .table-design th, .table-design td{ 
    border:1px solid #ddd!important; border-collapse: collapse; }
  .table-design td { border-top: 1px solid #ddd!important; }  
  .table-design th{border-bottom: none!important;}
}

/* ----------------------------------------------------------------------
  ボタン
---------------------------------------------------------------------- */
.button-color a {border: 1px solid #2F0033!important;}
.button-color a:hover {border: 1px solid #2F0033!important; background-color:#2F0033; color: #fff!important;}


/* ----------------------------------------------------------------------
 ol - リストデザイン
---------------------------------------------------------------------- */

/* 番号なし */
.styled_ol_01 { counter-reset: item; list-style-type: none; margin-left:0 !important; margin-bottom:2em; }
.styled_ol_01 li { display:-webkit-box; display:-webkit-flex; display:flex; margin-bottom:0.4em; }
.styled_ol_01 li:before {

  content:close-quote;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width:1em; min-width: 1em; height: 1em; background:#2F0033;
  color: #fff; border-radius: 50%; line-height: 1; margin-top: 0.6em; margin-right: 0.6em;
}

/* ----------------------------------------------------------------------
 ブロック背景
---------------------------------------------------------------------- */
.block-glay{
  background: #F5F5F5;
  padding: 30px;
  margin-bottom: 30px;
}
.block-glay ul{margin: 0 0 0 30px!important;}
.block-glay p{margin: 0 20px!important;}
@media screen and (max-width:950px) {
.block-glay{
  padding: 15px;
}  
.block-glay ul{margin: 0 0 0 20px!important;}
.block-glay p{margin: 0 10px!important;}
}

/* ----------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------- */

/*トップメニューリスト*/
.index_design_content1.mt0{
  padding:0;  
}
#top_menu_list .item {
  background:#fff; border-right:1px solid #ddd; width:25%; height:250px; float:left; margin:0; position:relative;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
#top_menu_list .item:nth-child(4n) { margin-right:0; }
#top_menu_list .item a { display:block; width:100%; height:100%; background:#fff; top:-27px;position:relative; }
#top_menu_list .image_wrap { display:block; width:calc(-webkit-100% + 2px); width:calc(100% + 2px); height:250px; position:relative; z-index:1; overflow:hidden; margin:-1px -1px 0; }
#top_menu_list .image { width:100%; height:100% !important; display:block; overflow:hidden; position:relative; z-index:2; }
#top_menu_list .title_area {
  position:absolute; bottom:0px; left:0px; width:100%; height:50px; z-index:100; text-align:center; padding:0px; color:#fff;display: flex;justify-content: center;align-items: center;
  -webkit-box-sizing:border-box; box-sizing:border-box; background:rgba(47,0,51,0.8);
}
#top_menu_list .title { font-weight:500; font-size:18px; position:relative; top:40%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }


#contents_builder > .index_design_content2:nth-child(2) , .back-max{
  border-image: linear-gradient( #f5f5f5, #f5f5f5) fill 0//0 100vw 0 100vw;
  margin-top: 100px;
  padding-bottom: 100px;
}
@media screen and (max-width:1150px) {
#contents_builder > .index_design_content2:nth-child(2) , .back-max{
  margin-top: 60px;
  padding-bottom: 60px;  
  }
}
@media screen and (max-width:950px) {#top_menu_list .item { width:50%; } }
@media screen and (max-width:750px) {
#contents_builder > .index_design_content2:nth-child(2) , .back-max{
  margin-top: 40px;
  padding-bottom: 40px;  
  }  
}
@media screen and (max-width:600px) {
  #top_menu_list .item { width:100%; height:220px; }
  #top_menu_list .image_wrap { height:220px;}
}


/* ----------------------------------------------------------------------
診療メニュー料金
---------------------------------------------------------------------- */
.menu_howto_list h4.rich_font{
  color: #2F0033!important;
}

/* 診療相談バナー */
#staff_banner_content h3,#staff_banner_content p
{color: #fff;}
#staff_banner_content h3{
  font-size: 38px;  
}
#staff_banner_content p{
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif !important;
  font-size: 16px;
}

@media screen and (max-width:950px) {
#staff_banner_content h3{
  font-size: 22px;  
} 
  #staff_banner_content p{
  font-size: 14px;    
  }
}

/* ３つの特徴 */
#index_box_content.features { width:100%; height:540px; }
#index_box_content.features .item {
  width:-webkit-calc(100% / 3); width:calc(100% / 3); height:540px; float:left; position:relative; 
  border-bottom:1px solid #ddd;border-top:1px solid #ddd;
}
#index_box_content.features .image_wrap { display:block; width:100%; height:300px; position:relative; z-index:1; overflow:hidden; }
#index_box_content.features .image { width:100%; height:100% !important; display:block; overflow:hidden; position:relative; z-index:2; }
#index_box_content.features .title { width:100%; height:60px; line-height:60px; text-align:center; position:absolute; top:240px; left:0px; z-index:3;
  background-color: #2F0033;opacity: .8;color: #fff;font-size: 22px;
}
#index_box_content.features .desc {
  height:240px; line-height:2.4; border-right:1px solid #ddd; position:relative;
  -webkit-box-sizing:border-box; box-sizing:border-box;background:#fff;border-bottom:1px solid #ddd;
}
#index_box_content.features .desc p {
  width:100%; padding:0 30px;
  position:absolute; top:40%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
#index_box_content.features .item:first-child { border-left: 1px solid #ddd; }
#index_box_content.features .item:last-child { border-right:none; }
#index_box_content.features .item:last-child .desc{ border-right: none; }

@media screen and (max-width:750px) {
#index_box_content.features { width:100%; height:340px; }
#index_box_content.features .item {width:100%; height:340px;border-bottom:none;}  
#index_box_content.features .image_wrap { width:100%; height:200px;}
#index_box_content.features .title {top:140px; left:0px; z-index:3;font-size: 18px;}  
#index_box_content.features .desc {height:140px; }
#index_box_content.features .desc p {top:48%;}
}


/* ----------------------------------------------------------------------
私たちクリニックにご紹介
---------------------------------------------------------------------- */

/* Google mapのみ非表示 */
.access_google_map{display: none;}

/* ----------------------------------------------------------------------
ドクターズ
---------------------------------------------------------------------- */

/* タイトルエリア */
#staff_single_header .title_area { color:#2F0033!important; }