/*
* ぐんまかいそう: デザインの CSS に足す分・上書きする分
* デザインの CSS は tools/css-split.php で common.css + ページ別に分けて圧縮したもの（手では直さない）。
* 直したいことはこのファイルに書く。
*/
/* ---------- スライダー: 初期化（JS）前のずれを防ぐ ----------
* デザインの CSS は .slick-slider が付いてから大きさを決める。HTML に最初から slick-slider を付け、
* JS が動くまでは 1 枚目だけを見せる（以前は写真 4 枚が縦に並び、初期化で 1 枚に縮んでいた） */
.js-slider:not(.slick-initialized) > :not(:first-child),
.js-company-slider:not(.slick-initialized) > :not(:first-child) {
display: none;
}
.js-slider:not(.slick-initialized) > :first-child,
.js-company-slider:not(.slick-initialized) > :first-child {
display: block;
height: 100%;
}
.top__product-slider:not(.slick-initialized) {
display: flex;
overflow: hidden;
}
.top__product-slider:not(.slick-initialized) > * {
flex: 0 0 25rem;
margin: 0 1.5rem 1rem;
}
/* ---------- ヘッダー: 常に画面の上に固定（position: fixed） ----------
* デザインの CSS は sticky。iPhone の Safari でページの端を引っぱる（バウンス）と、sticky のヘッダーはページと一緒に動き、
* fixed のハンバーガーだけが残って見えた（2026-09-30 本人の動画で確認）。ハンバーガーと同じ fixed にそろえ、高さぶん本文を下げる */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
body {
padding-top: 7rem; /* = .header の height */
}
/* ページ内リンク（FAQ のメニューなど）で飛んだ先がヘッダーに隠れないように。デザインはスマホ 6rem（ヘッダー 7rem より小さい）、PC 90px */
@media screen and (max-width: 768px) {
html {
scroll-padding-top: 9rem;
}
}
/* ログイン中の管理バーの下に出す（WordPress の管理バーは 783px 以上 32px、それ未満 46px） */
.admin-bar .header {
top: 32px;
}
.admin-bar .nav__toggle {
top: calc(32px + 1rem);
}
@media screen and (max-width: 782px) {
.admin-bar .header {
top: 46px;
}
.admin-bar .nav__toggle {
top: calc(46px + 1rem);
}
}
/* ---------- スマホだけ改行する（
）・PC だけ出す（ 改行の前の全角空白など） ---------- */
@media screen and (min-width: 769px) {
.gk-sp-br {
display: none;
}
}
@media screen and (max-width: 768px) {
.gk-pc-only {
display: none;
}
}
/* ---------- トップ「売りたい」の 2 つのボタン: アイコンと矢印の位置の基準をボタン自身にする ----------
* デザインの CSS は position を指定せず、影（filter: drop-shadow）が基準になることに頼っている。
* 古い Safari（iPhone SE など）は filter を基準にしないので、アイコンと矢印がボタンの外に飛び、2 つが同じ場所に重なっていた */
.top__sell-link-content {
position: relative;
}
/* ---------- パンくず: 最後（今いるページ）が長いときは「…」で省略する（2026-09-30 本人） ----------
* デザインの CSS は 1 行固定（white-space: nowrap）で幅の上限が無く、長い商品名が画面の外にはみ出して、スマホではページ全体が縮んで表示されていた */
.breadcrumbs > * {
flex: 0 0 auto;
}
.breadcrumbs > .breadcrumbs__text-line {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- ページ送り: 先頭へ・前へ・次へ・最後へ（2026-09-30 本人。先頭・最後尾は二重矢印） ----------
* デザインの CSS は「最初の li・最後の li」を黒丸の矢印にしている。1 ページ目・最後のページでは番号が黒丸になって矢印と重なっていたので、
* その指定を打ち消し、矢印はクラス（.page-nav__arrow）で付ける */
.page-nav ul li:first-child a,
.page-nav ul li:last-child a {
background: #fff;
color: #316FB3;
}
.page-nav ul li:first-child a::before,
.page-nav ul li:last-child a::before {
content: none;
}
.page-nav ul li a.active {
background: #316FB3;
color: #fff;
}
.page-nav ul li a.page-nav__arrow {
background: #181922;
color: #fff;
}
@media (hover: hover) {
.page-nav ul li a.page-nav__arrow:hover {
background: #316FB3;
}
}
.page-nav ul li a.page-nav__arrow::before {
content: "";
position: absolute;
inset: 0;
width: .7rem;
height: 1.2rem;
margin: auto;
background: url("../images/info/icon-arrow-white.svg") no-repeat center / contain;
}
/* 二重矢印: 同じ矢印を 2 つ並べる */
.page-nav ul li a.page-nav__arrow--first::before,
.page-nav ul li a.page-nav__arrow--last::before {
width: 1.3rem;
background:
url("../images/info/icon-arrow-white.svg") no-repeat left center / .7rem 1.2rem,
url("../images/info/icon-arrow-white.svg") no-repeat right center / .7rem 1.2rem;
}
.page-nav ul li a.page-nav__arrow--next::before,
.page-nav ul li a.page-nav__arrow--last::before {
transform: scale(-1, 1);
}
/* PC は番号 5 つ + 矢印 4 つ = 丸 9 個（40px × 9 + 間 10px × 8 = 440px）。デザインの枠（37rem）では収まらない */
@media screen and (min-width: 769px) {
.page-nav {
max-width: 44rem;
}
}
@media screen and (max-width: 768px) {
.page-nav ul li.page-nav__far {
display: none;
}
/* デザインは両端揃え。最初・最後のページは丸が少なく、左右に離れて見えるので中央に寄せる */
.page-nav ul {
justify-content: center;
}
}
/* ---------- 表示アニメーション（下からふわっと）: animate.css（83KB）と WOW.js の代わり ----------
* html.gk-js（JS が動く環境）のときだけ隠して待ち、画面に入ったら gk.js が .is-in を付ける */
.gk-js .wow {
opacity: 0;
transform: translateY(2rem);
transition: opacity .3s ease-out .2s, transform .3s ease-out .2s;
}
.gk-js .wow.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.gk-js .wow {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- 商品カード ----------
* .search-image は「商品を探す」のカテゴリーのアイコンにも使われているので、商品一覧（.search-product）の中だけに当てる */
.search-product .search-image,
.top__product-image {
position: relative;
display: block;
}
/* 商品写真は正方形。デザインの枠（440×336）に収め、切らずに余白を白くする（以前は上下が切れていた） */
.search-product .search-image img,
.top__product-image img {
width: 100%;
height: auto;
aspect-ratio: 440 / 336;
object-fit: contain;
background: #fff;
}
/* トップ「新着・オススメ商品情報」のカード（Figma 3_New。2026-10-01 本人「行間と余白・価格の位置をそろえる」）:
* 250×314、上・左右 15・下 10、写真の下 15、商品名は 2 行分の高さを常に取る（22px × 2。長ければ「…」）、価格はカードの下にそろえる */
.top__product-item {
min-height: 31.4rem !important;
padding: 1.5rem 1.5rem 1rem;
gap: 0;
}
.top__product-item > a {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}
.top__product-image {
margin-bottom: 1.5rem;
}
.top__product-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.4rem;
margin-bottom: 1rem;
}
/* 商品名は両端ぞろえにしない（body が text-align: justify なので、2 行になると「ホ シ ザ キ」のように字間が開いていた） */
.top__product-text,
.search-item .search-text {
text-align: left;
}
/* 見出し（矢印）→ カード 30px・カード → 次の帯 80px */
.top__product-slide-wrap {
padding-bottom: 4.3rem;
}
@media screen and (min-width: 769px) {
/* トップのスライダーの矢印だけ（.recommend__area は商品ページのサムネイルの矢印にも使われている） */
.top__product-slide-wrap .recommend__area {
margin-bottom: 3.2rem;
}
}
/* カードの価格の並び（2026-10-01 本人）: 値下前価格（数字だけ打ち消し線）→ 「価格（税込）」と販売価格を同じ行に。
* デザインの CSS（search-id.css / top.css）の負の margin による重ね方はやめる */
.gk-price-before,
.search-delet.gk-price-before,
.top__product-delet.gk-price-before {
display: block;
width: 100%;
margin: 0;
text-decoration: none;
text-align: right;
}
.gk-price-before del {
text-decoration: line-through;
}
.gk-price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
width: 100%;
margin: 0;
}
.gk-price-row .search-tax,
.gk-price-row .top__product-tax {
flex: 0 0 auto;
margin: 0;
}
/* 価格が無い商品は「価格（税込）」の場所も取らない（「お問い合わせください」を 1 行に収める） */
.gk-price-row .gk-invisible {
display: none;
}
.gk-price-row .search-price,
.gk-price-row .top__product-price {
flex: 1 1 auto;
width: auto;
min-width: 0;
white-space: nowrap; /* 「円」だけ次の行に落ちないように */
}
/* 7 桁以上（100 万円〜）は少し小さくして「価格（税込）」と同じ行に収める（カードの幅 229px〜）。スマホの 2 列はさらに小さく（下） */
.gk-price-row .gk-price--long {
font-size: 2.1rem;
letter-spacing: 0;
}
/* スマホの一覧（2 列・カード幅 165px 前後）: 「価格（税込）」と金額を 1 行に収めるため、文字を小さくする。
* それでも入らない（7 桁・幅 360px 未満など）ときだけ、金額が次の行に落ちる */
@media screen and (max-width: 768px) {
/* カードを低く（2026-10-01 本人。最低の高さ 200。デザインは 299）: 高さは中身で決まるので、中身も詰める。
* 値下前価格が無いカードは、その行の場所を取らない（値下前があるカードと並んでも、価格はカードの下でそろう）。商品名の下の間は 15 → 8 */
.search-product .search-item {
min-height: 20rem;
}
.search-product .search-item .search-text {
margin-bottom: .8rem;
}
.search-product .search-item .gk-price-before.gk-invisible {
display: none;
}
.search-product .search-item .gk-price-before.gk-invisible + .gk-price-row {
margin-top: auto;
}
.search-product .gk-price-row {
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 .4rem;
}
.search-product .gk-price-row .search-tax {
margin-right: auto;
font-size: 1.1rem;
letter-spacing: 0;
white-space: nowrap;
}
.search-product .gk-price-row .search-price {
flex: 0 0 auto;
font-size: 2rem;
line-height: 2.6rem;
white-space: nowrap;
}
.search-product .gk-price-row .search-price small {
font-size: 1.1rem;
}
.search-product .gk-price-row .search-price.gk-price--ask {
font-size: 1.3rem;
}
/* 7 桁以上（100 万円〜）も 1 行に */
.search-product .gk-price-row .search-price.gk-price--long {
font-size: 1.6rem;
letter-spacing: 0;
}
.search-product .gk-price-row .search-price.gk-price--long small {
font-size: 1rem;
margin-left: .2rem;
}
}
/* 価格のまとまりをカードの下にそろえる（商品名の行数が違っても、隣のカードと同じ高さに） */
.search-product .search-item > a {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}
.top__product-item .gk-price-before,
.search-product .search-item .gk-price-before {
margin-top: auto;
}
/* 金額と「円」の間を少し空ける（2026-10-01 本人。カード・値下前価格・商品ページ） */
.search-price small,
.top__product-price small,
.gk-price-before small,
.product__price small {
margin-left: .3rem;
}
/* 価格が無い商品の「お問い合わせください」: 金額と同じ大きさだと収まらないので小さく（行の高さは金額と同じにして、並びをそろえる） */
.search-price.gk-price--ask,
.top__product-price.gk-price--ask {
font-family: inherit; /* 金額は Roboto。日本語は本文の書体で */
font-size: 1.5rem;
line-height: 2.9rem;
letter-spacing: 0.03em;
}
.product__price.gk-price--ask strong {
font-size: 1.8rem;
letter-spacing: 0.03em;
}
@media screen and (min-width: 769px) {
.product__price.gk-price--ask strong {
font-size: 2.2rem;
}
}
/* 場所だけ取って見せない（値下げ前の価格が無いカード・前後の記事が無いときのボタン） */
.gk-invisible {
visibility: hidden;
}
.gk-badge {
position: absolute;
top: .8rem;
left: .8rem;
padding: .2rem 1rem;
border-radius: .4rem;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.8;
color: #fff;
background: #181922;
}
.gk-badge--negotiating {
background: #316FB3;
}
.search-product .gk-status--sold .search-image img,
.gk-status--sold .top__product-image img {
opacity: .6;
}
/* ---------- 商品詳細 ---------- */
/* サムネイルの並び: 左右に払う操作は JS が受ける（縦のスクロールはそのまま） */
.product__thumbnails,
.company__thumbnails {
touch-action: pan-y;
}
/* 表（2026-10-01 本人）: 特記事項は 2 列分の幅。列は中身が長くても広がらない（旧データの特記事項に幅 865 の表があり、PC で列がはみ出し、スマホでページ全体が縮んでいた） */
.product__table-bottom {
grid-template-columns: minmax(0, 1fr);
}
@media screen and (min-width: 1140px) {
.product__table-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-row-gap: 2rem; /* 特記事項の上の間 ＝ 製品ランク・管理番号の下の間（20px）にそろえる（デザインの 30px から） */
}
.product__table-bottom .product__table-layout:empty {
display: none;
}
}
/* 見出しの列: 「サイズ（mm）」が 1 行に収まる幅に（デザインは 79px） */
.product__table-bottom .product__table-term {
flex-basis: 9.6rem;
width: 9.6rem;
}
.product__table-bottom .product__table-mention {
grid-column: 1 / -1;
border-bottom: solid 1px #C0C0C0;
}
@media screen and (max-width: 1139px) {
.product__table-bottom .product__table-mention {
border-top: 0; /* 上の列と続けて見せる */
}
}
/* 特記事項の中の表（本物の表だけ残る。1 セルのものは gk_norm_mention() がほどく）: はみ出さない */
.product__table-desc table {
width: 100% !important;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.product__table-desc td,
.product__table-desc th {
padding: .2rem .4rem;
border: 1px solid #ddd;
overflow-wrap: anywhere;
}
.product__table-desc p:last-child {
margin-bottom: 0;
}
.product__main {
position: relative;
}
.gk-sold-label {
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 2;
padding: .4rem 1.6rem;
border-radius: .4rem;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
background: #181922;
}
.gk-sold-label--nego {
background: #316FB3;
}
.product__slide img {
width: 100%;
height: auto;
}
.product__price--before {
margin-bottom: 0;
color: #888;
}
/* 「商品一覧へ戻る」: 下の間は margin だと main の外に抜けて、灰色の帯と黄色の帯の間に白い隙間ができる。padding で持つ。Figma: ボタンの下 PC 150px・スマホ 100px */
.gk-back {
margin-top: 6rem;
margin-bottom: 0;
padding-bottom: 15rem;
}
@media screen and (max-width: 768px) {
.gk-back {
padding-bottom: 10rem;
}
}
/* ---------- カードの並びの余白: 端の余白 ＝ 列の間（2026-10-01 本人「1 : 1 : 1」） ----------
* デザインの CSS は箱の端が 15px なのに列の間が 20〜45px で、画面いっぱいに使う幅では中央の余白だけ広く見えていた。
* スマホ（2 列）: 端 15 / 間 15。タブレット（769〜1139px）: 端 20 / 間 20。PC（1140px 以上）: 端を列の間（40〜45）以上にする（箱を少し縮める）。
* 対象: 商品一覧・トップ（買いたい/売りたいの 3 つ・大切にしていること）・買取査定について・よくあるご質問のメニュー・ご利用ガイドのランク */
@media screen and (max-width: 768px) {
.search-product {
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1139px) {
.search--products,
.top__buy-wrap,
.top__sell-wrap,
.top__important-wrap,
.satei,
.satei__inner,
.faq__menu {
width: calc(100% - 4rem);
}
.search-product,
.top__important-card,
.satei__top-link,
.satei__service-card,
.satei__point-card,
.faq__menu {
grid-column-gap: 2rem;
}
.search-product,
.top__important-card {
grid-row-gap: 2rem;
}
.satei__smooth-card,
.guide__rank {
grid-column-gap: 3rem; /* 端が 30 */
}
.product__contact-link {
grid-column-gap: 1.5rem; /* 端が 15（769px 付近） */
}
.faq__menu {
grid-template-columns: repeat(2, minmax(0, 35rem));
}
}
@media screen and (min-width: 1140px) {
.search--products,
.faq__menu {
width: calc(100% - 9rem); /* 列の間 45 */
}
.top__important-wrap,
.satei,
.satei__inner {
width: calc(100% - 8rem); /* 列の間 40 */
}
.faq__menu {
grid-template-columns: repeat(3, minmax(0, 35rem));
}
}
/* よくあるご質問のメニュー: ボタンは固定幅 350 で列の中央に置かれていたので、列に合わせて縮む（最大 350）ようにし、並び全体を中央に */
@media screen and (min-width: 769px) {
.faq__menu {
justify-content: center;
}
.faq__menu-item {
width: 100%;
}
.faq__menu-btn {
width: 100%;
max-width: 35rem;
margin-inline: auto;
}
}
/* ---------- 一覧 ---------- */
/* 検索結果の件数（2026-10-01 本人）: 数字の前後に少し余白。数字の下端を「検索結果」「件」の字の下端にそろえる
* （数字はベースラインに乗り、漢字はそれより少し下まであるので、そのぶん数字を下げる） */
.search__result-title strong {
margin: 0 .4rem;
vertical-align: -.25rem;
}
/* 「売約済も表示」（並べ替えの左。2026-10-01 本人）: リンクをチェックボックスの見た目で。検索フォームのチェックボックスと同じ形（20px・角丸・青） */
.search__sold {
display: inline-flex;
align-items: center;
gap: .8rem;
font-weight: 500;
font-size: 1.6rem;
letter-spacing: 0.05em;
text-decoration: none;
}
.search__sold-box {
display: grid;
place-content: center;
width: 2rem;
height: 2rem;
border: 1px solid #c4c4c4;
border-radius: .4rem;
background: #fff;
transition: background-color .15s ease, border-color .15s ease;
}
.search__sold-box::before {
content: "";
width: .5rem;
height: 1rem;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translateY(-1px) rotate(45deg);
visibility: hidden;
}
.search__sold.is-on .search__sold-box {
border-color: #316FB3;
background: #316FB3;
}
.search__sold.is-on .search__sold-box::before {
visibility: visible;
}
@media (hover: hover) {
.search__sold:hover .search__sold-box {
border-color: #316FB3;
}
}
.search__sold:focus-visible {
outline: .2rem solid #316FB3;
outline-offset: .3rem;
border-radius: .3rem;
}
@media screen and (max-width: 768px) {
.search__sold {
gap: .6rem;
font-size: 1.4rem;
}
}
.search__sort a.is-current {
font-weight: 700;
text-decoration: underline;
}
/* 並べ替えの矢印: 選んでいない方は薄く（押したときの向き） */
.search__sort-arrow {
display: inline-block;
margin-left: .2em;
text-decoration: none;
}
.search__sort a:not(.is-current) .search__sort-arrow {
opacity: .35;
}
/* 検索結果の見出しの段（2026-10-03 本人）: 1 段目は「検索結果 ○件」と「売約済も表示・並べ替え」（縮めない・折り返さない）、
* 2 段目に検索条件のタグ（全幅で折り返す）。条件が多いと件数・並べ替えが 1 文字幅の縦書きに潰れていた */
.search__result {
flex-wrap: wrap;
}
.search__result-title,
.search__sort a {
white-space: nowrap;
}
@media screen and (min-width: 769px) {
.search__result-heading,
.search__sort {
flex: 0 0 auto;
}
.search__sort {
margin-left: auto;
}
}
.gk-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8rem;
flex: 0 0 100%;
width: 100%;
margin: 1.6rem 0 .8rem;
padding: 0;
list-style: none;
}
.gk-chip {
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .4rem .8rem .4rem 1.4rem;
border: 1px solid #c4c4c4;
border-radius: 999px;
background: #fff;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.gk-chip__x {
display: grid;
place-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: #e6e6e6;
font-size: 1.2rem;
line-height: 1;
transition: background-color .15s ease, color .15s ease;
}
.gk-chips__clear {
margin-left: .4rem;
font-size: 1.4rem;
text-decoration: underline;
}
@media (hover: hover) {
.gk-chip:hover {
border-color: #316FB3;
color: #316FB3;
}
.gk-chip:hover .gk-chip__x {
background: #316FB3;
color: #fff;
}
.gk-chips__clear:hover {
color: #316FB3;
}
}
.gk-chip:focus-visible,
.gk-chips__clear:focus-visible {
outline: .2rem solid #316FB3;
outline-offset: .2rem;
}
/* スマホ（2026-10-03 本人「タグが積み上がってかっこ悪い。売約済・並べ替えは条件の下に」）:
* 件数 → 条件のタグ（1 行で横にスクロール。画面の端まで）→ 売約済も表示（左）と並べ替え（右）の帯 */
@media screen and (max-width: 768px) {
.search.search--products {
padding-top: 4.3rem; /* search-id.css の 6.5rem を ⅓ 削る（2026-10-03 本人） */
}
.search__result {
flex-wrap: nowrap; /* 縦並びで wrap だと、タグの帯が中身の長さまで広がって画面からはみ出す */
align-items: stretch;
}
.search__result-heading {
margin-bottom: 1.2rem;
}
.gk-chips {
order: 2;
flex-wrap: nowrap;
gap: .6rem;
width: auto;
margin: 0 -1.5rem;
padding: .2rem 1.5rem .6rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* 右端を薄くして、続きがあることを見せる */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.gk-chips::-webkit-scrollbar {
display: none;
}
.gk-chips > li {
flex: 0 0 auto;
}
.gk-chips > li:last-child {
padding-right: 2rem; /* 最後のタグ・「すべて解除」が薄くならない位置までスクロールできるように */
}
.gk-chip {
font-size: 1.3rem;
padding: .3rem .6rem .3rem 1.2rem;
}
.gk-chips__clear {
margin-left: .2rem;
font-size: 1.3rem;
white-space: nowrap;
}
.search__sort {
order: 3;
align-items: center;
width: 100%;
margin-top: .8rem;
padding-top: 1.2rem;
border-top: 1px solid #dcdcdc;
}
.search__sold {
margin-right: auto;
}
}
.gk-empty {
max-width: 80rem;
margin: 4rem auto;
padding: 0 1.5rem;
text-align: center;
line-height: 2;
}
/* 検索フォームの送信ボタン（デザインは a。button にしたので見た目をそろえる） */
button.btn__link {
border: none;
cursor: pointer;
font: inherit;
}
/* ---------- 404: 行き先（キーワード検索・商品を探す・トップへ戻る。2026-10-01 本人） ----------
* デザイン（Figma 22_PC_404）は見出しと説明だけなので、その下に足す。下の余白はボタンのぶん詰める */
.not-found {
padding-bottom: 12rem;
}
.gk-404-search {
width: 100%;
max-width: 56rem;
margin: 5rem auto 0;
}
.gk-404-search__label {
display: block;
margin-bottom: 1rem;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: 0.05em;
text-align: center;
}
.gk-404-search__field {
display: flex;
gap: 1rem;
}
.gk-404-search__input {
flex: 1 1 auto;
min-width: 0;
height: 5rem;
padding: 0 1.5rem;
border: 1px solid #c4c4c4;
border-radius: .5rem;
background: #fff;
font-family: inherit;
font-size: 1.6rem;
box-sizing: border-box;
}
.gk-404-search__input:focus-visible {
outline: .2rem solid #316FB3;
outline-offset: .1rem;
}
.gk-404-search__button {
flex: 0 0 auto;
height: 5rem;
padding: 0 2.6rem;
border: 0;
border-radius: .5rem;
background: #316FB3;
color: #fff;
font-family: inherit;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: 0.1em;
cursor: pointer;
}
.gk-404-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
margin-top: 5rem;
}
.gk-404-links .btn {
margin: 0;
}
@media screen and (min-width: 769px) {
.not-found {
padding-bottom: 15rem;
}
.gk-404-links {
flex-direction: row;
justify-content: center;
gap: 4rem;
}
}
/* ---------- スマホのメニューボタン: キーボード操作時の枠 ---------- */
.nav__toggle:focus-visible {
outline: 2px solid #316FB3;
outline-offset: 2px;
}
/* ---------- フォーム（CF7） ----------
* CF7 はチェックボックス・ラジオを span で何重にも包む。デザインの CSS は「td の直下に label が並ぶ」前提
* （品物カテゴリーは縦一列など）なので、包みの span を display:contents にして、無いのと同じ並びにする。
* span 自体は CF7 の入力チェック・「1 つだけ選択」に使うので消さない。
* 入力欄の包み（.wpcf7-form-control-wrap）も同じ。あると入力欄の幅が包みの幅で決まり、
* 「入力欄の中の説明」（購入金額・住所）が右にずれて 2 行になっていた */
.gk-form .wpcf7-form-control-wrap,
.gk-form .gk-contents,
.gk-form .wpcf7-checkbox,
.gk-form .wpcf7-radio,
.gk-form .wpcf7-acceptance,
.gk-form .wpcf7-list-item {
display: contents;
}
/* 送信中のくるくる: デザインの送信ボタンは「.contact__submit div の中に input だけ」前提（矢印は div::after で右端に描く）。
* CF7 が input の横に足す spinner が場所を取ると、ボタンが 350px → 328px に縮み、文字が左に寄り矢印がはみ出していた。
* ボタンの下に重ねて表示し、並びには参加させない */
.gk-form .contact__submit div .wpcf7-spinner {
position: absolute;
top: 100%;
left: 50%;
margin: 1rem 0 0 -12px;
}
.gk-form .wpcf7-not-valid-tip {
font-size: 1.3rem;
margin-top: .4rem;
}
.gk-form .wpcf7-response-output {
margin: 2rem 0 0;
text-align: center;
}
/* 結果の文が無いときは枠ごと隠す（2026-10-03 本人の指摘: スマホでフォームの下に空の青い枠が出た）。
* CF7 の CSS は init・resetting・submitting の状態しか隠さず、入力の確認中（validating）などでは標準の青い枠だけが残るため */
.gk-form .wpcf7-response-output:empty,
.wpcf7 form.validating .wpcf7-response-output {
display: none;
}
.gk-form .wpcf7-list-item {
margin: 0;
}
/* ---------- お問い合わせ（/contact/）: Figma「16_PC_/contact/」 ----------
* 項目は商品のお問い合わせと同じ部品（見出し・配送先・横並びのチェックボックス）。その見た目は product-detail.css にだけあるので、
* このページが読む satei-form.css の上に同じ指定を足す（.gk-contact-form の中だけ。買取フォームには効かせない） */
.gk-contact-form tr.contact__table-heading {
justify-content: center;
}
.gk-contact-form tr.contact__table-heading--vr2 {
margin-bottom: 5rem;
}
.gk-contact-form tr.contact__table-heading--vr3 {
margin-bottom: 2rem;
}
.gk-contact-form .contact__table-row.contact__table-row--big {
margin-bottom: 5rem;
}
.gk-contact-form .contact__table-term.contact__term-narrow {
min-height: initial;
}
.gk-contact-form .contact__table-title {
font-weight: 700;
font-size: 2rem;
line-height: 3rem;
text-align: center;
letter-spacing: 0.05em;
margin-top: 2rem;
}
.gk-contact-form .contact__checkbox {
justify-content: flex-start;
}
/* 連絡方法・下取り: 選択肢を横に並べる（スマホも Figma どおり横）。丸の選択肢は折り返さない */
.gk-contact-form .contact__table-checkbox--row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 6rem;
margin-bottom: 0;
}
/* ---------- プライバシーポリシー（弊社テンプレートから作成。2026-10-01）: 前文・条の見出し・箇条書き・外部送信先の表 ----------
* 外側の箱（幅・上下の余白）はデザインの .privacy のまま */
.gk-privacy {
font-size: 1.4rem;
line-height: 2.6rem;
letter-spacing: 0.02em;
}
.gk-privacy p {
margin-bottom: 1.2rem;
}
.gk-privacy__lead {
margin-bottom: 4rem !important;
}
.gk-privacy__section {
margin-bottom: 4rem;
}
.gk-privacy__title {
margin-bottom: 1.4rem;
padding-bottom: .8rem;
border-bottom: 1px solid #C3C3C3;
font-weight: 700;
font-size: 1.7rem;
line-height: 2.6rem;
letter-spacing: 0.05em;
}
.gk-privacy__ul,
.gk-privacy__ol {
margin: 0 0 1.2rem;
padding-left: 2.2rem;
}
.gk-privacy__ul {
list-style: disc;
}
.gk-privacy__ol {
list-style: decimal;
}
.gk-privacy__ul li,
.gk-privacy__ol li {
margin-bottom: .4rem;
}
.gk-privacy a {
color: #316FB3;
text-decoration: underline;
overflow-wrap: anywhere;
}
/* 外部送信先の表: スマホは横にスクロール */
.gk-privacy__table-wrap {
margin-bottom: 1.6rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gk-privacy__table {
width: 100%;
min-width: 72rem;
border-collapse: collapse;
font-size: 1.3rem;
line-height: 2rem;
background: #fff;
}
.gk-privacy__table th,
.gk-privacy__table td {
padding: .8rem 1rem;
border: 1px solid #C0C0C0;
text-align: left;
vertical-align: top;
}
.gk-privacy__table thead th {
background: #D9D9D9;
font-weight: 500;
white-space: nowrap;
}
.gk-privacy__table tbody th {
font-weight: 500;
}
.gk-privacy__date {
text-align: right;
}
@media screen and (min-width: 769px) {
.gk-privacy {
font-size: 1.5rem;
line-height: 2.8rem;
}
.gk-privacy__title {
font-size: 1.9rem;
}
}
/* 特定商取引法に基づく表記の本文中のリンク */
.stcl__desc a {
color: #316FB3;
text-decoration: underline;
}
/* フォームの上部の利用目的の一文（プライバシーポリシーへのリンク付き） */
.contact__privacy-note {
width: 100%;
max-width: 74.2rem; /* 入力欄の列と同じ幅・中央 */
margin: 0 auto 2rem;
font-size: 1.3rem;
line-height: 2.2rem;
}
.contact__privacy-note a {
color: #316FB3;
text-decoration: underline;
}
/* 送信ボタンの下の注意書き（回答の目安・営業メールお断り）: 小さく（2026-10-01 本人。デザインは PC 16px・スマホ 13px） */
.contact__bottom-text--vr2 {
font-size: 1.1rem;
line-height: 1.9rem;
}
@media screen and (min-width: 769px) {
.contact__bottom-text--vr2 {
font-size: 1.2rem;
line-height: 2.1rem;
}
}
/* Cloudflare Turnstile（スパム対策）: ふだんは何も出ない。確認が必要なときだけ、送信ボタンの上に中央で出る */
.contact__turnstile {
display: flex;
justify-content: center;
}
.contact__turnstile .cf-turnstile:not(:empty) {
margin-bottom: 2rem;
}
/* 丸の選択肢（お問い合わせ・商品のお問い合わせ共通 = form.gk-form）: 折り返さない。
* 連絡方法・下取りの 2 行で 2 つ目（メール・なし）の位置がそろうように、1 つ目の幅を固定 */
.gk-form .contact__table-checkbox--row .contact__custom-radio {
flex-shrink: 0;
min-width: 7rem;
margin-right: 0;
white-space: nowrap;
}
.gk-contact-form .contact__shipping-row[hidden] {
display: none !important;
}
@media screen and (max-width: 768px) {
.gk-contact-form tr.contact__table-heading {
align-items: center;
}
}
@media screen and (min-width: 769px) {
.gk-contact-form .contact__table-title {
font-size: 2.5rem;
margin-top: 3rem;
margin-bottom: 2rem;
}
.gk-contact-form .contact__table-checkbox--row {
gap: 8rem;
}
}
/* 冒頭の文の電話番号・「買取査定フォーム」: satei-form.css は本文と同じ色・下線なしで、リンクに見えないので下線を付ける（フォームの「プライバシーポリシー」と同じ） */
.contact__read-text a {
text-decoration: underline;
text-underline-offset: .2em;
}
/* ---------- 送信完了（/contact/thanks/）: デザインが無いので、フォームの枠（contact__form）に合わせる ---------- */
.contact_table {
box-sizing: border-box;
width: calc(100% - 3rem);
max-width: 80rem;
margin: 6rem auto;
padding: 4rem 2rem;
background: #fff;
border-radius: 2rem;
}
@media screen and (min-width: 769px) {
.contact_table {
padding: 6rem 8rem;
margin: 8rem auto;
}
}
.thankyou_message .complete-text {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.8;
text-align: center;
margin-bottom: 3rem;
}
.thankyou_message .no-reply {
font-weight: 700;
margin-bottom: 1rem;
}
.thankyou_message .no-mail {
padding-left: 2rem;
list-style: decimal;
line-height: 1.9;
}
.thankyou_message .no-mail li + li {
margin-top: 1.2rem;
}
.thankyou_message a {
color: #316FB3;
text-decoration: underline;
}
/* ---------- 商品一覧: 「別の条件で探す」（検索フォームのポップアップを開くボタン） ----------
* PC（769px 以上）: 右下に固定する丸いボタン（虫眼鏡 120px + 吹き出し）。画面の右・下から 40px。
* Figma「03_PC_」（2026-09-30）は一覧の下の横長ボタンだが、PC は虫眼鏡のまま残す（2026-09-30 本人）。
* 一覧（main）の終わりまで来たらそこで止まり、黄色の帯・フッターには重ならない（position: sticky）。
* 止まる位置はページ送りの右横（一覧の下端から 28px 上） */
.gk-search-fab {
--fab-h: 18.9rem; /* 吹き出し 52 + 三角 7 + 間 10 + 丸 120 */
--fab-gap: 4rem; /* 画面の端から */
--fab-rest: 2.8rem; /* 止まったときの一覧の下端から */
/* 一覧の下端に重ねて置く（高さぶん上にずらす）。下の余白は margin だと main の外に抜けるので padding で持つ */
position: sticky;
bottom: calc(var(--fab-gap) - var(--fab-rest));
z-index: 50;
display: flex;
justify-content: flex-end;
margin: calc(-1 * (var(--fab-h) + var(--fab-rest))) var(--fab-gap) 0;
padding-bottom: var(--fab-rest);
pointer-events: none;
}
.gk-search-fab__button {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.7rem; /* 三角 7 + 間 10 */
padding: 0;
border: 0;
background: none;
font-family: inherit; /* button は既定で OS の書体になる */
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.gk-search-fab__label {
position: relative;
display: grid;
place-items: center;
width: 20rem;
height: 5.2rem;
border-radius: 2.6rem;
background: #181922;
color: #fff;
font-weight: 700;
font-size: 1.8rem;
line-height: 1;
letter-spacing: 0.05em;
}
.gk-search-fab__label::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: .7rem .5rem 0;
border-color: #181922 transparent transparent;
}
.gk-search-fab__circle {
display: grid;
place-items: center;
width: 12rem;
height: 12rem;
border-radius: 50%;
background: #316FB3;
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .15);
transition: transform .2s ease;
}
.gk-search-fab__circle svg {
width: 6rem;
height: 6rem;
}
/* :hover はマウスのある環境だけ（スマホは押したあと :hover が残る。生成 CSS は tools/css-hover.php が同じことをしている） */
@media (hover: hover) {
.gk-search-fab__button:hover .gk-search-fab__circle {
transform: scale(1.05);
}
}
.gk-search-fab__button:focus-visible {
outline: none;
}
.gk-search-fab__button:focus-visible .gk-search-fab__circle {
outline: .3rem solid #316FB3;
outline-offset: .4rem;
}
/* スマホ（768px 以下）: Figma「03_SP_」の横長のボタン（300×60・黒・＋）。一覧を見ている間は画面の下に追従し（灰色の帯 80px の中）、
* 一覧の終わりまで来たらページ送りの下で止まる。帯は追従している間だけ出す（gk.js が .is-stuck を付ける） */
@media screen and (max-width: 768px) {
.search--products {
padding-bottom: 14rem; /* ボタン 60 + その下 80（ここにボタンが止まる） */
}
.gk-search-fab {
--fab-rest: 7rem; /* 帯の下端から一覧の下端まで */
bottom: calc(-1 * var(--fab-rest));
justify-content: center;
margin: -15rem 0 0; /* 帯 80（上下 10 + ボタン 60）+ fab-rest */
padding: 1rem 0 calc(1rem + var(--fab-rest));
}
.gk-search-fab::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 8rem;
background: rgba(0, 0, 0, .15); /* Figma: #d9d9d9 の乗算 */
opacity: 0;
transition: opacity .2s ease;
}
.gk-search-fab.is-stuck::before {
opacity: 1;
}
.gk-search-fab__button {
position: relative;
flex-direction: row;
justify-content: center;
gap: 0;
width: 30rem;
max-width: calc(100% - 3rem);
height: 6rem;
border-radius: 5rem;
background: #181922;
box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .1);
}
.gk-search-fab__label {
position: static;
display: block;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-weight: 500;
font-size: 1.6rem;
letter-spacing: 0.1em;
}
.gk-search-fab__label::after {
content: none;
}
/* 右の白丸に「＋」（虫眼鏡は出さない） */
.gk-search-fab__circle {
position: absolute;
top: 0;
bottom: 0;
right: 2rem;
width: 2rem;
height: 2rem;
margin: auto;
background:
linear-gradient(#181922, #181922) center / .8rem .12rem no-repeat,
linear-gradient(#181922, #181922) center / .12rem .8rem no-repeat,
#fff;
box-shadow: none;
}
.gk-search-fab__circle svg {
display: none;
}
.gk-search-fab__button:hover .gk-search-fab__circle {
transform: none;
}
.gk-search-fab__button:focus-visible {
outline: .3rem solid #316FB3;
outline-offset: .3rem;
}
.gk-search-fab__button:focus-visible .gk-search-fab__circle {
outline: none;
}
}
@media (prefers-reduced-motion: reduce) {
.gk-search-fab__circle,
.gk-search-fab::before {
transition: none;
}
}
/* 追従しているかどうかを調べる目印（gk.js がボタンのすぐ後ろに置く。ボタンの下端 1px に重ねる） */
.gk-stick-mark {
display: block;
height: 1px;
margin-top: -1px;
pointer-events: none;
}
/* 商品を探す（/search/）のスマホの余白を詰める（2026-10-01 本人。デザインどおりだと間延びして見えた。PC はデザインのまま）:
* 上端 → 「商品カテゴリー」の見出し 80 → 54。カテゴリー → 「詳細条件」の見出し 112 → 64（下の指定）。ポップアップの中は別の指定（.gk-search-modal …） */
@media screen and (max-width: 768px) {
.search__container {
padding-top: 5.4rem;
}
}
/* 「検索条件を解除する」（button）: 本文と同じ書体に（既定では OS の書体になる） */
.product-search__reset {
font-family: inherit;
cursor: pointer;
}
/* 「売約済の商品も表示する」（販売状態の 3 択と注意書きの代わり。2026-10-01 本人）: 詳細条件の下・ボタンの上に中央で */
.product-search__sold {
display: flex;
justify-content: center;
margin-top: 5rem;
}
.product-search__bar {
margin-top: 4rem;
}
@media screen and (max-width: 768px) {
.product-search__sold {
margin-top: 4rem;
}
.product-search__bar {
margin-top: 3rem;
}
}
/* ---------- 検索フォーム（/search/ とポップアップ共通）: スマホ（768px 以下）の見た目 ----------
* Figma「02_SP_/search/」「03_SP_」（2026-09-30）。デザインの CSS（search.css / search-form.css）の上に足す。
* search-form.css は先頭に .gk-search-modal が付くぶん強いので、ここは .product-search（form）を付けて同じ強さにそろえる */
@media screen and (max-width: 768px) {
/* 商品カテゴリー: 写真をやめ、チェックボックスを縦に並べる（25px の箱・間 10px） */
.product-search .search-wrap {
margin-bottom: 6.4rem; /* カテゴリーの並び → 詳細条件の見出し。デザインは 112px（2026-10-01 本人「余白を詰める」） */
}
.product-search .search-card {
display: flex;
flex-direction: column;
gap: 1rem;
width: auto;
max-width: none;
margin: 0;
}
.product-search .search-item > .search-link,
.product-search .search-item > .search-link:has(.search-item__checkbox:checked) {
flex-direction: row;
align-items: center;
gap: 1.5rem;
width: auto;
height: auto;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.product-search .search-item > .search-link:has(.search-item__checkbox:focus-visible) {
outline: none; /* 枠はチェックボックス自身に出る */
}
.product-search .search-item__checkbox {
position: static;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
}
.product-search .search-item__checkbox::before,
.product-search .search-filter__checkbox::before {
width: .6rem;
height: 1.2rem;
}
.product-search .search-image {
display: none;
}
.product-search .search-item-wrap {
display: block;
min-height: 0;
}
.product-search .search-item > .search-link .search-item-text {
font-weight: 400;
font-size: 1.5rem;
line-height: 2.2rem;
text-align: left;
}
/* カード用の改行・小さい文字（スチーム
コンベクション、（キューブアイス））は 1 行・同じ大きさに */
.product-search .search-item-text br {
display: none;
}
.product-search .search-item-text small {
display: inline;
font-size: inherit;
}
/* 詳細条件: 見出し 100×30 の列と、内容の列の 2 列にそろえる（2026-10-01 本人）。
* 選択肢が多い行は内容の列の中で折り返す（見出しの下には流れ込まない）。見出しは行の上にそろえる */
.product-search .search-filter {
margin-top: 0;
}
.product-search .search-filter__columns,
.product-search .search-filter__column {
gap: 2.5rem;
}
.product-search .search-filter__row {
display: grid;
grid-template-columns: 10rem minmax(0, 1fr);
align-items: start;
column-gap: 2rem;
min-height: 0;
}
.product-search .search-filter__term {
grid-column: 1;
width: 10rem;
min-height: 3rem;
margin: 0;
padding: .4rem .2rem;
letter-spacing: 0; /* 「キーワード検索」（7 文字）を 100px に 1 行で収める */
white-space: nowrap;
}
.product-search .search-filter__options,
.product-search .search-filter__options--power,
.product-search .search-filter__value {
grid-column: 2;
grid-row: 1;
}
.product-search .search-filter__options,
.product-search .search-filter__options--power {
display: flex;
flex-wrap: wrap;
gap: 1rem 2.5rem;
min-height: 3rem; /* 1 行のときは見出し（30px）と上下の中央がそろう */
padding-block: 0;
}
.product-search .search-filter__option {
gap: 1.5rem;
font-weight: 400; /* 上のカテゴリーの並びと同じ太さに（デザインは 500。2026-10-01 本人） */
}
.product-search .search-filter__checkbox {
width: 2.5rem;
height: 2.5rem;
}
.product-search .search-filter__input {
height: 3.5rem;
}
/* 「この条件で探す」: フォームを見ている間は画面の下に追従し、フォームの終わりで本来の位置に止まる（Figma「条件で探すボタンをバナー固定」）。
* 灰色の帯（80px）は追従している間だけ（gk.js が .is-stuck を付ける）。/search/ では帯を画面の幅いっぱいに伸ばす（影で伸ばし、上下は切る） */
.product-search__bar {
position: sticky;
bottom: 0;
z-index: 3;
padding: 1rem 0;
}
.product-search__bar.is-stuck {
background: rgba(0, 0, 0, .15); /* Figma: #d9d9d9 の乗算 */
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .15);
clip-path: inset(0 -100vmax);
}
.product-search__bar .product-search__submit {
max-width: 100%;
margin-bottom: 0;
}
.product-search__reset-wrap {
margin-top: 1rem;
}
}
/* ---------- 商品一覧: 検索フォームのポップアップ（