@charset "UTF-8";
/***********************************************
TGC CSS information
File Name : base.css
Style Info : 三阪歯科医院／トップ用指定
Last modified : :2021
***********************************************/

 /*=== スライドのアニメーション ========================= */
@keyframes anime {
  0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:9s;
    }
    100% { opacity: 0 }
}





@media print, screen and (min-width: 770px){
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }



#index_main {
	margin:0;
	padding:0;
	width:100%; 
	height:800px;
	text-align:center;
	float:left;
       background: url(../images/image5.jpg) no-repeat center center;
background-size: cover;
}





#index_set1{
	margin:80px 0 0 0;
	padding:20px 0 0 0;
	width:100%;
	float:left;
}


#index_set1 .all {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width:1300px;
	}





#index_set1 .set1-1{
	margin:0;
	padding:20px;
	width:700px;
	float:left;
	text-align:left;
	line-height:1.7em;

}

#index_set1 .set1-1 .head{
	margin:0 0 15px 0;
	padding:0;
	width:100%;
	float:left;
                                font-size:30px;
	line-height:1.5em;
                                font-weight: bold;
}



#index_set1 .set1-1 img{
	margin:10px 20px 15px 0;
	width:35%;
	float:left;
}



#index_set1 .set1-2{
	margin:0 0 0 58px;
	padding:0;
	width:400px;
                                height:610px;
	text-align:left;
	float:left;
}


.facebook_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
 
.fb-page,
.fb-page span,
.facebook_wrap iframe{
  width: 100% !important;
  height: 580px !important;
}

#index_set1 .set1-3{
	margin:60px 0 60px 0;
	padding:0;
	width:1300px;
	text-align:left;
	float:left;
	font-size:18px;
	line-height:1em;

}

#index_set1 .set1-3 .left{
	margin:0 50px 0 0;
	padding:0;
	width:400px;
	text-align:left;
	float:left;
                                overflow: hidden;
}

#index_set1 .set1-3 .right{
	margin:0;
	padding:0;
	width:400px;
	text-align:left;
	float:left;
                                overflow: hidden;
}

#index_set1 .set1-3 img{
	margin:50px 0 5px 0;
	padding:0;
	width:400px;
                                display: block;
                                transition-duration: 0.5s;
}

#index_set1 .set1-3 img:hover {
                                transform: scale(1.1);
                                transition-duration: 0.5s;
                                opacity: 0.7;
}




hr.style1 {
margin:10px 0 10px 0;
border-top: 1px dashed #8c8b8b;
border-bottom: none;
}








 
 /*=== 画像の設定 ======================================= */
.main_imgBox {
      height:800px;
    overflow: hidden;
    position: relative;
     font-size:56px;
font-family:'メイリオ', 'Meiryo', sans-serif;
  color: #ffffff;


  text-shadow:2px 2px 0 #000000, -1px -1px 0 #000000,
              -1px 2px 0 #000000, 2px -1px 0 #000000,
              0px 2px 0 #000000,  0-1px 0 #000000,
              -1px 0 0 #000000, 2px 0 0 #000000;
 }

.main_imgBox .copy1,
.main_imgBox .copy2,
.main_imgBox .copy3{
position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
 }

.main_imgBox .copy2{
     font-size:80px;
  top:30%;
 }
.main_imgBox .copy3{
     font-size:48px;
  top:60%;
 }


.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 800px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 40s 0s infinite  ease;
    animation: anime 40s 0s infinite  ease; 
}

 
.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; 
}

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
 }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; 
}

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; 

}

}


@media only screen and (max-width: 770px) {

/* スマホで見たときは"sp"のclassがついた画像が表示される */

.sp { display: block !important; }
.pc { display: none !important; }

img {
  max-width: 100%;
  height: atuo;
}



#index_main {
	margin:0;
	padding:0;
	width:100%; 
	height:250px;
	text-align:center;
       background: url(../images/sp-image5.jpg) no-repeat center center;
background-size: cover;
}


#index_set1{
	margin:40px 0 0 0;
	padding:0;
	width:100%;
}


#index_set1 .all {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width:100%;
	}


#index_set1 .set1-1{
	margin:30px 0 0 2%;
	padding:2%;
	width:90%;
	text-align:left;
	line-height:1.3em;
}

#index_set1 .set1-1 .head{
	margin:0 0 15px 0;
	padding:0;
	width:100%;
                                font-size:1.4em;
	line-height:1.5em;
                                font-weight: bold;
}

#index_set1 .set1-1 img{
	margin:10px 20px 15px 15%;
	width:70%;
}



#index_set1 .set1-2{
	margin:20px 0 0 2%;
	padding:0;
	width:96%;
	text-align:left;
	font-size:0.8em;
	line-height:1.5em;
}

.facebook_wrap{
  margin-left: auto;
  margin-right: auto;
  width:90%;
}
 
.fb-page,
.fb-page span,
.facebook_wrap iframe{
  width: 100% !important;
  height: 400px !important;
}

#index_set1 .set1-3{
	margin:40px 0 50px 0;
	padding:2%;
	width:96%;
	text-align:left;
	font-size:1em;
	line-height:1em;

}

#index_set1 .set1-3 .left{
	margin:0 0 10px 2%;
	padding:0;
	width:96%;
	text-align:left;
                                overflow: hidden;
}

#index_set1 .set1-3 .right{
	margin:0 0 10px 2%;
	padding:0;
	width:96%;
	text-align:left;
                                overflow: hidden;
}

#index_set1 .set1-3 img{
	margin:30px 0 0 0;
	padding:0;
	width:100%;
                                display: block;
                                transition-duration: 0.5s;
}

#index_set1 .set1-3 img:hover {
                                transform: scale(1.1);
                                transition-duration: 0.5s;
                                opacity: 0.7;
}



hr.style1 {
margin:10px 0 10px 0;
border-top: 1px dashed #8c8b8b;
border-bottom: none;
	width:98%; 
}





/*=== 画像の設定 ======================================= */
.main_imgBox {
      height: 250px;
    overflow: hidden;
    position: relative;
     font-size:32px;
font-family: serif ;
 }

.main_imgBox p{
position:absolute;
  top:50%;
  left:30%;
  transform:translate(-50%,-50%);
  width:100%;
 }

.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 250px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 40s 0s infinite  ease;
    animation: anime 40s 0s infinite  ease; 
}

 
.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; 
}

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
 }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; 
}

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; 

}

}