@charset "UTF-8";
/* CSS Document */
/*h1{ color:#fff;}*/
#header{
    background-color: rgba(255,255,255,0.9);
    padding-bottom: 2em;
}
.overflow__hidden{overflow:hidden;}
#popupbox{
    position: fixed;
    background-color: #faeee7;
    padding: 5em;
    top: 50vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    color: #33272a;
    z-index: 1000;
    width: 45em;
    text-align: center;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
#popupbox h2{
    font-size: 2.4rem;
    font-weight: 800;
}
#popupbox .read{
    text-align: center;
    padding: 1.5em 0;
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 800;
}
#popupbox .txt{
    font-size: 1.2rem;
    line-height: 1.6;
    display: inline-block;
    text-indent: -1em;
    padding-left: 1em;
}
#popupbox .colose{
    text-align: center;
    position: absolute;
    right: -0.3em;
    top: -0.3em;
    color: #faeee7;
    background-color: #ff8ba7;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    font-size: 4rem;
    padding-top: 0.13em;
    cursor: pointer;
}

/* Overlay */
.overlay2 {
    /* shadow layer visible when navigation is active */
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.5);
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}
.overlay2.novisible,#popupbox.novisible {
    visibility: hidden;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}


#mainimage { background-size: cover; background-image:url(../topimg/mainimage_top_2022.jpg); background-position:70% 100%; position:relative;
padding-top: 35.3%;}
#mainimage .container{ padding-left:0; text-align:center; height:100%;}
#mainimage .title_txt{ text-align:left; padding-top:350px; color:#000; font-size:3rem;}
#mainimage h2{ color:#000; font-size:3rem; font-weight:normal; letter-spacing:0.1em; font-family:Helvetica, Geneva, Arial, sans-serif; padding-top:345px; text-align:left;}

#best_top{ margin:84px 0 20px 0;}
#best_top a img{box-shadow:9px 7px 14px -10px #282828;}
#best_top a:hover img{opacity: 1;
filter: alpha(opacity=100);
-moz-opacity:1;box-shadow:9px 7px 14px -10px #fff;}

#anni3_top{
position:absolute;
right:3%;
/*bottom:28px;*/
top: 20%;
padding-top: 0;
}
#anni3_top h3 img{
width: 21.333em;
}

#anni3_top_sp{
display:none;
}
.bestname{
position:absolute;
left:5%;
bottom:60px;
font-weight:bold;
font-size:20px;
color:#fff;
background-color:rgba(1,179,222,0.7);
padding:30px 50px 30px 140px;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}
.bestname a{
display:block;
color:#fff;
}
.bestname img{
position:absolute;
left:-50px;
top:-40px;
}

.lunchbanner{
text-align:right;
margin-top:15px;
}
.lunchbanner img{
width:330px;}

.bestshotbanner{ width:944px; margin:0 auto; padding-top:160px; position:relative;}
.bestshotbanner a img{box-shadow:9px 7px 14px -10px #282828;}
.bestshotbanner a:hover img{opacity: 1;
filter: alpha(opacity=100);
-moz-opacity:1;box-shadow:9px 7px 14px -10px #fff;}
.bestshotbanner .best_close{ position:absolute; top:140px; right:-20px;}
.bestshotbanner_sp{ display:none;}

#top_category{ background-color:#fbfaf7; padding:54px 0 40px 0;}
    #top_category .left{ float: none; display: flex;align-items: center; margin-bottom: 30px;}
#top_category .search{ font-style:oblique;}
#top_category .search_form {
  margin: 0 0 0 10px;
  width: 193px;
}
#top_category .right{ float: none;}
#top_category .right .title{ color:#000;}
#top_category ul{ display: flex; flex-wrap: wrap;
justify-content: space-between;}
#top_category li{ width: 123px;position:relative;}
#top_category li a{ padding:7px 0; border-bottom:1px dotted #c9c9c9; display:block; font-size:1.3rem;}
#top_category li a:before{ content:url(../packages/boot/common/side_arrow.png); margin:-5px 7px 0 0;}
#top_category li#catlink12 a{ color:#CC0000; font-weight:bold;}
#top_category li#catlink44{ display:none;}
#top_category li ul{ display:none; position:absolute; left:0;top:42px; background-color:#01b3de; z-index:98;border-radius: 3px;}
#top_category li ul li{margin-left:0;}
#top_category li ul li a{ display:block; border-bottom:1px dashed #fff; color:#fff; padding:5px 0 5px 10px;white-space: nowrap; width:100%;}
#top_category li ul li a:before{content:''; display:none; margin:0;}
#top_category li ul li a:hover{ background-color:#95e4f7; font-weight:bold;}
#top_category li#catlink1 ul li,#top_category li#catlink2 ul li,#top_category li#catlink8 ul li{ width:190px;}
#top_category li ul li:last-child a{ border-bottom:none;}


#news{ position:relative; clear:both; margin-top:40px;}

#news h3 {
	display: inline-block;
	font-size: 1.6rem;
	margin: 0 0 8px 0;
	padding-right: 2em;
	position: relative;
	vertical-align:top;
}
.midasi{
	display: inline-block;}
	#newslist{ display:none;}
#news img{ width: 76px;}
#newslist li{ padding:10px 0 0 0 ;}
.news_btn {
    background: url(../topimg/open.png) center center no-repeat;
    cursor: pointer;
    height: 22px;
    width: 36px;
    text-indent: -9999px;
    z-index: 3;
    position: absolute;
    right: 30px;
    top: 5px;
}


#product_banner{ background-color:#fff; position:relative; z-index:14; padding:90px 0 50px 0;}
#product_banner .b_bottom{ margin-bottom:34px;}
#product_banner .b_right{ float:right;}
#product_banner .b_right2{ float:right; margin:34px 0 0 35px;}
#product_banner .b_bottom2,#product_banner .b_left2{ margin-top:34px;}
#product_banner .banner_w{ width:583px;}

#product_banner .b_flex{
 display: flex;
    justify-content: space-between; 
    flex-wrap: wrap;
}
#product_banner .b_flex img{
    max-width: 100%;
    margin-top: 34px;
}
#product_banner .b_flex.flex1 a{
    width: 22.834%;
}
#product_banner .b_flex.flex2 a{
    width: 48.668%;
}

#product_list h2{ font-size:1.4rem; color:#333; margin:75px 0 35px 0; background-image:url(../topimg/top_boder.gif); background-repeat:no-repeat; background-position:20em 50%;}
#product_list h2 span{ font-size:2.4rem; color:#000; line-height:1; font-style:oblique;}
#product_list{word-break: break-all;}
#product_list  ul.p_list{}
#product_list .p_list li{ width:222px; margin:0 20px 0 0; float:left;}
#product_list .p_list .tumb{ width:100%; margin-bottom:15px;}
#product_list .p_list li p{ font-size:1.2rem; line-height:1.5; padding:5px 0 0 2px;}
#product_list .p_list li:nth-child(5n) { margin:0 0 0 0;}

#product_list .p_list li.cate_btn {
    width: 100%;
}
.cate_btn{display: block; text-align:right; padding-top:20px;}
.cate_btn a{display: inline-block;
text-align:center;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;}
.cate_btn a:hover{background-color: #eee;}

#banner_erea{ margin:158px 0 65px 0;}

#top_read{ background-color:#faf8f8; background-image:url(../topimg/top_readback.jpg); background-repeat:no-repeat; background-position:center bottom; color:#7d7d7d; padding:75px 0 85px 0;}
#top_read h4{ font-size:2.4rem;}
#top_read p{ letter-spacing:0.3em; padding:45px 50% 85px 0;}

#pagetop{ display:none;}
.top_sns{ display:none;}

@media screen and (max-width:767px){
    
#popupbox{
    padding: 5em 2em 3em 2em;
    width: 90%;
}
#popupbox .read{
    text-align: justify;
    font-size: 1.6rem;
    line-height: 1.8;
}
#popupbox .txt{
    text-align: left;
}
#popupbox .colose{
}
#header{
    background-color: rgba(255,255,255,0.8);
    padding-bottom: 10px;
}
#header #logoh1 a{z-index: 15;
position: relative;}
#mainimage { height: 21em;margin-top:-71px; padding-top: 0; background-position:50% 100%;}
#mainimage h2{ font-size:1.8rem; letter-spacing:0; padding-top:160px;}
#mainimage .title_txt{ text-align:center; padding-top:160px; font-size:1.8rem;}
#mainimage p {
    background-color:rgba(255,255,255,0);
}

#best_top{width:100%; height:auto; margin-top:20px; padding:0 10px;}
#best_top .title1{ color:#a78510; font-size:1.5rem; line-height:1.3; padding:30px 0 15px 10px;}
#best_top .title1 span{ font-size:2rem;}
#best_top .name{ padding:13px 10px 10px 0;}
.w100{ width:100%;}
#best_top_sp{ padding:10px;}

.bestshotbanner{ display:none;}

.bestshotbanner_sp{ display:block;}


.bestname{
position:relative;
left:auto;
bottom:auto;
font-size:4vw;
line-height:1.3;
padding:15px 0 15px 10px;
margin:10px;
}
.bestname img{ width:10vw;
position:relative;
left:auto;
top:auto;
float:left;
margin-right:10px;
}


#anni3_top {
position:relative;
right:auto;
bottom:auto;
top:auto;
padding: 60px 10px 20px 0;
margin-right:0;
text-align:right;
    width: auto;
}
#anni3_top h3 img{
width:35%;
}

.lunchbanner{
margin-top:10px;
}
.lunchbanner img{
width:32%;}

#anni3_top_sp{ display:block;
text-align:center;
padding:15px;
}
#anni3_top_sp img{ max-width:100%;}

#top_category{ padding:30px 0;display: none;}
#top_category .left{ display:none;}
#top_category .right{ float:none; width:100%;}
#top_category .right .title{ padding-left:10px; color:#000;}
#top_category ul{}
#top_category li{ float:none; width:100%; margin-left:0; position:relative;}
#top_category li a{ padding:7px 0 7px 10px; border-bottom:1px dotted #c9c9c9; display:block; font-size:1.2rem;}
#top_category li a:before{ content:none; margin:0;}
#top_category li a:after{ position:absolute; left:75px; top:7px; font-size:1.2rem; color:#01b3de;}
#top_category li#catlink1 a:after{content:"シャンプー/ボディケア";}
#top_category li#catlink2 a:after{content:"ファッション/ドッグウェア";}
#top_category li#catlink7 a:after{content:"健康サポートフード/食器";}
#top_category li#catlink8 a:after{content:"オーナーグッズ/しつけ/マナー";}
#top_category li#catlink9 a:after{content:"リード/ハーネス/おもちゃ";}
#top_category li#catlink10 a:after{content:"ベッド/クッション/ケージ";}
#top_category li#catlink12 a:after{content:"アウトレット";}

#news{
padding-bottom:30px;
}

#news h3 {
	display: inherit;
}
.midasi{
	display: inherit; font-size:1.2rem; line-height:1.4;}
	.midasi img{ margin:10px 0 5px 0;}

#product_banner{ padding:30px 0; border-top:1px dotted #e0e0e0;}
#product_banner .b_left,#product_banner .b_left2{ width:47%;}
#product_banner .b_right,#product_banner .b_right2{ width:47%; margin-bottom:0;}
#product_banner .b_bottom,#product_banner .b_block,#product_banner .left{ margin-bottom:0;}
#product_banner .b_right2{ margin:0 0 0 0;}
#product_banner .b_bottom2,#product_banner .b_left2{ margin-top:0; margin-bottom:0;}
#product_banner .banner_w{ width:100%;}

#product_banner .b_flex.flex1 a{
    width: 48%;
}
#product_banner .b_flex.flex2 a{
    width: 100%;
}
#product_banner img,#product_banner img.b_bottom2,#product_banner img.left,#product_banner .b_flex img{ width:100%; margin:0 0 15px 0;}

#product_list{}
#product_list h3{ font-size:1.4rem; margin:30px 0 15px; background-image:none;}
#product_list h3 span{ font-size:2rem; line-height:1;}
#product_list h2 {
    margin: 55px 0 25px 0;}
#product_list  ul.p_list{}
#product_list .p_list li,#product_list .p_list li:nth-child(5n){ width:47%; margin:0 6% 0 0;}
#product_list .p_list .tumb{ width:100%; margin-bottom:15px;}

#product_list .p_list li:nth-child(2n) { margin:0 0 0 0;}
#product_list .p_list li p {
    padding: 0 0 15px 0;
}

#product_list .p_list li.cate_btn {
    width:47%;
}
.cate_btn{display: inline-block;padding-top:100px; text-align:center;}

#banner_erea{ margin:50px 0;}

#top_read{ display:none; background-color:#faf8f8; background-image:none; padding:50px 0;}
#top_read h4{ font-size:2rem;}
#top_read p{ letter-spacing:0.2em; padding:20px 0 30px 0;}
.top_sns{ display:inherit; text-align:center;}

}