/* CSS Document */
/*==============================================================================*/
/* mainimg
============================================================================== */
/**/
main h1 img{ margin: 0 auto; display: block; }

/*==============================================================================*/
/* 
============================================================================== */
a{ color: #250000; }
a:hover{ color:#590000 }

/*prev/next*/
#navBtn li a{ border-radius: 10px; 
    align-items: center; justify-content: center; display: flex;
    width: 100%; position: relative;}

/*icon*/
#navBtn li a i{ position: absolute; background-repeat: no-repeat; background-position: 0 center;
    height: 61px; left:20px; }

/* <- -> */
#prev a::before,#next a::before {
    bottom: 40%;
    width: 32px;
    transition: all .3s; }
  #prev a::before, #next a::after,#next a::before{ right: 20px; }

  #prev a::before, #prev a::after,
  #next a::before,#next a::after {
    position: absolute; content: "";
    background: #000; height: 2px; }

  #prev a::after,  #next a::after{  bottom: 43%; width: 8px;  }

  #prev a::after { transform: rotate(-35deg); transition: all .3s;  right: 44px; }
  #next a::after { transform: rotate(35deg); transition: all .3s; }

  #prev a:hover::before{right: 30px;  }
 #next a:hover::after,#next a:hover::before{ right: 13px; }
  #prev a:hover::after{ right: 52px; }

#mv{ background-size: cover; background-repeat:  no-repeat;
   background-image: url(../image/mvarea1.jpg) ; background-color: #b6f6ff;}
 #concept,
 #mv{ background-position: center 0;  }
 #concept h2,
#mv h2,.mov01{ text-align: center; }


/*modal
--------------------------------------------------*/


/*==============================================================================*/
/*btn 
============================================================================== */
#pagenav li a{ border-radius: 50px; padding: 15px ; width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
   box-sizing: border-box;	position: relative;
	background: #0d98db;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #005bac), color-stop(1.00, #0d98db) );
	background: linear-gradient( to bottom, #005bac 0%, #0d98db 100% );
}


#pagenav li a::before,
#pagenav li a::after{ position: absolute; content:"" ; background-repeat: no-repeat; background-position: 0 0;
  top: 50%;
  transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
#pagenav li a::before{ left: 5px; }
  

/*＞*/
#pagenav li a::after{  background-image: url(../image/arrowIcon1.png)  ;
height: 15px; width: 26px; right: 16px;}

#listdental{ position: absolute; right: 0; bottom:20px; }

/*==============================================================================*/
/* concept
============================================================================== */
#concept{color:#fff;}
#conceptTitle,
#aboutTxt{ display: flex; align-items: center;  max-width: 950px; width: 100%; margin-left: auto; margin-right: auto;}

#conceptTitle{ align-items: center;}
#conceptTitle dl{ width: 80%;  max-width: 620px; }
#conceptTitle dt{ border-bottom: 2px #fff dashed; }


/*sp*/
/*pc-----------------------------------------------------*/
@media screen and (min-width: 751px) {
	header{	background-image: url(../image/mainBg1.png) ;
	background-position: center 0;  background-color: #0db5f5;  background-repeat: repeat-x;
  background-size: cover;}


  #mv{  padding:60px 0 60px}
  #mv h2{ text-align: center; margin-bottom: 20px; }

  #concept{ padding: 60px 0;  
 background-repeat: no-repeat;  background-size: cover; 
 background-image: url(../image/careBg.png) ;background-color: #016dd9;}
  #concept h2{ margin-bottom:10px }
  #aboutTxt p{ width: 64%; max-width: 610px; letter-spacing: -1.6px; font-size: 1.25em; line-height:1.9em ; font-weight: 400;}
  #aboutTxt figure{ margin-left:40px }
  #conceptTitle figure{ margin-right: 30px; }
  #conceptTitle dt{ padding-bottom: 25px; margin-bottom: 20px; }
}


@media screen and (min-width: 1451px) {
#pagenav{max-width: 1000px; width: 100%;}
}

/**/
@media screen and (min-width: 1081px) and (max-width: 1450px) {
  #pagenav{ width: 76%; }
  #pagenav li#dogbtn a::before,
  #pagenav li#catbtn a::before, #pagenav li#carebtn a::before{
     background-size: 100%; max-width: 78px; width: 20%; background-position: center;}
  #pagenav li a::after{ background-size: 100%; max-width: 26px; width: 10%; }

}

@media screen and (min-width: 1081px) {
	header{  padding: 20px 50px 1px; }

#pagenav{ margin-left: auto; margin-right: auto; display:flex; justify-content: center; align-items: center; margin-bottom:60px; }
#pagenav li { width: 31.3%; }
#pagenav li a{ height: 80px; }
#pagenav li:not(:last-child){ margin-right: 2%; }
#listdental{ right: 20px; width: 15%; }

/*btn*/
#pagenav li a::before{  height: 78px; width: 78px; }
#pagenav li#dogbtn a::before { background-image: url(../image/dogImg.png) ; }
#pagenav li#catbtn a::before { background-image: url(../image/catImg.png) ; }
#pagenav li#carebtn a::before { background-image: url(../image/careImg.png) ; }

#conceptTitle{ margin-bottom: 60px;}
}

@media screen and (max-width: 1080px) {
  header { padding: 3% 3% 5%;  }
  #pagenav{ width: 70%; margin: 0 auto;}
  #pagenav li a{ height: 70px; }
  #pagenav li:not(:last-child){ margin-bottom: 3%; }

  /*btn*/
#pagenav li a::before{  height: 68px; width: 68px;}
#pagenav li#dogbtn a::before { background-image: url(../image/dogImg_sp.png) ; }
#pagenav li#catbtn a::before { background-image: url(../image/catImg_sp.png) ; }
#pagenav li#carebtn a::before { background-image: url(../image/careImg_sp.png) ; }

#conceptTitle{ margin-bottom: 6%;}

}

@media screen and (max-width: 480px) {
#pagenav li a img{  margin: 0 auto;  display: block;  }
#pagenav li#dogbtn a img,
#pagenav li#catbtn a img{ max-width: 207px;  width: 40%;}
#pagenav li#carebtn a img{ max-width: 278px;  width: 50%;}
}

@media screen and (max-width: 400px) {
  #pagenav li picture{ text-align: center; }
  #pagenav li:not(:last-child) img{ width: 50%; max-width: 207px;}
  #pagenav li:last-child img{ width: 52%; max-width: 278px;}
  
  #conceptTitle { flex-wrap: wrap; justify-content: center;}
  #conceptTitle figure { margin:0 0 3%;}
  #conceptTitle dl { width: 100%;}
  #conceptTitle dd img{ width: 40%; }
}
  
  
  @media screen and (max-width: 750px) {
  header{ background: url(../image/mainBg_sp.jpg) center 0 repeat-x ; background-size: 100%; padding: 6.5vw 0;}
  #pagenav li a { height: 60px;}
  #pagenav li a::before{ background-size: 70%; height: 50px;}
  #pagenav li a::after{ background-size:50%; right: 0; top: 53%;}
  
  
  #mv{ padding:7% 0 6%}
  #mv h2{ margin: 0 auto 2%; width: 40%; max-width: 219px; }
  
  #concept{ padding:8% 2% 16vw; background: url(../image/careBg_sp.jpg) 0 0 repeat-y; }
  #concept h2{ margin-left: 3%; margin-right: 3%; }
  #aboutTxt{ flex-wrap: wrap; justify-content: center;}
  #aboutTxt p{font-size: 1.1em; line-height:1.8em ; margin-bottom: 20px;}
  #aboutTxt figure img{ margin:0 auto; display: block; width: 80%; }
  #conceptTitle figure{ margin-right: 3%;width: 20%; }
  #conceptTitle dt{ padding-bottom: 15px; margin-bottom: 15px; }
  #conceptTitle dd img{ max-width: 155px; width: 46%; }

  }