@charset "utf-8";

/*=================================================================================================================================*/
/**  個別指定 for PC	*/
/*=================================================================================================================================*/
@media screen and (min-width: 768px) {
  .only_pc_none {
    display: none !important;
  }

  /*---------------------------------------------
  ** ヘッダー
  ---------------------------------------------*/
  /* tel */
  .tel {
    margin: 0 !important;
  }
  #header .tel {
    width: 256px;
    position:absolute;
    top:-15px;
    left: 30%;
  }

  .tel ul {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
  }
  .tel li {
    height: 100%;
    list-style: none;
  }
  .tel a {
    text-decoration: none !important;
    color: #ffffff !important;
    width: 100%;
    height: 100%;
    display: block;
  }

  .icon_tel {
    position: relative;
  }
  .icon_tel::before {
    width: 19px;
    height: 30px;
    background: url(../img/common/icon_sp.png) no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    top: 2px;
    left: -3px;
  }

  .header_L {
    width: 605px;
    padding: 2rem 0 0 0;
  }
  .header_R {
    width: 605px;
    padding: 0;
  }

  #right_igawadani	{ width:98px; height:195px; position: fixed; right: 0; top: 40px; z-index:99;}
  #right_reserve	{ width:98px; height:228px; position: fixed; right: 0; top: 250px; z-index:99;}
  #right_recruit	{ width:98px; height:108px; position: fixed; right: 0; top: 500px; z-index:99; overflow: hidden;}


/* スライドショー */

.slider_waku{ width:100% !important; height:500px; min-width:1040px !important; margin:0 auto;position: relative; top: 20px; }
.slider_waku img{ width: 100%;}
.slider_pc h2{color:#fff; font-size:1.8em; font-weight:bold; position: absolute; bottom: 0.5em; right: 1em; line-height:1.4em;
}

.shadow{
/* for modan browser */
text-shadow:0px 3px 1px #ffffff,0px 2px 1px #ffffff,1px 2px 1px #ffffff,2px 2px 1px #ffffff,2px 1px 1px #ffffff,2px 0px 1px #ffffff,3px 0px 1px #ffffff,2px -1px 1px #ffffff,2px -2px 1px #ffffff,2px -3px 1px #ffffff,1px -3px 1px #ffffff,0px -3px 1px #ffffff,-1px -3px 1px #ffffff,-2px -3px 1px #ffffff,-3px -3px 1px #ffffff,-3px -2px 1px #ffffff,-3px -1px 1px #ffffff,-3px 0px 1px #ffffff,-3px 1px 1px #ffffff,-3px 2px 1px #ffffff,-2px 2px 1px #ffffff,-1px 2px 1px #ffffff;

/* for IE */
filter:dropshadow(color=#ffffff,offx=0,offy=3,positive=1),dropshadow(color=#ffffff,offx=2,offy=1,positive=1),dropshadow(color=#ffffff,offx=2,offy=-1,positive=1),dropshadow(color=#ffffff,offx=1,offy=-3,positive=1),dropshadow(color=#ffffff,offx=-2,offy=-3,positive=1),dropshadow(color=#ffffff,offx=-3,offy=-2,positive=1),dropshadow(color=#ffffff,offx=-3,offy=1,positive=1),dropshadow(color=#ffffff,offx=-1,offy=2,positive=1);
}

.shadow2{
/* for modan browser */
text-shadow:0px 3px 1px #555,0px 2px 1px #555,1px 2px 1px #555,2px 2px 1px #555,2px 1px 1px #555,2px 0px 1px #555,3px 0px 1px #555,2px -1px 1px #555,2px -2px 1px #555,2px -3px 1px #555,1px -3px 1px #555,0px -3px 1px #555,-1px -3px 1px #555,-2px -3px 1px #555,-3px -3px 1px #555,-3px -2px 1px #555,-3px -1px 1px #555,-3px 0px 1px #555,-3px 1px 1px #555,-3px 2px 1px #555,-2px 2px 1px #555,-1px 2px 1px #555;

/* for IE */
filter:dropshadow(color=#555,offx=0,offy=3,positive=1),dropshadow(color=#555,offx=2,offy=1,positive=1),dropshadow(color=#555,offx=2,offy=-1,positive=1),dropshadow(color=#555,offx=1,offy=-3,positive=1),dropshadow(color=#555,offx=-2,offy=-3,positive=1),dropshadow(color=#555,offx=-3,offy=-2,positive=1),dropshadow(color=#555,offx=-3,offy=1,positive=1),dropshadow(color=#555,offx=-1,offy=2,positive=1);
}


#top_only_main	{height:420px; background:url(../img/index/index_hdr_img_bg.gif) ; position:relative; z-index:-9;}

#top_only_main img{width:1040px; position:absolute; top:20px; left:0; right:0; margin:auto;}


  /*---------------------------------------------
 **  ナビゲーション
---------------------------------------------*/
  #nav {
    z-index: 999;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
  }

  .nav_wrapper {
    background: #fff45c;
    border-top: 35px solid #f1ffd5;
    height: 80px;
    position: relative;

  }

  .menu {
    margin: 0 5%;
    display: flex;
    text-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .menu > li {
    padding: 0px 0px 0;
    box-sizing: border-box; /*通常の記述*/
    -webkit-box-sizing: border-box; /*Google ChromeやSafariの機能を利用*/
    -moz-box-sizing: border-box; /*Firefoxの機能を利用*/
  }
  .menu li > a {
    width: 120px;
    height: 115px;
    position: relative;
    display: block;
  }

  #header .menu li > a {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  #footer .menu li > a {
    color: #ffffff !important;
    text-decoration: none !important;
    height: 70px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #header .menu li:nth-of-type(1) {
    background: url(/img/nav-01_on.png) center 0 no-repeat;
    margin-top: -35px;
  }
  #header .menu li:nth-of-type(2){
    background: url(/img/nav-02_on.png) center 0 no-repeat;
    margin-top: -35px;
  }
  #header .menu li:nth-of-type(3){
    background: url(/img/nav-03_on.png) center 0 no-repeat;
    margin-top: -35px;
  }
  #header .menu li:nth-of-type(4){
    background: url(/img/nav-04_on.png) center 0 no-repeat;
    margin-top: -35px;
  }
  #header .menu li:nth-of-type(5){
    background: url(/img/nav-05_on.png) center 0 no-repeat;
    margin-top: -35px;
  }
  #header .menu li:nth-of-type(6) {
    background: url(/img/nav-06_on.png) center 0 no-repeat;
    margin-top: -35px;
  }

  #header .menu li:nth-of-type(1) > a {
    background: url(/img/nav-01.png) center 0 no-repeat;

  }
  #header .menu li:nth-of-type(2) > a {
    background: url(/img/nav-02.png) center 0 no-repeat;

  }
  #header .menu li:nth-of-type(3) > a {
    background: url(/img/nav-03.png) center 0 no-repeat;

  }
  #header .menu li:nth-of-type(4) > a {
    background: url(/img/nav-04.png) center 0 no-repeat;

  }
  #header .menu li:nth-of-type(5) > a {
    background: url(/img/nav-05.png) center 0 no-repeat;

  }
  #header .menu li:nth-of-type(6) > a {
    background: url(/img/nav-06.png) center 0 no-repeat;

  }

  #header .menu li:nth-of-type(1) > a:hover {
    background: url(/img/nav-01_on.png) center 0 no-repeat;
  }
  #header .menu li:nth-of-type(2) > a:hover {
    background: url(/img/nav-02_on.png) center 0 no-repeat;
  }
  #header .menu li:nth-of-type(3) > a:hover {
    background: url(/img/nav-03_on.png) center 0 no-repeat;
  }
  #header .menu li:nth-of-type(4) > a:hover {
    background: url(/img/nav-04_on.png) center 0 no-repeat;
  }
  #header .menu li:nth-of-type(5) > a:hover {
    background: url(/img/nav-05_on.png) center 0 no-repeat;
  }
  #header .menu li:nth-of-type(6) > a:hover {
    background: url(/img/nav-06_on.png) center 0 no-repeat;
  }

/*  .menu li > a:hover {	-webkit-transition: 0.3s ease-in-out;	-moz-transition: 0.3s ease-in-out;	-o-transition: 0.3s ease-in-out;	transition: 0.3s ease-in-out;}*/
.menu li > a:hover {
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
}



  #top #header .menu li:nth-of-type(1) > a {
    background: url(/img/nav-01_on.png) center 0 no-repeat;
  }
  #guide #header .menu li:nth-of-type(2) > a {
    background: url(/img/nav-02_on.png) center 0 no-repeat;
  }
  #clinic #header .menu li:nth-of-type(3) > a {
    background: url(/img/nav-03_on.png) center 0 no-repeat;
  }
  #doctor #header .menu li:nth-of-type(4) > a {
    background: url(/img/nav-04_on.png) center 0 no-repeat;
  }
  #reserve #header .menu li:nth-of-type(5) > a {
    background: url(/img/nav-05_on.png) center 0 no-repeat;
  }
  #access #header .menu li:nth-of-type(6) > a {
    background: url(/img/nav-06_on.png) center 0 no-repeat;
  }

  #footer .menu {
  }

  /*---------------------------------------------
 **  ドロップダウンメニュー
---------------------------------------------*/
  .dropmenu:before,
  .dropmenu:after {
    content: "";
    display: table;
  }
  .dropmenu:after {
    clear: both;
  }

  /* 下層メニュー */
  .sub-menu {
    list-style: none;
    position: absolute;
    z-index: 9999;
    top: 67px;
    padding: 0;
    width: 100%;
    max-width: 300px;
    background: #d7ecfc;
    display: flex;
    justify-content: start;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .sub-menu li {
    width: 100%;
    border-bottom: 1px solid #c9d8e3;
    text-align: left;
    position: relative;
    margin: 0;
  }
  .sub-menu li a {
    padding: 15px 0px 16px 40px;
    margin: 0;
  }

  .sub-menu li:last-of-type {
    width: 100%;
    border-bottom: unset;
  }
  .sub-menu li:after {
    position: absolute;
    top: 17px;
    left: 25px;
    content: "●";
    font-size: 9px;
    color: #104583;
  }

  /* ドロップメニュー 仕組み */
  #fade-in li .sub-menu {
    visibility: hidden;
    opacity: 0;
    /* transition: 0s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; */
  }
  #fade-in li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    text-align: center;
  }
  #fade-in li .sub-menu li a {
    visibility: hidden;
    opacity: 0;
  }
  #fade-in li:hover .sub-menu li a {
    visibility: visible;
    opacity: 1;
  }

  /*---------------------------------------------
 **  メイン
---------------------------------------------*/
  #top .main_img {
    height: 500px;
  }

  /*=================================================================================================================================*/
  /**  フッター	*/
  /*=================================================================================================================================*/
  .footer_inner {
    max-width: 1200px;
    _zoom: 1;
    overflow: hidden;
  }

  .map {
    height: 500px;
  }

  .footer_nav_wrapper {
    background: #01BE8F;
  }

  #footer_fix{
    display: none;
}
  @media screen and (max-width: 1400px) {

  #footer_fix{
    width:100%;
    position:fixed;
    display: block;
    background:rgba(203, 174, 0, 0.9);
    padding-bottom:25px;
    bottom:0px;
    z-index: 9999;
  }
  #footer_fix div{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  }
  #footer_fix div .footer_btn00{
  width:20%;
  max-width:110px;
  display: block;
  position:absolute;
  top:8px;
  left:0;
  }
  #footer_fix div::before{
    content:'はら耳鼻咽喉科\A明石クリニック';
    white-space: pre;
    color:#fff;
    width:100px;
    height:20px;
    font-size:24px;
    font-weight: bold;
    display: block;
    position:absolute;
    line-height: 1.4;
    top:23px;
    left:11%;
  }
  #footer_fix div ul{
    width:70%;
    margin-left:30%;
    display: flex;
    padding-top:2%;
    justify-content: space-between;
  }
  #footer_fix div li{
    width:33%;
    text-align: center;
    list-style: none;
    display: block;
  }
  #footer_fix div li img{
    width:90%;
    margin:0 auto;
    display: block;
    max-width:336px;
  }

  body{
    padding-bottom:120px;
  }

  #pageTop {
    bottom:155px;
  }
  #right_igawadani	{ display: none!important;}
  #right_reserve { display: none!important;}
  #right_recruit	{ display: none!important;}

}

  /*---------------------------------------------
 **  専用CSS
---------------------------------------------*/
  .header_L {
    width: 362px !important;
  }
  .header_R {
    width: 809px !important;
  }


/* ヘッダー */

/* 採用情報 */
.header-recruit{
  position: absolute;
  top: 37px;
  right: 276px;
}
/* 診療予約 */
.header-reserve{
  width:250px;
position: absolute;
top: -25px;
right: 0;
}



  /*=================================================================================================================================*/
  /**  1024px ～ 1570px まで	*/
  /*=================================================================================================================================*/
  @media (max-width: 1570px) {
    html {
      font-size: 55%;
    }
  }

  @media (max-width: 1294px) {
    .header_L {
      width: 30% !important;
    }
    .header_R {
      width: 70% !important;
    }
  }
  @media (max-width: 1024px) {
    html {
      font-size: 50%;
    }
  }


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