@charset "UTF-8";

/*==================================================
スライダーのためのcss
===================================*/
.main-visual01 {
	position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  }
  /*背景画像設定*/
  
  .slider-item01 {
	  background:url(../images/top-main-img01.jpg);
  }
  
  .slider-item02 {
	  background:url(../images/top-main-img02.jpg);
  }
  
  .slider-item03 {
	  background:url(../images/top-main-img03.jpg);
  }
  
  .slider-item {
	  height:500px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	  background-repeat: no-repeat;/*背景画像をリピートしない*/
	  background-position: center;/*背景画像の位置を中央に*/
	  margin: 0 auto;
	  object-fit: cover;
  }

  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
	position: relative;
	z-index: 3;
	text-align:center;
  bottom: 35px;
	margin:-50px 0 0 0;/*ドットの位置*/
  }
  
  .slick-dots li {
	display:inline-block;
	margin:10px 5px;
  }
  
  .slick-dots button {
	  color: transparent;
	  outline: none;
	  width:15px;/*ドットボタンのサイズ*/
	  height:15px;/*ドットボタンのサイズ*/
	  display:block;
	  border-radius:50%;
	  border: transparent;
	  background:#ffffff;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
	  background:#c4c2c2;/*ドットボタンの現在地表示の色*/
  }
  
  /*========= レイアウトのためのCSS ===============*/
  #slider_wrapper ul{
	margin:0;
	padding: 0;
	list-style: none;
  }
  
  #slider_wrapper a{
	color: #fff;
  }
  
  #slider_wrapper a:hover,
  #slider_wrapper a:active{
	text-decoration: none;
  }
  
  #slider_wrapper h2{
	position: absolute;
	z-index: 2;
	top: 60%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	font-size:50px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.3em;
	text-shadow: 2px 2px 8px #47463F;
	text-align: center;
  }



/* 各医院スライダー */
  .slider{
	width: 376px;
	height:280px;
  }
  
  .slider img {
	height:270px;
	width: 100%;
	object-fit:cover;
  }
  #park-street-dentistry_p .slick-dots li:nth-of-type(1) button:before {
	background: url("../images/park-street-dentistry/park-02.jpg") no-repeat;
	background-size: 100px;
  }

  #park-street-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/park-street-dentistry/park-03.jpg") no-repeat;
	background-size: 100px;
  }

  #park-street-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/park-street-dentistry/park-04.jpg") no-repeat;
	background-size: 100px;
  }
  
  #park-street-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/park-street-dentistry/park-05.jpg") no-repeat;
	background-size: 100px;
  background-position: 0% 30%;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(1) button:before{
	background: url("../images/apple-hill-dentistry/apple-02.jpg") no-repeat;
	background-size: 100px;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/apple-hill-dentistry/apple-08.jpg") no-repeat;
	background-size: 100px;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/apple-hill-dentistry/apple-06.jpg") no-repeat;
	background-size: 100px;
  }
  
  #apple-hill-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/apple-hill-dentistry/apple-05.jpg") no-repeat;
	background-size: 100px;
  	background-position: 0% 30%;
  }
  
  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(1) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-02.jpg") no-repeat;
	background-size: 100px;
  }

  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-03.jpg") no-repeat;
	background-size: 100px;
  }

  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-04.jpg") no-repeat;
	background-size: 100px;
  }
  
  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-05.jpg") no-repeat;
	background-size: 100px;
  	background-position: 0% 30%;
  }

  .slick-dots li button:before{
	content: ''!important;
	height:100%!important;
	width: 100%!important;
  }

  .slick-dots li{
	width: 90px!important;
	height:60px!important;
	margin: 2px!important;
  }

  .slick-dots li button{
	width:0!important;
	height:0!important;
  }

  .slick-dots{
	bottom: initial!important;
	margin:0!important;
  }

/*------------------------------------------
	480-less    - スマホ
--------------------------------------------*/

@media screen and (max-width: 480px) {
.slider{
	width: 320px;
	height:200px;
  }
  
  .slider img {
	height:230px;
	width: 100%;
	object-fit:cover;
  }
  #park-street-dentistry_p .slick-dots li:nth-of-type(1) button:before {
	background: url("../images/park-street-dentistry/park-02.jpg") no-repeat;
	background-size: 70px;
  }

  #park-street-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/park-street-dentistry/park-03.jpg") no-repeat;
	background-size: 70px;
  }

  #park-street-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/park-street-dentistry/park-04.jpg") no-repeat;
	background-size: 70px;
  }
  
  #park-street-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/park-street-dentistry/park-05.jpg") no-repeat;
	background-size: 70px;
  background-position: 0% 30%;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(1) button:before{
	background: url("../images/apple-hill-dentistry/apple-02.jpg") no-repeat;
	background-size: 70px;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/apple-hill-dentistry/apple-08.jpg") no-repeat;
	background-size: 70px;
  }

  #apple-hill-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/apple-hill-dentistry/apple-06.jpg") no-repeat;
	background-size: 70px;
  }
  
  #apple-hill-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/apple-hill-dentistry/apple-05.jpg") no-repeat;
	background-size: 70px;
  	background-position: 0% 30%;
  }
  
  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(1) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-02.jpg") no-repeat;
	background-size: 70px;
  }

  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-03.jpg") no-repeat;
	background-size: 70px;
  }

  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-04.jpg") no-repeat;
	background-size: 70px;
  }
  
  #total-song-wheel-ferio-dentistry_p .slick-dots li:nth-of-type(4) button:before{
	background: url("../images/total-song-wheel-ferio-dentistry/ferio-05.png") no-repeat;
	background-size: 70px;
  	background-position: 0% 30%;
  }
  .slick-dots li{
	width: 70px!important;
	height:50px!important;
	margin: 2px!important;
  }
}



/* セレックスライダー */
  .slider2{
	width: 376px;
	height:280px;
	margin:50px auto 0;
  }
  
  .slider2 img {
	height:240px;
	width: 100%;
	object-fit:cover;
  }

  #selleck_p .slick-dots li:nth-of-type(1) button:before{
	background: url("../images/selleck/selleck-04.jpg") no-repeat;
	background-size: 100px;
  }
  #selleck_p .slick-dots li:nth-of-type(2) button:before{
	background: url("../images/selleck/selleck-05.jpg") no-repeat;
	background-size: 100px;
  }
  #selleck_p .slick-dots li:nth-of-type(3) button:before{
	background: url("../images/selleck/selleck-03.jpg") no-repeat;
	background-size: 100px;
  }
 
  #selleck_p .slick-prev {
    left: -15px;
	top: 45%;
	z-index: 1;
  }
 
  #selleck_p .slick-next {
    right: -5px;
	top: 45%;
  }
 
  #selleck_p .slick-prev:before,
  #selleck_p .slick-next:before {
    font-size: 30px;
    line-height: 1;
    color: #c7c3b8;
  }

  /*------------------------------------------
	480-less    - スマホ
--------------------------------------------*/

@media screen and (max-width: 480px) {
	.slider2{
		width: 250px;
		height:200px;
		margin:50px auto 0;
	  }
	  
	  .slider2 img {
		height:200px;
		width: 100%;
		object-fit:cover;
	  }
}