/* ============================================
Reset & Base
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background: #ffffff;
color: #1f1915;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
position: relative;
text-decoration: none;
overflow: hidden;
}
a::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
transition: background .2s;
pointer-events: none;
}
a > * {
position: relative;
z-index: 1;
}
button {
font: inherit;
cursor: pointer;
border: 0;
background: transparent;
}
a {
transition: opacity .2s ease;
}
a:hover {
opacity: .8;
}
.s01-btn:hover:before,
.s02-btn:hover:before {
background: rgba(0,0,0,.4);
}
.sp-br {
display: none;
}
@media (max-width: 767px) {
.sp-br {
display: block;
}
}
.btn-roll-wrap {
display: block;
height: 1.5em;
overflow: hidden;
line-height: 1.5em;
}
.btn-roll {
display: flex;
flex-direction: column;
height: 3em;
transition: transform .45s cubic-bezier(.19, 1, .22, 1);
}
.btn-roll-text {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 1.5em;
line-height: 1.5em;
white-space: nowrap;
}
.s01-btn:hover .btn-roll,
.s02-btn:hover .btn-roll {
transform: translateY(-1.5em);
}
/* ============================================
Layout Root: 買取LP (#240:1373)
designedWidth: 1440px, alignItems: center
============================================ */
.buyback-lp {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: #ffffff;
}
/* ============================================
Frame 1: Header (#240:1374)
layout: column, padding: 16px, gap: 16px, justify: center, align: stretch
sizing: horizontal contextual (=fill), vertical hug
fills: rgba(255, 255, 255, 0.7)
effects: backdrop-filter: blur(10px)
============================================ */
.section-01 {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
max-width: 100%;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 16px;
background: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: box-shadow 0.2s;
}
/* Shadow added by JS when scrolled */
.section-01.is-scrolled {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* Inner row (#240:1375): space-between, align: center */
.s01-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Logo area (#240:1376): column, gap: 2.64px, align: center */
.s01-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.64px;
}
.s01-logo img {
width: 165px;
height: 52.76px;
}
.scroll-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: absolute;
bottom: -45px;
}
.scroll-arrow span {
width: 35px;
height: 35px;
border-right: 8px solid #ff7426;
border-bottom: 8px solid #ff7426;
transform: rotate(45deg);
}
/* Logo text (#273:2178): Inter Semi Bold 15px, color #040000 */
.s01-logo-text {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
color: #040000;
line-height: 1;
white-space: nowrap;
}
.s01-logo-text .tight-o {
letter-spacing: -0.56em;
}
.s01-logo-text .tight-close {
letter-spacing: -0.57em;
}
/* Right nav area (#240:1387): row, gap: 24px, align: center */
.s01-nav-area {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
/* Menu (#240:1388): row, gap: 25px */
.s01-menu {
display: flex;
flex-direction: row;
gap: 25px;
}
/* Menu item: Noto Sans JP Medium 16/19, color #1F1915, height 19 */
.s01-menu-item {
display: flex;
flex-direction: column;
height: 19px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #1f1915;
}
/* Header phone block (#623:2511): 212x50, VERTICAL, gap 2, center */
.s01-phone {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* Phone number row (#623:2512): HORIZONTAL, gap 3, center */
.s01-phone-number-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
}
/* Phone icon (#623:2513): 31.4 x 20.6, #009944 (reuses same SVG) */
.s01-phone-icon {
width: 31.4px;
height: 20.6px;
flex: 0 0 auto;
}
/* Phone number (#623:2518): Roboto SemiBold 29, -0.04em, #3B3632 */
.s01-phone-number {
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 29px;
line-height: 1;
letter-spacing: -0.04em;
color: #3b3632;
}
/* Hours row (#623:2519): HORIZONTAL, gap 4 */
.s01-phone-hours {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
/* Hours group (#623:2520 / 623:2524): HORIZONTAL, gap 4, center */
.s01-phone-hours-group {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
/* Hours label (#623:2521 / 2525): Noto Sans JP Bold 11, -0.04em, #1F1815 */
.s01-phone-hours-label {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 11px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Hours time (#623:2522 / 2526): Roboto Medium 14, -0.04em, #1F1815 */
.s01-phone-hours-time {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Hours slash (#623:2523): Noto Sans JP Regular 11, -0.04em, #1F1815 */
.s01-phone-hours-slash {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size: 11px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Buttons wrapper (#240:1394): row, gap: 16px, align: center */
.s01-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
/* Base button: Noto Sans JP Bold 18/22, white text, borderRadius: 98.7754px */
.s01-btn {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 12.3469px;
border-radius: 98.7754px;
color: #ffffff;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 22px;
}
/* 無料査定する (#240:1395): fill #1E74E0, padding 16px 40.7449px */
.s01-btn-quote {
background: #1e74e0;
padding: 16px 40.7449px;
}
/* LINE査定 (#240:1396): fill #1CC435, w=165 h=53, padding 16px 38.2755px */
.s01-btn-line {
background: #1cc435;
height: 53px;
padding: 16px 38.2755px;
}
.s01-btn-line img {
width: 24.69px;
height: 24.69px;
}
.s01-menu-item {
display: inline-block;
overflow: hidden;
text-decoration: none;
height: 1.5em;
}
.s01-menu-item-inner {
display: flex;
flex-direction: column;
transition: transform .35s cubic-bezier(.77, 0, .175, 1);
}
.s01-menu-item-text {
display: block;
line-height: 1.5;
white-space: nowrap;
}
.s01-menu-item:hover .s01-menu-item-inner {
transform: translateY(-50%);
}
.s01-menu-item-text:last-child {
color: #FF5B00;
}
/* ============================================
Frame 2: Hero + 下部ブロック (#240:1397)
parent: column, gap: -56px (下ブロックが上に56pxオーバーラップ)
position: relative — enables absolute-positioned .s02-cta-card
============================================ */
.section-02 {
position: relative;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: -56px;
}
.section-02 > * + * {
margin-top: -56px;
}
/* --------------------------------------------
Hero visual (#240:1398): 1440 x 728, gap 10
-------------------------------------------- */
.s02-hero {
position: relative;
width: 100%;
max-width: 100%;
height: 728px;
overflow: hidden;
}
/* #240:1399: h=761, background image + orange base */
.s02-hero-bg {
position: relative;
width: 100%;
height: 761px;
background:
linear-gradient(94deg, rgba(255, 91, 0, 0.1) 4%, rgba(255, 207, 180, 0.1) 26%),
url("assets/hero-bg.png") center / cover no-repeat,
#f4894d;
}
/* Wave decorations — orange curved shapes anchored to hero edges.
Both overflow the hero container which has overflow:hidden.
PC variants shown by default; SP variants hidden until SP media query. */
.s02-wave {
position: absolute;
pointer-events: none;
z-index: 0;
}
/* SP waves hidden by default (shown only at ≤767) */
.s02-wave-sp {
display: none;
}
/* PC Left wave: 1152x1278 at (-511, 3) rel to hero */
.s02-wave-left {
left: -511px;
top: 3px;
width: 1152px;
height: 1278px;
transform:rotate(280deg)
}
/* PC Right wave: 899x983 at (1012, -410) rel to hero */
.s02-wave-right {
left: 1012px;
top: -410px;
width: 899px;
height: 983px;
transform: rotate(273deg);
}
/* #240:1409: 1356x579 at (42, 25.38) */
.s02-hero-content {
position: absolute;
left: 42px;
top: 25.38px;
width: 1356px;
height: 579px;
}
/* --- Variant pill (#303:3648): "千葉県の皆様へ" at (2, 11.23), w=274 hug height,
column center. Inner pill (#303:3649): orange #FF5B00, padding 10px 24px, radius 5px.
Below: 16x9 orange down-triangle (#303:3653). --- */
.s02-variant-pill {
position: absolute;
left: 2px;
top: 11.23px;
width: 289px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 3;
}
.s02-variant-pill-box {
padding: 10px 24px;
background: #FF5B00;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.s02-variant-pill-text {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.5em;
color: #FFFFFF;
text-align: center;
}
.s02-variant-pill-arrow {
width: 45px;
height: 30px;
background: #FF5B00;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: rotate(215deg);
transform-origin: 50% 0%;
}
/* --- Piano image (#240:1410): 570x732 at (483, -18.38) --- */
.s02-piano {
position: absolute;
left: 483px;
top: -18.38px;
width: 570px;
height: 732px;
}
.s02-piano-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.s02-piano-brand {
position: absolute;
left: 301px;
top: 368px;
width: 41.14px;
height: 13.46px;
}
/* --- Star badge (#240:1424): 207x207 at (501, 36.62) — image asset mv-satei.png --- */
.s02-star-badge {
position: absolute;
left: 501px;
top: 36.62px;
width: 207px;
height: 207px;
display: block;
}
/* --- White CTA card (#240:1431): w=404 at (965, 45) inside hero-content — now sibling of .s02-hero.
Positioned absolute in .section-02: (42+965, 25.38+45) = (1007, 70.38) --- */
.s02-cta-card {
position: absolute;
left: 1007px;
top: 70.38px;
width: 404px;
padding: 8px;
background: #ffffff;
border: 3px solid #e8d9cd;
border-radius: 15px;
box-sizing: border-box;
z-index: 5;
}
.s02-cta-card-inner {
padding: 32px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* 累計買取実績 000件以上 (#240:1433) */
.s02-record {
position: relative;
width: 269px;
height: 66px;
}
.s02-record-bracket {
position: absolute;
top: 0;
height: 66px;
}
.s02-record-bracket-l {
left: 24px;
width: 25.25px;
}
.s02-record-bracket-r {
left: 221px;
width: 26.01px;
}
.s02-record-text {
position: absolute;
inset: 0;
text-align: center;
color: #e29227;
}
.s02-record-label {
position: absolute;
left: 90.48px;
top: 0.71px;
width: 91px;
height: 24px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 14.768px;
line-height: 1.6em;
letter-spacing: 0.02em;
color: #e29227;
text-align: center;
}
.s02-record-num {
position: absolute;
left: 48px;
top: 20px;
width: 66px;
height: 59px;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: calc(25 * 30vw / 375);
margin-top: 2px;
line-height: 1.6em;
letter-spacing: -0.02em;
color: #e29227;
text-align: center;
}
@media screen and (max-width: 767px) {
.s02-record-num {
font-size: 26px;
margin-top: 5px;
}
}
.s02-record-suffix {
position: absolute;
left: 168px;
top: 34.71px;
width: 57px;
height: 30px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18.46px;
line-height: 1.6em;
letter-spacing: 0.02em;
color: #e29227;
text-align: center;
}
/* まずは無料査定から！ */
.s02-cta-title-block {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 16px;
}
.s02-cta-title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
gap: 2px;
}
.s02-cta-title-black {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 28px;
color: #1f1915;
line-height: 1;
}
.s02-cta-title-orange {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.1em;
color: #ff5b00;
}
.s02-cta-note {
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.8em;
letter-spacing: 0.02em;
color: #1f1915;
}
/* CTA buttons */
.s02-cta-buttons {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 4px;
}
.s02-btn {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 356px;
height: 76px;
border-radius: 80px;
border: 2px solid #ffffff;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
color: #ffffff;
text-align: center;
align-self: center;
box-sizing: border-box;
}
.s02-btn-mail {
padding: 8px 32px 8px 8px;
background: linear-gradient(180deg, rgba(30, 116, 224, 1) 28%, rgba(21, 98, 194, 1) 100%);
}
.s02-btn-line-cta {
padding: 11px 32px;
background: linear-gradient(180deg, rgba(55, 200, 42, 1) 0%, rgba(17, 158, 5, 1) 100%);
}
.s02-btn-badge {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
background: #fcd127;
border-radius: 1000px;
color: #1f1915;
}
.s02-btn-badge-label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 1;
}
.s02-btn-badge-value {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.s02-btn-badge-num {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1;
}
.s02-btn-badge-suffix {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 1;
}
.s02-btn-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
color: #ffffff;
}
.s02-btn-line-icon {
width: 32px;
height: 32px;
}
/* Figma 240:1486 (Component 7) arrow wrap: 25x25 white circle (no border), padding 10,
holds a 6x12 chevron > inside. Chevron color varies per button (blue for mail, green for LINE);
use CSS mask on ::after so the same SVG works for all colors via `currentColor` proxy. */
.s02-btn-arrow-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
padding: 10px;
background: #ffffff;
border-radius: 1000px;
width: 25px;
height: 25px;
box-sizing: border-box;
}
/* Hide the raw img — the chevron is painted via ::after mask so we can color it via CSS */
.s02-btn-arrow-wrap img {
}
.s02-btn-arrow-wrap::after {
content: "";
display: block;
width: 6px;
height: 12px;
background: currentColor;
-webkit-mask: url("assets/btn-arrow.svg") no-repeat center / contain;
mask: url("assets/btn-arrow.svg") no-repeat center / contain;
}
/* Mail button: blue chevron */
.s02-btn-mail .s02-btn-arrow-wrap {
color: #1e74e0;
}
/* LINE button: green chevron */
.s02-btn-line-cta .s02-btn-arrow-wrap {
color: #1cc435;
}
.s02-btn-or {
align-self: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.8em;
letter-spacing: 0.02em;
color: #1f1915;
text-align: center;
padding: 8px 0;
}
/* --- Main headline: "「古い電子ピアノも」高価買取！" (single image mv-headline.svg) ---
Positioned to cover text area of hero-content (PC design: from ~0 x 98 to ~800 x 400) */
.s02-headline {
position: absolute;
left: -5px;
top: 98px;
width: 800px;
height: 290px;
pointer-events: none;
display: block;
}
/* --- 4 badge circles (#240:1495): 635x206 at (0, 362.62) --- */
.s02-circle-badges {
position: absolute;
left: 0;
top: 362.62px;
width: 856px;
height: 208px;
}
.s02-circle-badge {
position: absolute;
top: 3px;
width: 203px;
height: 203px;
padding: 24px 16px;
background: #ffffff;
border: 3px solid #ff5b00;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
}
.s02-circle-badge:nth-child(1) { left: 0; }
.s02-circle-badge:nth-child(2) { left: 211px; top: 5px; }
.s02-circle-badge:nth-child(3) { left: 422px; }
.s02-circle-badge:nth-child(4) { left: 633px; }
.s02-circle-badge-icon {
width: 70px;
height: 70px;
margin-bottom: 4px;
}
.s02-circle-badge:nth-child(1) .s02-circle-badge-icon {
width: 62.38px;
height: 62.38px;
}
.s02-circle-badge-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.s02-circle-badge-row {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 1.78px;
}
.s02-circle-badge-num {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 31.19px;
line-height: 1.4em;
letter-spacing: 0.02em;
color: #fd5b01;
}
.s02-circle-badge-sm-orange {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.6em;
letter-spacing: 0.02em;
color: #fd5b01;
}
.s02-circle-badge-sm {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.6em;
letter-spacing: 0.02em;
color: #1f1915;
}
.s02-circle-badge-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.6em;
letter-spacing: 0.02em;
color: #1f1915;
text-align: center;
}
.s02-circle-badge-title-lg {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 25px;
line-height: 1.4em;
letter-spacing: 0.02em;
text-align: center;
}
.s02-orange {
color: #fd5b01;
}
/* --------------------------------------------
Below block (#240:1555): 1440, padding 64/0/100, gap 104, radius 56 top
-------------------------------------------- */
.s02-below {
position: relative;
width: 100%;
max-width: 100%;
padding: 64px 0 100px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 104px;
background: #ffffff;
border-radius: 56px 56px 0 0;
box-sizing: border-box;
}
/* Sub image (#240:1556): 870 wide, image 290h radius 10 */
.s02-sub-image {
width: 870px;
max-width: 100%;
}
.s02-sub-image img {
width: 100%;
height: 290px;
object-fit: cover;
border-radius: 10px;
}
/* Worry section (#240:1557) */
.s02-worry-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
}
.s02-sub-image a:hover {
box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.s02-sub-image a {
display: block;
overflow: hidden;
border-radius: 10px;
}
.s02-sub-image img {
display: block;
width: 100%;
height: 290px;
object-fit: cover;
border-radius: 10px;
transition: filter .2s ease;
}
.s02-sub-image a:hover img {
filter: brightness(75%);
}
/* Worry card (#240:1558): 1172x458, cream #FFF2E0, radius 20 */
.s02-worry-card {
position: relative;
width: 1172px;
height: 458px;
padding: 64px 40px 56px;
background: #fff2e0;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 32px;
box-sizing: border-box;
}
.s02-worry-title-area {
position: relative;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.s02-worry-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
color: #1f1915;
text-align: center;
line-height: 1;
}
.s02-worry-title .s02-orange {
color: #fd5d01;
}
.s02-tight-comma {
letter-spacing: -0.27em;
}
.s02-worry-dots {
position: absolute;
left: 321px;
top: -32.38px;
width: 144px;
height: 70px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 100;
font-size: 48px;
color: #fd5d01;
line-height: 1;
}
.s02-worry-illust {
position: absolute;
left: -168px;
top: 53.62px;
width: 631px;
height: 473px;
object-fit: cover;
}
.s02-worry-list {
position: relative;
padding-left: 67px;
display: flex;
flex-direction: column;
gap: 24px;
z-index: 1;
}
.s02-worry-row {
display: flex;
flex-direction: row;
gap: 16px;
}
.s02-worry-row-end {
justify-content: flex-end;
}
.s02-worry-box {
flex: 1;
padding: 40px 0;
background: #ffffff;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}
.s02-worry-box-289 {
flex: 0 0 289px;
width: 289px;
}
.s02-worry-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.5em;
color: #1f1915;
text-align: center;
}
.s02-worry-text-sm {
font-size: 16px;
}
.s02-worry-text-lg {
font-size: 20px;
color: #1f1915;
}
/* Conclusion CTA (#240:1602) */
.s02-conclusion {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.s02-conclusion-banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.s02-conclusion-bubble {
padding: 16px 40px;
background: #ff5b00;
border-radius: 1000px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 25px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
margin-bottom: -1px;
}
.s02-conclusion-arrow {
width: 26px;
/* height: 16px;*/
}
.s02-conclusion-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
.s02-conclusion-text .s02-orange {
color: #ff5b00;
}
@media screen and (min-width: 768px) {
/* ヒーロー背景は画面いっぱい */
.s02-hero {
width: 100%;
height: 728px;
overflow: hidden;
}
.s02-hero-bg {
width: 100%;
height: 761px;
background:
linear-gradient(
94deg,
rgba(255, 91, 0, 0.1) 4%,
rgba(255, 207, 180, 0.1) 26%
),
url("assets/hero-bg.png") center / cover no-repeat,
#f4894d;
}
/* 1440pxデザイン内の1356px領域を中央固定 */
.s02-hero-content {
left: 50%;
top: 25.38px;
width: 1356px;
height: 579px;
transform: translateX(-50%);
}
/* CTAを1440pxデザインと同じ位置に置く */
.s02-cta-card {
left: calc(50% + 287px);
top: 70.38px;
width: 404px;
transform: none;
margin: 0;
}
/* 波も画面中央を基準に配置 */
.s02-wave-left {
left: calc(50% - 1231px);
}
@media (min-width: 1441px) {
.s02-wave-left {
left: calc(40% - 1231px);
}
.s02-wave-right {
left: calc(50% + 292px);
}
}
}
/* ============================================
Frame 3: オレンジCTAカード (#240:1612)
column, padding:100/0, gap:24, w=1376, borderRadius=56, fill=#FF5B00
============================================ */
.section-03 {
width: 1376px;
max-width: calc(100% - 32px);
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background: #ff5b00;
border-radius: 56px;
box-sizing: border-box;
}
/* Inner (#240:1613): w=1200, gap:48 */
.s03-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 48px;
}
/* Title area (#240:1614): column, gap:32, align: center */
.s03-title-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
/* Title block (#240:1615): column, gap:16, align: center */
.s03-title-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
/* Subtitle row (#240:1616): row, padding:0/16, gap:16 */
.s03-subtitle-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 16px;
gap: 16px;
}
.s03-subtitle-mark {
width: 12px;
height: 20.78px;
}
.s03-subtitle-mark-l {
transform: rotate(-20deg);
}
.s03-subtitle-mark-r {
transform: rotate(70deg);
}
.s03-subtitle {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 24px;
color: #ffffff;
line-height: 1;
}
.s03-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #ffffff;
text-align: center;
}
.s03-desc {
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
}
/* Cards (#240:1622): column, gap:24 */
.s03-cards {
display: flex;
flex-direction: column;
gap: 24px;
}
.s03-card-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
/* Card (#240:1624): row, space-between, fill white, radius 10, padding 32/40, flex:1 */
.s03-card {
position: relative;
flex: 1;
background: #ffffff;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 32px 40px;
box-sizing: border-box;
}
.s03-card-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex: 1;
gap: 16px;
}
.s03-card-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.8em;
color: #1f1915;
}
.s03-card-text .s03-orange {
color: #ff5b00;
}
.s03-card-img {
width: 176px;
height: 176px;
object-fit: cover;
}
/* Card badge (#240:1628): 51x51 circle, positioned at (0,0) */
.s03-card-badge {
position: absolute;
top: 0;
left: 0;
width: 65.82px;
height: 80.5px;
display: flex;
justify-content: center;
align-items: center;
}
.s03-card-badge-shield {
position: absolute;
inset: 0;
width: 65.82px;
height: 80.5px;
}
.s03-card-badge-num {
position: relative;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 16px;
color: #ffffff;
z-index: 1;
margin-top: -8px;
}
/* ============================================
Frame 4: 買取事例セクション (#240:1653)
column, padding:100/0, gap:24, fill:#FFFFFF
============================================ */
.section-04 {
width: 100%;
max-width: 1440px;
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background: #ffffff;
box-sizing: border-box;
}
/* Title area (#240:1654) */
.s04-title-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
width: 100%;
}
.s04-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #1f1915;
text-align: center;
}
.s04-orange {
color: #ff5b00;
}
.s04-desc {
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Cream card wrapper (#240:1658): w=1376, padding:64, gap:32, radius:56, #FFF2E0 */
.s04-cream-card {
width: 1376px;
max-width: calc(100% - 32px);
padding: 64px;
background: #fff2e0;
border-radius: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
box-sizing: border-box;
}
/* Cases row (#240:1659): row, gap:24, w=1200 */
.s04-cases {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: row;
gap: 24px;
}
/* Case card (#240:1660): white, radius:10, padding:24, gap:24, flex:1 */
.s04-case {
flex: 1;
padding: 24px;
background: #ffffff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
box-sizing: border-box;
}
/* Photo area (#240:1661): h=195, radius:5, imageRef bg, padding:8, gap:10 */
.s04-case-photo {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
border-radius: 5px;
}
/* HTML内の画像 */
.s04-case-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* 千葉県のラベル */
.s04-case-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: inline-flex;
padding: 0 9px;
background: #e29227;
border-radius: 4px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8em;
color: #ffffff;
}
/* Info (#240:1664): column, gap:16 */
.s04-case-info {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.s04-case-info-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.s04-case-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.8em;
color: #1f1915;
}
.s04-case-note {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
}
.s04-case-divider {
border: 0;
border-top: 1px solid #d5d5d5;
margin: 0;
width: 100%;
}
.s04-case-price {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 4px;
}
.s04-case-price-label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.9em;
color: #1f1915;
font-feature-settings: "palt";
}
.s04-case-price-num {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 1em;
color: #ff5b00;
font-feature-settings: "palt";
}
.s04-case-price-yen {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.9em;
color: #1f1915;
font-feature-settings: "palt";
}
/* もっと事例を見る (#240:1699): #1F1915 pill button */
.s04-more {
display: inline-flex;
padding: 16px 40.7449px;
justify-content: center;
align-items: center;
gap: 12.347px;
background: #1f1915;
border-radius: 98.7754px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 22px;
color: #ffffff;
}
/* CTA (#240:1700) */
.s04-cta {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
}
.s04-cta-lead {
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
.s04-cta-buttons {
display: flex;
flex-direction: row;
gap: 16px;
}
/* 4件目以降を非表示 */
.s04-case.is-hidden {
display: none !important;
}
.s04-cases {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ============================================
Frame 5: 選ばれる5つの理由 (#313:12113)
VERTICAL, padding:100/0, gap:24, fill:#F5F5F5
============================================ */
.section-05 {
width: 100%;
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background: #f5f5f5;
box-sizing: border-box;
}
/* Inner column (#313:12114): 1200 wide, gap 64 */
.s05-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
}
/* Title area (#313:12115): gap 16 */
.s05-title-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Title (#313:12116): Noto Sans JP Bold 52 / 140%, #1F1915 */
.s05-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 52px;
line-height: 1.4em;
color: #1f1915;
text-align: center;
}
/* Cards container (#313:12117): stretch, VERTICAL, gap 24 */
.s05-cards {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Row (#313:12118 wide, #313:12166 narrow): HORIZONTAL, gap 24 */
.s05-row {
display: flex;
flex-direction: row;
gap: 24px;
}
/* Card base (#313:12119 etc): flex 1, white, radius 8, padding 32, VERTICAL, center */
.s05-card {
position: relative;
flex: 1;
padding: 32px;
background: #ffffff;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
/* Wide card outer gap 16 (#313:12119, #313:12142) */
.s05-card-wide {
gap: 16px;
}
/* Narrow card outer gap 8 (#313:12167, #313:12182, #313:12200) */
.s05-card-narrow {
gap: 8px;
}
/* Inner column (#313:12120 wide / #313:12168 narrow): stretch, gap 16, align center */
.s05-card-inner {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Icon circle (#313:12121 etc): 90x90, radius 1000, fill #FFF2E0 */
.s05-icon-circle {
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff2e0;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.s05-icon {
width: 70px;
height: auto;
}
/* Title (#313:12137 etc): Noto Sans JP Bold 24 / 180%, center, #1F1915 */
.s05-card-title {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Desc (#313:12138 etc): Noto Sans JP Regular 16 / 180%, center, #1F1915 */
.s05-card-desc {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Badge (#313:12139 etc): absolute at (0,0) of card; shield 65.82x80.5 overflows the 51x51 wrapper */
.s05-badge {
position: absolute;
top: 0;
left: 0;
width: 65.82px;
height: 80.5px;
display: flex;
justify-content: center;
align-items: center;
}
.s05-badge-shield {
position: absolute;
inset: 0;
width: 65.82px;
height: 80.5px;
}
.s05-badge-num {
position: relative;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 16px;
color: #ffffff;
z-index: 1;
margin-top: -8px;
}
/* ============================================
Frame 6: 安心して任せられる体制 (#240:1812)
parent VERTICAL, no fill; children = image row + orange section w/ overlapping card
============================================ */
.section-06 {
width: 100%;
display: flex;
flex-direction: column;
}
/* 上部画像 */
.s06-images {
width: 100%;
height: 428px;
display: flex;
align-items: center;
background: #ff5b00;
overflow: hidden;
}
.s06-image {
flex: 1 1 0;
min-width: 0;
height: 100%;
object-fit: cover;
display: block;
}
/* オレンジ背景部分 */
.s06-orange {
position: relative;
width: 100%;
height: 318px;
padding: 80px 0;
background: #ff5b00;
box-sizing: border-box;
}
/* 白いカード */
.s06-card {
position: absolute;
left: 50%;
top: -182px;
transform: translateX(-50%);
width: min(1200px, calc(100% - 48px));
height: 420px;
padding: 48px 48px 56px;
display: flex;
align-items: flex-end;
gap: 24px;
background: #ffffff;
border-radius: 15px;
box-sizing: border-box;
}
/* 左カラム */
.s06-left {
flex: 1 1 540px;
min-width: 0;
height: 306px;
display: flex;
flex-direction: column;
gap: 32px;
align-self: flex-end;
}
.s06-title-area {
display: flex;
flex-direction: column;
gap: 8px;
}
.s06-title {
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.8;
color: #ff5b00;
}
.s06-title-underline {
width: min(448px, 100%);
height: 0;
border-bottom: 2px dashed #ff5b00;
}
.s06-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.s06-item {
display: flex;
align-items: flex-start;
gap: 6px;
}
.s06-item-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
display: block;
}
.s06-item-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.s06-item-title {
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.8;
color: #1f1915;
}
.s06-item-desc {
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8;
color: #1f1915;
}
/* 右カラム */
.s06-right {
width: 540px;
height: 316px;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
/* バッジの行 */
.s06-badge-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.s06-badge-row + .s06-badge-row {
margin-top: -4px;
}
/* 円形バッジ */
.s06-badge {
position: relative;
width: 160px;
height: 160px;
flex-shrink: 0;
}
/* SVG背景
2px内側に入れて、円周や装飾の欠けを防止 */
.s06-badge-bg {
position: absolute;
inset: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
display: block;
object-fit: contain;
}
/* バッジ内テキスト */
.s06-badge-label {
position: absolute;
inset: 8px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.5;
color: #e29227;
text-align: center;
white-space: pre-line;
pointer-events: none;
}
/* 画面幅が狭い場合 */
@media screen and (max-width: 1100px) {
.s06-card {
height: auto;
min-height: 420px;
padding: 40px 32px;
flex-direction: column;
align-items: center;
}
.s06-left {
width: 100%;
height: auto;
flex-basis: auto;
}
.s06-right {
width: 100%;
height: auto;
}
}
/* スマホ */
@media screen and (max-width: 600px) {
.s06-images {
height: 300px;
}
.s06-orange {
height: auto;
min-height: 620px;
}
.s06-card {
top: -120px;
width: calc(100% - 32px);
padding: 32px 20px;
gap: 32px;
}
.s06-title {
font-size: 24px;
}
.s06-item-title {
font-size: 18px;
}
.s06-item-desc {
font-size: 14px;
}
.s06-badge-row {
gap: 8px;
}
.s06-badge {
width: 96px;
height: 96px;
}
.s06-badge-label {
inset: 6px;
font-size: 12px;
}
}
/* ============================================
Frame 7: お客様の声カルーセル (#240:2061)
VERTICAL, padding:24/0/100, gap:24, fill:#FF5B00
============================================ */
.section-07 {
width: 100%;
padding: 24px 0 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background: #ff5b00;
box-sizing: border-box;
}
/* Inner column (#240:2062): 1200 wide, VERTICAL, gap 40, center */
.s07-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
/* Title area (#240:2063): VERTICAL, gap 16 */
.s07-title-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Title (#240:2064): Noto Sans JP Bold 52/140%, white */
.s07-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 52px;
line-height: 1.4em;
color: #ffffff;
}
/* Carousel viewport (#240:2065): 1200x281. Enable horizontal scroll (drag / swipe / arrow),
with scroll-snap so cards line up cleanly like the SP version. Scrollbar hidden. */
.s07-carousel {
align-self: stretch;
width: 100%;
height: 281px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.s07-carousel::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Cards row (#240:2066): HORIZONTAL, gap 24, 4 cards 585.75 wide each */
.s07-cards-row {
display: flex;
flex-direction: row;
gap: 24px;
height: 281px;
}
/* Card (Figma 585.75x281 white, radius 15, padding 40, VERTICAL, gap 8, counter CENTER).
Card width reduced to 460px so 2.5 cards fit within the 1200px carousel viewport,
letting the 3rd card peek ~50% (matches SP visual style: user knows more content follows). */
.s07-card {
flex: 0 0 520px;
width: 460px;
height: 281px;
padding: 40px;
background: #ffffff;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
box-sizing: border-box;
scroll-snap-align: start;
}
/* Card inner (#240:2068): HORIZONTAL, gap 24, primary CENTER, stretch */
.s07-card-inner {
align-self: stretch;
display: flex;
flex-direction: row;
justify-content: center;
gap: 24px;
}
/* Photo (#240:2069): 112x112 circle, white bg + per-card avatar, stroke 2px #E0E0E0 */
.s07-card-photo {
flex-shrink: 0;
width: 112px;
height: 112px;
border-radius: 50%;
background-color: #ffffff;
background-image: url("assets/testimonial-avatar.png");
background-size: cover;
background-position: center;
border: 2px solid #dfdfdf;
box-sizing: border-box;
}
/* Card-specific avatars (Figma に個別画像がある場合のオーバーライド) */
.s07-card:nth-child(1) .s07-card-photo {
background-image: url("assets/okyakusama01.png");
}
.s07-card:nth-child(2) .s07-card-photo {
background-image: url("assets/okyakusama_02.png");
}
.s07-card:nth-child(3) .s07-card-photo {
background-image: url("assets/okyakusama_03.png");
}
.s07-card:nth-child(4) .s07-card-photo {
background-image: url("assets/okyakusama_04.png");
}
/* Text column (#240:2070): flex-grow, VERTICAL, gap 16 */
.s07-card-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Heading area (#240:2071): VERTICAL, no gap */
.s07-card-heading {
display: flex;
flex-direction: column;
}
/* Name (#240:2072): Noto Sans JP Regular 16/180%, #1F1915 */
.s07-card-name {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
}
/* Title (#240:2073): Noto Sans JP Bold 22/180%, #1F1915 */
.s07-card-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.8em;
color: #1f1915;
}
/* Quote (#240:2074): Noto Sans JP Regular 16/180%, #1F1915 */
.s07-card-quote {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
}
/* Pager (#240:2099): HORIZONTAL, gap 24, counter CENTER */
.s07-pager {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
/* Arrow button (#240:2100 / 240:2106): 40x40 white circle */
.s07-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
border: 0;
cursor: pointer;
flex-shrink: 0;
}
.s07-arrow svg {
display: block;
}
/* Dots row (#240:2102): HORIZONTAL, gap 16, counter CENTER */
.s07-dots {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
/* Dot (#240:2103-2105): 16x16 circle, white (active) / white 25% (inactive) */
.s07-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
display: inline-block;
}
.s07-dot-active {
background: #ffffff;
}
/* ============================================
Frame 8: お申し込みから買取までの流れ (#313:12221)
VERTICAL, padding:100/0, gap:24, fill:#FFFFFF
============================================ */
.section-08 {
width: 100%;
max-width: 1440px;
padding: 100px 0;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Inner (#313:12222): 1200 wide, VERTICAL, gap 48, center */
.s08-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
/* Title area (#313:12223): stretch, center, gap 24 */
.s08-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
}
/* Title (#313:12225): Noto Sans JP Bold 48/140%, #1F1915 */
.s08-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #1f1915;
}
/* Steps row (#313:12226): HORIZONTAL, gap 16, counter CENTER */
.s08-steps {
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
/* Step card (#313:12227 etc): 267x296, cream #FFF2E0, radius 8, padding 32/24, VERTICAL, gap 8, counter CENTER, grow 1 */
.s08-step {
flex: 1 1 267px;
width: 267px;
height: 296px;
padding: 32px 24px;
background: #fff2e0;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-sizing: border-box;
}
/* Step inner (#313:12228): stretch, VERTICAL, gap 16, counter CENTER */
.s08-step-inner {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Step label (#313:12229): 94x33, #FF5B00, radius 5, padding 2/16 */
.s08-step-label {
display: inline-flex;
padding: 2px 16px;
background: #ff5b00;
border-radius: 5px;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
}
/* Label text (#313:12230): Roboto Bold 16/180%, white, CENTER */
.s08-step-label-text {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
}
/* Step title (#313:12231 etc): Noto Sans JP Bold 22/180%, #1F1915, CENTER, stretch */
.s08-step-title {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Step desc (#313:12232 etc): Noto Sans JP Regular 16/180%, #1F1915, LEFT, stretch */
.s08-step-desc {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
.s08-step {
flex: 1 1 267px;
width: 267px;
height: 296px;
padding: 32px 24px;
background: #fff2e0;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.s08-step-inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.s08-step-title {
width: 100%;
min-height: 80px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.8;
color: #1f1915;
text-align: center;
}
.s08-step-desc {
width: 100%;
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8;
color: #1f1915;
text-align: left;
}
/* Arrow (#313:12233 etc): 12x24, chevron pointing right, orange #FF5B00 */
.s08-arrow {
width: 12px;
height: 24px;
flex-shrink: 0;
display: block;
}
/* ============================================
Frame 9: 対応地域一覧 + こんな電子ピアノも (#313:12436)
VERTICAL, padding:100/0, gap:80, fill:#F5F5F5
============================================ */
.section-09 {
width: 100%;
padding: 100px 0;
background: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
box-sizing: border-box;
}
/* Regions block (#313:12437): 1200 wide, VERTICAL, gap 32, counter CENTER */
.s09-regions-block {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* Title area (#313:12438/12439): stretch, center */
.s09-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Title (#313:12440): Noto Sans JP Bold 48/140%, #1F1915, CENTER */
.s09-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #1f1915;
text-align: center;
}
/* Subtitle (#313:12441): Noto Sans JP Regular 16/180%, CENTER, stretch */
.s09-subtitle {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Regions container (#313:12442): stretch, VERTICAL, gap 24 */
.s09-regions {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Region rows container (#313:12444): VERTICAL, gap 8 */
.s09-region-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Region row (#313:12445 etc): 1200 wide, white, radius 10, padding 24/32, HORIZONTAL, gap 32 */
.s09-region-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
padding: 24px 32px;
background: #ffffff;
border-radius: 10px;
box-sizing: border-box;
}
/* Region name (#313:12446): Noto Sans JP Bold 18/190%, #1F1915, LEFT, fixed 72 wide */
.s09-region-name {
flex-shrink: 0;
width: 72px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.9em;
color: #1f1915;
}
/* Prefectures grid (#313:12447 etc): flex row, gap 8, buttons 107.55x37, wraps if needed */
.s09-prefectures {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
/* Prefecture button (INSTANCE 313:12448 etc): 107.55x37, radius 8, linear-gradient(180deg, #fff 64.42%, #f7f7f7), stroke #D5D5D5, text Noto Sans JP 16/180% */
.s09-pref {
flex: 0 0 107.5555px;
width: 107.5555px;
height: 37px;
padding: 4px 16px;
border-radius: 8px;
background: linear-gradient(180deg, #ffffff 64.42%, #f7f7f7 100%);
border: 1px solid #d5d5d5;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8em;
color: #1f1915;
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
box-sizing: border-box;
}
a.s09-pref:hover {
background: linear-gradient(180deg, #ff5b00 64.42%, #ffa77b 100%);
border: 1px solid #ff5b00;
color: #FFFFFF;
}
/* Notes (#388:21227): VERTICAL, gap 8 */
.s09-notes {
display: flex;
flex-direction: column;
gap: 8px;
}
.s09-note {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Cases card (#313:12505): 1200x474, white, radius 15, padding 48/48/56/48, HORIZONTAL, align MAX (bottom) */
.s09-cases-card {
width: 1200px;
max-width: 100%;
padding: 48px 48px 56px;
background: #ffffff;
border-radius: 15px;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 24px;
box-sizing: border-box;
}
/* Cases inner (#313:12506): flex 1, VERTICAL, gap 32, center/center */
.s09-cases-inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
/* Cases title area (#313:12507): VERTICAL, gap 8, center */
.s09-cases-title-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* Cases title (#313:12508): Noto Sans JP Bold 28/180%, #FF5B00 */
.s09-cases-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.8em;
color: #ff5b00;
}
/* Underline (#313:12509): dashed line 558 wide, orange */
.s09-cases-underline {
width: 558px;
height: 0;
border-bottom: 2px dashed #ff5b00;
}
/* Cases row (#313:12510): stretch, HORIZONTAL, gap 24 */
.s09-cases-row {
align-self: stretch;
display: flex;
flex-direction: row;
gap: 24px;
}
/* Case card (#313:12511 etc): flex 1, cream #FFF2E0, padding 40, HORIZONTAL, gap 6 */
.s09-case {
flex: 1 1 352px;
padding: 40px;
background: #fff2e0;
display: flex;
flex-direction: row;
gap: 6px;
box-sizing: border-box;
position: relative;
}
/* Case text (#313:12512 etc): 272 flex, VERTICAL, gap 16, primary CENTER */
.s09-case-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
/* Case title (#313:12513 etc): Noto Sans JP Bold 20/180%, #1F1915, CENTER */
.s09-case-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Case desc (#313:12514 etc): Noto Sans JP Regular 16/180%, #1F1915, LEFT */
.s09-case-desc {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Case icon (#313:12515 etc): 28x28 pentagon (white + peach rotated 180°) */
.s09-case-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
position: absolute;
top: 0;
left: 0;
}
/* Cases footer (#313:12532): Noto Sans JP Regular 16/180%, CENTER, stretch */
.s09-cases-footer {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* ============================================
Frame 10: エプコが高価買取できる理由 (#240:2241)
VERTICAL, padding:100/0, gap:24, fill:#FFFFFF
============================================ */
.section-10 {
width: 100%;
max-width: 1440px;
padding: 100px 0;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Inner (#240:2242): 1200 wide, HORIZONTAL, gap 56, primary CENTER (vertical center) */
.s10-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 56px;
}
/* Left column (#240:2243): 572x404, VERTICAL, gap 32, primary/counter CENTER, flex-grow 1 */
.s10-left {
flex: 1 1 572px;
width: 572px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
/* Title area (#240:2244): stretch, VERTICAL, gap 16, primary CENTER */
.s10-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Title (#240:2245): Noto Sans JP Bold 48/140%, #1F1915, LEFT */
.s10-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #1f1915;
text-align: left;
}
.s10-title span{
color: #ff5B00;
}
/* Text area (#240:2246): stretch, VERTICAL, gap 24 */
.s10-text-area {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Subtitle (#240:2247): Noto Sans JP Bold 22/180%, #1F1915, LEFT, stretch */
.s10-subtitle {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Description (#240:2248): Noto Sans JP Regular 16/180%, #1F1915, LEFT, stretch */
.s10-desc {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Right column (#240:2249): 572x433, radius 10, background image (Figma has 2 IMAGE fills, top one is visible) */
.s10-right {
flex: 1 1 572px;
width: 572px;
height: 433px;
border-radius: 10px;
background: url("assets/reuse-photo.png") center / cover no-repeat, #ffffff;
}
/* ============================================
Frame 11: よくあるご質問 (#240:2250)
VERTICAL, padding:100/0, gap:24, fill:#FFF2E0
============================================ */
.section-11 {
width: 100%;
padding: 100px 0;
background: #fff2e0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Inner (#240:2251): 1200 wide, VERTICAL, gap 48, counter CENTER */
.s11-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
/* Title area (#240:2252): stretch, center */
.s11-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Title (#240:2254): Noto Sans JP Bold 48/140%, #1F1915 */
.s11-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #1f1915;
}
/* FAQ list (#240:2255): stretch, VERTICAL, gap 8, center */
.s11-list {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* FAQ item (INSTANCE recruit_list): 850 wide, white, radius 10, stroke #FFF0E8 1px, padding 32 */
.s11-item {
width: 850px;
max-width: 100%;
background: #ffffff;
border: 1px solid #fff0e8;
border-radius: 10px;
padding: 32px;
box-sizing: border-box;
}
/* Q row (summary): HORIZONTAL, gap 32, cursor pointer */
.s11-q {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
cursor: pointer;
list-style: none;
}
.s11-q::-webkit-details-marker {
display: none;
}
/* Mark (Q or A): 38x38 circle */
.s11-mark {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.35em;
}
/* Q mark: orange fill + white text */
.s11-mark-q {
background: #ff5b00;
color: #ffffff;
}
/* A mark: white fill + orange stroke + orange text */
.s11-mark-a {
background: #ffffff;
border: 1px solid #ff5b00;
color: #ff5b00;
}
/* Question text: Noto Sans JP Bold 18/190%, #1F1915, flex-grow */
.s11-q-text {
flex: 1;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.9em;
color: #1f1915;
}
/* Toggle icon: 16x16 dark circle with chevron, flex-shrink */
.s11-toggle {
flex-shrink: 0;
width: 20px;
height: 38px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.s11-toggle svg {
display: block;
transition: transform 0.2s;
}
/* Closed: chevron points down (rotate 180°). Open: chevron points up (original ^). */
.s11-item:not([open]) .s11-toggle svg {
transform: rotate(180deg);
}
/* Answer row: HORIZONTAL, gap 32, padding-top 28 */
.s11-a {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 32px;
padding-top: 28px;
}
/* Answer text: Noto Sans JP Regular 16/190%, #1F1915, flex-grow */
.s11-a-text {
flex: 1;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.9em;
color: #1f1915;
padding-top: 4px;
}
/* ============================================
Frame 12: 処分費を払う前にCTA (#240:2261)
Parent VERTICAL, no fill; two stacked children (banner + orange w/ overlapping card)
============================================ */
.section-12 {
width: 100%;
display: flex;
flex-direction: column;
}
/* Top dark banner (#240:2262): HORIZONTAL, padding 100/0/139, counter CENTER
3 fills: gray base + image STRETCH + rgba(39,14,0,0.83) overlay */
.s12-banner {
width: 100%;
height: 396px;
padding: 100px 0 139px;
box-sizing: border-box;
background:
linear-gradient(rgba(39, 14, 0, 0.83), rgba(39, 14, 0, 0.83)),
url("assets/banner-bg.png") center / cover no-repeat,
#3b3b3b;
display: flex;
flex-direction: row;
align-items: center;
}
/* Banner inner (#240:2263): 1440x157, VERTICAL, gap 32, counter CENTER, flex-grow 1 */
.s12-banner-inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* Badge wrapper (#240:2265): VERTICAL, contains pill + tail SVG */
.s12-banner-badge {
display: flex;
flex-direction: column;
align-items: center;
}
/* Pill (#240:2266): 272x68, orange #FF5B00, radius 1000, padding 16/40, stroke 2px cream */
.s12-banner-pill {
padding: 16px 40px;
background: #ff5b00;
border: 2px solid #fff2e0;
border-radius: 1000px;
box-sizing: border-box;
}
/* Pill text (#240:2268): Noto Sans JP Bold 24/150%, white, CENTER */
.s12-banner-pill-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.5em;
color: #ffffff;
}
/* Tail SVG (#240:2269): 26x16 orange downward triangle */
.s12-banner-tail {
display: block;
}
/* Banner headline (#240:2270): Noto Sans JP Bold 38/150%, white, CENTER */
.s12-banner-headline {
width: 911px;
max-width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 38px;
line-height: 1.5em;
color: #ffffff;
text-align: center;
}
/* Orange section (#240:2271): 1440x493, orange #FF5B00, padding 100/0 */
.s12-orange {
position: relative;
width: 100%;
height: 493px;
padding: 100px 0;
background: #ff5b00;
box-sizing: border-box;
}
/* White card (#240:2272): 1200x462, radius 15, padding 52, VERTICAL, gap 48, center/center; protrudes 69px above orange top */
.s12-card {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -69px;
width: 1200px;
height: 462px;
padding: 52px;
background: #ffffff;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 48px;
box-sizing: border-box;
}
/* Lead text (#240:2273): Noto Sans JP Regular 16/180%, #1F1915, CENTER, stretch */
.s12-card-lead {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
}
/* Buttons row (#240:2274/2275): HORIZONTAL, gap 16 */
.s12-buttons {
display: flex;
flex-direction: row;
gap: 16px;
}
/* Button width override to Frame 12's 452px (Frame 2 base is 356px) */
.s12-btn {
width: 452px;
overflow: visible;
}
.s12-btn {
width: 452px;
position: relative;
overflow: visible;
border-radius: 999px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
transition:
box-shadow .2s ease,
transform .2s ease;
}
.s12-btn::before,
.s12-btn::after {
border-radius: inherit;
}
.s12-btn:hover {
box-shadow:
inset 0 0 0 9999px rgba(0, 0, 0, .18),
0 4px 8px rgba(0, 0, 0, .2);
transform: translateY(-2px);
}
/* Ribbon (#I240:2276;195:1414 etc): absolute above button, white pill with colored border */
.s12-btn-ribbon {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
padding: 6px 24px;
background: #ffffff;
border-radius: 100px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.2em;
white-space: nowrap;
box-sizing: border-box;
}
/* Ribbon tail: downward-pointing triangle via ::after */
.s12-btn-ribbon::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
transform: translateX(-50%);
width: 14px;
height: 7px;
background: #ffffff;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
/* Blue ribbon (mail button) — Component 16 */
.s12-btn-ribbon-blue {
border: 1px solid #1e74e0;
color: #1e74e0;
}
/* Green ribbon (LINE button) — Component 17 */
.s12-btn-ribbon-green {
border: 1px solid #1cc435;
color: #1cc435;
}
.s12-btn-ribbon-text {
display: inline-block;
}
/* Note callout (#240:2278): stretch, 1096x128, white radius 8, stroke 2px #FFDCAA, padding 32/48/32/125 */
.s12-note {
position: relative;
align-self: stretch;
padding: 32px 48px 32px 125px;
background: #ffffff;
border: 2px solid #ffdcaa;
border-radius: 8px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Note text (#240:2279): Noto Sans JP Bold 18/180%, orange #FF5B00, LEFT */
.s12-note-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.8em;
color: #ff5b00;
text-align: left;
}
/* Note piano image (#240:2280): 186x212, absolute at (53,-32), rotated 180° */
.s12-note-piano {
position: absolute;
left: 53px;
top: -32px;
width: 186px;
height: 212px;
}
/* ============================================
Frame 13: リサイクルメッセージ (#240:2996)
VERTICAL, padding:100/0, gap:24, fill:#F5F5F5
============================================ */
.section-13 {
width: 100%;
padding: 100px 0;
background: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Inner (#240:2997): 1200 wide, HORIZONTAL, gap 64, primary CENTER (vertical center) */
.s13-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 64px;
}
/* Left column (#240:2998): 622x389, VERTICAL, gap 32, primary/counter CENTER, flex-grow 1 */
.s13-left {
flex: 1 1 622px;
width: 622px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
/* Title area (#240:2999): stretch, VERTICAL, gap 16, primary CENTER */
.s13-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Title (#240:3000): Noto Sans JP Bold 34/140%, #1F1915, LEFT */
.s13-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 34px;
line-height: 1.4em;
color: #1f1915;
text-align: left;
}
.s13-title span{
color: #FF5B00;
}
/* Text area (#240:3001): stretch, VERTICAL, gap 24 */
.s13-text-area {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Description (#240:3003): Noto Sans JP Regular 16/180%, #1F1915, LEFT */
.s13-desc {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Right column (#240:3013): 514x363, freeform (no auto-layout), 2 overlapping images */
.s13-right {
position: relative;
flex: 0 0 514px;
width: 514px;
height: 363px;
}
/* Main image (#240:3015 "image 1244"): 354x277 at (0, 86), radius 10, recycle-2 (top fill) visible */
.s13-img-main {
position: absolute;
left: 0;
top: 86px;
width: 354px;
height: 277px;
border-radius: 10px;
background: url("assets/recycle-2.png") center / cover no-repeat;
}
/* Sub image (#240:3014 "image 1245"): 215x215 at (299, 0), radius 10, recycle-1 */
.s13-img-sub {
position: absolute;
left: 299px;
top: 0;
width: 215px;
height: 215px;
border-radius: 10px;
background: url("assets/recycle-1.png") center / cover no-repeat;
}
/* ============================================
Frame 14: メーカー、型番などの調べ方 (#240:2281)
VERTICAL, padding:100/0, gap:24, fill:#FFFFFF
============================================ */
.section-14 {
width: 100%;
max-width: 1440px;
padding: 100px 0;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Bordered card (#240:2282): 1200x719, radius 15, stroke 6px #E2E2E2, padding 64, VERTICAL, gap 48, counter CENTER */
.s14-card {
width: 1200px;
max-width: 100%;
padding: 64px;
border: 6px solid #e2e2e2;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
box-sizing: border-box;
}
/* Row 1 (#240:2283): stretch, HORIZONTAL, gap 64 */
.s14-row1 {
align-self: stretch;
display: flex;
flex-direction: row;
gap: 64px;
}
/* Left text col (#240:2284): 600 wide, VERTICAL, gap 24, primary CENTER, flex-grow 1 */
.s14-left {
flex: 1 1 600px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
}
/* Title row (#240:2285): HORIZONTAL, gap 10, counter CENTER */
.s14-title-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
/* Icon (#240:2286): 61x61 gray circle with magnifying-glass composed as inline SVG asset */
.s14-icon {
width: 61px;
height: 61px;
flex-shrink: 0;
display: block;
}
.s14-title-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
/* Title (#240:2290): Noto Sans JP Bold 32/140%, #1F1915, LEFT */
.s14-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.4em;
color: #1f1915;
text-align: left;
}
/* Description (#240:2291): Noto Sans JP Regular 16/180%, #1F1915, LEFT */
.s14-desc {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: left;
}
/* Guide image (#240:2292): 408x292, radius 10, image (top of 4 stacked fills) */
.s14-guide-img {
flex: 0 0 408px;
width: 408px;
height: 292px;
border-radius: 10px;
background: url("assets/makers-guide.png") center / cover no-repeat;
}
/* Grid (#240:2293): 7×2 grid of 14 piano models, each 139.43x117.5 radius 5, gap 16 */
.s14-grid {
align-self: stretch;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
}
.s14-thumb {
width: 100%;
height: 117.5px;
object-fit: cover;
border-radius: 5px;
display: block;
}
/* ============================================
Frame 15: 高価買取お申込みフォーム (#240:2308)
VERTICAL, padding:100/0, gap:24, fill:#FFF0E8 (peach)
============================================ */
.section-15 {
width: 100%;
padding: 100px 0;
background: #fff0e8;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
overflow: hidden;
}
/* Inner (#240:2309): 1200 wide, VERTICAL, gap 24, counter CENTER; hosts absolute orange banner */
.s15-inner {
position: relative;
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* Orange bg (Rectangle 38549 #240:2310): 1445x451, absolute at (-125, -100), #FF5B00 */
.s15-orange-bg {
position: absolute;
top: -100px;
width: 1920px;
height: 568px;
background: #ff5b00;
z-index: 0;
}
/* Title area (#240:2311): stretch, VERTICAL, gap 24, primary/counter CENTER, above orange bg */
.s15-title-area {
position: relative;
z-index: 1;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* Title block (#240:2312): VERTICAL container for title + relative star anchor */
.s15-title-block {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Star badge (#240:2313): 207x207, absolute to the LEFT of title text (bb rel to inner ~ (202,-68)) */
.s15-star {
position: absolute;
right: 100%;
top: -68px;
width: 207px;
height: 207px;
margin-right: -8px;
}
.s15-star-shape {
position: absolute;
inset: 0;
width: 207px;
height: 207px;
}
/* "ご相談 / 査定手数料" label at top of star */
.s15-star-label {
position: absolute;
left: 0;
top: 42px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.s15-star-label-a,
.s15-star-label-b {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
color: #ff5b00;
line-height: 1.2em;
}
/* 0円 price */
.s15-star-price {
position: absolute;
left: 0;
top: 88px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
gap: 2px;
}
.s15-star-price-num {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 70px;
color: #ff5b00;
line-height: 1;
}
.s15-star-price-yen {
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 18px;
color: #ff5b00;
line-height: 1;
margin-bottom: 8px;
}
/* Title (#240:2322): Noto Sans JP Bold 48/140%, white, CENTER */
.s15-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4em;
color: #ffffff;
text-align: center;
}
/* Required note (#240:2323): Noto Sans JP Regular 16/180%, white, CENTER */
.s15-required-note {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
}
/* Phone application card (#623:2926): 840x132, white, radius 15, padding 32/64, HORIZONTAL, gap 27 */
.s15-phone-card {
position: relative;
z-index: 1;
box-sizing: border-box;
width: 840px;
max-width: 100%;
padding: 32px 64px;
background: #ffffff;
border-radius: 15px;
display: flex;
flex-direction: row;
align-items: center;
gap: 27px;
}
/* Heading (#623:2944): Noto Sans JP Bold 20/160%, #1F1815, LEFT */
.s15-phone-heading {
flex: 0 0 auto;
width: 180px;
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.6em;
color: #1f1815;
text-align: left;
}
/* Divider (#623:2947): vertical line, 1px x 68px, #D5D5D5 */
.s15-phone-divider {
flex: 0 0 auto;
width: 1px;
height: 68px;
background: #d5d5d5;
}
/* Info block (#623:2943): 399x68, VERTICAL, gap 3 */
.s15-phone-info {
flex: 0 0 auto;
width: 399px;
display: flex;
flex-direction: column;
gap: 3px;
}
/* Phone number row (#623:2927): HORIZONTAL, gap 4.5, CENTER/CENTER */
.s15-phone-number-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 4.5px;
}
/* Phone icon (#623:2928): 43x28, #009944 */
.s15-phone-icon {
width: 43px;
height: 28px;
flex: 0 0 auto;
}
/* Phone number (#623:2933): Roboto SemiBold 38, letter-spacing -0.04em, #3B3632 */
.s15-phone-number {
font-family: "Roboto", sans-serif;
font-weight: 600;
font-size: 38px;
line-height: 1;
letter-spacing: -0.04em;
color: #3b3632;
text-decoration: none;
}
/* Hours row (#623:2934): HORIZONTAL, gap 6 */
.s15-phone-hours {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
/* Grouped label + value (#623:2949 / 623:2935 / 623:2939): HORIZONTAL, gap 6, center */
.s15-phone-hours-group {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
/* Label "受付時間 / 平日 / 土日祝" (#623:2950 / 2936 / 2940): Noto Sans JP Bold 16, -0.04em, #1F1815 */
.s15-phone-hours-label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Colon "：" (#623:2951): Roboto Medium 20, -0.04em, #1F1815 */
.s15-phone-hours-colon {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Time "9:00~19:00 / 9:00~18:00" (#623:2937 / 2941): Roboto Medium 20, -0.04em, #1F1815 */
.s15-phone-hours-time {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Slash "/" (#623:2938): Noto Sans JP Regular 16.5, -0.04em, #1F1815 */
.s15-phone-hours-slash {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16.5px;
line-height: 1;
letter-spacing: -0.04em;
color: #1f1815;
}
/* Form card (#240:2324): 840 wide, white, radius 15, padding 64, VERTICAL, gap 32, counter CENTER */
.s15-form {
position: relative;
z-index: 1;
width: 840px;
max-width: 100%;
padding: 64px;
background: #ffffff;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
box-sizing: border-box;
}
/* Help link banner (#240:2325): 712x77 stretch, gray #F3F3F3 bg, padding 24, center */
.s15-help-link {
align-self: stretch;
padding: 24px;
background: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-decoration: underline;
}
/* Fields (#240:2327): stretch, VERTICAL, gap 24 */
.s15-fields {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Field (INSTANCE for each input): VERTICAL, gap 8 */
.s15-field {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Label (INSTANCE Label Units): HORIZONTAL, gap 8, align center */
.s15-label {
margin-top: 1.5rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.s15-label-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.7em;
color: #333333;
}
/* Required badge: red */
.s15-required {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
color: #ec0000;
}
/* Support text (below label, above field) */
.s15-support {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7em;
color: #666666;
}
/* Input base (INSTANCE Input): 712 wide, 56 tall, white, radius 8, stroke #666 1px, padding 12/16 */
.s15-input {
width: 100%;
height: 56px;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #666666;
border-radius: 8px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1;
color: #1a1a1a;
box-sizing: border-box;
}
.s15-input::placeholder {
color: #1a1a1a;
opacity: 0.6;
}
/* Select arrow: use native native */
select.s15-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
/* Narrow variant: 327 wide */
.s15-input-narrow {
width: 327px;
max-width: 100%;
}
/* Textarea (#Text Area Fields): 712x144, radius 8, stroke #666 */
.s15-textarea {
height: 144px;
resize: vertical;
padding: 16px;
line-height: 1.6;
}
/* Radios row (#Inline / #Inlined Unit): HORIZONTAL, gap 12, align center */
.s15-radios {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.s15-radio {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.s15-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 32px;
height: 32px;
margin: 0;
cursor: pointer;
}
/* Radio mark: 32x32 with inner circle */
.s15-radio-mark {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #666666;
background: #ffffff;
box-sizing: border-box;
flex-shrink: 0;
position: relative;
}
.s15-radio input[type="radio"]:checked + .s15-radio-mark::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff5b00;
}
.s15-radio-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3em;
color: #1f1915;
}
/* ラジオ全体 */
.s15-radios .wpcf7-form-control {
display: flex;
align-items: center;
gap: 56px;
flex-wrap: wrap;
}
/* 各項目 */
.s15-radios .wpcf7-list-item {
margin: 0;
}
.s15-radios .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
/* デフォルトのラジオを消してデザインを作る */
.s15-radios input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 34px;
height: 34px;
margin: 0;
border: 3px solid #7a7a7a;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
flex-shrink: 0;
}
/* 選択時の中のオレンジ丸 */
.s15-radios input[type="radio"]:checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: #f56a00;
transform: translate(-50%, -50%);
}
/* テキスト */
.s15-radios .wpcf7-list-item-label {
font-size: 17px;
font-weight: 500;
color: #333;
line-height: 1;
}
/* Privacy area (#240:2350): VERTICAL, gap 24 */
.s15-privacy {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.s15-privacy-link {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
text-align: center;
text-decoration: underline;
}
/* Privacy scrollable box */
.s15-privacy-box {
align-self: stretch;
max-height: 240px;
overflow-y: auto;
padding: 16px 24px;
border: 1px solid #dddddd;
border-radius: 8px;
background: #fafafa;
box-sizing: border-box;
}
.s15-privacy-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.7em;
color: #333333;
}
/* ========================================
フォーム送信ボタン
======================================== */
.s15-submit {
width: 440px;
}
.s15-form .s15-submit {
font-size: 22px !important;
font-weight: 700 !important;
text-align: center !important;
cursor: pointer;
transition:
transform 0.18s ease,
filter 0.18s ease,
box-shadow 0.18s ease;
}
/* マウスオーバー */
.s15-form .s15-submit:hover {
filter: brightness(0.78);
transform: translateY(3px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.18);
cursor: pointer;
}
/* クリック時はさらに少し沈む */
.s15-form .s15-submit:active {
transform: translateY(5px);
filter: brightness(0.7);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.15);
}
/* ========================================
Contact Form 7 入力エラー
======================================== */
/* エラーメッセージ */
.s15-form .wpcf7-not-valid-tip {
display: block;
margin-top: 5px;
font-size: 13px;
line-height: 1.4;
font-weight: 400;
color: #e60012;
}
/* input / select / textarea の下にエラーを表示 */
.s15-form .wpcf7-form-control-wrap {
display: block;
}
/* エラー時のフォーム枠 */
.s15-form .wpcf7-not-valid {
border-color: #e60012;
}
/* =========================
設置場所 横並び
========================= */
.s15-inline {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
flex-wrap: nowrap !important;
gap: 10px;
width: 100%;
}
/* CF7が自動挿入したpがあってもレイアウトに影響させない */
.s15-inline > p {
display: contents;
}
/* CF7による不要な改行を消す */
.s15-inline > br {
display: none;
}
/* 各select＋エラーメッセージの箱 */
.s15-inline .wpcf7-form-control-wrap {
display: block;
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* select */
.s15-inline select.s15-input {
display: block;
width: 100% !important;
min-width: 0;
}
/* 「の」「に設置」 */
.s15-inline-sep {
display: flex;
flex: 0 0 auto;
align-items: center;
height: 56px;
padding: 0;
white-space: nowrap;
font-size: 16px;
color: #333;
}
/* エラー */
.s15-inline .wpcf7-not-valid-tip {
display: block;
margin-top: 5px;
color: #e60012;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
}
/* エラー時の枠色 */
.s15-form .wpcf7-not-valid {
border-color: #e60012;
}
/* Contact Form 7 スクリーンリーダー用メッセージを画面上では非表示 */
.wpcf7 .screen-reader-response {
position: absolute !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
word-wrap: normal !important;
}
.s15-form fieldset.hidden-fields-container {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
height: 0 !important;
}
.s15-form.conform-page .s15-field {
border-bottom: 1px dotted #999999;
padding-bottom: 15px;
}
/* ============================================
Contact Form 7 確認画面ボタン
============================================ */
/* 2ボタンを横並び */
.transmit.ele-piano > p {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: nowrap;
margin: 40px 0 0;
}
/* CF7が入れるbrを非表示 */
.transmit.ele-piano > p > br {
display: none;
}
/* --------------------------------------------
修正する
-------------------------------------------- */
.transmit.ele-piano .wpcf7-previous {
width: 242px;
height: 78px;
padding: 0 40px 0 65px;
border: 2px solid #fff;
border-radius: 999px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13' fill='%23ffffff'/%3E%3Cpath d='M17 10 L12 15 L17 20' fill='none' stroke='%23b39d84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat left 20px center / 30px 30px,
linear-gradient(
180deg,
#cdbda9 0%,
#aa947c 100%
);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1;
text-align: center;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
transform 0.18s ease,
filter 0.18s ease,
box-shadow 0.18s ease;
}
/* --------------------------------------------
送信
-------------------------------------------- */
.transmit.ele-piano .wpcf7-submit {
width: 443px;
height: 78px;
padding: 0 65px 0 40px;
border: 2px solid #fff;
border-radius: 999px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13' fill='%23ffffff'/%3E%3Cpath d='M13 10 L18 15 L13 20' fill='none' stroke='%231e74e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat right 20px center / 30px 30px,
linear-gradient(
180deg,
#2f7ee8 0%,
#1767ce 100%
);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
text-align: center;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
transform 0.18s ease,
filter 0.18s ease,
box-shadow 0.18s ease;
}
/* --------------------------------------------
Hover
-------------------------------------------- */
.transmit.ele-piano .wpcf7-previous:hover,
.transmit.ele-piano .wpcf7-submit:hover {
transform: translateY(3px);
filter: brightness(0.85);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.18);
}
/* クリック時 */
.transmit.ele-piano .wpcf7-previous:active,
.transmit.ele-piano .wpcf7-submit:active {
transform: translateY(5px);
filter: brightness(0.75);
box-shadow: none;
}
@media (max-width: 767px) {
.transmit.ele-piano > p {
gap: 10px;
margin-top: 30px;
}
.transmit.ele-piano .wpcf7-previous {
width: 38%;
height: 60px;
padding: 0 12px 0 42px;
font-size: 15px;
background-position:
left 10px center,
center;
background-size:
26px 26px,
100% 100%;
}
.transmit.ele-piano .wpcf7-submit {
width: 62%;
height: 60px;
padding: 0 42px 0 12px;
font-size: 18px;
background-position:
right 10px center,
center;
background-size:
26px 26px,
100% 100%;
}
}
/* ============================================
Frame 16: 会社概要 (#240:2356)
VERTICAL, padding:100/0, gap:24, image bg + rgba(0,0,0,0.7) overlay
============================================ */
.section-16 {
width: 100%;
padding: 100px 0;
background:
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("assets/company-bg.png") center / cover no-repeat;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Inner (#240:2357): 1200 wide, VERTICAL, gap 24, counter CENTER */
.s16-inner {
width: 1200px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* Title area (#240:2358): stretch, VERTICAL, gap 32, counter CENTER */
.s16-title-area {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* Heading wrap (#240:2359) */
.s16-heading {
display: flex;
flex-direction: column;
align-items: center;
}
/* Title (#240:2360): Noto Sans JP Bold 40/150%, white, CENTER */
.s16-title {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 1.5em;
color: #ffffff;
text-align: center;
}
/* Lead (#240:2361): Noto Sans JP Regular 16/180%, white, CENTER, stretch */
.s16-lead {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
}
/* Card (#240:2362): 960x789, white, radius 10, padding 48 */
.s16-card {
width: 960px;
max-width: 100%;
padding: 48px;
background: #ffffff;
border-radius: 10px;
box-sizing: border-box;
}
/* Info table (#240:2363): stretch, border-top 1px #DFDFDF */
.s16-info {
width: 100%;
border-top: 1px solid #dfdfdf;
}
/* Row (#240:2364 etc): HORIZONTAL, padding 24 top/bottom, gap 24, border-bottom 1px #E0E0E0 */
.s16-row {
display: flex;
flex-direction: row;
padding: 24px 0;
gap: 24px;
border-bottom: 1px solid #dfdfdf;
}
/* Row label (207 wide): Noto Sans JP Regular 16/180%, #1F1915, LEFT */
.s16-row-label {
flex-shrink: 0;
width: 207px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
}
/* Row value (633 wide, flex-grow 1): Noto Sans JP Regular 16/180%, #1F1915, LEFT */
.s16-row-value {
flex: 1;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
}
/* Column variant (for company row: logo above name) */
.s16-row-value-column {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Logo (#240:2367+2368): 147x44 */
.s16-logo {
width: 147px;
height: 44px;
display: block;
}
/* Address list (#240:2381): VERTICAL, gap 8, primary CENTER */
.s16-addr-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
/* Address item: HORIZONTAL, no gap, dt+dd side-by-side */
.s16-addr-item {
display: flex;
flex-direction: row;
gap: 0;
}
/* Address name (166 wide): Noto Sans JP Regular 16/180% */
.s16-addr-name {
flex-shrink: 0;
width: 166px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
margin: 0;
}
/* Address value (467 wide): same font */
.s16-addr-value {
flex: 1;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.8em;
color: #1f1915;
margin: 0;
}
/* ============================================
Frame 17: フッター (#240:2419)
VERTICAL, padding:24/0, gap:24, fill:#1F1915
============================================ */
.section-17 {
width: 100%;
padding: 24px 0;
background: #1f1915;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
box-sizing: border-box;
}
/* Copyright (#240:2420): Noto Sans JP Regular 14/180%, white, CENTER, stretch */
.s17-copyright {
align-self: stretch;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8em;
color: #ffffff;
text-align: center;
}
/* ============================================
Tablet Header
768px〜1199px
ナビゲーションのみ非表示
============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
/* PC用ヘッダー行はそのまま表示 */
.section-01 > .s01-row {
display: flex;
}
/* ナビゲーションを非表示 */
.s01-menu {
display: none;
}
/* 右側：電話番号 + CTA */
.s01-nav-area {
display: flex;
align-items: center;
gap: 12px;
}
/* 電話番号は表示 */
.s01-phone {
display: flex;
flex-shrink: 0;
}
/* CTAボタンも表示 */
.s01-buttons {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* タブレットでは少しコンパクトに */
.s01-phone-number {
font-size: 24px;
}
.s01-phone-icon {
width: 27px;
height: auto;
}
.s01-btn {
font-size: 15px;
line-height: 1.4;
white-space: nowrap;
}
.s01-btn-quote {
padding: 14px 20px;
}
.s01-btn-line {
height: auto;
padding: 14px 20px;
}
.s01-btn-line img {
width: 20px;
height: 20px;
}
/* ロゴを若干縮小 */
.s01-logo img {
width: 140px;
height: auto;
}
.s01-logo-text {
font-size: 13px;
}
}
/* ============================================
============================================
RESPONSIVE — SP (≤767px)
============================================
============================================ */
/* --------------------------------------------
Common foundation (page-wide, typography)
-------------------------------------------- */
@media (max-width: 767px) {
html,
body {
font-size: 14px;
}
/* Use `clip` (not `hidden`) so this doesn't become a scroll container.
`hidden` would break position:sticky on descendants (e.g. .section-01). */
.buyback-lp {
overflow-x: clip;
}
/* Section-level: remove fixed-width caps and reset side padding.
Individual sections re-declare their own padding below. */
.section-01,
.section-02,
.section-03,
.section-04,
.section-05,
.section-06,
.section-07,
.section-08,
.section-09,
.section-10,
.section-11,
.section-12,
.section-13,
.section-14,
.section-15,
.section-16,
.section-17 {
max-width: 100%;
}
/* Default vertical rhythm for most content sections (Figma SP: padding 64/20).
.section-03 has its own padding override below (it's a cornered orange CTA card). */
.section-04,
.section-05,
.section-08,
.section-09,
.section-10,
.section-11,
.section-13,
.section-14,
.section-15,
.section-16 {
padding: 64px 20px;
}
}
/* --------------------------------------------
SP-only header row + hamburger menu
(base styles: hidden by default, shown at ≤767)
-------------------------------------------- */
.s01-sp-row,
.s01-sp-menu-overlay,
.s01-sp-menu-panel,
.s01-sp-bottom-bar {
display: none;
}
@media (max-width: 767px) {
/* Header adjustments (Figma 623:2894: 375x63.3 base, padding 10; extra top-padding
added so the phone-CTA's ribbon can protrude above the button without clipping
against the sticky viewport edge).
z-index raised above the menu overlay (200) so the header is NOT dimmed when
the hamburger menu is open. */
.section-01 {
padding:10px;
z-index: 210;
}
/* Hide PC nav/logo row at SP */
.section-01 > .s01-row {
display: none;
}
/* SP row: logo LEFT + hamburger RIGHT (space-between) */
.s01-sp-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 8px;
width: 100%;
}
/* SP logo (Figma: 96.25x43.3) */
.s01-sp-logo {
width: 96.25px;
height: 43.3px;
display: block;
}
/* Compact CTA buttons (Frame 2 派生のコンパクト版) */
.s01-sp-btn {
position: relative;
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 6px;
height: 56px;
padding: 8px 12px;
border-radius: 80px;
border: 2px solid #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: #ffffff;
text-align: center;
box-sizing: border-box;
text-decoration: none;
}
.s01-sp-btn-mail {
background: linear-gradient(180deg, #1e74e0 28%, #1562c2 100%);
padding-left: 8px;
}
.s01-sp-btn-line {
background: linear-gradient(180deg, #37c82a 0%, #119e05 100%);
}
.s01-sp-btn-badge {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4px 6px;
background: #fcd127;
border-radius: 1000px;
color: #1f1915;
}
.s01-sp-btn-badge-label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 10px;
line-height: 1;
}
.s01-sp-btn-badge-value {
display: flex;
align-items: flex-end;
}
.s01-sp-btn-badge-num {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1;
}
.s01-sp-btn-badge-suffix {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 10px;
line-height: 1;
}
.s01-sp-btn-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.2em;
color: #ffffff;
}
.s01-sp-btn-line-icon {
width: 32px;
height: 32px;
}
/* Ribbon on CTA buttons */
.s01-sp-btn-ribbon {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
padding: 3px 12px;
background: #ffffff;
border-radius: 100px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 10px;
line-height: 1.2em;
white-space: nowrap;
box-sizing: border-box;
}
.s01-sp-btn-ribbon::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
width: 10px;
height: 5px;
background: #ffffff;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.s01-sp-btn-ribbon-blue {
border: 1px solid #1e74e0;
color: #1e74e0;
display: none;
}
.s01-sp-btn-ribbon-green {
border: 1px solid #1cc435;
color: #1cc435;
display: none;
}
/* SP header right-side actions (#623:2908): phone-CTA + hamburger, HORIZONTAL gap 6, center */
.s01-sp-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* SP header phone CTA button (#623:2909): 169.4x42, radius 80, border #D5D5D5, transparent, gap 6, padding 11/20 */
.s01-sp-phone-btn {
position: relative;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
height: 42px;
padding: 11px 20px;
border: 1px solid #d5d5d5;
border-radius: 80px;
background: transparent;
text-decoration: none;
flex-shrink: 0;
}
/* Phone icon (#623:2910): 25.4 x 16.7, green — reuses same SVG */
.s01-sp-phone-btn-icon {
width: 25.4px;
height: 16.7px;
flex: 0 0 auto;
}
/* "電話で相談する" (#623:2916): Noto Sans JP Bold 14/140%, #3B3632 */
.s01-sp-phone-btn-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.4em;
color: #3b3632;
white-space: nowrap;
}
/* Ribbon (#623:2918): 167x29 pill, white bg, 1px #1E74E0 border, radius 100, padding 6/24,
floats ABOVE the phone button with a downward-pointing triangle tip touching button top */
.s01-sp-phone-btn-ribbon {
position: absolute;
top: -36px;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
padding: 6px 24px;
background: #ffffff;
border: 1px solid #1e74e0;
border-radius: 100px;
white-space: nowrap;
pointer-events: none;
}
/* Triangle tip (#623:2920): 14.14 x 7.07, white */
.s01-sp-phone-btn-ribbon::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
transform: translateX(-50%);
width: 14px;
height: 7px;
background: #ffffff;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
/* "査定だけでもOK！" (#623:2919): Noto Sans JP Bold 14/100%, #1E74E0 */
.s01-sp-phone-btn-ribbon-text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.2em;
color: #1e74e0;
}
/* Hamburger button */
.s01-sp-hamburger {
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.s01-sp-hamburger span {
display: block;
width: 24px;
height: 2px;
background: #1f1915;
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
/* Hamburger animated → X when open */
body.is-menu-open .s01-sp-hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.is-menu-open .s01-sp-hamburger span:nth-child(2) {
opacity: 0;
}
body.is-menu-open .s01-sp-hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Overlay (visible when menu open) — cover only the middle area (below the sticky
header, above the fixed bottom bar). The header/bar are ~63.5 and 68 tall; using
the actual measured heights keeps them fully clear (their translucent bg won't
let the dim show through). */
.s01-sp-menu-overlay {
display: block;
position: fixed;
top: 63.5px;
right: 0;
bottom: 68px;
left: 0;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
z-index: 200;
}
body.is-menu-open .s01-sp-menu-overlay {
opacity: 1;
visibility: visible;
}
/* Slide-in menu panel (from right) */
.s01-sp-menu-panel {
display: block;
position: fixed;
top: 0;
right: 0;
width: 249px;
max-width: 80vw;
height: 100vh;
padding: 64px 32px;
background: #ffffff;
transform: translateX(100%);
transition: transform 0.28s ease;
z-index: 201;
box-sizing: border-box;
overflow-y: auto;
}
body.is-menu-open .s01-sp-menu-panel {
transform: translateX(0);
height: auto;
border-bottom-left-radius: 20px;
}
.s01-sp-menu-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 0;
font-size: 28px;
line-height: 1;
color: #1f1915;
cursor: pointer;
}
.s01-sp-menu-list {
display: flex;
flex-direction: column;
gap: 40px;
list-style: none;
margin-top: 64px;
padding: 0;
}
.s01-sp-menu-item {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.5em;
color: #1f1915;
text-decoration: none;
}
/* --------------------------------------------
SP fixed bottom bar (Figma 313:16098 / Frame 1618873525): 375x68,
rgba(255,255,255,0.6) + backdrop-blur 20, 2 CTA buttons horizontally
-------------------------------------------- */
/* z-index raised above the menu overlay (200) so the bottom bar is NOT dimmed when
the hamburger menu is open. */
.s01-sp-bottom-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 210;
padding: 6px 10px;
gap: 8px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-sizing: border-box;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
/* Add bottom padding to page so content doesn't hide behind the bar (68 bar + 8 breathing) */
body {
padding-bottom: 76px;
}
}
/* --------------------------------------------
SP: Frame 2 Hero visual (section-02) — Figma 303:9804 (375x380)
Absolute positioning matching Figma; vw-scaled for any SP viewport.
All positions/sizes: calc(X * 100vw / 375) where X is Figma px value.
-------------------------------------------- */
@media (max-width: 767px) {
.section-02 {
padding: 0;
gap: 0;
}
.section-02 > * + * {
margin-top: 0;
}
/* Hero visual: fixed 380 aspect ratio, overflow hidden */
.s02-hero {
width: 100%;
height: calc(380 * 100vw / 375);
overflow: hidden;
position: relative;
}
.s02-hero-bg {
position: absolute;
inset: 0;
height: calc(380 * 100vw / 375);
padding: 0;
background:
linear-gradient(94deg, rgba(255, 91, 0, 0.1) 4%, rgba(255, 207, 180, 0.1) 26%),
url("assets/hero-bg.png") center / cover no-repeat,
#f4894d;
overflow: hidden;
}
/* Show SP waves, hide PC waves */
.s02-wave-pc {
display: none;
}
.s02-wave-sp {
display: block;
}
/* SP Left wave (#313:11801): 176.7x164 at (-1, 215.5) */
.s02-wave-left-sp {
left: calc(-1 * 100vw / 375);
top: calc(215.5 * 100vw / 375);
width: calc(176.7 * 100vw / 375);
height: calc(164.4 * 100vw / 375);
}
/* SP Right wave (#303:9829): 449x491 at (498, -192.5), mostly off canvas */
.s02-wave-right-sp {
left: calc(498 * 100vw / 375);
top: calc(-192.5 * 100vw / 375);
width: calc(449 * 100vw / 375);
height: calc(491 * 100vw / 375);
}
.s02-hero-content {
position: absolute;
inset: 0;
height: calc(380 * 100vw / 375);
display: block;
gap: 0;
}
/* Variant pill: SP frame not provided — scale proportionally, top-left of hero. */
.s02-variant-pill {
left: calc(8 * 100vw / 375);
top: calc(10 * 100vw / 375);
width: auto;
}
.s02-variant-pill-box {
padding: calc(5 * 100vw / 375) calc(12 * 100vw / 375);
border-radius: calc(4 * 100vw / 375);
}
.s02-variant-pill-text {
font-size: calc(15 * 100vw / 375);
}
.s02-variant-pill-arrow {
width: calc(20 * 100vw / 375);
height: calc(15 * 100vw / 375);
}
/* Headline: single image mv-headline.svg — fits the "「古い電子ピアノも」高価買取！" area.
Figma SP text spans roughly (7, 60) to (400, 190) area — position image to cover. */
.s02-headline {
position: absolute;
left: calc(7 * 100vw / 375);
top: calc(60 * 100vw / 375);
width: calc(360 * 100vw / 375);
height: auto;
aspect-ratio: 800 / 290;
pointer-events: none;
display: block;
}
/* Piano image: absolute at (114, -102.5), 530x547 — extends off canvas */
.s02-piano {
position: absolute;
order: 0;
left: calc(179 * 100vw / 375);
top: calc(615 * 100vw / 8000);
width: calc(380 * 100vw / 580);
height: calc(380 * 100vw / 375);
}
.s02-piano-img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.s02-piano-brand {
display: none;
}
/* Star badge (mv-satei.png image, Figma SP: 103.5x103.5 at (232, 17.5)) */
.s02-star-badge {
position: absolute;
order: 0;
left: calc(232 * 100vw / 375);
top: calc(17.5 * 100vw / 375);
width: calc(103.5 * 100vw / 375);
height: calc(103.5 * 100vw / 375);
}
/* CTA card: now sibling of .s02-hero (Figma SP has separate frame 303:9990 for CTA area) */
.s02-cta-card {
position: static;
left: auto;
top: auto;
z-index: auto;
order: initial;
width: 100%;
max-width: 100%;
padding: calc(24 * 100vw / 375) calc(20 * 100vw / 375) calc(32 * 100vw / 375);
background: #ff5b00;
border: 0;
border-radius: 0;
}
.s02-cta-card-inner {
background: #ffffff;
border-radius: 10px;
padding: 32px 16px;
gap: 16px;
}
.s02-cta-title {
flex-wrap: wrap;
}
.s02-cta-title-black {
font-size: 22px;
}
.s02-cta-title-orange {
font-size: 26px;
}
.s02-btn {
width: 100%;
max-width: 303px;
height: 76px;
}
.s02-btn-text {
font-size: 16px;
}
/* Compact rectangular badges (Figma SP: 140x75/143x75/143x69/140x69, 2×2 grid, positioned absolute in hero) */
.s02-circle-badges {
position: absolute;
order: 0;
left: 0;
top: calc(191.5 * 100vw / 375);
width: 100%;
height: calc(207 * 100vw / 375);
display: block;
gap: 0;
}
.s02-circle-badge {
position: absolute;
aspect-ratio: auto;
padding: calc(8 * 100vw / 375);
border-radius: 5px;
border-width: 1px;
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(6 * 100vw / 375);
background: #ffffff;
}
/* Badge 1 (30年前): 140x75 at (19, 186.5) hero-rel, top: -5 relative to badges frame */
.s02-circle-badge:nth-child(1) {
left: calc(19 * 100vw / 375);
top: calc(-5 * 100vw / 375);
width: calc(140 * 100vw / 375);
height: calc(75 * 100vw / 375);
}
/* Badge 2 (自社配送): 143x75 at (158, 186.5) */
.s02-circle-badge:nth-child(2) {
left: calc(158 * 100vw / 375);
top: calc(-5 * 100vw / 375);
width: calc(143 * 100vw / 375);
height: calc(75 * 100vw / 375);
}
/* Badge 3 (その場): 143x69 at (158, 260.5) — bottom row */
.s02-circle-badge:nth-child(3) {
left: calc(158 * 100vw / 375);
top: calc(69 * 100vw / 375);
width: calc(143 * 100vw / 375);
height: calc(69 * 100vw / 375);
}
/* Badge 4 (減額なし): 140x69 at (19, 260.5) */
.s02-circle-badge:nth-child(4) {
left: calc(19 * 100vw / 375);
top: calc(69 * 100vw / 375);
width: calc(140 * 100vw / 375);
height: calc(69 * 100vw / 375);
}
.s02-circle-badge-icon,
.s02-circle-badge:nth-child(1) .s02-circle-badge-icon {
width: calc(32 * 100vw / 375);
height: calc(32 * 100vw / 375);
margin-bottom: 0;
flex-shrink: 0;
}
.s02-circle-badge-content {
align-items: flex-start;
gap: 0;
}
.s02-circle-badge-num {
font-size: calc(20 * 100vw / 375);
line-height: 1.2em;
}
.s02-circle-badge-title {
font-size: calc(12 * 100vw / 375);
line-height: 1.3em;
text-align: left;
}
.s02-circle-badge-title-lg {
font-size: calc(16 * 100vw / 375);
line-height: 1.3em;
text-align: left;
}
.s02-circle-badge-sm,
.s02-circle-badge-sm-orange {
font-size: calc(9 * 100vw / 375);
line-height: 1.4em;
}
/* Below block */
/* Below block (SP Figma: outer 313:11802 orange but inner 309:10215 white covers all).
Keep white bg, remove rounded top. */
.s02-below {
width: 100%;
padding: 32px 20px 40px;
gap: 32px;
border-radius: 0;
background: #ffffff;
}
/* Sub-image (SP-hidden — not shown in SP Figma design) */
.s02-sub-image {
display: none;
}
.s02-worry-section {
gap: 32px;
width: 100%;
}
/* Worry card (SP: full-width cream card, no hero-illust) */
.s02-worry-card {
width: 100%;
height: auto;
padding: 40px 16px 24px;
border-radius: 16px;
}
.s02-worry-title {
font-size: 22px;
}
.s02-worry-dots {
left: 50%;
top: -12px;
transform: translateX(-50%);
width: auto;
font-size: 22px;
height: auto;
}
.s02-worry-illust {
display: none;
}
.s02-worry-list {
padding-left: 0;
gap: 12px;
}
.s02-worry-row {
flex-direction: column;
gap: 12px;
}
.s02-worry-row-end {
justify-content: flex-start;
}
.s02-worry-box,
.s02-worry-box-289 {
width: 100%;
flex: 1 1 100%;
padding: 20px 16px;
}
.s02-worry-text {
font-size: 14px;
}
.s02-worry-text-lg {
font-size: 16px;
}
.s02-conclusion {
gap: 16px;
padding: 0 8px;
}
.s02-conclusion-bubble {
padding: 12px 20px;
font-size: 15px;
line-height: 1.5em;
}
.s02-conclusion-text {
font-size: 16px;
line-height: 1.6em;
}
}
/* --------------------------------------------
SP: Frame 3 (section-03) Orange CTA card
-------------------------------------------- */
@media (max-width: 767px) {
.section-03 {
width: 100%;
max-width: 100%;
padding: 64px 20px;
gap: 18px;
border-radius: 24px;
}
.s03-inner {
gap: 32px;
}
.s03-title-area {
gap: 20px;
}
.s03-title-block {
gap: 12px;
}
.s03-subtitle {
font-size: 16px;
}
.s03-title {
font-size: 26px;
}
.s03-desc {
font-size: 14px;
line-height: 1.7em;
}
/* Figma SP: cards grouped in 2 rows of 2 (each row is a VERTICAL stack of 2 cards), gap 16.
Each card 335x170, cornerRadius 7.5, shield badge 38.25x38.25 (smaller than PC's 51). */
.s03-cards {
gap: 16px;
}
.s03-card-row {
flex-direction: column;
gap: 16px;
}
.s03-card {
padding: 20px 20px 20px 32px;
border-radius: 7.5px;
}
.s03-card-inner {
gap: 12px;
}
.s03-card-text {
font-size: 16px;
line-height: 1.6em;
}
.s03-card-img {
width: 88px;
height: 88px;
}
.s03-card-badge {
width: 38.25px;
height: 46.75px;
}
.s03-card-badge-shield {
width: 38.25px;
height: 46.75px;
}
.s03-card-badge-num {
font-size: 11px;
margin-top: -5px;
}
.scroll-arrow {
bottom: -35px;
}
.scroll-arrow span {
width: 20px;
height: 20px;
border-right: 6px solid #ff7426;
border-bottom: 6px solid #ff7426;
transform: rotate(45deg);
}
}
/* --------------------------------------------
SP: Frame 4 (section-04) 買取事例
-------------------------------------------- */
@media (max-width: 767px) {
.s04-title-area {
gap: 12px;
}
.s04-title {
font-size: 26px;
line-height: 1.4em;
}
.s04-desc {
font-size: 14px;
line-height: 1.7em;
text-align: left;
}
/* Figma SP: cream card radius 24, padding 40/16, gap 32 */
.s04-cream-card {
width: 100%;
padding: 40px 16px;
border-radius: 24px;
gap: 32px;
}
/* Cases: 3 cards stacked (each 303x353, radius 10) */
.s04-cases {
flex-direction: column;
gap: 16px;
display: flex;
}
.s04-case {
padding: 16px 16px 24px;
gap: 16px;
border-radius: 10px;
}
.s04-case-photo {
height: 143px;
padding: 8px;
border-radius: 5px;
}
.s04-case-title {
font-size: 20px;
}
.s04-case-note {
font-size: 14px;
}
.s04-case-price-num {
font-size: 32px;
}
.s04-more {
padding: 14px 32px;
font-size: 16px;
}
.s04-cta {
gap: 16px;
}
.s04-cta-lead {
font-size: 14px;
line-height: 1.7em;
}
.s04-cta-buttons {
flex-direction: column;
gap: 12px;
width: 100%;
align-items: center;
}
.s04-cta-buttons .s02-btn {
width: 100%;
max-width: 340px;
}
.s04-cream-card{
max-width: 100%;
}
}
/* --------------------------------------------
SP: Frame 5 (section-05) 選ばれる5つの理由
-------------------------------------------- */
@media (max-width: 767px) {
.s05-inner {
gap: 32px;
}
.s05-title {
font-size: 30px;
line-height: 1.3em;
}
.s05-cards {
gap: 16px;
}
.s05-row {
flex-direction: column;
gap: 16px;
}
/* Figma SP: 335 wide, radius 6, padding 24, gap 12 (varies per card 6-12) */
.s05-card,
.s05-card-wide,
.s05-card-narrow {
width: 100%;
height: auto;
min-height: 0;
padding: 24px;
gap: 8px;
border-radius: 6px;
}
.s05-card-inner {
gap: 12px;
}
.s05-icon-circle {
width: 72px;
height: 72px;
}
.s05-icon {
width: 56px;
}
.s05-card-title {
font-size: 18px;
line-height: 1.5em;
}
.s05-card-desc {
font-size: 14px;
line-height: 1.7em;
}
}
/* --------------------------------------------
SP: Frame 6 (section-06) 安心して任せられる体制
Figma SP: image row 375x284 (only 1 image visible), orange section 640 padding 64/20,
card 335x664 radius 15 protrudes 88px above orange section top
-------------------------------------------- */
@media (max-width: 767px) {
.section-06 {
padding: 0;
}
/* Image row: SP shows 1 image at 284 tall. Hide 2nd/3rd images by keeping row's flex
but first image gets full width. */
.s06-images {
height: 284px;
}
.s06-image:nth-child(2),
.s06-image:nth-child(3) {
display: none;
}
.s06-image:first-child {
width: 100%;
}
/* Orange section: 640 tall, padding 64/20, provides overlap space for card */
.s06-orange {
height: auto;
padding: 64px 20px;
}
/* Card protrudes 88px above orange top (into image row) */
.s06-card {
position: static;
left: auto;
top: auto;
transform: none;
width: 100%;
height: auto;
margin-top: -88px;
padding: 48px 24px 56px;
border-radius: 15px;
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.s06-left,
.s06-right {
width: 100%;
height: auto;
align-self: auto;
flex: none;
}
.s06-title {
font-size: 22px;
line-height: 1.6em;
}
.s06-title-underline {
width: 100%;
max-width: 300px;
}
.s06-items {
gap: 12px;
}
.s06-item-title {
font-size: 17px;
}
.s06-item-desc {
font-size: 14px;
line-height: 1.7em;
}
/* Right column: circle badges — 3 columns grid instead of 2+3 rows */
.s06-right {
display: block;
}
.s06-badge-row + .s06-badge-row {
margin-top: 12px;
flex-wrap: nowrap;
}
.s06-badge-row {
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.s06-badge {
width: 100px;
height: 100px;
}
.s06-badge-bg {
width: 100px;
height: 100px;
opacity: 0.4;
}
.s06-badge-label {
font-size: 13px;
line-height: 1.3em;
}
}
/* --------------------------------------------
SP: Frame 7 (section-07) お客様の声
Keep horizontal carousel but shrink cards
-------------------------------------------- */
@media (max-width: 767px) {
/* Figma SP: padding 18/20/75/20, gap 18. Cards 259x403 stacked photo-top + text-below. */
.section-07 {
padding: 18px 20px 75px;
gap: 18px;
}
.s07-inner {
gap: 30px;
padding: 0;
}
.s07-title {
font-size: 28px;
line-height: 1.4em;
text-align: center;
}
.s07-carousel {
height: auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 20px;
margin: 0 -20px;
}
.s07-cards-row {
gap: 16px;
height: auto;
}
.s07-card {
flex: 0 0 259px;
width: 259px;
height: 403px;
padding: 30px;
border-radius: 11.25px;
scroll-snap-align: start;
}
.s07-card-inner {
flex-direction: column;
gap: 16px;
align-items: baseline;
text-align: left;
}
.s07-card-photo {
width: 96px;
height: 96px;
}
.s07-card-text {
width: 100%;
text-align: left;
gap: 12px;
}
.s07-card-title {
font-size: 18px;
line-height: 1.5em;
}
.s07-card-quote {
font-size: 13px;
line-height: 1.7em;
}
}
/* --------------------------------------------
SP: Frame 8 (section-08) お申し込みの流れ
4 steps horizontal with arrows → vertical with rotated arrows
-------------------------------------------- */
@media (max-width: 767px) {
.s08-inner {
gap: 32px;
}
.s08-title {
font-size: 26px;
line-height: 1.4em;
}
/* Figma SP: steps container gap 8, step cards 335 wide padding 0/24/24/24 radius 8,
arrows hidden (SP Figma doesn't show them) */
.s08-steps {
flex-direction: column;
gap: 8px;
}
.s08-step {
width: 100%;
height: auto;
min-height: 0;
padding: 0 24px 24px;
flex: none;
}
.s08-step-inner {
gap: 0;
}
.s08-step-title {
font-size: 18px;
}
.s08-step-desc {
font-size: 14px;
}
/* Arrows hidden on SP */
.s08-arrow {
display: none;
}
}
/* --------------------------------------------
SP: Frame 9 (section-09) 対応地域 + こんな電子ピアノも
-------------------------------------------- */
@media (max-width: 767px) {
/* Figma SP: gap 64 between regions block and cases card */
.section-09 {
gap: 64px;
}
.s09-regions-block {
gap: 20px;
}
.s09-title {
font-size: 26px;
line-height: 1.4em;
}
.s09-subtitle {
font-size: 14px;
line-height: 1.7em;
text-align: left;
}
.s09-regions {
gap: 16px;
}
.s09-region-row {
align-items: flex-start;
padding: 16px;
gap: 12px;
}
.s09-region-name {
width: 22%;
font-size: 16px;
}
.s09-prefectures {
gap: 6px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* Figma SP: buttons remain 107.55x37 (INSTANCE nodes reused) — flex-wrap naturally,
showing 2 per row in ~271 wide content area */
.s09-pref {
flex: 0 0 107.55px;
width: 72px;
height: 37px;
padding: 2px 8px;
font-size: 12px;
}
.s09-note {
font-size: 13px;
line-height: 1.7em;
}
/* Cases card at bottom */
.s09-cases-card {
padding: 32px 20px;
flex-direction: column;
align-items: stretch;
gap: 24px;
border-radius: 12px;
}
.s09-cases-inner {
gap: 24px;
}
.s09-cases-title {
font-size: 20px;
line-height: 1.4em;
text-align: center;
}
.s09-cases-underline {
width: 100%;
max-width: 260px;
}
.s09-cases-row {
flex-direction: column;
gap: 12px;
}
.s09-case {
padding: 20px 16px;
gap: 8px;
flex: none;
}
.s09-case-title {
font-size: 16px;
}
.s09-case-desc {
font-size: 13px;
line-height: 1.7em;
}
.s09-cases-footer {
font-size: 13px;
line-height: 1.7em;
}
}
/* --------------------------------------------
SP: Frame 10 (section-10) 高価買取できる理由
-------------------------------------------- */
@media (max-width: 767px) {
.s10-inner {
flex-direction: column;
gap: 24px;
}
.s10-left,
.s10-right {
width: 100%;
flex: none;
}
.s10-title {
font-size: 26px;
line-height: 1.4em;
text-align: center;
}
.s10-subtitle {
font-size: 18px;
line-height: 1.6em;
}
.s10-desc {
font-size: 14px;
line-height: 1.8em;
}
.s10-right {
height: 245px;
}
}
/* --------------------------------------------
SP: Frame 11 (section-11) よくあるご質問
-------------------------------------------- */
@media (max-width: 767px) {
.s11-inner {
gap: 24px;
}
.s11-title {
font-size: 26px;
}
.s11-list {
gap: 8px;
}
/* Figma SP: FAQ items 335 wide, cornerRadius 5, padding 16 */
.s11-item {
padding: 16px;
border-radius: 5px;
}
.s11-q {
gap: 12px;
}
.s11-mark {
width: 32px;
height: 32px;
font-size: 16px;
}
.s11-q-text {
font-size: 15px;
line-height: 1.6em;
}
.s11-a {
gap: 12px;
padding-top: 16px;
}
.s11-a-text {
font-size: 14px;
line-height: 1.8em;
}
}
/* --------------------------------------------
SP: Frame 12 (section-12) 処分費CTA
Reset card protrusion; stack banner + orange
-------------------------------------------- */
@media (max-width: 767px) {
/* Figma SP: banner 375x344 padding 64/20/124/20, orange 375x604 padding 64/16,
card protrudes -84 above orange top */
.s12-banner {
height: auto;
padding: 64px 20px 124px;
align-items: flex-start;
}
.s12-banner-pill {
padding: 10px 24px;
}
.s12-banner-pill-text {
font-size: 18px;
}
.s12-banner-tail {
width: 20px;
height: 12px;
}
.s12-banner-headline {
font-size: 22px;
line-height: 1.5em;
padding: 0 8px;
width: 100%;
}
.s12-orange {
height: auto;
padding: 64px 16px;
}
/* Card: reset absolute, negative margin -84 to protrude into banner */
.s12-card {
position: static;
left: auto;
top: auto;
transform: none;
width: 100%;
height: auto;
margin-top: -84px;
padding: 32px 20px;
gap: 24px;
border-radius: 15px;
}
.s12-card-lead {
font-size: 14px;
line-height: 1.7em;
text-align: left;
}
.s12-buttons {
flex-direction: column;
width: 100%;
align-items: center;
gap: 24px;
}
.s12-btn {
width: 100%;
max-width: 340px;
}
.s12-note {
padding: 20px 16px 20px 90px;
}
.s12-note-text {
font-size: 14px;
line-height: 1.6em;
}
.s12-note-piano {
left: 8px;
top: -12px;
width: 100px;
height: auto;
aspect-ratio: 186 / 212;
}
}
/* --------------------------------------------
SP: Frame 13 (section-13) リサイクル
-------------------------------------------- */
@media (max-width: 767px) {
.s13-inner {
flex-direction: column;
gap: 24px;
}
.s13-left,
.s13-right {
width: 100%;
flex: none;
}
.s13-title {
font-size: 24px;
line-height: 1.5em;
}
.s13-desc {
font-size: 14px;
line-height: 1.8em;
}
/* Figma SP: 335x236 image collage (2 overlapping) */
.s13-right {
height: 236px;
max-width: 335px;
margin: 0 auto;
}
.s13-img-main {
width: 68%;
height: 76%;
top: 24%;
left: 0;
}
.s13-img-sub {
width: 42%;
height: 60%;
left: 58%;
top: 0;
}
}
/* --------------------------------------------
SP: Frame 14 (section-14) メーカー、型番などの調べ方
-------------------------------------------- */
@media (max-width: 767px) {
/* Figma SP: card 335x942 radius 10, padding 48/24, stroke 1px (thinner than PC's 6px), gap 24 */
.s14-card {
padding: 48px 24px;
border-width: 1px;
gap: 24px;
border-radius: 10px;
}
.s14-row1 {
flex-direction: column;
gap: 24px;
}
.s14-left,
.s14-guide-img {
width: 100%;
flex: none;
}
.s14-title-row {
gap: 12px;
}
.s14-icon {
width: 44px;
height: 44px;
}
.s14-title {
font-size: 22px;
line-height: 1.4em;
}
.s14-desc {
font-size: 14px;
line-height: 1.8em;
}
.s14-guide-img {
height: 200px;
}
/* Figma SP: thumbnails still 139.43x117.5, 2 columns × 7 rows on SP (287 content ÷ 139.43 = 2 cols) */
.s14-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.s14-thumb {
height: auto;
aspect-ratio: 139.43 / 117.5;
}
}
/* --------------------------------------------
SP: Frame 15 (section-15) フォーム
-------------------------------------------- */
@media (max-width: 767px) {
/* Figma SP: padding 124 top / 64 bottom to accommodate the star badge protruding above title */
.section-15 {
padding: 124px 20px 64px;
}
.s15-inner {
gap: 20px;
}
/* Orange background: shrink and re-position for SP */
.s15-orange-bg {
left: -20px;
top: -124px;
width: calc(100% + 40px);
height: 668px;
}
.s15-title-area {
gap: 20px;
}
/* Star badge: Figma SP has 207x207 absolute at (84, -61) — big prominent star.
Use fluid size 40vw with clamp so it fits at various SP widths. */
.s15-title-block {
padding-top: 120px;
padding-left: 0;
}
.s15-star {
right: auto;
left: 50%;
transform: translateX(-50%);
top: -60px;
width: clamp(160px, 44vw, 207px);
height: clamp(160px, 44vw, 207px);
margin-right: 0;
}
.s15-star-shape {
width: 100%;
height: 100%;
}
.s15-star-label {
top: 22%;
}
.s15-star-label-a,
.s15-star-label-b {
font-size: 14px;
}
.s15-star-price {
top: 42%;
}
.s15-star-price-num {
font-size: 56px;
}
.s15-star-price-yen {
font-size: 16px;
margin-bottom: 6px;
}
.s15-title {
font-size: 26px;
line-height: 1.4em;
text-align: center;
}
.s15-required-note {
font-size: 12px;
line-height: 1.5em;
}
/* SP phone card (#623:2999): 343.5x143, padding 24, radius 11.25, VERTICAL gap 8, center */
.s15-phone-card {
width: 100%;
padding: 24px;
border-radius: 11.25px;
flex-direction: column;
gap: 8px;
}
/* SP heading: Noto Sans JP Bold 16/160%, single line — hide the
*/
.s15-phone-heading {
width: auto;
font-size: 16px;
line-height: 1.6em;
text-align: center;
}
.s15-phone-heading br {
display: none;
}
/* SP: no divider */
.s15-phone-divider {
display: none;
}
/* SP info block: full-width, vertical, gap 8, center */
.s15-phone-info {
width: auto;
align-items: center;
gap: 8px;
}
/* SP phone row: gap 3.375, center */
.s15-phone-number-row {
gap: 3.375px;
}
/* SP phone icon: 32.25 x 21 */
.s15-phone-icon {
width: 32.25px;
height: 21px;
}
/* SP phone number: Roboto SemiBold 32, underline, -0.04em */
.s15-phone-number {
font-size: 32px;
text-decoration: underline;
}
/* SP hours row: gap 4.5 */
.s15-phone-hours {
gap: 4.5px;
}
.s15-phone-hours-group {
gap: 4.5px;
}
/* SP hours labels: 12px */
.s15-phone-hours-label {
font-size: 12px;
}
/* SP colon and times: 15px */
.s15-phone-hours-colon,
.s15-phone-hours-time {
font-size: 15px;
}
/* SP slash: 12.375px */
.s15-phone-hours-slash {
font-size: 12.375px;
}
.s15-form {
width: 100%;
padding: 32px 20px;
gap: 24px;
border-radius: 12px;
}
.s15-help-link {
padding: 16px;
font-size: 13px;
text-align: center;
}
.s15-fields {
gap: 20px;
}
.s15-label-text {
font-size: 15px;
}
.s15-required {
font-size: 12px;
}
.s15-support {
font-size: 12px;
}
.s15-input {
height: 48px;
padding: 10px 12px;
font-size: 14px;
}
select.s15-input {
padding-right: 36px;
background-position: right 12px center;
}
.s15-input-narrow {
width: 100%;
}
.s15-textarea {
height: 120px;
}
.s15-radios {
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.s15-radio-mark {
width: 24px;
height: 24px;
}
.s15-radio input[type="radio"] {
width: 24px;
height: 24px;
}
.s15-radio input[type="radio"]:checked + .s15-radio-mark::after {
width: 12px;
height: 12px;
}
.s15-radio-text {
font-size: 14px;
}
.s15-privacy-box {
padding: 12px 16px;
max-height: 200px;
}
.s15-privacy-text {
font-size: 12px;
}
.s15-submit {
width: 100%;
max-width: 340px;
}
}
/* --------------------------------------------
SP: Frame 16 (section-16) 会社概要
Figma SP: 375x1623, dark bg, padding 64/0, gap 24
-------------------------------------------- */
@media (max-width: 767px) {
.section-16 {
padding: 64px 16px;
gap: 24px;
}
.s16-title-area {
gap: 16px;
}
.s16-title {
font-size: 28px;
}
.s16-lead {
font-size: 13px;
line-height: 1.7em;
text-align: left;
}
/* Figma SP: card 335x1263, cornerRadius 10, padding 48/24, gap 16 */
.s16-card {
width: 100%;
padding: 48px 24px;
border-radius: 10px;
}
/* Rows: label on top of value (vertical stack), padding 24 top/bottom, gap 16 */
.s16-row {
flex-direction: column;
gap: 16px;
padding: 24px 0;
}
.s16-row-label {
width: 100%;
font-weight: 700;
font-size: 14px;
}
.s16-row-value {
font-size: 14px;
}
.s16-logo {
width: 130px;
height: auto;
}
/* Address list: keep name + value stacked */
.s16-addr-item {
flex-direction: column;
gap: 2px;
}
.s16-addr-name {
width: 100%;
font-weight: 700;
font-size: 14px;
}
.s16-addr-value {
font-size: 14px;
}
}
/* --------------------------------------------
SP: Frame 17 (section-17) フッター
Figma SP: 375x70, dark #1F1915, padding 24/0
-------------------------------------------- */
@media (max-width: 767px) {
.section-17 {
padding: 24px 16px;
}
.s17-copyright {
font-size: 11px;
line-height: 1.6em;
}
}
/* ============================================
Hero (section-02) — responsive tweak between 768〜1439 to keep CTA card visible
as viewport shrinks below 1440px.
Scale-based approach: keep the design at 1440 but shrink whole hero using transform.
============================================ */
@media (min-width: 768px) and (max-width: 1439px) {
/* clip (not hidden) so descendant position:sticky (e.g. .section-01) keeps working */
.buyback-lp {
overflow-x: clip;
}
.section-02 {
width: 1440px;
max-width: 1440px;
transform-origin: top center;
transform: scale(calc(100vw / 1440px));
/* Compensate DOM height to match scaled visual height (hero 728 + below ~1213 ≈ 1941) */
margin-bottom: calc(1941px * (100vw / 1440px - 1));
}
}
/* ==================================================
レビュー評価エリア
================================================== */
.review_box {
display: flex;
align-items: stretch;
justify-content: center;
width: calc(100% - 0px);
max-width: 1200px;
margin: 30px auto 10px;
padding: 30px 60px;
background: #fffdf9;
border: 1px solid #eadfd5;
border-radius: 16px;
box-sizing: border-box;
box-shadow: 0 5px 18px rgba(90, 50, 20, 0.08);
}
/* ==================================================
既存CSSのfloatなどをリセット
================================================== */
.review_box dl,
.review_box dt,
.review_box dd,
.review_box .comprehensive_evaluation,
.review_box .star_box,
.review_box .each_star,
.review_box .each_item,
.review_box .each_star_image {
float: none;
box-sizing: border-box;
}
/* ==================================================
左側：総合評価
================================================== */
.comprehensive_evaluation {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
flex-shrink: 0;
padding: 0 50px 0 20px;
border-right: 1px solid #eadfd5;
}
/* dl */
.comprehensive_evaluation dl {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
/* 総合評価 */
.comprehensive_evaluation dt {
margin: 0 0 6px;
padding: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: #333;
}
/* 4.9 */
.comprehensive_evaluation dl > dd:nth-of-type(1) {
margin: 0 0 7px;
padding: 0;
font-family:
Arial,
"Noto Sans JP",
sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
color: #ed6b23;
}
/* ==================================================
総合評価の星
================================================== */
.sogo_star {
margin: 0 0 7px !important;
padding: 0;
}
.sogo_star span {
display: block;
}
.sogo_star_image {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
margin: 0;
padding: 0;
}
.sogo_star_image img {
display: block;
width: 20px;
height: auto;
margin: 0;
padding: 0;
filter: drop-shadow(
0 1px 1px rgba(213, 147, 49, 0.15)
);
}
/* ==================================================
総合件数
================================================== */
.sogo_kensu {
margin: 0 !important;
padding: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #777;
}
/* ==================================================
右側：項目別評価
================================================== */
.star_box {
display: flex;
flex-direction: column;
justify-content: center;
width: 430px;
flex-shrink: 0;
gap: 13px;
padding: 0 0 0 50px;
}
/* 各項目 */
.each_star {
display: flex;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
}
/* 査定スピードなど */
.each_item {
width: 130px;
flex-shrink: 0;
margin: 0;
padding: 0 15px 0 0;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: #333;
white-space: nowrap;
}
/* ==================================================
項目別の星
================================================== */
.each_star_image {
display: flex;
align-items: center;
gap: 3px;
margin: 0;
padding: 0;
}
.each_star_image img {
display: block;
width: 20px;
height: auto;
margin: 0;
padding: 0;
filter: drop-shadow(
0 1px 1px rgba(213, 147, 49, 0.15)
);
}
/* ==================================================
clearfixの既存指定対策
================================================== */
.review_box .clearfix::before,
.review_box .clearfix::after {
content: none;
}
/* ==================================================
タブレット
================================================== */
@media screen and (max-width: 900px) {
.review_box {
width: calc(100% - 40px);
padding: 28px 30px;
}
.comprehensive_evaluation {
width: 42%;
padding: 0 30px 0 10px;
}
.star_box {
width: 58%;
padding-left: 30px;
}
.each_item {
width: 120px;
font-size: 14px;
}
.sogo_star_image img,
.each_star_image img {
width: 19px;
}
}
/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 767px) {
.review_box {
display: block;
width: calc(100% - 30px);
margin: 25px auto 45px;
padding: 24px 20px;
border-radius: 14px;
}
/* ------------------------------
総合評価
------------------------------ */
.comprehensive_evaluation {
width: 100%;
padding: 0 0 22px;
border-right: none;
border-bottom: 1px solid #eadfd5;
}
.comprehensive_evaluation dt {
font-size: 15px;
}
.comprehensive_evaluation dl > dd:nth-of-type(1) {
font-size: 30px;
}
.sogo_kensu {
font-size: 13px;
}
/* ------------------------------
項目別評価
------------------------------ */
.star_box {
width: 100%;
gap: 15px;
padding: 22px 0 0;
}
.each_star {
justify-content: space-between;
}
.each_item {
width: auto;
padding-right: 15px;
font-size: 14px;
}
.sogo_star_image img,
.each_star_image img {
width: 19px;
}
}
/* ==================================================
小さいスマートフォン
================================================== */
@media screen and (max-width: 420px) {
.review_box {
width: calc(100% - 24px);
padding: 22px 16px;
}
.each_item {
font-size: 13px;
}
.each_star_image {
gap: 1px;
}
.sogo_star_image img,
.each_star_image img {
width: 17px;
}
}