@charset "utf-8";
/*---------------------------------------------------------------------
Archive Parts Style
style_archive.css
-----------------------------------------------------------------------
Copyright 2026 (c) linkpath Allrights Reserved.
Created: linkpath
Created url: https://linkpath.jp/
Coding: Hinako Hayashi
Last Update: 2026.04.07
---------------------------------------------------------------------*/
/*===========================================================
    font-size
===========================================================*/


/*===========================================================
    parts
===========================================================*/
/*===========================================================
    first-view
===========================================================*/
/* result-contents */
.result-contents {
    min-width: 10em;
    max-width: 810px;
    width: fit-content;
    text-align: center;
    font-weight: 600;
    background: var(--color-accent__transparent);
    border-radius: 200px;
    padding: 0.5em 1.5em;
    margin: 0 auto;
    margin-top: 2rem;
}
.result-contents:has(.result-criteria) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.result-criteria {
    font-weight: 600;
    text-box: unset;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
/*===========================================================
    search-panel
===========================================================*/
.search-panel__archive {
    background: var(--color-lightgrey);
    padding: 2em 0;
}
.search-panel__archive .search-panel {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
}
.search-panel__archive .search-panel__content {
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/*===========================================================
    main-archive
===========================================================*/
.main-archive {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding: 2em 0;
}
/*===========================================================
    result-options
===========================================================*/
.result-options {
    display: flex;
    justify-content: space-between;
}

/* result-toggle */
.result-toggle-input {
	display: none;
}

.result-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.result-toggle-switch {
	width: 2.75rem;
	height: 1.5rem;
	display: inline-block;
	background: var(--color-lightgrey);
	border-radius: 200px;
	position: relative;
	transition: background 0.25s ease;
}

.result-toggle-switch::before {
	content: '';
	width: 1.1rem;
	height: 1.1rem;
	display: block;
	background: var(--color-base);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0.2rem;
	transform: translateY(-50%);
	transition: left 0.25s ease;
}

.result-toggle-input:checked + .result-toggle-switch {
	background: var(--color-accent);
}

.result-toggle-input:checked + .result-toggle-switch::before {
	left: calc(100% - 1.3rem);
}

.result-toggle-label {
	font-weight: 600;
}

/* result-sort */
.result-sort {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.result-sort svg {
    height: 1.25em;
    transform: rotate(-90deg);
}
.result-sort-select {
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
}

/*===========================================================
    result-list
===========================================================*/
.result-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.result-list__item {
    background: var(--color-lightgrey);
    border-radius: 200px;
    padding: 0.5em 1em;
}
/*===========================================================
    products-content
===========================================================*/

/*===========================================================
    pagination
===========================================================*/

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

/* 前へ・次へボタン */
.pagination__prev,
.pagination__next {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-base);
	border: 1px solid var(--color-lightgrey);
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pagination__prev:hover,
.pagination__next:hover {
	background: var(--color-lightgrey);
}

.pagination__prev[hidden],
.pagination__next[hidden] {
	display: none;
}

/* 前へ・次へ：CSS矢印 */
.pagination__prev::before,
.pagination__next::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	display: block;
	border-top: 2px solid var(--color-main__transparent);
	border-right: 2px solid var(--color-main__transparent);
	transform: rotate(225deg);
}

.pagination__next::before {
	transform: rotate(45deg);
}

/* スピナーも同様に */
.pagination__page-up::before,
.pagination__page-down::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	display: block;
	border-top: 2px solid var(--color-main__transparent);
	border-right: 2px solid var(--color-main__transparent);
	transform: rotate(315deg);
}

.pagination__page-down::before {
	transform: rotate(135deg);
}

/* 区切り */
.pagination__sep {
	width: 1px;
	height: 1.5rem;
	display: inline-block;
	background: var(--color-lightgrey);
	margin: 0 0.25rem;
}

/* ページ表示ボタン */
.pagination__page {
	display: flex;
	position: relative;
}

.pagination__page-btn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--color-base);
	border: 1px solid var(--color-lightgrey);
	border-radius: 0.25rem;
	padding: 0 0.75rem;
	height: 2.5rem;
	cursor: pointer;
}

.pagination__page-current,
.pagination__page-slash,
.pagination__page-total {
	font-weight: 600;
}

/* 上下スピナー */
.pagination__page-spinners {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
}

.pagination__page-spinners svg {
	width: 0.7rem;
	height: 0.7rem;
	display: block;
}

/* ドロップダウン */
.pagination__page-list {
	width: 100%;
	max-height: 12rem;
	list-style: none;
	background: var(--color-base);
	border: 1px solid var(--color-lightgrey);
	border-radius: 0.25rem;
	position: absolute;
	bottom: calc(100% + 0.25rem);
	left: 0;
	overflow-y: auto;
	z-index: 100;
}

.pagination__page-list[hidden] {
	display: none;
}

.pagination__page-item {
	width: 100%;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pagination__page-item:hover {
	background: var(--color-lightgrey__transparent);
}

.pagination__page-item.is-active {
	background: var(--color-accent__transparent);
}


@media screen and (max-width: 959px) {
/*===========================================================
    font-size
===========================================================*/

/*===========================================================
    parts
===========================================================*/
/*===========================================================
    first-view
===========================================================*/
/* result-contents */
.result-contents {
    width: 90%;
}
/*===========================================================
    search-panel
===========================================================*/

/*===========================================================
    main-archive
===========================================================*/
/*===========================================================
    result-options
===========================================================*/
/*===========================================================
    result-list
===========================================================*/
/*===========================================================
    products-list
===========================================================*/
/*===========================================================
    pagination
===========================================================*/
}

@media screen and (max-width: 482px) {
/*===========================================================
    font-size
===========================================================*/


/*===========================================================
    parts
===========================================================*/
/*===========================================================
    first-view
===========================================================*/
/*===========================================================
    search-panel
===========================================================*/

/*===========================================================
    main-archive
===========================================================*/
/*===========================================================
    result-options
===========================================================*/
/*===========================================================
    result-list
===========================================================*/
/*===========================================================
    products-list
===========================================================*/
/*===========================================================
    pagination
===========================================================*/
}