@charset "UTF-8";

/*!
Theme Name: 宅配買取
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: 株式会社アセンテジャパン
Author URI: https://www.ascente.co.jp/
Template:   cocoon-master
Version:    1.1.3 -ascente_goods_241016
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** 高価買取リスト
************************************/
.list-tab {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
	margin: 0 auto;
}

.list-tab > label {
    flex: 1 1;
    order: -1;
    min-width: 120px;
    padding: .7em 1em .5em;
    background-color: #f2f2f2;
    color: #999;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.list-tab > label:hover {
    opacity: .8;
}

.list-tab input {
    display: none;
}

.list-tab > div {
    display: none;
    width: 100%;
    background-color: #fff;
}

.list-tab label:has(:checked) {
    border-bottom: 4px solid #2589d0;
    color: #2589d0;
}

.list-tab label:has(:checked) + div {
    display: block;
}

div.purchase-list-wrap {
    margin: 0 auto;
    max-width: 1000px;
	width: 100%;
}
ul.purchase-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
}
li.item {
    padding: 20px;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}
img.item-img {
    height: 200px;
	padding-bottom: 10px;
	object-fit: cover;
}
div.item-detail {
    font-size: 0.9rem;
    text-align: left;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
div.item-name {
    flex-grow: 1;
}
div.item-jan {
    font-size: 0.8rem;
    color: #666;
}
span.item-price-number {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0 5px;
}
/************************************
** トップに戻るボタン
************************************/
.go-to-top {
	position: fixed;
	bottom: 84px;
	right: 10px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
#body{
	background-color: #fff;
}
#header{
	background: #fff;
}
.pricelist_box{
	margin: 0 auto;
}

.list{
	width: 1020px;
	margin: 0 auto;
}
td p{
	text-align: left;
}
.faq{
	text-align: justify;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	#header{
		height:100px;
	}
	.main{
		padding: 0;
	}
	.list{
	width: initial;
	}

	td p{
		text-align: center;
	}
	.list-tab > div {
		max-height: 600px;
		overflow-y: scroll;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}