@charset "utf-8";

/*#######################################################

https://withpety.com/

#########################################################*/


@media screen and (min-width: 1401px) {
}



/* mainimage
-------------------------------------------------------------- */
#mainimage {
	margin: 50px auto 50px;
}
#mainimage .top {
    width: 1470px;
    margin:  0 auto 30px;
}
#mainimage .top figure {
    display: block;
    float: left;
    width: 49%;
    margin: 0;
    padding: 0;
}
#mainimage .top figure:nth-child(1) {
    margin-right: 2%;
}

#mainimage .bottom {
    width: 1470px;
    margin:  0 auto;
}
#mainimage .bottom div {
    float: left;
	padding:12px 12px;
	background:#fff;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#mainimage .bottom div:nth-child(1) {
    width: 54.5%;
    margin-right: 2%;
}
#mainimage .bottom div:nth-child(2) {
    width: 43%;
}
#mainimage .bottom div a {
	display:block;
    width: 49.5%;
    float: left;
	line-height:0;
}
#mainimage .bottom div a:nth-child(1) {
    margin-right: 1%;
}
#mainimage .bottom div:nth-child(2) a:nth-child(1) {
    width: 59%;
}
#mainimage .bottom div:nth-child(2) a:nth-child(2) {
    width: 39%;
}
#mainimage .bottom div img {
	width:100%;
}

@media screen and (max-width: 1400px) and (min-width: 981px) {
    #mainimage .top {
        width: 980px;
    }
    #mainimage .bottom {
        width: 980px;
    }	
}
@media screen and (max-width: 980px) {
    #mainimage {
        margin: 0 auto;
    } 
    #mainimage .top {
        width: 98%;
         margin:  0 auto;
    }
    #mainimage .top figure {
        float: none;
        width: 100%;
        margin: 0;
    }
}






/* 商品を探す（ TOPのセクション および 検索結果ページ で共通）
-------------------------------------------------------------- */

#search-item {
	padding-top:120px;
	padding-bottom:40px;
	background:url(/common/202304new/img/bg_top_1.jpg) repeat-y top center;
}
body#p-search #search-item {
	padding-top:60px !Important;
	padding-bottom:4 !Important;
}
body#p-search main {
	background:url(/common/202304new/img/bg_top_1.jpg) repeat-y top center !Important;
}

#itemlist-content1 {
	
	/*
		⇒ common.css  に記述。
		
		以下 o.w.
	*/
}


#itemlist-content1 .unit {
	/* → slick に任せる */
}
@media screen and (max-width: 980px) {
	#search-item {
		padding-top:12vw;
		padding-bottom:1vw;
		margin-bottom:0;
	}	
	body#p-search #search-item {
		margin-bottom:20vw;
		padding-top:8vw;
		background: url(/common/202304new/img/bg_top_1.jpg) repeat left -20vw;
	}	
}




/* 公式ショップから探す
-------------------------------------------------------------- */

#search-mall {
	margin-bottom:80px;
	padding-top:80px;
}
#search-mall p {
	padding:0 2% 30px 2%;
	font-size:1rem;
	text-align:center;
}
#search-mall .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#search-mall .contents a,
#search-mall .contents span {
	flex-basis: 17%;
	display:block;
	margin-bottom:15px;
	text-align:center;
	text-decoration:none;
}
#search-mall .contents img {
	max-width:240px;
	width:100%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#search-mall .contents span {
	background:#eee;
}
#search-mall .contents span img {
	filter: alpha(opacity=40);
	-moz-opacity:0.4;
	opacity:0.4;
}
@media screen and (max-width: 980px) {
	#search-mall {
		width:96% !important;
		margin: 0 2% 40px 2% !important;	
	}
	#search-mall .contents {
		justify-content:normal;
	}
	#search-mall .contents a,
	#search-mall .contents span {
		flex-basis: 29%;
		margin: 0 2% 20px;
	}
}





/* 目的から探す（TOP/商品一覧共通）
-------------------------------------------------------------- */

#search-purpose {
	width:1461px;
	margin: 0 auto;
	margin-bottom:80px;
	padding-top:50px;
}
#search-purpose .contents img {
	width:100%;
}
#b1-tab {
}
#b1-tab a {
	display:block;
	width:365px;
	float:left;
	margin:0 3px 0 0;
	text-decoration:none;
	text-align:center;
	font-size:1.8rem;
	line-height:130%;
	color:#fff;
}
#b1-tab a:nth-child(4) { margin-right:0 !important; padding-top:25px !important;}
#b1-tab a span {
	display:block;
	font-size:1.4rem;
	line-height:100%;	
	color:#fff;
}
#b1-tab a.active {
	height:97px;
	padding-top:20px;
    
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;	
    background: -moz-linear-gradient(top, #FFA415, #FF7F02);
    background: -webkit-linear-gradient(top, #FFA415, #FF7F02);
    background: linear-gradient(to bottom, #FFA415, #FF7F02);	
}
#b1-tab a.inactive {
	height:82px;
	margin-top:15px;
	padding-top:12px;
	
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;		
    background: -moz-linear-gradient(top, #8ABBCC, #6EA7BB);
    background: -webkit-linear-gradient(top, #8ABBCC, #6EA7BB);
    background: linear-gradient(to bottom, #8ABBCC, #6EA7BB);		
}
.b1-contents {
	width:100%;
	padding-bottom:20px;
	border:solid 3px #FFD8A1;
	background:#FFFBE7;
}
.b1-contents .in {
	padding:32px;
}

.b1-contents .tab a {
	display:block;
	width:calc(50% - 3px);
	height:76px;
	float:left;
	margin:0 5px 0 0;
	padding-top:20px;	
	text-decoration:none;
	text-align:center;
	font-size:1.8rem;
	line-height:130%;
	border: solid 3px#FFD8A1;
	border-bottom:none !important;
}
.b1-contents .tab a:nth-child(2) { margin-right:0; }
.b1-contents .tab a.active {   
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: #FFD8A1;	
	color:#111;
}
.b1-contents .tab a.inactive {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;		
    background: #fff;	
	color:#F9820C;
}




.b1-contents .in .btn-wrapper {
	padding:32px;
	background:#fff;
	border: solid 3px#FFD8A1;
}
.b1-contents .in .btn-wrapper a.button {
	display:block;
	position: relative;
	width:32%;
	float:left;
	background:#fff;
	margin: 0 1% 1% 0;
	text-decoration:none;
	
	border-radius: 11px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
}
.b1-contents .in .btn-wrapper a.button.closed {
	border:solid 3px #A8C7C9;
}
.b1-contents .in .btn-wrapper a.button.opened {
	border:solid 3px #E5C518;
}
.b1-contents .in .btn-wrapper a.button.closed:before {
	display:none;
}
.b1-contents .in .btn-wrapper a.button.opened:before{
	display:block;
	border:solid 1px #E5C518;
	
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #E5C518;
	
}
.b1-contents .in .btn-wrapper a.button span {
	display:block;
	padding:16px 45px 13px 18px;
	font-size:1.4rem;
	line-height:130%;
}

.b1-contents .in .btn-wrapper a.button span.closed {
	background:url(/common/202304new/img/ico_plus.jpg) no-repeat 98% 4px;
}
.b1-contents .in .btn-wrapper a.button span.opened {
	background:url(/common/202304new/img/ico_minus.jpg) no-repeat 98% 4px;
}

.b1-contents .in .btn-wrapper .unit {
	margin-top: 40px;
	padding: 20px;
	clear:both;
}
.b1-contents .in .btn-wrapper .unit div.p {
	width:96%;
	margin: 0 auto 20px;
	border:solid 4px #E5C518;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
}

.b1-contents .in .btn-wrapper .unit div.p .p-top {
	height:61px;
	background: #E5C518;
	color:#111;
}
.b1-contents .in .btn-wrapper .unit div.p .p-top h4 {
	display:block;
	float:left;
	margin-right:20px;
	padding:18px 0 10px 20px;
	font-size:2rem;
	font-weight:bold;
}
.b1-contents .in .btn-wrapper .unit div.p .p-top span {
	display:block;
	float:left;
	padding-top:18px;
	font-size:1.4rem;
	font-weight:bold;
}
.b1-contents .in .btn-wrapper .unit div.p .p-top img.price {
	display:block;
	width:230px !important;
	float:right;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom {
	padding:30px;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom .package{
	float:left;
	width:48%;
	margin-right:2%;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc {
	float:left;
	width:49%;
	padding-top:20px;
	margin-bottom:20px;
	line-height:150%;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom h5 {
	clear:both;
	font-weight:bold;
	font-size:1.6rem;
	border-bottom:solid 2px #111;
	margin:15px;
	padding:15px 0 5px;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom p {
	padding:5px 15px;
	font-size:1.3rem;
	line-height:150%;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc .p-button {
	padding:20px 0 0 0;
}
.b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc .p-button a {
	display:block;
	width:100%;
	line-height:0;
}
.b1-contents .in .btn-wrapper img {
	line-height:0;
	margin:0;
}

.btn-wrapper .opened {
	display:block;
}
.btn-wrapper .closed {
	display:none;
}


@media screen and (max-width: 1400px) and (min-width: 981px) {
	#search-purpose {
		width:980px !important;
        padding-top: 3em !important;
	}
	#b1-tab a {
		width:242px !important;
	}
	.b1-contents .in .btn-wrapper a.button span {
		padding:20px 45px 17px 18px;
		font-size:1.1rem;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-top h4 {
		padding:18px 0 10px 20px;
		font-size:1.8rem;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-top span {
		padding-top:18px;
		font-size:1.1rem;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-top img.price {
		width:200px !important;
		padding-top:5px;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom .package{
		width:43%;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc {
		width:54%;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom p {
		font-size:1.15rem;
	}
}
/*------------ ↑ と同じものを商品一覧に適用 ----------------------*/
body#p-products #search-purpose,
body#p-products #search-purpose .in {
		width:980px;
	}
body#p-products #b1-tab a {
		width:242px;
	}
body#p-products .b1-contents .in .btn-wrapper a.button span {
		padding:20px 45px 17px 18px;
		font-size:1.1rem;
	}
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-top h4 {
		padding:18px 0 10px 20px;
		font-size:1.8rem;
	}
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-top span {
		padding-top:18px;
		font-size:1.1rem;
	}
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-top img.price {
		width:200px;
		padding-top:5px;
	}	
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-bottom .package{
		width:43%;
        text-align: center;
	}
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-bottom .package img {
		width:80%;
	}    
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc {
		width:54%;
	}	
body#p-products .b1-contents .in .btn-wrapper .unit div.p .p-bottom p {
		font-size:1.15rem;
	}
/* -- ここまで -- */

@media screen and (max-width: 980px) {
	#search-purpose  {
		width:96% !important;
		margin: 0 2% 40px 2% !important;
        padding-top: 1em !important;
	}
	body#p-products #search-purpose .in {
		width:96% !important;
	}
	#b1-tab a {
		width:49.5% !important;
		margin:0 1% 0 0;
		padding-top:2vw !important;
		font-size:4vw;
	}
	#b1-tab a:nth-child(even) { margin-right:0 !important; }
	#b1-tab a.active {
		height:13vw !important;
		padding-top:3vw !important;
	}
	#b1-tab a.inactive {
		height:11vw !important;
		margin-top:2vw;
		padding-top:2vw !important;
	}	
	#b1-tab a span {
		font-size:2.6vw;
	}
	
	.b1-contents .tab a {
		width:49% !important;
		height:12vw;
		margin:0 2% 0 0;
		padding-top:4vw;	
		font-size:4vw;
	}
	.b1-contents .in {
		padding:2vw;
	}
	.b1-contents .in .btn-wrapper {
		width:100%;
		padding:6vw 4vw;
	}
	.b1-contents .in .btn-wrapper a.button {
		width:98%;
		margin: 0 2% 2% 2%;
	}	
	.b1-contents .in .btn-wrapper a.button span {
		padding:20px 45px 17px 18px;
		font-size:4vw;
	}

	.b1-contents .in .btn-wrapper .unit {
		margin-top: 4vw;
		padding: 1vw;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-top {
		height:auto !important;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-top h4 {
		float:none;
		padding:2vw 0 1vw 3vw;
		font-size:5vw;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-top span {
		float:none;
		padding:0 0 2vw 3vw;
		font-size:4vw;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-top img.price {
		display:none;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom {
		padding:2%;
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom .package{
		width:80% !important;
		float:none;
		margin: 0 auto;
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom h5 {
		font-size:4vw;	
	}
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom .desc {
		width:100% !important;
		float:none;
		margin: 0 auto;
		font-size:3.5vw;	
	}	
	.b1-contents .in .btn-wrapper .unit div.p .p-bottom p {
		font-size:3.5vw;
	}
}








/* バナー
----------------------------------------------------------------- */
	
#banner {
	padding-top:100px;
	background:url(../img/bg_top_2.jpg) no-repeat top center;
}	
#banner .contents {
	width:100%;
	padding-top:50px;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#banner .contents a {
	flex-basis: 44%;
	margin-bottom:50px;
	text-decoration:none;
	text-align:center;
}
#banner .contents a img {
	display:block;
	max-width:716px;
	width:100%;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;	
}
@media screen and (max-width: 1400px) and (min-width: 981px) {
	#banner .contents {
		padding-top:50px;
	}
	#banner .contents a {
		flex-basis: 45%;
		margin-bottom:40px;
		text-decoration:none;
	}
}
@media screen and (max-width: 980px) {
	#banner .contents {
		width:96% !important;
		margin: 0 auto !important;
		padding-top:4vw;
		padding-bottom:4vw;
		background-size:cover;
	}
	#banner .contents a {
		flex-basis: 46%;
		margin-bottom:30px;
	}
	
}










/* 健康ライブラリー
-------------------------------------------------------------- */

#library {
	padding:350px 0 100px;
	background:url(../img/bg_top_3.jpg) no-repeat center 100px;
}
#library .to-list {
	padding:30px 0;
}
#library-in .contents {
	width:96%;
	margin: 0 auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#library-in .contents a {
	flex-basis: 24%;
	margin-bottom:50px;
	padding: 30px 0;
	text-align:center;
	text-decoration:none;
	background:#fff;

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#library-in .contents a img {
	max-width:320px;
	width:100%;
}

@media screen and (max-width: 980px) {
	#library {
		margin-bottom:0;
		padding-top:0px;
		padding-bottom:30px;
		background:url(../img/top_bg_splite_smp.jpg) repeat;
		background-size:1%;
	}
	#library .to-list {
		padding:15px 0;
	}
	#library-in .contents {
		justify-content: normal;
		padding: 0 2%;
	}	
	#library-in .contents a {
		flex-basis: 46%;
		margin: 0 2% 20px;
	}	
}





/* 動画ライブラリー
-------------------------------------------------------------- */

#movie {
	padding:50px 0;
}
#movie .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#movie .contents a {
	flex-basis: 17%;
	padding:15px;
	text-align:center;
	text-decoration:none;
	background:#fff;

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}
#movie .contents a img {
	max-width:250px;
	width:100%;
}
#movie .contents span {
	display:block;
	padding:5px 10px 0;
	text-align:left;
}





/* 記事ライブラリー
-------------------------------------------------------------- */

#kiji {
	padding:100px 0;
	background:url(../img/top_bg_5.jpg) no-repeat top center;
}
.health.kiji ul li {
	
	/*
		⇒ common.css  に記述。
		
		以下 o.w.
	*/
	
	flex-basis: 18%;
}


@media screen and (max-width: 1400px) and (min-width: 981px) {
	.health.kiji ul li {
		flex-basis: 31%;
	}
}
@media screen and (max-width: 980px) {
	#kiji {
		margin:0;
		padding-top:10vw;
		background:none;
	}
	#kiji .in {
		width:96% !important;
		margin: 0 auto !important;	
	}
	.health.kiji ul li {
		flex-basis: 47%;
	}
		body#p-toppage .health.kiji ul li:nth-child(n+5) {
		display:none;
	}

}





/* ウィズぺティ倶楽部
-------------------------------------------------------------- */

#club {
	padding:120px 0 50px ;
	background:url(../img/bg_top_4.jpg) no-repeat top center;
}
#club-in .contents {
	width:100%;
	margin: 0 0 50px;
	padding: 0 10px 90px;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	background:url(../img/top_club_shelf.jpg) no-repeat bottom center;
}
#club-in .contents a {
	flex-basis: 16%;
	text-decoration:none;
	text-align:center;
}
#club-in .contents a img {
	display:block;
	width:96%;
	margin: 0 auto;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 1400px) and (min-width: 981px) {
	#club-in .contents {
		margin: 0 0 50px;
		padding: 0 0 94px;
	}
	#club-in .contents a {
	}
}
@media screen and (max-width: 980px) {
	#club {
		padding:0 0 50px;
		background:none;
		background-color:#F8F8F8;
	}
	#club-in .contents {
		margin: 0 2% 50px;
		padding: 0;
		background:none;
	}
	#club-in .contents a {
		flex-basis: 33%;	
	}
	body#p-toppage #club-in .contents a:nth-child(n+4) {
		display:none;
	}	
}