/* =============================================
   page-used-search.php 用 CSS
   ============================================= */

/* ----- PC (デフォルト) ----- */

.large_menu a.col.active .pic,.large_menu a.col:active .pic,.large_menu a.col:hover .pic,.small_menu .col.active .pic,.small_menu .col:active .pic,.small_menu .col:hover .pic{opacity:.6}
.yahoo_buttons .wrapper{padding:60px 0}
.large_menu{padding-bottom:80px}
.large_menu.col2s{display:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}
.large_menu.col2s .col{width:48%}
.yahoo_buttons .col{background-color:#fff}
.large_menu .col{padding-top:90px;position:relative}
.large_menu a.col.active .inner .box,.large_menu a.col:active .inner .box,.large_menu a.col:hover .inner .box{color:#fff;background-color:#333;box-shadow:0 4px 0 #111}
.large_menu a.col .pic{transition-property:opacity;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.large_menu a.col .inner .box{transition-property:all;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.large_menu h2.has_border{position:absolute;top:0;left:0}
.large_menu .btn_opacity,.large_menu .pic{width:calc(100% - 70px);margin-bottom:20px}
.large_menu .inner{display:flex;justify-content:space-between;align-items:flex-start;flex-direction:row}
.large_menu .inner .box{width:calc(100% - 50px);margin:-20px 25px 0;padding:25px 30px;position:relative;z-index:1;background-color:#C49F45;color:#fff;border:none;border-radius:6px;box-shadow:0 4px 0 #9a7a2e;box-sizing:border-box}
.large_menu .inner .box strong{margin-bottom:15px;display:block;line-height:1.8;font-size:1.8rem;color:#fff}
.large_menu .inner .box .paragraph{color:#fff}
.small_menu .col{margin-top:30px}
.small_menu .col.active .inner,.small_menu .col:active .inner,.small_menu .col:hover .inner{color:#fff;background-color:#333;box-shadow:0 4px 0 #111}
.small_menu .pic{transition-property:opacity;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.small_menu .inner{transition-property:all;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.small_menu .inner{height:80px;margin:-20px 25px 0;display:flex;justify-content:center;align-items:center;flex-direction:row;position:relative;z-index:1;background-color:#C49F45;color:#fff;border:none;border-radius:6px;box-shadow:0 4px 0 #9a7a2e}
.small_menu .inner strong{display:block;text-align:center;font-size:1.6rem;color:#fff}
.small_menu+.large_menu{margin-top:30px}
.col4s{display:flex;justify-content:flex-start;flex-wrap:wrap;flex-direction:row}
.col4s .col{width:calc(260 / 1150 * 100%);margin-left:calc(20 / 1150 * 100%)}
.col4s .col:nth-child(4n+1){margin-left:0}
.col4s .col:nth-child(4n+3){margin-left:auto}
.col4s .col:nth-child(n+5){margin-top:20px}
.col2-1s{display:flex;justify-content:space-between;flex-wrap:wrap;flex-direction:row}
.col2-1s .col:nth-child(2n){flex:1}
.col2-1s .col:nth-child(2n+1){width:260px;margin-right:20px}
.col2-1s .col:nth-child(n+3){margin-top:40px}
.has_bg_border_yahoo{background-size:1px 100%;background-repeat:no-repeat}
.has_bg_border_yahoo{background-image:linear-gradient(to bottom,#ebebeb,#ebebeb),linear-gradient(to bottom,#ebebeb,#ebebeb),linear-gradient(to bottom,#ebebeb,#ebebeb),linear-gradient(to bottom,#ebebeb,#ebebeb);background-position:calc(50% - 1150px/2 + 0px) 0,calc(50% - 1150px/2 + 259px) 0,calc(50% - 1150px/2 + 280px) 0,calc(50% + 1150px/2 - 1px) 0}
.yahoo_find_wrapper .p_store_select::before{content:"【"}
.yahoo_find_wrapper .yahoo_stores li+li{margin-left:30px}
/* メルカリセクション */
#mercari_menu{padding:60px 0}
#mercari_menu .wrapper{padding:50px 0}
#mercari_menu h2.has_border span{font-size:2.4rem}
.mercari_link{margin-top:40px;text-align:center}
.btn_mercari{display:inline-flex;align-items:center;justify-content:center;padding:20px 40px;background-color:#4dc1ea;color:#fff;text-decoration:none;border-radius:8px;font-size:1.8rem;transition:opacity .3s}
.btn_mercari:hover{opacity:.8}
.btn_mercari .text{color:#fff}
.yahoo_link{margin-top:80px;text-align:center}
.btn_yahoo{display:inline-flex;align-items:center;justify-content:center;padding:20px 40px;background-color:#e63e2f;color:#fff;text-decoration:none;border-radius:8px;font-size:1.8rem;transition:opacity .3s}
.btn_yahoo:hover{opacity:.8}
.btn_yahoo .text{color:#fff}

#yahoo_menu{padding-top:60px}
#yahoo_menu .wrapper{padding-bottom:50px}
#yahoo_menu h2.has_border span{font-size:2.4rem}
#yahoo_menu .large_menu{padding-bottom:0}
#yahoo_menu .large_menu .col{padding-top:20px;display:flex;flex-direction:column}
#yahoo_menu .large_menu .pic{width:100%;margin-bottom:0}
#yahoo_menu .large_menu .inner{display:block}
#yahoo_menu .large_menu .inner .box{margin:-20px 25px 0}
.yahoo_find_wrapper .wrapper{padding:60px 0}
.yahoo_find_wrapper .p_store_select,.yahoo_find_wrapper .yahoo_stores{line-height:25px;font-size:1.6rem}
.yahoo_find_wrapper .p_store_select::after{content:"】"}
.yahoo_find_wrapper .col2-1s+.col2-1s{margin-top:40px}
.yahoo_find_wrapper .yahoo_stores{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
.yahoo_find_wrapper .yahoo_stores label{padding-left:35px;display:block;position:relative}
.yahoo_find_wrapper .yahoo_stores label span{display:block;transition-property:color;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.yahoo_find_wrapper .yahoo_stores label span::after,.yahoo_find_wrapper .yahoo_stores label span::before{content:"";position:absolute;display:block;top:0;border-radius:100%}
.yahoo_find_wrapper .yahoo_stores label span::before{width:25px;height:25px;left:0;border:1px solid #000;box-sizing:border-box;transition-property:border-color;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.yahoo_find_wrapper .yahoo_stores label span::after{width:11px;height:11px;margin:auto;bottom:0;left:7px;background-color:#C49F45;opacity:0;transition-property:opacity;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.yahoo_find_wrapper .yahoo_stores label .chk:checked+span{color:#C49F45}
.yahoo_find_wrapper .yahoo_stores label .chk:checked+span::before{border-color:#C49F45}
.yahoo_find_wrapper .yahoo_stores label .chk:checked+span::after{opacity:1}
.anchor_items+.anchor_items,.anchor_items.total10 li:nth-child(n+6){margin-top:20px}
.anchor_items{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;flex-direction:row}
.anchor_items a{justify-content:center;transition-property:all;display:flex;transition-duration:.3s;transition-delay:0s;transition-timing-function:ease}
.anchor_items li+li{margin-left:14px}
.anchor_items.total4 li{width:calc((100% - 14px * 3)/ 4)}
.anchor_items.total6 li{width:calc((100% - 14px * 5)/ 6)}
.anchor_items.total9 li{width:calc((100% - 14px * 8)/ 9)}
.anchor_items.total10 li{width:calc((100% - 14px * 4)/ 5)}
.anchor_items.total10 li:nth-child(5n+1){margin-left:0}
.anchor_items a{height:70px;align-items:center;flex-direction:row;text-align:center;font-size:1.4rem;border:2px solid #000}
.anchor_items a.active,.anchor_items a:active,.anchor_items a:hover{color:#fff;background-color:#C49F45}

#form_find{display:flex;margin-top:20px}
#form_find input[type="text"]{flex:1;padding:10px 15px;border:1px solid #000;font-size:1.4rem}
#form_find button{padding:10px 20px;background-color:#C49F45;color:#fff;border:none;cursor:pointer}
#form_find button span{display:block}

.link_find{text-decoration:none;color:#000}

/* メインキャッチ */
.main_catch{font-size:2.2rem;text-align:center;margin-bottom:50px;font-weight:bold}
.page_nav{display:flex;justify-content:center;gap:20px;margin-bottom:50px}
.page_nav a{display:inline-block;padding:18px 40px;color:#fff;text-decoration:none;font-weight:bold;font-size:1.8rem;border-radius:8px;transition:all .2s}
.page_nav a:hover{opacity:.8}
.page_nav .nav_yahoo{background:#e63e2f;box-shadow:0 4px 0 #b02a1e}
.page_nav .nav_mercari{background:#4dc1ea;box-shadow:0 4px 0 #2e9abf}

/* KV画像をchoose_tiresと同じサイズに */
body#used-search #kv{overflow:hidden;aspect-ratio:3200/940}
body#used-search #kv img{width:100%;height:100%;object-fit:cover}

/* ----- タブレット ----- */
@media screen and (max-width: 1024px) {
	/* 4分割 → 2分割 */
	.col4s .col{width:calc(50% - 10px);margin-left:0}
	.col4s .col:nth-child(2n){margin-left:20px}
	.col4s .col:nth-child(n+3){margin-top:20px}

	/* 2分割 → 1列 */
	.large_menu.col2s{flex-direction:column}
	.large_menu.col2s .col{width:100%}
	.large_menu.col2s .col+.col{margin-top:30px}
}


/* ----- モバイル ----- */
@media screen and (max-width: 767px) {
	#yahoo_menu{padding-top:30px}
	#yahoo_menu .wrapper{padding-bottom:30px}

	/* 4分割 → 2分割 */
	.col4s .col{width:calc(50% - 10px);margin-left:0}
	.col4s .col:nth-child(2n){margin-left:20px}
	.col4s .col:nth-child(n+3){margin-top:20px}

	/* 2分割 → 1列 */
	.large_menu.col2s{flex-direction:column}
	.large_menu.col2s .col{width:100%}
	.large_menu.col2s .col+.col{margin-top:30px}

	.large_menu .col{padding-top:20px}
	.large_menu .inner .box{width:calc(100% - 50px);margin:-20px 25px 0;padding:15px 20px}
	.large_menu .inner{flex-direction:column}
	.large_menu .pic{width:100%}

	.small_menu .inner{height:60px;margin:-15px 15px 0}
	.small_menu .inner strong{font-size:1.4rem}

	/* col2-1s → 1列 */
	.col2-1s{flex-direction:column}
	.col2-1s .col:nth-child(2n+1){width:100%;margin-right:0;margin-bottom:20px}

	.yahoo_find_wrapper .wrapper{padding:30px 0}
	.yahoo_find_wrapper .yahoo_stores{flex-wrap:wrap}
	.yahoo_find_wrapper .yahoo_stores li{margin-bottom:10px}
	.yahoo_find_wrapper .yahoo_stores li+li{margin-left:20px}

	.anchor_items a{height:50px;font-size:1.2rem}
	.anchor_items.total4 li,.anchor_items.total6 li,.anchor_items.total9 li,.anchor_items.total10 li{width:calc(50% - 7px)}
	.anchor_items li+li{margin-left:0}
	.anchor_items li:nth-child(2n){margin-left:14px}
	.anchor_items li:nth-child(n+3){margin-top:14px}
}

@media screen and (max-width: 640px) {
	.main_catch{text-align:left;font-size:1.8rem}
	.main_catch .br_pc{display:none}
	.page_nav{flex-direction:column;align-items:center}
	.page_nav a{font-size:1.6rem;padding:15px 30px}
}