@charset "utf-8";

img{
    width: 100%;
}

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: 600px;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

@media (max-width: 768px) {
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
}
/*========= レイアウトのためのCSS ===============*/

a:hover,
a:active{
  text-decoration: none;
}

h1{
  position: absolute;
  z-index: 2;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
	  ;	line-height: 28px;
}
h1 span{
  font-size:14px;
	  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

@media (max-width: 768px) {
h1{
  position: absolute;
  z-index: 2;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
	  ;	line-height: 28px;
}
h1 span{
  font-size:8px;
	  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
}

h2{
	text-align: center
  }

h3{
	text-align: center;
  }


.wrapper{
  position: relative;
}

.wrapper .container p{
  padding: 300px 0; 
  text-align: center;
  color: #333;
}


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



.first-2 h2 { font-size: 21px;
   line-height: 50px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
}

@media (max-width: 768px) {
.first-2 h2  { font-size: 21px;
	  	line-height: 30px;
  }
}
.first-3 {
	text-align: center;
}

.first-3 h4 {
	font-family: "Osaka-mono", "MS Gothic", "monospace";
	color: #6765A4
}

@media (max-width: 768px) {
.first-3 h4  { font-size: 17px;
  }
}

/*========================
TOP1
========================*/
.top1{
 padding: 120px 0;
	margin: 60px auto;
background: 
	url("../img/bg_t.jpg");
  }


.top1 h4{
	line-height: 90px
  }
.top1 p{
	line-height: 40px
  }

@media (max-width: 768px) {
.top1{
	margin: 60px auto;
  }
	.top1 h3{ font-size: 20px;
	line-height: 34px
  }
.top1 h4{ font-size: 20px;
	line-height: 34px
  }
}

/*========================
TOP2
========================*/
.top2{
 padding: 120px 0;
	margin: 60px auto;
  }


.top2 h4{
  }
.top2 p{font-size: 14px
  }

@media (max-width: 768px) {
.top2{
	margin: 60px auto;
  }
}

/*========================
TOP3
========================*/
.top3{
 padding: 120px 0;
	margin: 60px auto;
	background: 
	url("../img/bg_t.jpg");
  }


.top3 h4{
  }
.top3 p{font-size: 14px
  }

@media (max-width: 768px) {
.top3{
	margin: 60px auto;
  }
}

/*========================
TOP4
========================*/
.top4{
 padding: 120px 0;
	margin: 60px auto;
  }


.top4 h4{
  }
.top4 p{font-size: 14px
  }

@media (max-width: 768px) {
.top4{
	margin: 60px auto;
  }
}



/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
遅らせ表示
----------------------------*/

.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing06 {transition-delay: .10s;}
.timing07 {transition-delay: .12s;}
.timing08 {transition-delay: .14s;}

/*----------------------------
医院紹介カード
----------------------------*/

.index-content a:hover {
  color: #C1C7F7;
  text-decoration: none;
}

.index-content {
  margin-bottom: 20px;
  padding: 50px 0px;
}
.index-content h4 {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	color: #555;font-size: 20px
}

.index-content .row {
}

.index-content a {
}

.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
	margin-bottom: 20px;
}

.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index-content .card h4 {
  margin: 20px
}

.index-content .card p {
  margin: 0 20px 20px 20px;
  opacity: 0.65;
}

.index-content .blue-button {
  width: 200px;
  -webkit-transition: background-color 1s, color 1s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color 1s, color 1s;
  min-height: 20px;
  background-color: #668;
  color: #fff;
  border-radius: 4px;
  text-align: center;text-decoration: none;
  font-weight: lighter;
  margin: 0px auto 15px auto;
  padding: 5px 0px;
  display: inline-block;
}

@media (max-width: 768px) {
  .index-content .col-lg-4 {
    margin-top: 20px;
  }
}

/*----------------------------*/
/* table01 */
/*----------------------------*/
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}