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

/*-----------------------------------------------------
Header
----------------------------------------------------- */
#p_header, #a_header{
    position: fixed;
	top:0;
    width:100%;
	height:70px;
	background:#fff;
	z-index:1000;
  }

#p_header .logo,#a_header .logo {
  position: fixed;
  width: 380px;
  top:10px;
  left:20px;
  z-index:2000;
}

.logo a,#p_navi ul li a,#a_navi ul li a {
  display: block;
}

/*シャンプー用*/

#c_header {
    position: fixed;
	top:0;
    width:100%;
	height:66px;
	background:#fff;
	z-index:1000;
	border-bottom:4px solid #ddb45c;
  }

#c_header .logo {
  position: fixed;
  width: 420px;
  top:10px;
  left:20px;
  z-index:2000;
}


/*-----------------------------------------------------
p_nav
----------------------------------------------------- */
#p_navi{
	position:relative;
	margin-top:70px;
	width:100%;
	height:30px;
	background:#052a77;
}

#p_navi ul.p_nav-menu{
  display: flex;
  gap: 40px;
  justify-content:center;
  font-weight:bold;
  padding-top:8px;

}

#p_navi ul.p_nav-menu a{
	color:#fff;
	font-size:90%;
	position: relative;
    padding-left: 30px;
}

#p_navi ul.p_nav-menu a::before { /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left:3px;
  width: 16px; /* 横幅 */
  height: 16px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  border:1px solid #fff;
}
 
#p_navi ul.p_nav-menu a::after { /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 6px;
  height:6px;
  border-top:1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

#p_navi ul.p_nav-menu a:hover{
	color:#F8FAE1;
}

/*-----------------------------------------------------
a_nav
----------------------------------------------------- */
#a_navi{
	position:relative;
	margin-top:70px;
	width:100%;
	height:40px;
	background:#FD8005;
}

#a_navi ul.a_nav-menu{
  display: flex;
  gap: 40px;
  justify-content:center;
  font-weight:bold;
  padding-top:12px;
}

#a_navi ul.a_nav-menu a{
	color:#fff;
	font-size:100%;
	position: relative;
    padding-left: 30px;
	font-weight:bold;
	
}

#a_navi ul.a_nav-menu a::before { /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left:3px;
  width: 16px; /* 横幅 */
  height: 16px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  border:1px solid #fff;
}
 
#a_navi ul.a_nav-menu a::after { /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 6px;
  height:6px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform: rotate(45deg);
}

#a_navi ul.a_nav-menu a:hover{
	color:#ffc;
}


/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#p_mainvisual,#c_mainvisual {
  position: relative;
}

#p_mainvisual img {
  margin-top:100px;
  width: 100%;
  position: relative;
  z-index: 3;
}

#a_mainvisual,#c_mainvisual {
  position: relative;
}

#a_mainvisual img {
  margin-top:100px;
  width: 100%;
  position: relative;
  z-index: 3;
}


#c_mainvisual img {
  margin-top:70px;
  width: 100%;
  position: relative;
  z-index: 3;
}


/*-------------------------------------------
aniqrill　pet（トップ）
-------------------------------------------*/
#aniqrill,#pet {
	width: 100%;
	padding:0;
}

#aniqrill .wrapper,#pet .wrapper{
	position: relative;
}

h2.d_line{
  width:100%;
  margin-bottom: 20px;
  font-weight:bold;
  font-size: 130%;
  text-align: center;
  line-height: 1.5em;
  color: #392723;
  border: double 6px #392723;
  padding: 60px 0px 20px 0px;
  background: url("../pet/images/dog.png") no-repeat center 10px;
  background-size: 40px 40px;
  letter-spacing: 0.2em;
  border-radius: 6px;
}

.speechBubble {
  position: relative;
  display: inline-block;
  margin:0 auto 10px auto;
  width: 100%;
  padding: 0.5em 0;
  border: 2px solid #7dc1b9;
  border-radius: 6px;
  background-color: #ffffff;
  text-align: center;
  font-size: 150%;
  margin: 30px auto;
  font-weight: 400;
  line-height: 1.5;
  color: #7dc1b9;
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #7dc1b9 transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 7.2px 7.2px 0 7.2px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.speechBubble_yel {
  position: relative;
  display: inline-block;
  margin:0 auto 10px auto;
  width: 100%;
  padding: 0.5em 0;
  border: 2px solid #fea729;
  border-radius: 6px;
  background-color: #fea729;
  text-align: center;
  font-size: 150%;
  margin: 30px auto;
  font-weight:600;
  line-height: 1.5;
  color: #fff;
}

.speechBubble_yel::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fea729 transparent transparent;
  translate: -50% 100%;
}

.speechBubble_yel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 7.2px 7.2px 0 7.2px;
  border-color: #fea729 transparent transparent;
  translate: -50% 100%;
}


.cr{
background:#022D55;
color:#fff;
	padding:20px 0;
	margin-bottom: -20px;
}


#centonze{
	background: url("../pet/centonze/images/s_back.jpg") no-repeat center bottom;
	background-size:100%;
}

.grid1_3{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 3fr;
  padding: 20px 0;
}

.grid2_1{
  display: grid;
  gap: 20px;
  grid-template-columns: 2fr 1fr;
  padding: 20px 0;
}

.grid2_1 .right img{
	width: 100%;
	padding-top: 15px;
}

.grig4_sp2{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}



.nikukyu{
 position: relative;/*相対位置*/
 padding-left:3em;/*アイコン分のスペース*/
 line-height: 1.4;/*行高*/
 color: #392723;/*文字色*/	
 font-weight: bold;
 background: url("../pet/centonze/images/nikukyu.png") no-repeat left center;
 background-size:35px 25px;
 border-bottom: 6px double #ddb45c;
}

.p_h3{
 border-bottom: solid 3px #7dc1b9;
 position: relative;
 padding-bottom: 10px;
 margin: 20px auto;
 font-weight: bold;
 color: #392723;
 font-size: 120%;
}

.p_h3::after{
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ddb45c;
  bottom: -3px;
  width: 25%;
}

.p_h3 .wan{
	background: url("../pet/centonze/images/wan.png") no-repeat left center;
	background-size:contain;
	padding-left:1.5em;
}

.sirowaku{
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}


.grid_auto200 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.riyu4{
	border:2px solid #fec777;
	border-radius: 6px;
	margin-bottom: 30px;
	background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(254, 199, 119, 0.29) 10px, rgba(254, 199, 119, 0.29) 20px );
}

.p_item{
	background:#7dc1b9;
	padding: 20px;
	border-radius: 6px;
	margin-bottom: 30px;
}

.p_item dt{
	text-align: center;
	font-size: 110%;
	line-height: 1.5em;
	padding-bottom: 10px;
	border-bottom: 1px solid #FAFD77;
	color:#FAFD77;
	font-weight: 600;
}

.p_item dd{
	padding-top: 10px;
	line-height: 1.5em;
	color:#fff;
}


.p_kodawari{
	padding: 0;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}


.p_kodawari li {
  font-family: Quicksand;
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.1em 0 0.1em 0;
  line-height: 1.5;
	font-weight: bold;
  vertical-align: middle;
  color: #505050;
}

.p_kodawari li::before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #ddb45c;
  border-radius: 50%;
  margin-right:3px;
}


/*アニクリルページ　モーダル部分*/
.features__title,.modal__heading{
	font-weight: bold;
	text-align: center;
	font-size: 130%;
	line-height: 1.5em;
}

.col_item{
	padding: 20px;
}

/*アニクリルページ*/

.bg_bluegreen{
	background: #00a1b5;
	color: #fff;
	border-radius: 6px;
	padding-bottom: 20px;
}

.bg_bluegreen h3{
	font-weight: bold;
	font-size: 120%;
	text-align: center;
	padding: 20px 0;
}

.bg_bluegreen .grid_auto160{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  place-content: center;
  place-items: center;}

.maru{
	position: relative;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	color:#00a1b5;
	background: #fff; 
}

.maru span{
    position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 160px;
	text-align: center;	
	font-weight: bold;
	line-height: 1.2em;
}

.kouka{
	border:2px solid #00a1b5;
	border-radius: 6px;
	margin:10px auto;
	
}

.kouka dl{
	padding: 20px;
	background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0, 161, 181, 0.16) 10px, rgba(0, 161, 181, 0.16) 20px );
	border-radius: 6px;
}

.kouka dl dt{
	font-size:120%;
	font-weight: bold;
	text-align: center;
	background: #FD8005;
	padding: 10px 0;
	color: #fff;
	border-radius: 6px;
}

.kouka dl dd{
	text-align: center;
	line-height: 1.5em;
	color: #222;
	font-weight: bold;
}


#a_osusume table{
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	font-weight:bold;
	margin: 20px auto 30px auto;
}

#a_osusume table th,#a_osusume table td{
	padding: 10px 0;
	border: 1px solid #595959;
}

#a_osusume table th.gray,#a_osusume table td.gray{
	background:#E1DFDF;
}

#a_osusume table th.ye,#a_osusume table td.ye{
	background:#fec777;
}

/*スライダー*/
#slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*
スライダー矢印（共通）
*/
#slider .prev,
#slider .next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  position: absolute;
  top: 45%;
  transition: 0.5s;
  z-index: 10;
}
#slider .prev:hover,
#slider .next:hover {
  opacity: 0.5;
}
#slider .prev::before,
#slider .prev::after,
#slider .next::before,
#slider .next::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  background-color: #000;
  position: absolute;
}

/*
スライダー左矢印
*/
#slider .prev {
  left: 0;
}
#slider .prev::before,
#slider .prev::after {
  left: 12px;
}
#slider .prev:before {
  top: 37%;
  transform: rotate(-45deg);
}
#slider .prev:after {
  bottom: 37%;
  transform: rotate(45deg);
}

/*
スライダー右矢印
*/
#slider .next {
  right: 0;
}
#slider .next::before,
#slider .next::after {
  right: 12px;
}
#slider .next:before {
  top: 37%;
  transform: rotate(45deg);
}
#slider .next:after {
  bottom: 37%;
  transform: rotate(-45deg);
}

/*-------------------------------------------
タブレットとスマートフォン
-------------------------------------------*/
@media screen and (max-width:1050px) {
  #slider .prev,
  #slider .next {
    top: 40%;
  }
}

/*肉球アイコンの折り畳み*/
.faq_ac dt.niku div{
	background: url("../pet/aniqrill/images/nikukyu.png") no-repeat 1px center;
	background-size:25px;
	padding:10px 0 10px 38px;
	line-height: 1.5em;
}

.faq_ac dt.niku{
	border-bottom: 3px solid #392723;
	font-weight: bold;
}



.faq_ac dt.niku::before,.faq_ac dt.niku::after{
background:#392723;
}





/*-------------------------------------------
footer
-------------------------------------------*/
#p_footer {
  background-color: #fff;
  padding-bottom: 20px;
	width:100%;
	border-top:3px solid #392723;

}

#p_footer .p_grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 3fr;
  padding: 40px 0;
}


#p_footer .p_grid .logo {
  margin-right: 0;
  width: 120px;
}

#p_footer .info ul li{
  font-size: 80%;
	padding: 5px 0;
}

#p_footer .info ul li a:hover{
	color: #e8340c;
}


#p_footer .copyright {
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5em;
}







/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 1050px) {
	
	
	
	
/*-----------------------------------------------------
Header
----------------------------------------------------- */
#p_header .logo,#a_header .logo{
  width: 350px;
}

  /*
  ハンバーガーメニュー
  */

  #p_navi {
    width:300px;
	margin-top:0px;
	height:auto;
	background-color:#052a77;
    position: fixed;
    top: 0;
    right:-300px;
    bottom: 0;
    opacity:0;
    overflow-y: auto;
    transition: 0.5s;
    z-index:8000;
  }
  .p_open #p_navi {
    right: 0;
    opacity: 1;
  }
	
 #p_navi ul.p_nav-menu{
  display: block;
  font-size:100%;
  padding-top:50px;
  background:#052a77;
  }
	
	#p_navi ul.p_nav-menu li{
		padding:20px;
		border-bottom:1px solid #fff;
	}

#p_navi ul.p_nav-menu a{
	display:block;
	color: #fff;
  }
	
 .p_hamburger {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: fixed;
    top:10px;
    right: 15px;
    transition: 0.5s;
    z-index:8000;
	 
  }
  .p_hamburger span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background:#2D2C2C;
    width: 45%;
  }
  .p_hamburger span:nth-child(1) {
    top: 7px;
  }
  .p_hamburger span:nth-child(2) {
    top: 14px;
  }
  .p_hamburger span:nth-child(3) {
    top: 21px;
  }

  .p_hamburger span:nth-of-type(3)::after {
    content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top:10px;
    left:-2px;
    color:#2D2C2C;
    font-size: 0.6rem;
    text-transform: uppercase;
  }

  .p_open .p_hamburger span {
    background-color:#fff;
  }
  .p_open .p_hamburger span:nth-child(1) {
    top: 10px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
	color: #fff;
  }
  .p_open .p_hamburger span:nth-child(2) {
    opacity: 0;
  }
  .p_open .p_hamburger span:nth-child(3) {
    top: 22px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
	color: #fff;
  }

  .p_open .p_hamburger span:nth-of-type(3)::after {
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    color: #fff;
	transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
  }


  /*
  メニュー以外の部分をクリックで閉じるためのmask
  */

  #p_mask {
    display: none;
    transition: 0.5s;
  }

  .p_open #p_mask {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

#p_mainvisual img {
  margin-top:70px;

	}
	
	
  /*
  アニクリルハンバーガーメニュー
  */

  #a_navi {
    width:300px;
	margin-top:0px;
	height:auto;
	background-color:#FD8005;
    position: fixed;
    top: 0;
    right:-300px;
    bottom: 0;
    opacity:0;
    overflow-y: auto;
    transition: 0.5s;
    z-index:8000;
  }
  .a_open #a_navi {
    right: 0;
    opacity: 1;
  }
	
 #a_navi ul.a_nav-menu{
  display: block;
  font-size:100%;
  padding-top:50px;
  background:#FD8005;
  }
	
	#a_navi ul.a_nav-menu li{
		padding:20px;
		border-bottom:1px solid #fff;
	}

#a_navi ul.a_nav-menu a{
	display:block;
	color: #fff;
	font-weight: bold;
  }
	
 .a_hamburger {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: fixed;
    top:10px;
    right: 15px;
    transition: 0.5s;
    z-index:8000;
	 
  }
  .a_hamburger span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background:#2D2C2C;
    width: 45%;
  }
  .a_hamburger span:nth-child(1) {
    top: 7px;
  }
  .a_hamburger span:nth-child(2) {
    top: 14px;
  }
  .a_hamburger span:nth-child(3) {
    top: 21px;
  }

  .a_hamburger span:nth-of-type(3)::after {
    content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top:10px;
    left:-2px;
    color:#2D2C2C;
    font-size: 0.6rem;
    text-transform: uppercase;
  }

  .a_open .a_hamburger span {
    background-color:#392723;
  }
  .a_open .a_hamburger span:nth-child(1) {
    top: 10px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
	color: #fff;
  }
  .a_open .a_hamburger span:nth-child(2) {
    opacity: 0;
  }
  .a_open .a_hamburger span:nth-child(3) {
    top: 22px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
	color: #fff;
  }

  .a_open .a_hamburger span:nth-of-type(3)::after {
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    color: #392723;
	transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
  }


  /*
  メニュー以外の部分をクリックで閉じるためのmask
  */

  #a_mask {
    display: none;
    transition: 0.5s;
  }

  .a_open #a_mask {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

#a_mainvisual img {
  margin-top:70px;

	}

	
.speechBubble {
  font-size: 110%;
	}
	
.grid1_3{
  grid-template-columns: 1fr;
  padding:0px 0 20px 0;
  justify-items: center;
  align-items: center;

}
	
.grid2_1,.grid1_2{
  grid-template-columns: 1fr;
}
	
.grig4_sp2{
  grid-template-columns: repeat(2, 1fr);
}

	
.grid1_3 div.s_img{
		width:40%;
		margin: 0 auto;	
}



/*-------------------------------------------
footer
-------------------------------------------*/

#p_footer .p_grid {
  column-gap: 20px;
  grid-template-columns:1fr 3fr;
  justify-items: center;
  align-items: center;
  padding: 10px 0;
}
	

	
#p_footer .info ul li{
  line-height: 1.8em;
}
	
#p_footer .info ul li a{
	display: block;
}

	
	
	
	
	
}

/*-------------------------------------------
SP(400px以下)
-------------------------------------------*/
@media screen and (max-width: 400px) {

#c_header .logo {
  width:90%;
  margin: 0 auto;
}