/*
 * 中古スマホ価格ドットコム
 * Front page v1
 *
 * Camera-site design DNA:
 * clean white cards / blue accent / generous spacing / responsive grid.
 */

.usp-home {
width: min(1180px, calc(100% - 40px));
margin: 0 auto 80px;
padding: 0;
}

.usp-home *,
.usp-home *::before,
.usp-home *::after {
box-sizing: border-box;
}

.usp-home-hero {
margin: 36px 0 54px;
padding: 48px;
border: 1px solid #dce5f2;
border-radius: 24px;
background:
linear-gradient(
135deg,
#f7faff 0%,
#ffffff 58%,
#f2f7ff 100%
);
box-shadow: 0 14px 36px rgba(20, 49, 88, 0.07);
}

.usp-home-hero__copy {
max-width: 820px;
}

.usp-home-eyebrow {
margin: 0 0 8px;
color: #2467c8;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.13em;
line-height: 1.4;
}

.usp-home-hero h2,
.usp-home-section__head h2,
.usp-home-about h2 {
margin: 0;
color: #17233b;
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.02em;
}

.usp-home-hero__lead,
.usp-home-section__head > p:last-child,
.usp-home-about > p:last-child {
margin: 14px 0 0;
color: #58657a;
font-size: 16px;
line-height: 1.9;
}

.usp-home-hero__count {
display: inline-flex;
align-items: baseline;
gap: 5px;
margin: 20px 0 0;
padding: 7px 13px;
border-radius: 999px;
background: #eaf2ff;
color: #285b9d;
font-size: 13px;
font-weight: 700;
}

.usp-home-hero__count strong {
color: #154f9f;
font-size: 18px;
}

.usp-home-search {
margin-top: 30px;
}

.usp-home-search__main {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 8px;
border: 1px solid #cfd9e8;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 24px rgba(23, 45, 78, 0.08);
}

.usp-home-search__input {
width: 100%;
min-width: 0;
height: 54px;
margin: 0;
padding: 0 18px;
border: 0;
outline: 0;
background: transparent;
color: #17233b;
font-size: 16px;
}

.usp-home-search__input::placeholder {
color: #8b97a9;
}

.usp-home-search__input:focus {
outline: 2px solid #84afe8;
outline-offset: -2px;
border-radius: 9px;
}

.usp-home-search__button {
min-width: 132px;
height: 54px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 10px;
background: #2368c9;
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
transition:
background-color 0.18s ease,
transform 0.18s ease;
}

.usp-home-search__button:hover {
background: #1857ae;
transform: translateY(-1px);
}

.usp-home-section {
margin: 64px 0 0;
}

.usp-home-section__head {
max-width: 780px;
margin-bottom: 26px;
}

.usp-home-section__head h2,
.usp-home-about h2 {
font-size: clamp(24px, 3vw, 34px);
}

.usp-home-maker-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}

.usp-home-maker-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 164px;
padding: 22px;
border: 1px solid #dce3ed;
border-radius: 16px;
background: #fff;
color: inherit;
text-decoration: none;
box-shadow: 0 7px 20px rgba(25, 48, 82, 0.05);
transition:
transform 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}

.usp-home-maker-card:hover {
transform: translateY(-3px);
border-color: #9dbce4;
box-shadow: 0 12px 28px rgba(25, 48, 82, 0.10);
}

.usp-home-maker-card__name {
color: #17233b;
font-size: 20px;
font-weight: 800;
line-height: 1.3;
}

.usp-home-maker-card__desc {
margin-top: 7px;
color: #69758a;
font-size: 13px;
line-height: 1.6;
}

.usp-home-maker-card__meta {
display: inline-flex;
align-self: flex-start;
margin-top: 12px;
padding: 4px 9px;
border-radius: 999px;
background: #f0f5fc;
color: #58708f;
font-size: 12px;
font-weight: 700;
}

.usp-home-maker-card__arrow {
margin-top: auto;
padding-top: 15px;
color: #2368c9;
font-size: 13px;
font-weight: 800;
}

.usp-home-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

.usp-home-feature-card {
position: relative;
min-height: 220px;
margin: 0;
padding: 25px 22px 23px;
border: 1px solid #e0e6ee;
border-radius: 16px;
background: #fff;
box-shadow: 0 7px 20px rgba(25, 48, 82, 0.05);
}

.usp-home-feature-card__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 19px;
border-radius: 11px;
background: #eaf2ff;
color: #2368c9;
font-size: 13px;
font-weight: 900;
}

.usp-home-feature-card h3 {
margin: 0;
color: #1b2940;
font-size: 18px;
font-weight: 800;
line-height: 1.5;
}

.usp-home-feature-card p {
margin: 10px 0 0;
color: #667286;
font-size: 14px;
line-height: 1.8;
}

.usp-home-product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

.usp-home-product-card {
overflow: hidden;
margin: 0;
border: 1px solid #dde4ed;
border-radius: 17px;
background: #fff;
box-shadow: 0 7px 20px rgba(25, 48, 82, 0.06);
transition:
transform 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}

.usp-home-product-card:hover {
transform: translateY(-4px);
border-color: #a8c3e7;
box-shadow: 0 14px 30px rgba(25, 48, 82, 0.11);
}

.usp-home-product-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}

.usp-home-product-card__image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
padding: 18px;
overflow: hidden;
background: #f7f9fc;
border-bottom: 1px solid #edf0f4;
}

.usp-home-product-card__image img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
}

.usp-home-product-card__noimage {
color: #9aa5b5;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}

.usp-home-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 18px;
}

.usp-home-product-card__maker {
margin: 0 0 6px;
color: #2368c9;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
}

.usp-home-product-card__title {
margin: 0;
color: #17233b;
font-size: 16px;
font-weight: 800;
line-height: 1.55;
}

.usp-home-product-card__storage {
margin: 8px 0 0;
color: #718096;
font-size: 13px;
}

.usp-home-product-card__price {
display: flex;
flex-direction: column;
gap: 2px;
margin: 15px 0 0;
padding-top: 14px;
border-top: 1px solid #edf0f4;
}

.usp-home-product-card__price span {
color: #7b8798;
font-size: 11px;
font-weight: 700;
}

.usp-home-product-card__price strong {
color: #d74343;
font-size: 21px;
font-weight: 900;
line-height: 1.3;
}

.usp-home-product-card__button {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
margin-top: auto;
padding: 10px 13px;
border-radius: 9px;
background: #2368c9;
color: #fff;
font-size: 13px;
font-weight: 800;
text-align: center;
}

.usp-home-product-card__price + .usp-home-product-card__button {
margin-top: 16px;
}

.usp-home-product-card__storage + .usp-home-product-card__button,
.usp-home-product-card__title + .usp-home-product-card__button {
margin-top: 16px;
}

.usp-home-about {
margin: 68px 0 0;
padding: 34px 38px;
border: 1px solid #e0e6ee;
border-radius: 18px;
background: #f8fafc;
}

@media (max-width: 960px) {

.usp-home-maker-grid,
.usp-home-feature-grid,
.usp-home-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usp-home-hero {
padding: 38px;
}

}

@media (max-width: 640px) {

.usp-home {
width: min(100% - 24px, 1180px);
margin-bottom: 56px;
}

.usp-home-hero {
margin-top: 20px;
margin-bottom: 44px;
padding: 26px 18px;
border-radius: 18px;
}

.usp-home-hero h2 {
font-size: 27px;
}

.usp-home-hero__lead {
font-size: 14px;
}

.usp-home-search__main {
grid-template-columns: 1fr;
padding: 7px;
}

.usp-home-search__input {
height: 50px;
padding: 0 13px;
font-size: 15px;
}

.usp-home-search__button {
width: 100%;
height: 48px;
}

.usp-home-section {
margin-top: 50px;
}

.usp-home-maker-grid {
grid-template-columns: 1fr;
gap: 10px;
}

.usp-home-feature-grid,
.usp-home-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.usp-home-feature-card {
min-height: 0;
padding: 19px 16px;
}

.usp-home-feature-card h3 {
font-size: 15px;
}

.usp-home-feature-card p {
font-size: 12px;
}

.usp-home-product-card__image {
padding: 11px;
}

.usp-home-product-card__body {
padding: 13px;
}

.usp-home-product-card__title {
font-size: 14px;
}

.usp-home-product-card__price strong {
font-size: 18px;
}

.usp-home-about {
margin-top: 52px;
padding: 26px 20px;
}

}

@media (max-width: 390px) {

.usp-home-feature-grid,
.usp-home-product-grid {
grid-template-columns: 1fr;
}

}

/* =========================================================
 * STAGE31-0L / HOME VISUAL POLISH
 * ======================================================= */

html {
scroll-behavior: smooth;
}

#phone-search,
#makers,
#recent,
#about {
scroll-margin-top: 110px;
}

.usp-home .usp-home-search__button,
.usp-home .usp-home-search__button:not(:hover):not(:active) {
border: 0 !important;
background: #2368c9 !important;
color: #ffffff !important;
box-shadow: none !important;
}

.usp-home .usp-home-search__button:hover,
.usp-home .usp-home-search__button:active {
background: #1857ae !important;
color: #ffffff !important;
}

.usp-home .usp-home-search__button:focus {
outline: 3px solid rgba(35, 104, 201, 0.26);
outline-offset: 2px;
}

.usp-home .usp-home-search__input:focus {
outline: 2px solid #7aa9e8;
outline-offset: -2px;
border-radius: 9px;
}

.usp-home-hero {
margin-top: 24px;
}

@media (min-width: 961px) {

.usp-home-product-card__image {
aspect-ratio: auto;
height: 360px;
}

}

@media (max-width: 640px) {

.usp-home-hero {
margin-top: 12px;
}

#phone-search,
#makers,
#recent,
#about {
scroll-margin-top: 80px;
}

}

/* =========================================================
   TOP product image notice v1
   Same visual language as 中古カメラ価格ドットコム.
   ========================================================= */

.usp-home-product-card__image::after {
content: "画像はイメージです";

position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;

padding: 4px 8px;

border-radius: 999px;

background: rgba(255, 255, 255, 0.90);

color: #64748b;

font-size: 11px;
font-weight: 600;
line-height: 1.4;

box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);

pointer-events: none;
}

/* Mobile / tablet: slightly smaller, same as camera family. */

@media only screen and (max-width: 892px) {

.usp-home-product-card__image::after {
right: 8px;
bottom: 8px;

padding: 3px 7px;

font-size: 10px;
}
}