@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 }
}



*{
	margin:0;
	padding:0px;
	}

@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:850px;
	text-align:center;
	float:left;
       background: url(../images/image5.jpg) no-repeat center center;
background-size: cover;
 position: relative;
 z-index: 0;
}





#index_set1{
	margin:0;
	padding:80px 0 0 0;
	width:100%;
	float:left;
                                background-color:#0d4c80;
}


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






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

}



#index_set1 .set1-3 .linkbox{
	margin:0 30px 0 0;
	padding:0;
	width:100%;
	text-align:left;
	float:left;
                                overflow: hidden;
}


#index_set1 .set1-3 img{
	margin: 0;
	padding:0;
	width:500px;
                                display: block;
                                transition-duration: 0.5s;
                                opacity: 0.7;
                                float:right;

}

#index_set1 .set1-3 .link-img {
	margin:0 0 40px 0;
background-color:#1d3c63;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
border-radius:40px 0 0 0;
}
#index_set1 .set1-3 .sample-img img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
#index_set1 .set1-3 .link-img:hover img {
  transform: scale(1.3); /* 拡大 */
}
#index_set1 .set1-3 .link-img p {
  bottom: 0;
  color: #fff; /* テキストの色 */
 font-size:48px;
  display: flex; /* テキストの中央揃え */
  justify-content: left; /* テキストの中央揃え */
  left: 0;
  margin: auto;
  position: absolute;
  left: 30px;
  top: 50%;
  width: 80%; /* テキストを横幅いっぱいにならないようにする */
  z-index: 2;
}




/* マスク */
#index_set1 .set1-3 .link-img::before {
  background: rgba(0, 0, 0, .5); /* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0; /* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease; /* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 1;
}
#index_set1 .set1-3 .link-img:hover::before {
  opacity: 1;
}

#index_set1 .set1-3 .t-link {
	margin:0 0 50px 10px;
	padding:30px;
                                width: 44%;
	text-align:center;
	color: #046bba;
                                background:#ffffff;
	font-size: 1em;
	text-decoration: none;
	transition: 0.3s;
                                border-radius:3px;
                                border-bottom: 2px solid #000000;
                                border-right: 2px solid #000000;
                                 font-size:20px;
	float:left;
}

#index_set1 .set1-3 .t-link:hover {
	color: #ffffff;
                                background:#a8adb6;
}




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






 
 /*=== 画像の設定 ======================================= */
.main_imgBox {
      height: 850px;
    overflow: hidden;
    position: relative;
 z-index:1;
 }


.main_imgbox-tx{
position:absolute;
  top:0;
  left:0;
  transform:translate(0%,0%);
  width:100%;
   color:#ffffff;                             
 z-index: 2;
 }

.main_imgbox-tx .pht{
                                width:20%;
                                 float:left;
 }
.main_imgbox-tx .pht img{
                                height:850px;
 }
.main_imgbox-tx .copy{
                                width:80%;
                                float:right;
                                text-align:right;
 }

.main_imgbox-tx .copy .head1{
                                font-weight: bold;
                                font-size: 60px;
                                margin:0 40px 0 0;
 }
.main_imgbox-tx .copy .head2{
                                font-weight: bold;
                                font-size: 40px;
                                margin:0 40px 0 0;
 }
.main_imgbox-tx .copy .bodycopy{
                                font-size: 20px;
                                margin:0 40px 0 0;
 }

.main_imgbox-tx .copy img{
                                width:95%;
                                margin:20% 0 0 5%;
 }


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

 
.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:750px;
	text-align:center;
       background: url(../images/sp-image5.jpg) no-repeat center center;
background-size: cover;
}


#index_set1{
	margin:0;
	padding:0;
	width:100%;
                                background-color:#0d4c80;
}


#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;
                               border: solid 1px #afafaf;
                                border-radius: 10px;
}

#index_set1 .set1-3{
	margin:0 0 10px 0;
	padding:60px 0 50px 0;
	width:100%;
	text-align:left;
	line-height:1em;
  font-weight: bold;
}




#index_set1 .set1-3 .linkbox{
	margin:0 0 0 0;
	padding:0;
	width:100%;
	text-align:left;
                                overflow: hidden;
}


#index_set1 .set1-3 img{
	margin: 0 0 0 0;
	padding:0;
	width:45%;
                                display: block;
                                transition-duration: 0.5s;
                                opacity: 0.7;
                                float:right;
}

#index_set1 .set1-3 .link-img {
	margin:0 0 40px 0;
	padding:0 0 0 0;
background-color: #1d3c63;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#index_set1 .set1-3 .sample-img img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}

#index_set1 .set1-3 .link-img:hover img {
  transform: scale(1.3); /* 拡大 */
}

#index_set1 .set1-3 .link-img p {
  bottom: 0;
  color: #ffffff; /* テキストの色 */
 font-size:1.2em;
  display: flex; /* テキストの中央揃え */
  justify-content: left; /* テキストの中央揃え */
  left: 30px;
  margin: auto;
  position: absolute;
  left: 15px;
  top: 50%;
  width: 90%; /* テキストを横幅いっぱいにならないようにする */
  z-index: 2;
}




/* マスク */
#index_set1 .set1-3 .link-img::before {
  background: rgba(0, 0, 0, .5); /* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0; /* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease; /* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 1;
}
#index_set1 .set1-3 .link-img:hover::before {
  opacity: 1;
}



#index_set1 .set1-3 .t-link {
	margin:0 0 20px 10%;
	padding:10px 0 10px 0;
                                width: 80%;
	text-align:center;
	color: #046bba;
                                background:#ffffff;
	font-size: 1em;
	text-decoration: none;
	transition: 0.3s;
                                border-radius:3px;
                                border-bottom: 2px solid #000000;
                                border-right: 2px solid #000000;
                                 font-size:1.1em;
	float:left;
}

#index_set1 .set1-3 .t-link:hover {
	color: #ffffff;
                                background:#a8adb6;
}


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





/*=== 画像の設定 ======================================= */
.main_imgBox {
      height: 750px;
    overflow: hidden;
    position: relative;
 z-index:1;
 }

.main_imgbox-tx{
position:absolute;
  top:0;
  left:0;
  transform:translate(0%,0%);
  width:100%;
   color:#ffffff;                             
 z-index: 2;
 }

.main_imgbox-tx .pht{
                                width:20%;
                                 float:left;
 }
.main_imgbox-tx .pht img{
                                height:700px;
 }
.main_imgbox-tx .copy{
                                width:100%;
                                text-align:center;
 }

.main_imgbox-tx .copy .head1{
                                width:100%;
                                font-weight: bold;
                                font-size: 2em;
                                margin:0 40px 0 0;
 }
.main_imgbox-tx .copy .head2{
                                width:100%;
                                font-weight: bold;
                                font-size:1.5em;
                                margin:0 40px 0 0;
 }
.main_imgbox-tx .copy .bodycopy{
                                width:80%;
	padding:0 0 0 10%;
                                font-size: 1em;
	line-height:1.3em;
                                margin:0 40px 0 0;
 }

.main_imgbox-tx .copy img{
                                width:100%;
                                margin:60% 0 0 5%;
 }




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

 
.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; 

}

}