/* CSS Document */

main#top_page { padding-bottom:0; }

h2 { text-align: center;font-size: 4.2rem;color: #b64922;font-weight: 500; padding-bottom: 40px;line-height:1;letter-spacing: 0.1em; }
@media screen and (max-width: 767px) {
    h2 { font-size: 2.7rem; padding-bottom: 30px; }
}

#main_slide {}
#slider01 { width: 100%; height: 600px; overflow: hidden;}
#slider01 .item { width: 100%; height: 600px; }
#slider01 .item img { width: 100%; height: 600px; object-fit: cover;}
@media screen and (max-width: 767px) {
    #slider01 { height: 270px;}
    #slider01 .item img { height: 270px;}
}


#top_search,
#top_category,
#top_bland,
#top_useful,
#top_movie,
#top_information { padding-top: 50px;}

@media screen and (max-width: 767px) {
    #top_search,#top_category,#top_bland,#top_useful,#top_movie,#top_information { padding-top: 30px;}
}

#top_search { padding-bottom: 50px;}
/*タブ切り替え全体のスタイル*/
.tabs {  width: 100%; box-sizing: border-box; display: flex;justify-content: space-between;flex-wrap: wrap;}

/*タブのスタイル*/
.tab_item { width: 300px; height: 70px; background-color: #fa4f12;  line-height: 70px; font-size: 2rem; color: #fff; display: block;  font-weight: 500; opacity: 0.6;padding-left:80px;box-sizing: border-box;position: relative;}

.dog_product { background-image: url("../img/cmn/icon_dog.png");background-repeat: no-repeat;background-position: 10px center;background-size: 50px auto;}
.dog_product::after {position: absolute;top:0;right: -30px; content: ""; width: 0;height: 0;border-style: solid;border-width: 70px 0 0 30px;border-color: transparent transparent transparent #fa5012;}
.cat_product {background-image: url("../img/cmn/icon_cat.png");background-repeat: no-repeat;background-position: 10px center;background-size: 50px auto;}
.cat_product::after { position: absolute;top:0;left: -30px; content: ""; width: 0;height: 0;border-style: solid;border-width: 0 0 70px 30px;border-color: transparent transparent #fa5012 transparent;}

.tab_item:hover { cursor: pointer;opacity: 0.75;}
input[name="tab_item"] {  display: none;}

/*タブ切り替えの中身のスタイル*/
.tab_content { width: 100%; background: #fff; display: none; padding: 40px; overflow: hidden; }


/*選択されているタブのコンテンツのみを表示*/
#dog_product:checked ~ #dog_product_content,
#cat_product:checked ~ #cat_product_content { display: block;}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item { opacity: 1;}

.search_select { display: flex; margin-bottom: 20px;}
.tab_content select { font-size: 1.8rem; border: 1px solid #d7d7d7;padding: 10px;width: 360px;margin-right: 10px;}
.item_list { display: flex;flex-wrap: wrap;height: 650px;overflow-y: auto;align-content: flex-start;}
.item_list li { width: calc(100% / 6);box-sizing: border-box;padding: 10px 15px; text-align: center; }
.item_list li figure { height: 150px;padding-bottom: 5px;}
.item_list li figure img { width: 100%; height: 150px; object-fit: contain;}
.item_list li p {font-size: 1.3rem;line-height: 1.3;}
.item_list li a:hover {opacity: 0.6;}
@media screen and (max-width: 767px) {
    .tabs {  margin-top: 0;}
    .tab_item { width: 50%; height: 40px; line-height: 40px; font-size: 1.4rem; padding-left:40px;letter-spacing: 0;}
    .dog_product,.cat_product { background-size: 20px auto;}
    .dog_product::after,.cat_product::after { display: none;}
    .tab_content { padding:15px 0; }
    .search_select { flex-wrap: wrap; padding: 0 10px;}
    .tab_content select { font-size: 1.6rem;padding: 8px;width: 100%; margin-bottom: 5px;}
    .item_list { height: 400px;}
    .item_list li { width: calc(100% / 2);padding: 10px; }
    .item_list li figure { height: 75px;}
    .item_list li figure img { height: 75px;}
    .item_list li p {font-size: 1.1rem;}
}


#top_category { padding-bottom: 50px;}
#top_category h3 { font-size: 1.8rem;letter-spacing: 0.2em;font-weight: 500;padding-left: 180px;height: 160px;padding-top: 40px; box-sizing: border-box;margin-bottom: 20px;}
#top_category h3 span {font-family: 'Noto Serif JP', serif;font-size: 3rem;color: #878787;display: block;}
#dog_item h3 {background: url("../img/top/category_img_dog.jpg")no-repeat 0 center;}
#cat_item h3 {background: url("../img/top/category_img_cat.jpg")no-repeat 0 center;}
.category_list ul { width: 580px;}
.category_list ul li {background: #fbf6f4;border: 1px solid #b64922;margin-bottom: 10px;}
.category_list ul li a { display: block;font-weight: bold;font-size: 2rem;color: #b64922;line-height: 60px;letter-spacing: 0.08em; background: url("../img/cmn/icon_footprints.png")no-repeat 10px center;background-size: 24px auto;padding: 0 50px;position: relative;}
.category_list ul li a::after { content: ""; position: absolute; top: 50%;margin-top: -5px; right:15px; width: 0;height: 0;border-style: solid;border-width: 6px 0 6px 10px;border-color: transparent transparent transparent #b64a22;}
.category_list ul li a:hover { text-decoration: none;opacity: 0.5;}

@media print, screen and (min-width: 768px){
    #top_category .w1000 { display: flex;justify-content: space-between;}
}
@media screen and (max-width: 767px) {
    #top_category { padding-bottom: 10px;}
    #top_category h3 { font-size: 1.4rem;padding-left: 120px;height: 100px;padding-top: 10px; margin-bottom: 20px;}
    #top_category h3 span {ffont-size: 2rem;}
    #dog_item h3,#cat_item h3  {background-size: 100px auto;}
    .category_list ul { width: 100%; margin-bottom: 30px;}
    .category_list ul li a { font-size: 1.8rem;line-height: 50px;}
}



#top_bland { padding-bottom: 1px;}
#top_bland h3 { background-color: #fa4f12; color: #fff;font-size: 3.2rem;font-weight: 500;letter-spacing: 0.2em;line-height: 80px;padding-left: 80px;}
#bland_dog { background: url("../img/cmn/icon_dog.png") no-repeat 15px center;}
#bland_cat {background: url("../img/cmn/icon_cat.png") no-repeat 15px center;}
.bland_list { padding-bottom:50px; margin-bottom: 30px; position: relative;}
.bland_list ul { display: flex; flex-wrap: wrap;background: #fff;}
.bland_list ul li { border: 1px solid #d7d7d7;width: calc(100% / 3);box-sizing: border-box;}
.bland_list p { text-align: center; background: #fed3c4;line-height: 50px;font-size: 1.6rem;width: 100%; position: absolute;left: 0;bottom:0;cursor: pointer;}
.bland_list p span {display: inline-block;position: relative;padding-right: 20px;}
.bland_list p span::after { position: absolute;top: 50%;margin-top: -5px; right: 0; content: "";width: 0;height: 0;border-style: solid;border-width: 10px 6px 0 6px;border-color: #b64a22 transparent transparent transparent;}
.bland_list ul.bland_more { display: none;}
.bland_list p.open + ul.bland_more { display: flex;}
.bland_list p.open span { font-size:0;}
.bland_list p.open span::before { content: "表示を少なくする";font-size: 1.6rem;}
.bland_list p.open span::after {border-width: 0 6px 10px 6px;border-color: transparent transparent #b64a22 transparent;}
.bland_list a:hover {opacity: 0.6;}
@media screen and (max-width: 767px) {
    #top_bland h3 { font-size: 2rem;line-height: 60px;padding-left: 70px;}
    #bland_dog,#bland_cat { background-size: 40px auto;}
    .bland_list { padding-bottom:30px;}
    .bland_list ul li { width: 50%;box-sizing: border-box;}
    .bland_list p { line-height: 30px;font-size: 1.4rem;}

}

#top_useful { padding-bottom: 50px;}
#useful_list { display: flex; margin-bottom: 30px;}
#useful_list a { display: block;font-size: 1.6rem;font-weight: 700;width: 285px;margin-right: 20px; box-sizing: border-box;border: 1px solid #d7d7d7;}
#useful_list a:hover { opacity: 0.6;}
#useful_list a p { padding: 10px 15px 15px;}
#useful_list a img { width: 100%; height: 180px; object-fit: cover;}
@media print, screen and (min-width: 768px){
    #useful_list a:nth-of-type(4n) { margin-right: 0;}
}
@media screen and (max-width: 767px) {
    #top_useful { padding-bottom: 0px;}
    #top_useful .btn_area { margin-bottom: 30px;}
    #useful_list { flex-wrap: wrap; margin-bottom: 20px}
    #useful_list a { text-align: left;font-size: 1.4rem;font-weight: 500;width: 48%;margin-bottom: 15px;}
    #useful_list a img { height: 120px; }
}

#top_movie { padding-bottom: 50px;}
#movie_lead {text-align: center;font-size: 1.8rem;margin-bottom: 30px;}
#movie_slide { padding-bottom: 60px;}
#movie_slide .item { padding: 0 20px;} 

@media screen and (max-width: 767px) {
    #movie_lead {text-align: center;font-size: 1.5rem;margin-bottom: 20px;}
    #movie_slide .item { display: flex;justify-content: center; padding: 0;} 
    #movie_slide .item iframe { width: 90%; height: 180px;}
}


#information_list dl dd span { color: #fff;background:#fa4f12;border-radius: 5px;display: inline-block;text-align: center }
#information_list dl dd a { text-decoration: underline; }
#information_list strong { font-size: 20px;}

@media print, screen and (min-width: 768px){
    #top_information { padding-bottom: 120px;}
    #information_list { font-size: 1.6rem;width: 100%;}
    #information_list dl dt { font-weight: 300;border-bottom: 1px solid #d7d7d7; padding: 10px;width: 90px;}
    #information_list dl dt + dd { width: 100px;}
    #information_list dl dd { border-bottom: 1px solid #d7d7d7; padding: 10px;}
    #information_list dl dd span { line-height: 30px;width: 100px; }
}
@media screen and (max-width: 767px) {
    #top_information { padding-bottom: 60px;}
    #information_list { }
    #information_list dl { display: flex; flex-wrap: wrap; }
    #information_list dl dt { padding: 10px 10px 0 10px ; line-height: 20px; font-size: 1.2rem;}
    #information_list dl dd { padding: 10px 0 0;}
    #information_list dl dd:last-of-type { width: 100%;border-bottom: 1px solid #d7d7d7;font-size: 1.4rem;padding: 10px;}
    #information_list dl dd span { line-height: 20px;width: 80px;font-size: 1.3rem; }
}

@media screen and (max-width: 767px) {
    .mobile_acc h2 { position: relative;}
    .mobile_acc h2::after { position: absolute;top: 50%;margin-top: -20px; right: 20px; content: "";width: 0;height: 0;border-style: solid;border-width: 14px 8px 0 8px;border-color: #b64a22 transparent transparent transparent;}
    .mobile_acc h2.open::after {border-width: 0 8px 14px 8px;border-color: transparent transparent #b64a22 transparent;} 
    .mobile_acc_box { display: none;}
    
}

#top_bnr {padding-top: 40px;display: flex;justify-content: center;}
#top_bnr ul {width: 1000px;display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;}
@media print, screen and (min-width: 768px){
    #top_bnr ul li { /*padding-right: 20px;*/}
    #top_bnr ul li:last-of-type { padding-right: 0;}
}
@media screen and (max-width: 767px) {
    #top_bnr { padding: 20px 15px 0;}
    #top_bnr ul { flex-wrap: wrap; }
    #top_bnr ul li { margin-bottom: 10px;}
}