/* CSS Document */

/*font
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');


@import url("/font.css?a");*/

/*chrome*/
*:focus {
outline: none;
}
/*==============================================================*/
/* loading */
/*==============================================================*/
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #fff; z-index: 9999; }
#loader-bg.catpage { background:#e1e1d9 }

#loader { display: none; position: fixed; top: 50%; left: 50%;
 width: 200px; height: 63px; margin-top: -75px; margin-left: -75px; text-align: center; color: #785443; z-index: 11; }
#loader img { margin: 0 auto ; }

.blinking { -webkit-animation: blink .5s ease-in-out infinite alternate; -moz-animation: blink .5s ease-in-out infinite alternate;
 animation: blink .5s ease-in-out infinite alternate; }
@-webkit-keyframes blink {
 0% {
opacity:0;
}
 100% {
opacity:1;
}
}
@-moz-keyframes blink {
 0% {
opacity:0;
}
 100% {
opacity:1;
}
}
@keyframes blink {
 0% {
opacity:0;
}
 100% {
opacity:1;
}
}

body{ font-family: 'Noto Sans Japanese',"游ゴシック", 'YuGothic', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",'Meiryo', sans-serif;
-webkit-text-size-adjust: none;
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
font-weight: 600;
letter-spacing: 0px;
line-break: strict;
}

#cat, .catrecipe{ background:#e7e7df repeat-y url(../image/catbg.gif) 0 0  / cover; }
#dog{ background:#fefdef repeat url(../image/dogbg.png) 0 0 ;  }


/*==============================================================================*/
/*hover */
/*==============================================================================*/
/*#cat, .catcursor { cursor: url(../image/catcursornormal.png), pointer ; z-index: 100;}*/
#cat a:hover,#cat #pagetop a:hover{ cursor: url(../image/catcursornormal.png), pointer ; z-index: 100; }
#dog a:hover,#dog #pagetop a:hover{ cursor: url(../image/dogcursor.png), pointer ; z-index: 100; }

header li a,#pagetop a,#mainpage a,
#used li a,#archive li a:hover, #basicBtn a,#pageBtn a,#navBtn li a{	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;}
	
header li a:hover,#pagetop a:hover,#mainpage a:hover,
#used li a:hover,#archive li a:hover,#basicBtn a:hover,#pageBtn a:hover,#navBtn li a:hover{ 
	 filter: alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; }

/*==============================================================================*/
/*header */
/*==============================================================================*/
header{ box-sizing: border-box; position: relative; z-index: 2;}
#cat header ul{  display: flex; align-items: center;}


header li:last-child{  position: fixed; }
#official{  box-sizing: border-box;line-height: 1.2em;
/*display: flex; justify-content: center; align-items: center;*/}
#official a{ color: #7b6a4e; /*width: 124px;*/
	background: rgba(255, 255, 255, 0.85); border-radius: 4px; display: block; padding:10px 7px; font-size: 0.9em;}

#recipepageBtn a{  display: block; position: relative; outline: none;  }

#recipepageBtn a::before,
#recipepageBtn a::after{ width: 2px;  }

.basic #recipepageBtn a::before{ width: 30px; height: 2px; }
.basic #recipepageBtn a::after{ height: 2px; }


#recipepageBtn a::before, #recipepageBtn a::after{ position: absolute; content: ""; background:#000; }
#recipepageBtn a::before{ bottom: 4%; height: 32px;
	/*アニメーションの指定*/
		transition: all .3s; }
#recipepageBtn a::after{bottom: 2%; height: 11px; width: 2px;
		/*矢印の形状*/
		transform: rotate(45deg);
		/*アニメーションの指定*/
		transition: all .3s; }
		

.basic #recipepageBtn a::before{ 
	/*アニメーションの指定*/
		transition: all .3s; }
.basic #recipepageBtn a::after{ width:2px; right: 5px; height: 9px; 
/*矢印の形状*/
transform: rotate(-45deg);
/*アニメーションの指定*/
transition: all .3s; }

#mainpage{ 
	display: block;
	position: absolute; left: 50%; top: 0; 
	transform: translate(-50%, 4%);
	-webkit-transform: translate(-50%, 4%);
	-ms-transform: translate(-50%, 4%);  }

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

/* > 
#pagetop a::before{ 
	content: "";
	position: absolute;
	top: 50%;
	display: block;

	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
}*/


/*==============================================================================*/
/*content */
/*==============================================================================*/
main{ position:relative; z-index: 1; }

ol{ list-style: none; }
.innerBox{margin: 0 auto; box-sizing: border-box; }

.notice,#notice2{  position: relative;}
.notice::before{ position: absolute; content: "※"; left:0 }



/*==============================================================================*/
/* footer
============================================================================== */
/*pagetop btn*/
/*
#pagetop {position: fixed;right: 0;bottom: 20px;z-index: 1; }
#pagetop a,#pagetop a { z-index: 3; font-size: 21px; color: #fff;
	background:#622824 ;	text-decoration: none;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box; text-align: center;display: block;
}*/

#pagetop a{  z-index: 9; display: block; position: fixed; }

/*
#pagetop a:hover{ background:#785443 }

#pagetop a span {display: none;}*/
/* arrow */
/*
#pagetop a::before { display: block;}
#pagetop a::after{ transform : skewX(-30deg); }*/

footer{background:#785443; color:#fff; text-align: center; font-weight: 300; }
/*わんごはんページ・にゃんごはんページ*/
#pageBtn a{ margin-right: auto; margin-left: auto; display: block; position: relative; outline: none; }
#pageBtn a::before, #pageBtn a::after{ position: absolute; content: ""; background:#bc6d6b; height: 2px; }
#pageBtn a::before{  bottom: 40%; width: 32px;
    /*アニメーションの指定*/
    transition: all .3s;
}
#pageBtn a::after{
     bottom: 41%; 
    /*矢印の形状*/    
    width: 9px;

    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}


/*=========================================================*/
/*sp-----------------------------------------------------*/

@media screen and (max-width: 375px) {
	#pageBtn a::after {	bottom: 41.5%;}
}

@media screen and (max-width: 480px) {
#dog header ul{ padding-top: 11vw ; }
#cat header ul{ padding-top: 4vw ; }

/*hoverした際の移動*/
#pageBtn a::before{ left: 87%; }
#pageBtn a::after{ left: 94%; }
#pageBtn a:hover::before{ left: 91%; }
#pageBtn a:hover::after{ left: 98%; }
}


@media screen and (max-width: 640px) {
#dog.basic main{ padding-top: 11vw; }
#doggylogo img,
#cattylogo img,
#cat #cattylogo{ width: 26%; }
#cat.basic #cattylogo{ width: 70%; }
#cat #cattylogo img{ width: 100%; }
#cat #official{width: 28%; text-align: center; font-size: 2.8vw;}
#cat.basic #official{margin-left: 0; min-width: 84px; /*width: 70%;*/ font-size: 2.4vw;}
#official a{ font-size: 0.8em; padding: 3% 0; }

#recipepageBtn a::after{ right: 8%; }
#recipepageBtn a img{ width: 75%; }
#recipepageBtn a {  width: 70px; }
#mainpage a{ width: 82%; display: block;margin: auto;}

.basic header ul li:last-child{ padding-right: 4%; }
.basic #recipepageBtn a::before{right: -13px; }
.basic #recipepageBtn a::after {right: -10px; }
.basic #recipepageBtn a:hover::before,
.basic #recipepageBtn a:hover::after{ right: -15%; }

.catrecipe main{ padding-top: 6vw; }
.recipe main{ padding-top: 15vw; }

#pagetop a { width: 45px;  height: 45px; right: 0; bottom: 20px;}
#pagetop a img{ width: 100%; }

#pageBtn a,
#pageBtn a img{ max-width: 392px; width: 80%; }
#pageBtn a{ margin-bottom: 42%; width: 90%;}
}


@media screen and (min-width: 641px) {
#doggylogo img,#cattylogo img{max-width: 142px;}
#pagetop a { width: 74px;  height: 74px; bottom: 5%; right: 0; }
/*hoverした際の移動*/
#recipepageBtn a:hover::before{ bottom: -2%; }
#recipepageBtn a:hover::after{ bottom: -3%; }
.basic #recipepageBtn a:hover::before{ right: -6px; }
.basic #recipepageBtn a:hover::after{ right: -5px; }
#official br{ display: none; }
}

@media screen and (min-width: 641px) and (max-width: 1080px) {
	#cat #official{ font-size: 0.85em; max-width: 154px;}
	#recipepageBtn a{ width: 131px; }
	#recipepageBtn a::after{ right: 5%; }
	.basic #recipepageBtn a::before,
	.basic #recipepageBtn a::after{ right: 0; }
	#doggylogo img,
	#cattylogo img{ width:80% }
	header li:last-child img{ width: 70%; }
	#mainpage img{ width: 100%; }
	#pageBtn a{ width: 392px;}
	#pageBtn a::before, #pageBtn a::after{ right:-60px }
	#pageBtn a:hover::before,#pageBtn a:hover::after{ right: -10%; }

	.catrecipe main{ padding-top: 15vw; }
.recipe main{ padding-top: 23vw; }
}

@media screen and (min-width: 881px) and (max-width: 1080px) {
#cat.basic main{ padding-top: 10vw; }
#dog.basic main{ padding-top: 14vw; }
}
@media screen and (min-width: 641px)  and (max-width: 880px) {
#cat.basic main{ padding-top: 8vw; }
#dog.basic main{ padding-top: 16vw; }
}

@media screen and (min-width: 481px) {
/*hoverした際の移動*/
#pageBtn a::before, #pageBtn a::after{ right: 0; }
#pageBtn a:hover::before,#pageBtn a:hover::after{ right: -5%; }
}
@media screen and (min-width: 481px) and (max-width: 1080px) {
header ul{ padding-top: 6% ; }
#cat header ul{ padding-top: 4% ; }
}

@media screen and (max-width: 1080px) {
body{ width: 100%; }
/*main{ padding-top: 50%; }*/
header ul{ padding-left: 1.5%; }
#cat header ul{ /*justify-content: space-between; align-items: center;*/ margin-bottom: 10px; }
#cat.basic header ul{ /*justify-content: space-between; align-items: center;*/width: 36%;  }
header li:last-child{ top:2%; right:1.5%}
/*#cat.basic #official{  margin:0 0 10px 0 }*/
.basic #recipepageBtn a::before,
.basic #recipepageBtn a::after{bottom: 17%; }

#recipepageBtn a::before{ right: 10px; }
#mainpage img{ max-width: 389px; width: 100%; }
/*#dog #mainpage img{ max-width: 300px; }*/
#cat.basic #mainpage img{ max-width: 431px; }


.pc{ display: none; }
.innerBox{width:92%; }


/*footer*/
/* >
#pagetop a::before{ 
	width: 8px;
	height: 8px;
	margin-top: -2px;
	right: 39%;} */

footer{ padding: 2%;}
#pageBtn a{ margin-bottom: 8%; }

}

@media screen and (min-width: 1025px) {
	/**/#official{ margin:0 0 0  20px ;  order:2}
	#cattylogo{  order:1 }
}
	

@media screen and (max-width: 1024px) {
/**/#cat header ul{ display: inherit; }
#official{ margin: 0 0 20px 0 ;}
footer{ font-size: 0.8em; }
}


/*pc-----------------------------------------------------*/

@media screen and (min-width: 1081px) {
body{ min-width: 1080px;}
header ul{ padding: 40px 0 0 70px; box-sizing: border-box;}

#cat #top header ul{ justify-content: space-between; align-items: center;width: 460px;  }
#cat.basic #official{ width: 182px; text-align: center;}
header li:last-child{ top:10px; right:70px}

.basic header ul{ padding: 40px 0 0 70px;}
main{ padding-top: 15px; }
.basic main{ padding-top: 60px; }
.sp{ display: none; }

#cat.catrecipe main,
#dog.recipe main{ padding-top: 245px; }
#recipepageBtn a::after{right: -1px;}
/*#mainpage { width:389px; } 30%*/

.innerBox{width:980px;max-width: 90%; }
#recipepageBtn a{  width: 198px; }
#recipepageBtn a::before{ right: 2px; width: 3px;}

.basic #recipepageBtn a::before,
.basic #recipepageBtn a::after{bottom: 9%; }

.basic #recipepageBtn a { width: 218px;  }
.basic #recipepageBtn a::before{ height: 2px; } 

/* > 
#pagetop a::before{ 
	width: 10px;
	height: 10px;
	margin-top: -2px;
 right: 31px;}*/

/*footer*/

footer{ padding:15px 3%;}
#pageBtn a{ margin-bottom: 80px; width: 392px;}

}