@charset "UTF-8";
/* CSS Document */

body {font-family: 'Kaisei Opti', serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
text-align:center;

width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

body {
    padding-top: 90px; /* ヘッダーの後ろに要素が隠れないようにするため */
}


header {
	
    width: 100%; /* 幅いっぱいを指定 */
    height: 90px; /* 高さを指定 */
    background:#FFCCCC; /* 背景色を指定 */
    padding: 20px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
	
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
	z-index: 9999;
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
   border-radius: 0 0 20px 20px;
    align-items: center; /* 中の要素を上下中央に並べる */


}

.head{
	animation-name:zoomInAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}



.doctor{margin-top: 50px}
.doctor img{width: 60%;
	margin: 10px;
animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: translateX(0); }
  5% {
    transform: translateX(0); }
  10% {
    transform: translateX(0); }
  20% {
    transform: translateX(-10px); }
  25% {
    transform: translateX(0); }
  30% {
    transform: translateX(-10px); }
  50% {
    transform: translateX(0); }
  100% {
    transform: translateX(0); }}






.head img{width:75%;
	
}

.reciepi-sign{margin-top: 50px;
}

.reciepi-sign img{width:70%;
position: relative;
left: 30px;
margin-top: 30px;
	
}



/*-----文字調整-------*/

h1{font-family: "Kaisei Opti", serif;
	color:#ffffff;
font-weight: lighter;
text-align:left;
}
h2{font-family: "Kaisei Opti", serif;
	color:#CE423B}
h3{font-family: "Kaisei Opti", serif;
	color:#CE423B;
}
p{line-height: 2.5}

.recommends h3{margin: 50px 0 25px 0}



/*------スライダー1----------*/

/*------ スライダーの横幅 ------*/
.slider{
  width:70%;
  margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider img{
	width:100%;
	border-radius: 5%
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}






/*------スライダー2----------/

/*------ スライダーの横幅 ------*/
.slider-2{
  width:70%;
  margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider-2 img{
	width:100%;
	border-radius: 5%
}

/*-------- 高さ調整 ----------*/
.slider-2 .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider-2 .slick-next{
    right:0!important;
}
.slider-2 .slick-prev{
    left:0!important;
}
.slider-2 .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider-2 .slick-arrow:before{
    font-size: 30px!important;
}