/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Noto Serif JP', serif;
color: #101828;
background: var(--white);
}
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; }
a:hover {
opacity: 0.6;
}
/* ─── Variables ─── */
:root {
--green-dark:   #006045;
--green-mid:    #007a55;
--green-light:  #d0fae5;
--gold:         #af9028;
--bg-gray:      #f5f6f5;
--bg-gray2:      #d5d5d5;
--text-dark:    #101828;
--text-mid:     #4a5565;
--text-light:   #6a7282;
--border:       #e5e7eb;
--white:        #fff;
--red:          #ff1b03;
--container:    1224px;
}
::marker {
display: none;
}
.trim {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.bg-gray {
background: var(--bg-gray);
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.container { max-width: var(--container); margin: 0 auto; width: 100%; padding: 60px 12px; }
.container-narrow { max-width: 800px; margin: 0 auto; width: 100%; padding: 60px 12px; }
/* ══════════════════════════════════════════
SECTION COMMON HEADER
══════════════════════════════════════════ */
.section-header {
text-align: center;
margin-bottom: 32px;
}
.section-title {
font-size: clamp(1.5rem, 1.139rem + 1.48vw, 2.25rem);
font-weight: 600;
margin-bottom: clamp(0.25rem, 0.13rem + 0.49vw, 0.5rem);
text-align: center;
line-height: 1.5;
}
.section-subtitle {
font-size: clamp(0.875rem, 0.815rem + 0.25vw, 1rem);
margin-bottom: clamp(1.5rem, 1.019rem + 1.98vw, 2.5rem);
text-align: center;
}
.flow-subtitle {
font-size: clamp(0.875rem, 0.815rem + 0.25vw, 1rem);
margin-bottom: clamp(2.75rem, 2.389rem + 1.48vw, 3.5rem);
text-align: center;
}
.result-tag{
display: inline-block;
font-size: clamp(0.625rem, 0.565rem + 0.25vw, 0.75rem);
font-weight: 600;
color: var(--white);
border-radius: 8px;
padding: 4px 8px;
margin-bottom: 4px;
background: var(--green-dark);
}
/* ベタ塗り・白文字 */
.result-tag.tag-color-1{ background:#c0392b; } /* red */
.result-tag.tag-color-2{ background:#c0622a; } /* orange */
.result-tag.tag-color-3{ background:#b08800; } /* amber */
.result-tag.tag-color-4{ background:#2d7a5a; } /* green */
.result-tag.tag-color-5{ background:#1a7a8a; } /* teal */
.result-tag.tag-color-6{ background:#2563a8; } /* blue */
.result-tag.tag-color-7{ background:#6d47b3; } /* purple */
.result-tag.tag-color-8{ background:#a0306a; } /* magenta */
/* パンくずリスト*/
.breadcrumb {
padding: 8px 0;
background: var(--white);
border-bottom: 1px solid #e5e7eb;
}
.breadcrumb__inner {
max-width: var(--container);
margin: 0 auto;
    padding: 0 12px;
}
.breadcrumb__list {
display: flex;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
color: #6b7280;
flex-wrap: wrap;
}
.breadcrumb__item {
display: flex;
align-items: center;
}
.breadcrumb__item + .breadcrumb__item::before {
content: '›';
margin: 0 6px;
color: #9ca3af;
}
.breadcrumb__link {
color: var(--green-dark);
text-decoration: none;
}
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__item--current {
color: #6b7280;
}
/* ── 資格リスト ── */
.ar-license {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.ar-license__item {
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border-radius: 8px;
padding: 14px 18px;
font-size: 14px;
color: #374151;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.ar-license__check {
color: var(--green-dark);
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.license-footer {
text-align: center;
}
.license-footer p {
margin: 32px 0 20px;
}
/* ── License ── */
.license-section__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
.license-section__header {
text-align: center;
margin-bottom: clamp(2.625rem, 2.144rem + 1.98vw, 3.625rem);
}
.license-section__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 860px;
margin: 0 auto;
}
.license-section__item {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.license-section__label {
font-size: 12px;
font-weight: 600;
color: var(--green-dark);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 8px;
}
.license-section__value {
font-weight: 600;
line-height: 1.6;
margin: 0;
}
.license-section__value span {
font-size: 13px;
font-weight: 400;
}
/* 出張買取の流れ ── */
.flow-section__header {
text-align: center;
margin-bottom: 62px;
}
.flow-section__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.flow-section__step {
position: relative;
background: var(--white);
border-radius: 8px;
padding: 52px 20px 28px;
text-align: center;
}
.flow-section__step.bg-gray {
background: var(--bg-gray);
}
.flow-section__step-num {
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--green-dark, var(--green-dark));
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 20px;
color: var(--white);
line-height: 1;
}
.flow-section__step-heading {
font-weight: 600;
font-size: 18px;
margin-bottom: clamp(0.5rem, 0.38rem + 0.49vw, 0.75rem);
}
.flow-section__step-text {
font-size: 13px;
line-height: 1.75;
margin: 0;
text-align: left;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.flow-section__steps {
grid-template-columns: repeat(2, 1fr);
gap: 40px 24px;
}
}
@media (max-width: 768px) {
.flow-section__title {
font-size: 26px;
}
.flow-section__steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.flow-section__steps {
grid-template-columns: 1fr;
gap: 60px 24px;
}
.flow-section__step {
padding: 40px 16px 20px;
}
}
/* ══════════════════════════════════════════
UTILITY WRAPPER
══════════════════════════════════════════ */
.section-wrap { padding: 60px 0; }
.w-full { width: 100%; }
/* ══════════════════════════════════════════
RESPONSIVE: MOBILE (≤768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {
.container,.container-narrow { padding: 40px 12px; }
/* ─ Section common ─ */
.section-header { margin-bottom: 20px; }
}
@media (max-width: 640px) {
.ar-license {
grid-template-columns: 1fr;
}
.license-section__grid { grid-template-columns: 1fr; }
}