<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* CSS Document */


/*=======================================▼PCスマホ切り替え▼=======================================*/


.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 960px) {
.pc { display: none !important; }
.sp { display: block !important; }
}    

#event-container * {
    box-sizing: border-box;
}

.none{display: none;}

/*=======================================▼リセットCSS▼=======================================*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

img {backface-visibility: hidden;-webkit-backface-visibility: hidden;}
body {line-height: 1; 
  font-family: 'Noto Sans JP', sans-serif;
  height: 100vh;
  
  margin: 0 auto;background:#fff;}



  html {
    height: 100%;
  }
  
  
  .fullheight {
    height: 100%;;
  }





.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w700 {font-weight: 700;}
.w900 {font-weight: 900;}

ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none;color: rgb(1 73 157);}

div #tab_cat a {text-decoration: none;color: rgb(218 13 43);}


a:hover {color: #333;text-decoration: underline;text-decoration: none;opacity: 0.8;}
p {    line-height: 2.5;
  font-weight: 500;
  color: #ffffff;
  font-size: 23px;
  width: 900px;
  margin: 0 auto;
  text-align: center;
 }

 p.title {
  line-height: 2.5;
  font-weight: 600;
  color: #ffffff;
  background-color: #01499d;
  font-size: 1vw;
  width: 900px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
 }

 p.titles {
  line-height: 2.5;
  font-weight: 600;
  color: #ffffff;
  background-color: #da0d2b;
  font-size: 1vw;
  width: 900px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
 }

#block p span.marker{    
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 22px;
  width: 900px;
  margin: 0 auto;
  text-align: center;
 }
 #block p span.markers{    
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 22px;
  width: 900px;
  margin: 5px -41px;
  text-align: center;
 }


 

 table{
  border-collapse: separate;
  border-spacing: 17px;
  width: 900px;
  margin: 0 auto;
  font-size: 1.0vw;
  background-color: white;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th.space {
 
  color: white;
  background-color: white;
  width: 100px;
}


table th{
  background-color: #7b7b7b;
  color: white;
  width: 100px;
}



table td{
  text-align: left;
  margin: 0 auto;
  padding: 7px 57px 0;
}






button {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
.prdisp-price &gt; span &gt;span{display: none!important;}

html{scroll-behavior: smooth;}

#pet{margin:  0 auto;text-align: center;}

/*================▼看板▼================*/
.kanban_bg {     
    position: relative;
    height: 32vw;
    z-index: -1;
    top: -35px;
}
.kanban_bg .bgimg {
  position   : absolute;
  width  : 100%;
  height     : 100%;
  top: -3px;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  background-size: cover;
  animation  : bgAnime 30s infinite;   /* 4画像 × 各5s = 20s */
}


/*その他と主な共通部分は省略*/

a.btn--green {
  color: #fff;
  background-color: #e60027;
}

a.btn--green:hover {
  color: #fff;
  background: #e60027;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #99001a;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #99001a;
}

a.btn-c {
  font-size: 1.5rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

h1 {
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
  width: 950px;
    text-align: center;
    margin: 0 auto -1px;
    font-size: 28px;
    font-weight: 700;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */


@keyframes bgAnime {
   0% { opacity: 0; }
  20% { opacity: 1; }
  33% { opacity: 1; }
  53% { opacity: 0; }
 100% { opacity: 0; }
}
/* --- タイトル画像 ----------------- */
#kanban {
    position: absolute;
    top: 19px;
    left: 22%;
    padding: 0;
     /*    	 animation:katakata 6s infinite ease-in-out alternate;
    	 transform: translateX(-50%); */
  }

#kanban p{text-align: center;color: #fff;padding: 0 0 1.5% 0;font-size: 20px;font-family:  'Noto Sans Japanese', sans-serif;}
#kanban img{margin: 0 auto;width: 32vw;filter: drop-shadow(1px 3px 5px #343434);}


/* ==================================================s

ヒルズについて

================================================== */

/* 横並び */

.flex {
  display: flex; /*横並び*/
  width: 900px;
    margin: 0 auto;
    padding: 12px 0;
}
.flex .image {
  width: 640px; /*画像サイズ指定*/
  margin: 9px 0px 25px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  margin: 9px 0 0 20px;
  padding: 0;
  background-color: white;
  color: #111111;
  text-align: left;
  font-weight: 500;
  font-size: 1.1vw;
  line-height: 2vw;
}





/* ==================================================s

   看板

================================================== */


#event-container .main_title {
  position: relative;
  width: 100%;
}

#event-container .main_title h1 {
  position: absolute;
  top: 6.5vw;/*130px*/
  left: 50%;
  z-index: 5;
  margin-left: -15vw;/*-300px*/
}
#event-container .main_title h1 img {
  width: 30vw;/*600px*/
  height: 17vw;/*340px*/
}

#event-container .main_title ul li img{
  display: inline;
  width: 50%;
  height: auto;
}

/* ==================================================s

  商品を選ぶ

================================================== */

.mini_title {
  background-color: #a5a5a5;
  width: 800px;
  margin: 12px auto;
  font-weight: 500;
  font-size: 0.8vw;
  padding: 7px 1px 7px;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
}


/* ===犬=== */

#tab_dog{
  border-block-start: 4px solid #01499d;
  background-color: #f5f5f5;
}

/* ===年齢大きさ=== */

div .back {
  background-color: white;
  width: 900px;
  height: 520px;
  margin: 0 auto;


}

/* ===悩み=== */
div .backr {
  background-color: white;
  width: 900px;
  height: 200px;
  margin: 0 auto;


}

/* ===ブランド=== */

div .backe {
  background-color: white;
  width: 900px;
  height: 100px;
  margin: 0 auto;
  margin-bottom: 5%;

}



/* ===猫=== */
#tab_cat{
  border-block-start: 4px solid #da0d2b;
  background-color: #f5f5f5;
}

/* ===年齢大きさ=== */

div .backb {
  background-color: white;
  width: 900px;
  height: 200px;
  margin: 0 auto;
}


/* ===悩み=== */
div .backa {
  background-color: white;
  width: 900px;
  height: 230px;
  margin: 0 auto;


}





/*================▼カテゴリー▼================*/
#wrap01{ max-width: 900px; display: block;}

.img-wrap{margin: auto;}

.messe{margin: 0 auto;/* width: 100%; */text-align: center;position: relative;display: inline-block;}
.messe img{
			margin: 8% auto;
			animation-name:zoomInAnime;
			animation-duration:0.5s;
			animation-fill-mode:forwards;
			z-index: 0;
			width: 90vh;
}
@keyframes zoomInAnime{
	from {
	transform: scale(0.6);
	}
	
	to {
		transform: scale(1);
	}
	}
	

/*================▼メインコンテンツ▼================*/
#block{padding:0 3%; margin-top: 5%;}
#block2 {background-color: #fff;}

#main0 {max-width: 1000px; text-align: center;margin:1% auto 3%;}
/* #main0 h2{/* color: #fff;border-radius: 50px; width: 600px;margin: 0 auto;} */
#main0 h2 {
    width: 850px;
    margin: 0 auto 2em;
    position: relative;
    padding: 1.5rem 2rem;
    border-radius: 45px;
    font-size: 1.2rem;
    color: #4d4948;
    line-height: 2.5vw;
  }
  

#main0 #block .item-box{ margin: 0 auto;position: relative; background: #f2cc90; border-radius: 20px;}
#main0 #block .item-list {width: 900px;display: flex;flex-wrap: nowrap;margin: 0 auto;flex-direction: column;align-items: flex-start;}
#main0 #block .item-innner,#main0 #block .item-innner2{ margin: 0 auto 1%;;width: 900px; position: relative;border-bottom: none;}
#main0 #block .item-innner a,#main0 #block .item-innner2 a{margin: 0;}
#main0 #block .item-innner dl{display: flex;width: 95%; flex-wrap: nowrap; align-items: flex-start;border-bottom: 5px dotted #fff;margin: 0 auto;}
#main0 #block .item-innner2 dl{display: flex;width: 95%; flex-wrap: nowrap; align-items: flex-start;margin: 0 auto;}
#main0 #block .item-img{width: 100%; text-align: left;}
#main0 #block .item-img img{width: 95%; border-radius: 15px; padding: 0; }
#main0 #block .item-img div.set{display: flex; flex-direction: column; align-items: flex-start;}
#main0 #block .item-img div.set img{border-radius: 15px; margin: 4% 0;}
#main0 #block .item-innner a.flex-1,#main0 #block .item-innner2 a.flex-1  { flex: 70%; }
#main0 #block .item-innner a.flex-2,#main0 #block .item-innner2 a.flex-2  { flex: 30%; /*margin-top: 20%;*/ }
#main0 #block .item-name{font-size: 1.9em; font-weight: 700;margin: 15% 0 10% 0;text-align: center;line-height: 1.2;width: 98%;padding: 10px 0;color: #381706;}
#main0 #block .item-name p.txt2{ font-size: 0.8em;margin: 2% auto;text-align: center;line-height: 1.2;padding: 1%;color: #fff;background: #381706;border-radius: 20px;width: 95%;}
#main0 #block a p.txt{font-size: 1.1em; margin: 15% 0 10% 0;text-align: left;line-height: 1.2;padding: 10px 0;color: #000;}
#main0 #block .item-name p.txt2{ font-size: 0.5em;margin: 2% auto;text-align: center;line-height: 1.2;padding: 1%;color: #fff;background: #381706;border-radius: 7px;width: 80%;}
#main0 #block .price{align-items: center;display: flex;justify-content: space-between;}
#main0 #block .prices{align-items: baseline;cursor: text;display: flex;flex: 0 0 auto;overflow: hidden;color: #B22029;font-weight: bold;font-family: 'Noto Sans Japanese', sans-serif!important;font-size: 2.5em;font-weight: bold;}

#main1 h3,#main2 h3{font-size: 36px;padding: 0 0 1%;color: #7d7d7c;font-weight: 700;text-align: center;font-family:  'Noto Sans Japanese', sans-serif;}
#main1 h4,#main2 h4{font-size: 36px;padding: 8% 0 3% 0;color: #7d7d7c;font-weight: 700;text-align: center;font-family:  'Noto Sans Japanese', sans-serif;}

#main1 {background-color: #f5f5f5;/* max-width: 900px; */text-align: center;margin: 0 auto; border-block-start: 4px solid #01499d; height: 1200px;}
#main2 {background-color: #f5f5f5;text-align: center;margin: 0 auto; border-block-start: 4px solid #da0d2b; height: 900px;}
#main1 h2.midasi{    font-size: 1.8rem;
    color: #444;
    /* background-color: #ffffff; */
    /* border-radius: 50px; */
    width: 800px;
    position: relative;
    padding: 1.5rem 2rem;
    border-bottom: 4px solid #fff251;
    border-radius: 10px;
	}
#main1 h2.midasi:before {
		position: absolute;
		bottom: -18px;
		left: 3em;
		width: 0;
		height: 0;
		content: '';
		border-width: 18px 15px 0 15px;
		border-style: solid;
		border-color: #fff251 transparent transparent transparent;
	  }
#main1 h2.midasi:after {
		position: absolute;
		bottom: -11px;
		left: 3em;
		width: 0;
		height: 0;
		content: '';
		border-width: 18px 15px 0 15px;
		border-style: solid;
		border-color: #fdffec transparent transparent transparent;
	  }
#main2 h2.midasi{    font-size: 1.8rem;
		color: #444;
		/* background-color: #ffffff; */
		/* border-radius: 50px; */
		width: 800px;
		position: relative;
		padding: 1.5rem 2rem;
		border-bottom: 4px solid #4e4e4e;
		border-radius: 10px;
		}
#main2 h2.midasi:before {
			position: absolute;
			bottom: -18px;
			left: 3em;
			width: 0;
			height: 0;
			content: '';
			border-width: 18px 15px 0 15px;
			border-style: solid;
			border-color: #4e4e4e transparent transparent transparent;
		  }
#main2 h2.midasi:after {
			position: absolute;
			bottom: -11px;
			left: 3em;
			width: 0;
			height: 0;
			content: '';
			border-width: 18px 15px 0 15px;
			border-style: solid;
			border-color: #fffbe3 transparent transparent transparent;
		  }


#main2 h2{font-size: 1.5vw;color: #381706;/* border-radius: 50px;*/width: 600px;}
#main1 p,#main2 p{ max-width: 900px;text-align: center;margin:0 auto;padding: 0% 0%; font-size: 1.0vw;}
#block .item-content{margin-bottom: 0;}
#block .item-content h2{font-weight: bold;text-align: center;margin: 1% auto;padding: 1% 0 ;}
#block .item-box{width: 900px; margin: 0 auto;position: relative;}
#block .item-list {display: flex;flex-wrap: wrap;margin: 0 auto;flex-direction: row;margin-left: 15%;}
#block .item-list ul li.kiji p{width: 30%;}
#block .item-list ul li.kiji img{width: 70%;}
#block .item-list li.check{width: calc(100%/2);text-align: left; /* padding: 0.5% 0; */ font-size: 1.1vw;}
#block .item-list li.check p{text-align: left; padding: 2% 0; font-size: 1.2rem; line-height: 1;  width: 100%}

#block .item-list02{display: flex;margin: 0 auto;flex-direction: row;margin:5% auto 0;}
#block .item-list02 li.kiji1{width: 40%;margin: 2% 3%;}
#block .item-list02 li.kiji2{width: 60%;}
#block .item-list02 li p{font-size: 1.2rem;text-align: left;}
#block .item-list02 li img{width: 100%;}

#block ul.item-list03 li ul li.check { width: 100%;}
#block ul.item-list03 li ul li.check p::before{content: '?';font-size: 1.5vw;vertical-align: text-bottom;margin: 0 3%;}
#block ul.item-list03 li ul li.check p{text-align: left; padding: 2% 0; font-size: 1.1vw; line-height: 1;}
#block ul.item-list03 li ul li.check div{text-align: center; padding: 2% 0; font-size: 1.1vw; line-height: 1;background-color: #4e4e4e; border-radius: 30px; width: 80%;color: #fff;}

#block .item-list03{display: flex;margin: 4% auto 0;flex-direction: row;}
#block .item-list03 li{width: 50%; }
#block .item-list03:nth-child(1){margin-left: 8%;}


#block .item-innner {width: calc(80%/2);margin: 1% 0.75%;padding: 0.5%;border-bottom: 5px dotted #fff;}
#block .item-img {padding: 2% 0;}
#block .item-name{font-size: 1.4em; margin: 1% auto;text-align: left;line-height: 1.2;width: 98%;padding: 10px 0;color: #000;}
#block .price{align-items: center;display: flex;justify-content: space-between;}
#block .prices{align-items: baseline;cursor: text;display: flex;flex: 0 0 auto;overflow: hidden;color: #E50D0B;font-weight: bold;font-family: 'Noto Sans Japanese', sans-serif!important;font-size: 2.5em;font-weight: bold;}

#block .item-list li.check p span.marker,#block .item-list03 li.check p span.marker{
	position: relative;
	z-index: 1;
	cursor: pointer;
  }
  #block .item-list li.check p span.marker::after,#block .item-list03 li.check p span.marker::after{
	content:"";
	width: 0%;    /*最初はwidth:0にする*/
	height: 8px;
	background: #f9f259;
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: -1;
	transition: all .3s;  /*アニメーションの長さ*/
  }	
  #block .item-list li.check p span.marker:hover::after, #block .item-list03 li.check p span.marker:hover::after{
	width: 100%;    /*hover時に100%で広がる*/
  }
  
  
   /*ブランド選ぶ用*/
  
  #block .item-list li.check p span.markers,#block .item-list03 li.check p span.markers{
    position: relative;
    z-index: 1;
    cursor: pointer;
    }
    #block .item-list li.check p span.markers::after,#block .item-list03 li.check p span.markers::after{
    content:"";
    width: 0%;    /*最初はwidth:0にする*/
    height: 8px;
    background: #f9f259;
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: -1;
    transition: all .3s;  /*アニメーションの長さ*/
    }	
    #block .item-list li.check p span.markers:hover::after, #block .item-list03 li.check p span.markers:hover::after{
    width: 100%;    /*hover時に100%で広がる*/
    }
/*------▼ケージって？▼-------*/
  #main2 h2.mi01,#main2 .kiji3 h2.mi02,#main2 .kiji3 h2.mi03{
    font-size: 1.2rem;
    margin: 0 auto;
    background-color: #4e4e4e;
    width: 50%;
    border-radius: 0 0 50px 0;
    display: inline-block;
    position: absolute;
    left: 0%;
  }
  #main2 .kiji_00 p{margin: 5% 5% 1% 6%; text-align: left;}
  #main2 .kiji_00{
    border: 3px solid #4e4e4e;
    width: 60%;
    margin:2% auto 0;
    border-radius: 10px;
    position: relative;
  }
/*------▼子猫に場合/保護猫の場合▼-------*/
#block .item-list02 li.kiji3{
  border: 3px solid #4e4e4e;
  width: 47%;
  margin: 2% auto 0;
  border-radius: 10px;
  position: relative;
}
#main2 .kiji3 h2.mi02{width: 70%;}
#main2 .kiji3 .mi03{ padding: 3% 2%;}
#main2 .kiji3 div{margin:11% 1% 1%;}
#main2 .kiji3 div p{font-size: 1rem;letter-spacing: -1px;}

  
/*================▼PC:右側・SMP:ナビゲーション▼================*/







/*ナビゲーション2 ここまで*/

.tabNavigation {display:flex; flex-wrap: wrap; flex-direction: column;}
.fixTabButton {position:fixed;right: -0.5%;bottom: 10%;z-index: 1;}
.flex-clear {display: block;}
.tabNavigation &gt; li {width: 50%;}
.tabNavigation &gt; li &gt; a{text-decoration: none;}
.tabNavigation &gt; li:hover {transform: translateX(-10px);transition-duration: .4s;}
.flex-clear &gt; li {width: 100%;margin: 3px 0;}
.tabNavigation-button1,.tabNavigation-button2 {display: block;padding: 12px 20px 12px 16px;text-align: center;border-radius: 10px 0 0 10px;text-decoration: none;font-size: 1.2rem;font-weight: bold;}
.tabNavigation-button1 {background-color: #01499d;color: #ffffff;}
.tabNavigation-button2 {background-color: #01499d;color: #fff;}
.labeltop{background-color: #01499d;color: #f9f259;}
.labeltop2{background-color: #01499d;color: #f9f259;}


/*================▼TOP▼================*/

#page_top{width: 80px;height: 80px;position: fixed;right: 7vw;bottom: 2vw;background: #01499d;opacity: 1.0;border-radius: 50%;}
	#page_top:hover{opacity: 0.9;}
	#page_top a{position: relative;display: block;width: 80px;height: 80px;text-decoration: none;}
	#page_top a::before{
		font-family: 'Noto Sans Japanese', sans-serif;
		font-weight: 900;
		content: '\f106';
		font-size: 40px;
		color: #fff;
		position: absolute;
		width: 40px;
		height: 40px;
		top: -5px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	 }





/*ナビゲーション3 */
#event-container .nav3 {
  width: 100%;
  padding-top: 40px;
}

#event-container .nav3 {
  width: 100%;
  padding-top: 40px;
  text-align: center;
  margin: 0px 0px 56px;
}
#event-container .nav3 ul {
  width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-evenly;
  margin: 0 auto;
  padding-bottom:15px;
}



#event-container .nav3 ul li {
  width: 300px;
  
}
#event-container .nav3 ul li a {
  position: relative;
  display: block;
  text-align: center;
  font-weight: 600;
  border-radius:5px;
}
#event-container .nav3 ul li a dl {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#event-container .nav3 ul li a dl dt {
  position: relative;
  -webkit-order: 3;
  order: 3;
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
}
#event-container .nav3 ul li a dl dt::after {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-size: 16px auto;
  margin-left: 4px;
}
#event-container .nav3 ul li a dl dt span {
  font-size: 18px;
}
#event-container .nav3 ul li a dl dd.n_txt {
  -webkit-order: 1;
  order: 1;
  position: absolute;
  top: 0;/*-20px*/
  left: 10px;/*50%*/
  color: #ff4848;
  font-size: 32px;
  font-family: 'Noto Sans Japanese', sans-serif, cursive;
  line-height: 1;
  z-index: 5;
  text-shadow: 3px 3px 0 #FFFFFF, 2px 2px 0 #FFFFFF, 1px 1px 0 #FFFFFF, 0 0 0 #FFFFFF, -1px -1px 0 #FFFFFF;
  transform: rotate(-15deg);
}
#event-container .nav3 ul li a dl dd.n_img {
  -webkit-order: 2;
  order: 2;
}
#event-container .nav3 ul li a dl dd.n_img img {
  width: 100%;
  height: auto;
  margin: 23px auto;
}
#event-container .nav3 ul li a:hover {
  transform: scale(1.05);
}

/*ナビゲーション3ここまで */

/**************************
	タブ切り替え
***************************/
.tab-wrap {
  margin: 3% auto 0;
  position: relative;
  width: 100%;
}

.tabMenu {
  display: flex;
  list-style: none;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  justify-content: center;
}

.tabMenu li {
  cursor: pointer;
  margin: 0 0.2%;
}


.tab-label a{
  color: #888;
  background-color: #4e4e4e;
  text-align: center;
  padding: 0.5em 1em;
  order: -1;
  z-index: 1;
  cursor: pointer;
  display: flex;
  border-radius: 15px 15px 0 0;
  position: relative;
  width: 20vw;
  font-size: 2rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  color: #fff;
  font-weight:500;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a.js-tab-link:hover{opacity: 1;}

/* タブ選択時の文字色の指定 */
.tab-label a.selected{
color: #fff;
}
/* タブ1つ目の背景色と文字色の指定 */
.tab-label:first-child a.selected{
  background-color: #01499d;
}
/* タブ2つ目の背景色と文字色の指定 */
.tab-label:nth-child(2) a.selected{
  background-color: #da0d2b;
}

.tabContent {
  display: none;
  padding: 20px;
  padding-top: 0;
}

.tabContent.active {
  display: block;
}


  
/*--------▲タブ切り替え▲---------- */





/*------------other-------------*/

#block div.other h2 {
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 6px solid #bdbdbd;
  font-size: 1.5rem; 
  color: #343434; 
  font-weight: 500;
  width: 50%; 
  margin: 0 auto;
}
#block div.other h2:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: #4e4e4e;
}

#block div.other{display: flex;width: 1000px;margin:3% auto 0;flex-direction: column;}
#block div.other div.other_01{display: flex; margin: 0 auto 5%;}
#block div.other ul{
  margin: 2% 3%;
  width: calc(95% / 3);
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
  filter: drop-shadow(2px 4px 2px #bbbbbb);
}

 #block div.other div ul li img{width: 100%;}
 #block div.other div ul li h3{font-size: 1.1rem; padding: 3%; height: 4vh;}
 #block div.other div.other_02{display: flex; margin: 0 auto 5%;}
 #block div.other div.other_02:last-child {margin: 0 auto 5%;}
 #block #main1 div.other div.other_02 ul:last-child{
    background-color: #fdffec;
    filter: drop-shadow(2px 4px 2px #fdffec);
 }


/*--------フッター---------- */
#foot {
    width: 100%;
    background-color: #a5a5a5;
    display: flex;
    justify-content: center;
    padding: 0.5% 0;
}
#foot &gt; div:nth-child(2) {
    margin: 0 30px;
    padding: 0 30px;
    border-left: 1px dashed #fff;
}
#foot p{ padding: 0;color: #fff;padding: 0;
  color: #fff;
  background-color: #a5a5a5;
  width: 100%;
  font-size: 1.2vw;}



/*================================================
					スマホ表示
================================================*/
@media (max-width: 920px){
	html{width: 100%;}
	body {width: 100%; font-family:'Noto Sans JP', sans-serif; margin: 0 auto;position: relative;text-align: center;}
	p {    line-height: 1.75;
    font-size: 5.0vw;
    margin: 0.5rem 0;
    width: 100%;}

    p.title {    line-height: 1.9;
      font-weight: 600;
      color: #ffffff;
      background-color: #01499d;
      font-size: 20px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      margin-top: 15px;
     }

     p.titles {    line-height: 1.9;
      font-weight: 600;
      color: #ffffff;
      background-color: #da0d2b;
      font-size: 20px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      margin-top: 15px;
     }
  

    #pet{width: 100%;	margin-bottom: 20%;	position: relative;	margin: 0 auto;text-align: center;}

/*================▼看板▼================*/
    .kanban_bg { position: relative; width: 100%; height: 70vw; z-index: -1;}
	.kanban_bg .bgimg {
	  position   : absolute;
	  width  : 100%;
	  height     : 100%;
	  top: -3px;
	  left       : 0;
	  bottom     : 0;
	  right      : 0;
	  opacity    : 0;
	  background-size: cover;
	  animation  : bgAnime 30s infinite;   /* 4画像 × 各5s = 20s */
	}	


 

h1 {
    color: #364e96;
    padding: 0.5em 0;
    border-top: solid 3px #364e96;
    border-bottom: solid 3px #364e96;
    width: 100%;
    text-align: center;
    margin: 0 auto -1px;
    font-size: 28px;
    font-weight: 700;
}


/* ==================================================

   看板

================================================== */

#event-container .main_title {
  position: relative;
  width: 100%;
}
#event-container .main_title ul li img {
  width: 100%;
  height: auto;
}

#event-container .main_title h1 {
  position: absolute;
  top: 7.5vw;
  left: 50%;
  z-index: 5;
  margin-left: -40vw;/*-150px*/
}
#event-container .main_title h1 img {
  width: 80vw;/*300px*/
  height: 45vw;/*170px*/
}

/* ==================================================s

ヒルズについて

================================================== */

/* 横並び */

.flex {
  display: flex; /*横並び*/
  width: 100%;
    margin: 0 auto;
    flex-wrap: wrap  
  
}
.flex .image {
  width: 100%; /*画像サイズ指定*/
  margin: 6px 0px 11px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  margin: 0px auto 20px;
    padding: -1px 0px 0px;
    background-color: white;
    color: #111111;
    text-align: left;
    font-weight: 500;
    font-size: 3.3vw;
    line-height: 4.7vw;
    width: 95%
}



#event-container .nav3 {
    width: 100%;
    padding: 0%;
}


#event-container .nav3 ul{
  width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 45px 0 -36px;}

 
     /*================▼title2▼================*/
     #block div.slide02 h2.sub{
      background-color: #20a6b1;
      border: none;
      width: 100%;
      color: #fff;
      font-size: 1.5rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 1% auto;
      padding: 3% 0;
  }

    #block div.slide02 h2.subi{
      background-color: #cdc643;
      border: none;
      width: 100%;
      color: #fff;
      font-size: 1.5rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 1% auto;
      padding: 5% 0;
    }
    
    #block div.slide02 h2.subu{
      border: none;
      width: 85%;
      color: #20a6b1;
      font-size: 1.0rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 3% auto;
      padding: 1% 0;
      border-bottom: solid 3px;
    }
    
    #block div.slide02 h2.subo{
      border: none;
      width: 85%;
      color: #4e4e4e;
      font-size: 1.0rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 3% auto;
      padding: 1% 0;
      border-bottom: solid 3px;
    }
 
  /*================▼title▼================*/
    #block div.slide00 h2.sub{
      background-color: #20a6b1;
      border: none;
      width: 100%;
      color: #fff;
      font-size: 1.5rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 1% auto;
      padding: 3% 0;
  }

    #block div.slide00 h2.subi{
      background-color: #cdc643;
      border: none;
      width: 100%;
      color: #fff;
      font-size: 1.5rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 1% auto;
      padding: 5% 0;
    }
    
    #block div.slide00 h2.subu{
      border: none;
      width: 85%;
      color: #20a6b1;
      font-size: 1.0rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 3% auto;
      padding: 1% 0;
      border-bottom: solid 3px;
    }
    
    #block div.slide00 h2.subo{
      border: none;
      width: 85%;
      color: #4e4e4e;
      font-size: 1.0rem;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      margin: 3% auto;
      padding: 1% 0;
      border-bottom: solid 3px;
    }

    #event-container .nav3 ul li {
   margin-bottom: 3%;
   width: 80%
  }
  #event-container .nav3 ul li a {
      position: relative;
      display: block;
      text-align: center;
      line-height: 1.7vw
  }
  #event-container .nav3 ul li a dl {
      position: relative;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  #event-container .nav3 ul li a dl dt {
      position: relative;
      -webkit-order: 3;
      order: 3;
      font-size: 14px;
      font-weight: 700;
      margin-top: 8%;
  margin-bottom: 8%;
  }
  #event-container .nav3 ul li a dl dt::after {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      content: "";
      background-size: 16px auto;
      margin-left: 4px;
  }


/* 価格プロ */
#event-container .wrap_price {
  width: 100%;
  color: #ff4848;
  text-align: center;
  margin: 2.6vw 0;
}
#event-container .list_other .wrap_price,
#event-container .item_other .wrap_price,
#event-container .item_other2 .wrap_price {
  margin: 2.6vw 0;
}

#event-container .wrap_price &gt; span {
  display: inline-block;
  vertical-align: middle;
  font-size: 3.7vw;
  border: solid 1px #ff4848;
  padding: 0.5em 1em;
  margin-right: 1em;
}
#event-container .list_other .wrap_price &gt; span,
#event-container .item_other .wrap_price &gt; span,
#event-container .item_other2 .wrap_price &gt; span {
  font-size: 2.6vw;
  padding: 0.5em 0.35em;
  margin-right: 1.2em;
}

#event-container .wrap_price .prices {
  display: inline-block;
  vertical-align: middle;
}
#event-container .wrap_price .prices .value *{
  font-size: 6.9vw;/*32px*/
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: bold;
}
#event-container .list_other .wrap_price .prices .value,
#event-container .item_other .wrap_price .prices .value,
#event-container .item_other2 .wrap_price .prices .value {
  font-size: 5.8vw;
}

#event-container .list_other .prdisp-taxin span span,
#event-container .item_other .prdisp-taxin span span,
#event-container .item_other2 .prdisp-taxin span span  {
  bottom: 20%!important;
}

/* hover */
#event-container .btn a:active,
#event-container .btn span:active,
#event-container .list_other a:active .btn span,
#event-container .item_other a:active .btn span {
  color: #fff;
  background-color: #ff4848;
}
#event-container .btn a:active::after,
#event-container .btn span:active::after,
#event-container .list_other a:active .btn span::after,
#event-container .item_other a:active .btn span::after  {
  right: 6%;
  border-color: #fff;
}



	/* --- 段差で背景画像のアニメーションを実行 ----------------- */


	@keyframes bgAnime {
	   0% { opacity: 0; }
	  20% { opacity: 1; }
	  33% { opacity: 1; }
	  53% { opacity: 0; }
	 100% { opacity: 0; }
	}
	/* --- タイトル画像 ----------------- */
	#kanban {
			 position: absolute;
			 top: 0vw;
			 left: 38vw;
			 padding: 0;
			/*  animation:katakata 6s infinite ease-in-out alternate; */
			 transform: translateX(-50%);
	  }
	
	#kanban p{text-align: center;color: #fff;padding: 0 0 1.5% 0;font-size: 20px;font-family: 'Noto Sans Japanese', sans-serif;}
	#kanban img{margin: 0 auto;width: 70vw;}

/*================▼カテゴリー▼================*/
#wrap01{ max-width: 100%; display: block;}
	.img-wrap{margin: auto;}
	.messe{margin: 0 auto; width: 100%; text-align: center;position: relative;display: inline-block;}
	.messe img{
				margin: 8% auto;
				animation-name:zoomInAnime;
				animation-duration:0.5s;
				animation-fill-mode:forwards;
				z-index: 0;
				width: 100%;
	}
	@keyframes zoomInAnime{
		from {
		transform: scale(0.6);
		}
		
		to {
			transform: scale(1);
		}
		}
		
	
/*================▼メインコンテンツ▼================*/
#main0 {max-width: 100%; text-align: center;margin: 0% auto 0rem;}
#main0 h2{color: #fff;width: 100%;
	margin: 0 auto 2em;
    position: relative;
    padding: 1.5rem 2rem;
    font-size: 3vw;
    color: #444;
    line-height: normal;
}

  #main0 h2:before {
    bottom: -16px;
    left: 30%;
    width: 50px;
    height: 40px;
    z-index: -2;
  }
  #main0 h2:after {
	bottom: -33px;
    left: 35%;
    width: 22px;
    height: 17px;  
}

/* ===犬=== */

/* ===年齢大きさ=== */
div .back {
  background-color: white;
  width: 100%;
  height: 470px;
  margin: 0 auto;


}
/* ===悩み=== */
div .backr {
  background-color: white;
  width: 100%;
  height: 200px;
  margin: 0 auto;


}


/* ===ブランド　犬猫共通=== */
div .backe {
  background-color: white;
  width: 100%;
  height: 120px;
  margin: 0 auto;


}



/* ===猫=== */

/* ===年齢大きさ=== */

div .backb {
  background-color: white;
  width: 100%;
  height: 180px;
  margin: 0 auto;
}


/* ===悩み=== */
div .backa {
  background-color: white;
  width: 100%;
  height: 190px;
  margin: 0 auto;


}


div .mini_title {
  background-color: #a5a5a5;
  width: 90%;
  margin: 12px auto;
  font-weight: 500;
  font-size: 4.8vw;
  padding: 7px 1px 7px;
  color: #ffffff;
  /* border-bottom: 1px solid; */
  border-radius: 5px;
}
  #block .item-box {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#block {
  padding: 0 0%;
  background-color: white;
}

#block p span.marker {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 19px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#block p span.markers {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 4.2vw !important;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}



table{
  border-collapse: separate;
  border-spacing: 17px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.0vw;
  background-color: white;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
  width: 33%;
}


table th.space {
 
  color: white;
  background-color: white;
  width: 100px;
}


table th{
  background-color: #7b7b7b;
  color: white;
  /* border: solid 1px #927141; */
  width: 100px;
}



table td{
  text-align: left;
  margin: 0 auto;
  padding: 7px 57px 0;
}






#main1 .about,#main2 .about{margin: 0% auto}

#main0 #block .item-box{ margin: 0 auto;position: relative; background: #f2cc90; border-radius: 12px; max-width: 97%;}
#main0 #block .item-list {width: 100%;display: flex;flex-wrap: nowrap;margin: 0 auto;flex-direction: column;align-items: flex-start;}
#main0 #block .item-innner,#main0 #block .item-innner2{ margin:2% auto;;;width: 100%; position: relative;border-bottom: none;}
#main0 #block .item-innner a,#main0 #block .item-innner2 a{margin: 0;}
#main0 #block .item-innner dl{display: flex;width: 98%; flex-wrap: nowrap; align-items: flex-start;border-bottom: 5px dotted #fff;}
#main0 #block .item-innner2 dl{display: flex;width: 98%; flex-wrap: nowrap; align-items: flex-start;}
#main0 #block .item-img{width: 100%;text-align: left;}
#main0 #block .item-img img{border-radius: 15px; padding: 0;}
#main0 #block .item-img div.set{display: flex; flex-direction: column; align-items: flex-start;}
#main0 #block .item-img div.set img{border-radius: 15px; margin: 4% 0;}
#main0 #block .item-innner a.flex-1,#main0 #block .item-innner2 a.flex-1  { flex: 65%; }
#main0 #block .item-innner a.flex-2,#main0 #block .item-innner2 a.flex-2  { flex: 35%; /*margin-top: 20%;*/ }
#main0 #block .item-name{font-size: 1.3em; margin: 0 auto;text-align: center;line-height: 1.2;width: 98%;padding: 12% 0;color: #381706;}
#main0 #block a p.txt{ font-size: 0.7em;margin: 2% auto; text-align: left; line-height: 1.2;padding: 0;color: #000;}
#main0 #block .item-name p.txt2{ font-size: 0.5em;margin: 2% auto;text-align: center;line-height: 1.2;padding: 1%;color: #fff;background: #381706;border-radius: 7px;width: 80%;}
#main0 #block .price{align-items: center;display: flex;justify-content: space-between;}
#main0 #block .prices *{align-items: baseline;cursor: text;display: flex;flex: 0 0 auto;overflow: hidden;color: #B22029;font-weight: bold;font-family: 'Noto Sans Japanese', sans-serif!important;font-size: 2em;font-weight: bold;}

#main1 h3{font-size: 36px;/* padding: 2% 0 0 0; */color: #7d7d7c;font-weight: 700;text-align: center;font-family:'Noto Sans Japanese', sans-serif;}
#main1 h4{font-size: 36px;/* padding: 2% 0 0 0 ;*/color: #7d7d7c;font-weight: 700;text-align: center;font-family:'Noto Sans Japanese', sans-serif;}

#main1 {text-align: center;margin: 0 auto; height: 1050px;}
#main2 {text-align: center;margin: 0 auto;  height: 752px;}
#main1 h2,#main2 h2{color: #381706/* ;border-radius: 50px */;width: 600px;}
#main1 p, #main2 p {font-size: 5vw; width: 100%;}

#block .item-content h2{font-size: 1em;font-weight: 500;text-align: center; margin: 0 auto;padding: 2% 0 ;width: 100%;}
#block .item-box{margin: 3% auto;position: relative;width: 100%;}
#block ul.item-list {width: 100%;display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: space-around;flex-direction: row;}
#block ul.item-list li.check{width: calc(100%/2);text-align: left; padding: 0.5% 0; font-size: 3.5vw;}
#block ul.item-list li.check p::before{content: '?';font-size: 4vw;vertical-align: text-bottom;margin: 0 3%;}
#block ul.item-list li.check p{text-align: left;padding: 2% 0;font-size: 3.5vw;line-height: 1;}

#block .item-list02{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;}
#block .item-list02 li.kiji1{width: 100%;margin:2% auto 0;}
#block .item-list02 li.kiji2{width: 80%;}
#block .item-list02 li p{font-size: 3vw;text-align: center;margin: 0;}
#block .item-list02 li img{width: 100%;}

#block ul.item-list03 li ul li.check {width: 100%;}
#block ul.item-list03 li ul li.check p::before{content: '?';font-size: 3.5vw;vertical-align: text-bottom;margin: 0 3%;}
#block ul.item-list03 li ul li.check p{text-align: left;padding: 2% 0;font-size: 3.2vw;line-height: 1.3;}
#block ul.item-list03 li ul li.check div{text-align: center;padding: 3% 0;font-size: 3vw;line-height: 1.3;background-color: #4e4e4e;border-radius: 30px;width: 100%;color: #fff;margin: 3% auto;}

#block .item-list03{display: flex;margin: 4% auto 0;flex-direction: row;}
#block .item-list03 ul{
    width: 90%;
}
#block .item-list03 li{/* width: 50%; */margin: 0 2%;}
#block .item-list03:nth-child(1){margin: 0 3%;}


#block .item-innner {width: calc(90%/2);margin: 1% 0.75%;padding: 0.5%; border-bottom: 2px dotted #381706;}
#block .item-img {padding: 2% 0;}
#block .item-name{font-size: 0.8em; margin: 1% auto;text-align: left;line-height: 1.2;width: 100%;padding: 3% 0;color: #000;}
#block .price{align-items: center;display: flex;justify-content: space-between;}
#block .prices *{align-items: baseline;cursor: text;display: flex;flex: 0 0 auto;overflow: hidden;color: #B22029;font-weight: bold;font-family: 'Noto Sans Japanese', sans-serif!important;font-size: 2em;font-weight: bold;}

/*------▼ケージって？▼-------*/

#main2 h2.mi01,#main2 .kiji3 h2.mi02,#main2 .kiji3 h2.mi03{ width: 50%; margin: 0 auto; line-height: 1.5;}
#main2 .kiji_00{width: 95%;}
#main2 .kiji_00 p { margin: 10% 2% 1% 2%;}
#main2 .kiji_00 h2{font-size: 3vw;}

/*------▼子猫に場合/保護猫の場合▼-------*/
#block .item-list02 li.kiji3{  width: 100%;}
#main2 .kiji3 div p{ margin: 10% 2% 1% 2%;text-align: left;padding: 2% 0%;}
#main2 .kiji3 h2.mi03,#main2 .kiji3 h2.mi02{font-size: 3vw;}


/*================▼PC:右側・SMP:ナビゲーション▼================*/
/* .flex-clear {display: flex !important;} */
.fixTabButton {position:fixed;left: 0;width: 100%;bottom: 0;/* background: #ffffffb3; */}
.flex-clear &gt; li {margin: 0 auto;}
.tabNavigation {display: flex; flex-direction: row; flex-wrap: nowrap;}
.tabNavigation &gt; li:hover {transform: translateY(0);transition-duration: .4s;} 
.tabNavigation-button1,.tabNavigation-button2{border-radius: 10px 10px 0 0;padding:10% 0 8% 0;font-size: 3.1vw;margin: 1% 1%;height: 100%;line-height: 1.2;}

/*================▼TOP▼================*/
#page_top{width: 13vw;height: 13vw;right: 3vw;opacity: 0.8;}
#page_top:active{opacity: 1.0;}
#page_top a{width: 13vw;height: 13vw;}
#page_top a::before{
    font-size: 6.5vw;
    width: 6.5vw;
    height: 6.5vw;}

/**************************
	タブ切り替え
***************************/
.tab-wrap { display: flex; flex-wrap: wrap; justify-content: center;position: relative;     background-color: white;}
.tab-label {
    /* color: White; */
    background-color: #4e4e4e;
    text-align: center;
    padding: 1.3em 1em 0.5em;
    order: -1;
    z-index: 1;
    cursor: pointer;
    display: flex;
    border-radius: 30px 30px 0 0;
    position: relative;
    width: 35vw;
    font-size: 1.3em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    /* margin: 2% 5px 0; */
}
.tab-label2 {
   /*  color: #fff; */
    background-color: #4e4e4e;
    text-align: center;
    padding: 1.3em 1em 0.5em;
    order: -1;
    z-index: 1;
    cursor: pointer;
    display: flex;
    border-radius: 30px 30px 0 0;
    position: relative;
    width: 35vw;
    font-size: 1.3em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
   /*  margin: 2% 5px 0;*/
} 

.tab-label::before{
    top: -149%;
    left: 16%;
    /* width: 100%; */
}
.tab-label2::before {
    top: -149%;
    left: 16%;
    /* width: 100%; */
}

.tab-switch:checked+.tab-label2::before{
	top: -131%;
    left: 16%;
}
.tab-switch:checked+.tab-label::before{
	top: -131%;
    left: 16%;
}


.tab-label:not(:last-of-type) { margin-right: 5px;}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  /* padding: 15px 0 0 0; */
  opacity: 1;
  transition: .5s opacity;
}
.tab-switch:checked+.tab-label2+.tab-content {
	height: auto;
	overflow: auto;
	/* padding: 15px 0 0 0; */
	opacity: 1;
	transition: .5s opacity;
  }



/*-----------スライダー----------- */
#block div.slide00{
    width: 100%;
    margin:16% auto 5%;
}
#block div.slide00 h2.sub{
  width: 100%;
  font-size: 5.3vw;
  border-radius: 5px;
  margin: 0 auto;
  padding: 5% 0;
  font-weight: 550;
}

#block div.slide02{
  width: 100%;
  margin:6% auto 5%;
}
#block div.slide02 h2.sub{
width: 100%;
font-size: 5.3vw;
border-radius: 5px;
margin: 0 auto;
padding: 5% 0;
font-weight: 500;
}

#block div.swiper-slide ul li img {
  width: 98%;
}

#block div.swiper-slide ul li div h3 {font-size: 3.4vw;}
#block div.swiper-slide ul li div h4 {font-size: 3.4vw;}
#block div.swiper-slide ul li div p{font-size: 2.6vw;padding: 50px 0 ; margin: 0 auto;}
#block div.swiper-slide ul li div.size div{ margin: 1%;/* display: flex; flex-direction: row; justify-content: center; */}
#block div.swiper-slide ul li div.size div a{
  margin: 0.5% 1%;
  padding: 2% 4%;
  box-shadow: 1px 1px 2px 0px #b1b1b1;
  border-radius: 5px;
}
.siz{font-size: xx-small;}

#block div.swiper-slide div.size{width: 98%; position: relative; margin: 3% auto;}
#block div.swiper-slide ul li div.size div.w01 a{ padding: 1% 2%; width: 34vw;}
#block div.swiper-slide ul li div.size div.w01 a p{padding: 2% 0; margin: 0 auto;width: 100%;line-height: 1.4;}
#block div.swiper-slide ul li div.size div.w02{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 100%;}
#block div.swiper-slide ul li div.size div.w02 a{ padding: 6% 1%; width: 28vw;}
#block div.swiper-slide ul li div.size div.w02 a p{width: 25vw; line-height: 1.4; margin: 0 auto;}
#block div.swiper-slide ul li div.size div.w03{ margin: 1% auto;display: flex; flex-direction: column;}
#block div.swiper-slide ul li div.size div.w03 a{padding: 5% 3%; margin: 0 auto 2%;}
#block div.swiper-slide ul li div.size div.w03 a p{width: 36vw;/* padding: 2%; */}
#block div.swiper-slide ul li div.size div.w04{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;width: 100%;}
#block div.swiper-slide ul li div.size div.w04 a{margin: 0 1% 3%; width: calc(80%/2);}
#block div.swiper-slide ul li div.size div.w04 a p{ padding: 8% 0;width: 100%;}
#block div.swiper-slide ul li div.size .W02,
#block div.swiper-slide ul li div.size .W03 { display: flex; flex-direction: row; flex-wrap: nowrap;justify-content: center;width: 100%;}
#block div.swiper-slide ul li div.size .W02 a{width: 15vw; }
#block div.swiper-slide ul li div.size .W03 a{width: calc(90%/3); }
#block div.swiper-slide ul li div.size .W02 p,
#block div.swiper-slide ul li div.size .W03 p{/* padding:2%; */margin: 0 auto; }

#block div.swiper-slide ul li div.size div a p{ 
  width:100%;
  line-height: 1; 
  font-size: 2.8vw;
  width: 13vw;
  /* line-height: 1.5; */
  margin: -3% 0;
}
div.swiper-slide ul li div.size div a p:after {
  content: "≫";
  position: absolute;
  right: 3px;
  font-size: 3vw;
  top: calc(50% - 8px);
}
div.swiper-slide ul li div.size div.w02 a p:after {
  top: calc(50% - 10px);
}


#block div.size p.mida01{ position: relative; max-width: 60%;text-align: center;margin: 0 auto;padding: 0 5%;font-size: 2.6vw;}
#block div.size p.mida01:before{position: absolute;
  top: calc(50% - -2px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #888;
}
#main1 div.size p.mida01 span{
  position: relative;
  padding: 0 1em;
  background: #fdffec;
  color: #343434;
}
#main2 div.size p.mida01 span{
  position: relative;
  padding: 0 1em;
  background: #fffbe3;
  color: #343434;
}

  p.setumei{font-size: 2.6vw;width: 85%; line-height: 1.5;}


.mySwiper2,.mySwiper23,.mySwiper24,.mySwiper25,.mySwiper26,
.mySwiper27,.mySwiper28,.mySwiper29,.mySwiper30,.mySwiper31 {
   height: 100%;
   width: 100%;
   margin: 3% auto 0;
 }
 .mySwiper,.mySwiper3,.mySwiper4,.mySwiper5,.mySwiper6,
 .mySwiper7,.mySwiper8,.mySwiper9,.mySwiper10,.mySwiper11{
    height: 100%;
    box-sizing: border-box;
    padding: 10px 0;
    margin: 2% auto;
  }

  .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:37px !important;}
  .swiper-button-next, .swiper-button-prev {width: calc(var(--swiper-navigation-size)/ 100 * 0); top: var(--swiper-navigation-top-offset,38%) !important;}
  .swiper-button-next, .swiper-rtl .swiper-button-prev {right: var(--swiper-navigation-sides-offset,0px) !important;}
  .swiper-button-prev, .swiper-rtl .swiper-button-next {left: var(--swiper-navigation-sides-offset,0px) !important; }


/*------------other-------------*/

#block div.other h2 {
  padding: 1% 0;
  border-bottom: 4px solid #bdbdbd;
  font-size: 4vw;
  font-weight: 500;
}
#block div.other h2:before {
  bottom: -4px;
  width: 20%;
  height: 4px;
}

#block div.other{display: flex;width: 100%;margin: 0 auto;flex-direction: column;}
#block div.other div.other_01{display: flex; margin: 0 auto 5%;}
#block div.other ul{
  margin: 2% 1%;
  width: calc(95% / 3);
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  filter: drop-shadow(1px 2px 1px #bbbbbb);
}
 #block div.other div ul li img{width: 100%;}

 #block div.other div ul li h3{font-size: 2.3vw; padding: 3%;/* height: 2.5vh; */}


 #block div.other divdiv.other_02{display: flex; margin: 0 auto 5%;}
 #block div.other divdiv.other_02:last-child {margin: 0 auto 5%;}
 #block div.other divdiv.other_02 ul:last-child{
    background-color: #fdffec;
    filter: drop-shadow(2px 4px 2px #fdffec);
 }

/*----------------猫砂説明-------------------*/ 
div.nekosuna{margin: 0 auto 5%;
  background-color: #fff;
  padding: 1px;
}
div.nekosuna img{width: 100%;}
div.nekosuna .bn{ margin: 0 auto 3%;}
div.nekosuna .sozai{ width: 100%; margin: 0 auto;}

#block2 .mi00 p{font-size: 4.5vw;font-weight: 600; color: #343434;}
div.nekosuna .mi00 p:before,div.nekosuna .mi00 p:after *{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: 'Noto Sans Japanese', sans-serif; 
	font-weight: 900;
	content:'\f1b0' ;
  margin: 0 2% 0;
}
div.nekosuna .sozai ul{display: flex;
  margin: 1% auto 5%;
  filter: drop-shadow(2px 4px 2px #bbbbbb);
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;}
div.nekosuna .sozai ul li{ width: calc(90% / 2); margin: 0.8%;}
div.nekosuna ul img{width: 100%;border-radius: 15px; overflow: hidden;}
div.nekosuna .sozai ul:last-child{display: flex;justify-content: center;}
div.nekosuna .sozai ul:last-child li{width: calc(90% / 2); margin: 0.8%;}
div.nekosuna .sozai ul:last-child li a img{width: 100%;}
div.nekosuna a:hover{opacity: 0.8;}
 
/*----------------ウェットティッシュ-------------------*/ 
#kochira div.other_02{ width: 100%;justify-content: space-evenly;}
#kochira div.other_02 ul{ border-radius:8px; filter: drop-shadow(1px 2px 1px #bbbbbb); width: 31%; margin: 1%; transform: translateZ(0px);}

#kochira div.other_02 ul img{width: 100%;overflow: hidden;}
#kochira div.other_02 ul h3{font-size: 2.8vw;}
#kochira .oth02{padding: 5% 0; font-size: 2.8vw; color: #343434;position: relative;}
#kochira .oth02::after{
  content: "≫";
  position: absolute;
  top: 25%;
  right: 7%;
  font-size: 3vw;
}
#kochira .mi03{ width: 25vw; height: 25vw;}
#kochira .mi03::before{ top: 88%; right: -28%; margin-top: -35%;}
#kochira .mi03 p{ font-size: 3.2vw; top: 20%; left: 6%; line-height: 1.5;}  
#kochira{ margin: 0 auto 5%;position: relative;}


 /*================▼フッター▼================*/
#foot {
    width: 100%;
    /* margin: 60px auto 0; */
    background-color: #a5a5a5;
    display: flex;
    justify-content: center;
    padding: 0.5% 0 13%;;
}
#foot &gt; div:nth-child(2) {
    margin: 0 30px;
    padding: 0 30px;
   
    border-left: 1px dashed #fff;
}
#foot p{ padding: 0;color: #fff;  font-size: 3.3vw; margin: 5px 18px ;}

}


@media screen and (min-width: 768px) and (max-width: 820px){





  /* ===犬=== */

/* ===年齢大きさ=== */
div .back {
  background-color: white;
  width: 100%;
  height: 730px;
  margin: 0 auto;


}
/* ===悩み=== */
div .backr {
  background-color: white;
  width: 100%;
  height: 250px;
  margin: 0 auto;


}


/* ===ブランド　犬猫共通=== */
div .backe {
  background-color: white;
  width: 100%;
  height: 200px;
  margin: 0 auto;


}

#main1 {
  text-align: center;
  margin: 0 auto;
  height: 1500px;}



  #block ul.item-list li.check p {
    text-align: left;
    padding: 2% 0;
    font-size: 3.5vw;
    line-height: 1;
}

/* ===猫=== */

/* ===年齢大きさ=== */

div .backb {
  background-color: white;
  width: 100%;
  height: 250px;
  margin: 0 auto;
}


/* ===悩み=== */
div .backa {
  background-color: white;
  width: 100%;
  height: 300px;
  margin: 0 auto;


}


div .mini_title {
  background-color: #a5a5a5;
  width: 90%;
  margin: 12px auto;
  font-weight: 500;
  font-size: 4.8vw;
  padding: 7px 1px 7px;
  color: #ffffff;
  /* border-bottom: 1px solid; */
  border-radius: 5px;
}
  #block .item-box {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#block {
  padding: 0 0%;
  background-color: white;
}

#block p span.marker {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 19px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#block p span.markers {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 4.2vw !important;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}


.flex .text {
  margin: 0px auto 20px;
  padding: -1px 0px 0px;
  background-color: white;
  color: #111111;
  text-align: left;
  font-weight: 400;
  font-size: 2.8vw;
  line-height: 4.7vw;
  width: 95%;}


table{
  border-collapse: separate;
  border-spacing: 17px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.0vw;
  background-color: white;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
  width: 33%;
}


table th.space {
 
  color: white;
  background-color: white;
  width: 100px;
}


table th{
  background-color: #7b7b7b;
  color: white;
  /* border: solid 1px #927141; */
  width: 100px;
}



table td{
  text-align: left;
  margin: 0 auto;
  padding: 7px 57px 0;
}


div .mini_title {
  background-color: #a5a5a5;
  width: 90%;
  margin: 12px auto;
  font-weight: 500;
  font-size: 3.4vw;
  padding: 7px 1px 7px;
  color: #ffffff;
  /* border-bottom: 1px solid; */
  border-radius: 5px;
}
  #block .item-box {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#block {
  padding: 0 0%;
  background-color: white;
}

#block p span.marker {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 19px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#block p span.markers {
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  font-size: 3.2vw !important;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

p.title {
  line-height: 1.9;
  font-weight: 600;
  color: #ffffff;
  background-color: #01499d;
  font-size: 25px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 15px;
}




h1 {
  color: #364e96;
  padding: 0.5em 0;
  border-top: solid 3px #364e96;
  border-bottom: solid 3px #364e96;
  width: 100%;
  text-align: center;
  margin: 0 auto -1px;
  font-size: 34px;
  font-weight: 700;
}

#main1 p, #main2 p {
  font-size: 3.5vw;
  width: 100%;
}

#main2 {
  text-align: center;
  margin: 0 auto;
  height: 1100px;

}}




/* /////////// Pad ///////////*/
@media screen and(min-width: 769px) and (max-width: 1279px) {
  body {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* height: 52vh; */

  
}}






#main0 {
  text-align: center;
  margin: 0% auto 10rem;}








</pre></body></html>