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

#wrapper {
	width: 100%;
	overflow: hidden;
}
.page-inner {
	max-width: 1180px;
	margin: 0px auto;
	padding: 0px 20px;
	overflow: hidden;
}
#content{
  margin-bottom:0px;
}
#page-top{
	position: fixed;
	right: 10px;
	bottom:100px;
	z-index: 2;
	width: 40px;
}

@media screen and ( max-width:1024px) {
	#content{margin-top: 56px;}
}/* 20210105 */

@media screen and ( max-width:1000px) {
  .page-inner {
    width: 100%;
  }
  #content{
    margin-top: 56px;
  }
  #page-top{
    width:20px;
  }
}

.t16 {font-size: 16px;}
@media screen and (max-width:600px){
	.t16 {font-size: 14px;}
}

/* mv */
.pet__mv {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	width: 1140px;
	height: 540px;
	background: url("img/pet/mv_img.jpg") no-repeat center;
	background-size: cover;
	display: flex;
	justify-content: center;
}
.pet__mv > div {
	margin-top: 10%
}
@media screen and (max-width:1139px){
		.pet__mv {
			width:100%;
	}
}

@media screen and (max-width:480px){
	.pet__mv {
		width:100%;
		height: 70vh;
		background-size:auto 130%;
		padding: 0 20px;
	}
	.pet__mv > div {
	margin-top: 10vh
}
}

/* header */
@media screen and (max-width: 1099px) {
  header h1 {
      width: 240px;/*100*/
      margin: 0 0 0 20px;
  }
}
@media screen and (max-width: 480px) {
  header h1 {
      width: 70vw;
      margin: 0 0 0 20px;
  }	
}
/* */

.pet_tit_h1 {
	/*display: flex;
	justify-content: space-between;
	align-items:flex-end;*/
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--bg-color2);
}
.pet_tit_h1 span:first-child{
	width:200px
}
.pet_tit_h1 span:last-child{
	width:120px
}

.pet_tit {text-align: center;}
@media screen and (max-width:600px){
	.pet_tit {width:90%; margin-left: auto; margin-right: auto}
}



/* white back */
.sugosu__wrap {
	position: relative;
	background: #fff;
	color: #303766;
	margin-bottom: 160px
}
.sugosu__wrap::after {
	position: absolute;
	bottom:-79px;
	left:50%;
	transform: translateX(-50%);
	content: "";
	border-right: 50vw solid transparent;
	border-left: 50vw solid transparent;
	border-top:80px solid #fff;
	z-index: -1;
}

.sugosu__wrap .page-inner {
	padding: 40px 5% 0
}

.ph__menu__wrap {
	width: 840px;
	margin-left: auto; margin-right: auto;
}
figcaption {text-align: right; font-size: 12px}

@media screen and (max-width:1000px){
.ph__menu__wrap {
	width: 100%;
}	
}


/* pet menu */
.pet__price {font-size: 16px;}
.pet__price small {font-size: 60%}
.pet__menu__list {
	text-align: center;
}
.pet__menu__list li {
	line-height: 1.7;
}
.mb1em {margin-bottom: 1em;}

.pet__caution li {
	text-align: center;
	font-size: 10px;
}

/* guide */
.pet__guide__list  {
 	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 840px
}

.pet__guide__list dt {
	margin-right: 20px;
}
.pet__guide__list dd {
	flex: 1;
}
@media screen and (max-width:839px){
	.pet__guide__list  {width:100%}	
}

/* FAQ */
.bg__white {
	background: #fff;
/*	color:#303766;*/
}
.pet__faq__list {
	padding: 20px 0; 
	font-family: 'Zen Maru Gothic', sans-serif;
	width: 840px;
	margin-left: auto;
	margin-right: auto;
}
.pet__faq__list dt {
	position: relative;
	margin-left: 50px;
	text-align: left;
	min-height: 50px;
	border-bottom:1px solid var(--bg-color2);
	margin-bottom: 10px;
	padding-top: 7px;
	padding-bottom: 10px;
}
.bg__white .pet__faq__list dt{
	border-bottom:1px solid var(--bg-color2);
}
.pet__faq__list dt::before {
	position: absolute;
	top:0;
	left: -50px;
	content: "";
	width: 40px;
	height: 40px;
	background: url(img/pet/ic_q.png) no-repeat;
	background-size: cover;
}
.pet__faq__list dd {
	position: relative;
	margin-left: 50px;
	text-align: left;
}
.pet__faq__list dd::before {
	position: absolute;
	top:0;
	left: -45px;
	content: "";
	width: 30px;
	height: 21px;
	background: url(img/pet/ic_a_w.png) no-repeat;
	background-size: cover;
}
.bg__white .pet__faq__list dd::before {
	background: url(img/pet/ic_a.png) no-repeat;
	background-size: cover;
}
@media screen and (max-width:839px){
	.pet__faq__list {width:100%}	
}
@media screen and (max-width:480px){
	.pet__faq__list dt {font-size: 3.8vw;}
	.pet__faq__list dd {font-size: 3.5vw;}
}


/* btn */
.btn__wrap {
	width: 240px;
	margin-left: auto;
	margin-right: auto;
		font-family: 'Zen Maru Gothic', sans-serif;
}
.pet__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	border-radius: 24px;
	padding: 10px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.bg__green {
	background-color: #9aa454;
}

.pet__btn.bg__white {
	color: #303766;
}


/* anime */
.ani_1 {
      width: 283px;
      height: 120px;
      background: url("img/pet/dog_ani_1.png") no-repeat;
		background-size: cover;
      animation: anime1 .8s steps(2) infinite;
    }
    @keyframes anime1 {
      to {
        background-position: -568px 0;
      }
    }
.ani_2 {
      width: 230px;
      height: 120px;
      background: url("img/pet/dog_ani_2.png") no-repeat;
		background-size: cover;
      animation: anime2 2.0s steps(2) infinite;
    }
    @keyframes anime2 {
      to {
        background-position: -460px 0;
      }
    }

@media screen and (max-width:600px){
	.ani_1 {
		width:200px;
		height: 85px;
	}
	.ani_2 {
		width:180px;
		height: 94px;
	}
    @keyframes anime1 {
      to {
        background-position: -402px 0;
      }
    }
    @keyframes anime2 {
      to {
        background-position: -360px 0;
      }
    }	
}

    .parapara {
      width: 92px;
      height: 64px;
      background: url("img/pet/dog_anime.png") no-repeat;
		background-size: cover;
      animation: parapara 1.2s steps(2) infinite;
    }
    @keyframes parapara {
      to {
        background-position: -184px 0;
      }
    }


.slideIn {
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:1.8s;/*アニメーション変化時間 ※デフォルト*/
animation-delay: 1.2s;	
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
	animation-timing-function:ease-out;
opacity:0;
}
@keyframes fadeUpAnime{
  0% {
    opacity: 0;
  transform: translateY(-180px);
  }
  40% {
    opacity: 1;
  transform: translateY(10px);
  }	

  100% {
    opacity: 1;
  transform: translateY(0);
  }
}

/* slide */
.slide__wrap {width:840px; margin-left: auto; margin-right: auto;}

.bx-wrapper {z-index: 1;}
.bx-wrapper .bx-next{
	    right: -20px!important;
	    /* お好みの画像に変更してください */
	    background: url(img/pet/slide_arrow_right.svg) no-repeat !important;
	}
	.bx-wrapper .bx-prev {
	    left: -20px!important;
	    /* お好みの画像に変更してください */
	    background: url(img/pet/slide_arrow_left.svg) no-repeat !important;
	}
.bx-wrapper .bx-controls-direction a{
	margin-top: 0 !important;
}

@media screen and (max-width:839px){
	.slide__wrap {width:100%;}
}

/* nav */
.gnav,.overlay-menu {
	font-family: 'Zen Maru Gothic', sans-serif;
}

address{
  font-size: 10px;
  text-align: center;
  /*margin:20px 0;*/
	margin: 20px 0 60px;/*20210707*/
}