@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;

}
html {
  overflow-x: hidden !important;
}
body {
  line-height: 1;
  color: color: rgb(105, 104, 104);
  width:100%;
  overflow-x: hidden !important;
  font-weight: 600 !important;
}
ol, ul {
  list-style: none;

}
a {
  text-decoration: none !important;
  color: #212529;

}
a:hover {
  opacity:0.8;

}
blockquote, q {
  quotes: none;

}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;

}
table {
  border-collapse: collapse;
  border-spacing: 0;

}
img {
  vertical-align: bottom;

}
/* 選べれる理由-------------------------------------------------------------------------------------------------------- */
#reason {
--green-dark: #2E7D32;
--green-main: #4CAF50;
--green-light: #81C784;
--green-pale: #C8E6C9;
--green-bg: #E8F5E9;
--white: #FFFFFF;
--gray-light: #F5F5F5;
--text-dark: #333333;
--text-gray: #666666;
--pink-main: #FFB6C1;
--pink-dark: #FF91A4;
--yellow-main: #FFD54F;
--yellow-dark: #FFB300;
--blue-main: #42A5F5;
--blue-dark: #1E88E5;
--red-main: #C62828;

font-family: 'Noto Sans JP', sans-serif;
background: linear-gradient(135deg, var(--white) 0%, var(--green-bg) 100%);
color: var(--text-dark);
line-height: 1.8;
overflow-x: hidden;
position: relative;
padding: 60px 20px;
}

#reason * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 背景デコレーション */
#reason .bg-decorations {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}

#reason .bg-circle {
position: absolute;
border-radius: 50%;
opacity: 0.15;
background: var(--green-main);
}

#reason .bg-circle:nth-child(1) {
width: 300px;
height: 300px;
top: -100px;
right: -50px;
animation: reasonFloat 8s ease-in-out infinite;
}

#reason .bg-circle:nth-child(2) {
width: 200px;
height: 200px;
bottom: 10%;
left: -80px;
animation: reasonFloat 6s ease-in-out infinite reverse;
}

#reason .bg-circle:nth-child(3) {
width: 150px;
height: 150px;
top: 40%;
right: 5%;
animation: reasonFloat 7s ease-in-out infinite 1s;
}

#reason .bg-circle:nth-child(4) {
width: 100px;
height: 100px;
bottom: 20%;
right: 20%;
animation: reasonFloat 5s ease-in-out infinite 0.5s;
}

@keyframes reasonFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(10deg); }
}

#reason .reasons-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
}

/* 理由カード */
#reason .reason-card {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 60px;
background: var(--white);
border-radius: 40px;
padding: 40px;
box-shadow: 0 10px 40px rgba(76, 175, 80, 0.12);
border: 3px solid var(--green-main);
position: relative;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

#reason .reason-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 60px rgba(76, 175, 80, 0.2);
}

#reason .reason-card:nth-child(even) {
flex-direction: row-reverse;
}

/* アイコンエリア */
#reason .icon-area {
position: relative;
flex-shrink: 0;
}

#reason .icon-circle {
width: 180px;
height: 180px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: linear-gradient(135deg, var(--white) 0%, var(--gray-light) 100%);
box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.1),
    inset 0 -5px 20px rgba(0, 0, 0, 0.05);
}

/* バッジ */
#reason .reason-badge {
position: absolute;
top: -10px;
left: -10px;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 900;
z-index: 2;
background: var(--green-main);
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
animation: reasonBounce 2s ease-in-out infinite;
}

@keyframes reasonBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}

#reason .reason-badge .label {
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}

#reason .reason-badge .number {
font-size: 26px;
line-height: 1;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#reason .icon-label {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
text-align: center;
line-height: 1.4;
margin-top: 8px;
}

#reason .icon-label .highlight {
color: var(--green-dark);
font-weight: 900;
}

#reason .icon-label .highlight-red {
color: var(--red-main);
font-weight: 900;
}

/* ===== REASON 01: コイン ===== */
#reason .coins-container {
position: relative;
width: 100px;
height: 70px;
}

#reason .coin {
position: absolute;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#reason .coin-gold {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FFD93D, #F4A900);
top: 0;
left: 25px;
}

#reason .coin-gold::after {
content: '¥';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 900;
color: #C68600;
}

#reason .coin-silver {
width: 35px;
height: 35px;
background: linear-gradient(135deg, #E8E8E8, #BDBDBD);
}

#reason .coin-silver-1 { bottom: 0; left: 0; }
#reason .coin-silver-2 { bottom: 5px; left: 30px; }
#reason .coin-silver-3 { bottom: 0; right: 5px; }

/* ===== REASON 02: 時計 ===== */
#reason .clock-container {
position: relative;
width: 80px;
height: 80px;
}

#reason .clock-face {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--white), #F5F5F5);
border: 5px solid var(--blue-main);
border-radius: 50%;
position: relative;
box-shadow: 0 4px 15px rgba(66, 165, 245, 0.3);
}

#reason .clock-center {
width: 8px;
height: 8px;
background: var(--blue-dark);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}

#reason .clock-hand {
position: absolute;
background: var(--text-dark);
transform-origin: bottom center;
left: 50%;
border-radius: 2px;
}

#reason .clock-hand-hour {
width: 4px;
height: 20px;
bottom: 50%;
margin-left: -2px;
transform: rotate(-60deg);
}

#reason .clock-hand-minute {
width: 3px;
height: 28px;
bottom: 50%;
margin-left: -1.5px;
transform: rotate(80deg);
}

#reason .clock-mark {
position: absolute;
width: 3px;
height: 8px;
background: var(--blue-dark);
left: 50%;
margin-left: -1.5px;
transform-origin: center 35px;
}

#reason .clock-mark:nth-child(1) { transform: rotate(0deg); }
#reason .clock-mark:nth-child(2) { transform: rotate(90deg); }
#reason .clock-mark:nth-child(3) { transform: rotate(180deg); }
#reason .clock-mark:nth-child(4) { transform: rotate(270deg); }

/* ===== REASON 03: 女性スタッフ ===== */
#reason .staff-container {
position: relative;
width: 70px;
height: 85px;
}

#reason .staff-head {
width: 40px;
height: 45px;
background: linear-gradient(135deg, #FFCCBC, #FFAB91);
border-radius: 50% 50% 45% 45%;
position: absolute;
top: 0;
left: 15px;
}

#reason .staff-hair {
width: 45px;
height: 30px;
background: #5D4037;
border-radius: 50% 50% 0 0;
position: absolute;
top: -2px;
left: 12px;
}

#reason .staff-hair::after {
content: '';
width: 50px;
height: 20px;
background: #5D4037;
border-radius: 0 0 50% 50%;
position: absolute;
top: 20px;
left: -2px;
}

#reason .staff-body {
width: 55px;
height: 40px;
background: linear-gradient(135deg, #455A64, #37474F);
border-radius: 10px 10px 0 0;
position: absolute;
bottom: 0;
left: 8px;
}

#reason .staff-collar {
width: 20px;
height: 12px;
background: var(--white);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

#reason .staff-eye {
width: 4px;
height: 4px;
background: #333;
border-radius: 50%;
position: absolute;
top: 20px;
}

#reason .staff-eye.left { left: 24px; }
#reason .staff-eye.right { left: 40px; }

#reason .staff-mouth {
width: 8px;
height: 4px;
border-bottom: 2px solid #E57373;
border-radius: 0 0 50% 50%;
position: absolute;
top: 30px;
left: 31px;
}

/* ===== REASON 04: 研修（会議） ===== */
#reason .meeting-container {
position: relative;
width: 100px;
height: 70px;
}

#reason .meeting-board {
width: 50px;
height: 35px;
background: var(--white);
border: 3px solid #78909C;
border-radius: 3px;
position: absolute;
top: 0;
left: 25px;
}

#reason .meeting-board::after {
content: '';
width: 30px;
height: 3px;
background: var(--green-main);
position: absolute;
top: 8px;
left: 7px;
box-shadow: 0 8px 0 var(--green-light), 0 16px 0 var(--green-pale);
}

#reason .meeting-person {
position: absolute;
bottom: 0;
}

#reason .meeting-person-head {
width: 15px;
height: 15px;
background: #FFCCBC;
border-radius: 50%;
margin: 0 auto 2px;
}

#reason .meeting-person-body {
width: 20px;
height: 18px;
background: #455A64;
border-radius: 5px 5px 0 0;
}

#reason .meeting-person:nth-child(2) { left: 5px; }
#reason .meeting-person:nth-child(3) { left: 30px; }
#reason .meeting-person:nth-child(4) { left: 55px; }
#reason .meeting-person:nth-child(5) { left: 80px; }

/* ===== REASON 05: カレンダー ===== */
#reason .calendar-container {
position: relative;
width: 80px;
height: 75px;
}

#reason .calendar-body {
width: 70px;
height: 60px;
background: var(--white);
border: 3px solid #EF5350;
border-radius: 8px;
position: absolute;
bottom: 0;
left: 5px;
overflow: hidden;
}

#reason .calendar-header {
width: 100%;
height: 18px;
background: linear-gradient(135deg, #EF5350, #E53935);
}

#reason .calendar-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
padding: 5px;
}

#reason .calendar-cell {
width: 8px;
height: 6px;
background: #E0E0E0;
border-radius: 1px;
}

#reason .calendar-cell.highlight {
background: #EF5350;
}

#reason .calendar-cell.highlight-yellow {
background: var(--yellow-main);
}

#reason .calendar-ring {
width: 8px;
height: 12px;
background: #78909C;
border-radius: 4px;
position: absolute;
top: 0;
}

#reason .calendar-ring.left { left: 18px; }
#reason .calendar-ring.right { right: 18px; }

/* ===== REASON 06: 損害賠償（書類とペン） ===== */
#reason .document-container {
position: relative;
width: 80px;
height: 80px;
}

#reason .document-paper {
width: 55px;
height: 70px;
background: var(--white);
border: 2px solid #BDBDBD;
border-radius: 3px;
position: absolute;
bottom: 0;
left: 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#reason .document-line {
width: 35px;
height: 3px;
background: #E0E0E0;
position: absolute;
left: 10px;
border-radius: 2px;
}

#reason .document-line:nth-child(1) { top: 12px; }
#reason .document-line:nth-child(2) { top: 22px; }
#reason .document-line:nth-child(3) { top: 32px; }
#reason .document-line:nth-child(4) { top: 42px; width: 25px; }

#reason .document-pen {
width: 8px;
height: 50px;
background: linear-gradient(135deg, #FFB300, #FF8F00);
border-radius: 2px 2px 0 50%;
position: absolute;
bottom: 10px;
right: 5px;
transform: rotate(-30deg);
}

#reason .document-pen::before {
content: '';
width: 8px;
height: 12px;
background: #333;
position: absolute;
bottom: 0;
border-radius: 0 0 0 50%;
}

#reason .document-pen::after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #333;
position: absolute;
bottom: -6px;
left: 0;
}

#reason .document-hand {
width: 25px;
height: 20px;
background: #FFCCBC;
border-radius: 5px;
position: absolute;
bottom: 25px;
right: 0;
transform: rotate(-30deg);
}

/* コンテンツエリア */
#reason .content-area {
flex: 1;
}

#reason .content-title {
display: inline-block;
font-size: 20px;
font-weight: 900;
margin-bottom: 15px;
color: var(--text-dark);
}

#reason .content-title .highlight {
color: var(--green-dark);
}

#reason .content-title .highlight-red {
color: var(--red-main);
}

#reason .content-description {
font-size: 15px;
color: var(--text-gray);
line-height: 2;
}

/* レスポンシブ */
@media (max-width: 768px) {
#reason .reason-card,
#reason .reason-card:nth-child(even) {
    flex-direction: column;
    text-align: center;
    padding: 30px 25px;
    border-radius: 30px;
}

#reason .icon-circle {
    width: 150px;
    height: 150px;
}

#reason .content-title {
    font-size: 18px;
}

#reason .bg-circle:nth-child(1) {
    width: 200px;
    height: 200px;
}

#reason .bg-circle:nth-child(3) {
    display: none;
}
}
/* 比較表-------------------------------------------------------------------------------------------------------- */
   #comparison {
--green-dark: #2E7D32;
--green-main: #4CAF50;
--green-light: #81C784;
--green-pale: #C8E6C9;
--green-bg: #E8F5E9;
--yellow-main: #FFE066;
--yellow-bright: #FFD700;
--yellow-light: #FFF9E6;
--white: #FFFFFF;
--gray-light: #F5F5F5;
--gray-bg: #E8E8E8;
--text-dark: #333333;
--text-gray: #666666;

font-family: 'Noto Sans JP', sans-serif;
background: var(--gray-bg);
color: var(--text-dark);
line-height: 1.8;
padding: 80px 20px 60px;
}

#comparison * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#comparison .comparison-container {
max-width: 900px;
margin: 0 auto;
}

/* タイトル */
#comparison .section-title {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
}

#comparison .section-title::before,
#comparison .section-title::after {
content: '';
width: 30px;
height: 3px;
background: var(--green-main);
transform: rotate(-45deg);
}

#comparison .section-title::after {
transform: rotate(45deg);
}

#comparison .section-title h2 {
font-size: 28px;
font-weight: 900;
color: var(--green-main);
letter-spacing: 2px;
}

#comparison .section-title h2 .highlight {
color: var(--yellow-bright);
text-shadow: 1px 1px 0 var(--green-dark), -1px -1px 0 var(--green-dark), 1px -1px 0 var(--green-dark), -1px 1px 0 var(--green-dark);
}

/* テーブルコンテナ */
#comparison .table-container {
background: var(--white);
border-radius: 20px;
padding: 40px 30px 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: visible;
}

/* テーブル */
#comparison table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}

#comparison th {
padding: 15px 10px;
font-weight: 700;
text-align: center;
vertical-align: bottom;
}

#comparison th:first-child {
width: 18%;
}

/* キラキらっこ宮崎ヘッダー - 飛び出すデザイン */
#comparison th:nth-child(2) {
width: 32%;
position: relative;
padding: 0;
vertical-align: bottom;
}

#comparison .cuore-header {
background: linear-gradient(135deg, var(--green-main) 0%, var(--green-dark) 100%);
color: var(--white);
font-size: 22px;
font-weight: 900;
border-radius: 20px 20px 0 0;
padding: 30px 15px 20px;
margin-top: -30px;
box-shadow: 0 -8px 30px rgba(76, 175, 80, 0.4);
position: relative;
}

#comparison th:nth-child(3),
#comparison th:nth-child(4) {
width: 25%;
background: var(--green-pale);
color: var(--text-dark);
font-size: 16px;
}

#comparison th:nth-child(3) {
border-radius: 15px 0 0 0;
}

#comparison th:nth-child(4) {
border-radius: 0 15px 0 0;
}

/* テーブルボディ */
#comparison td {
padding: 18px 15px;
text-align: center;
vertical-align: middle;
font-size: 15px;
}

/* 行ヘッダー */
#comparison td:first-child {
background: var(--gray-light);
font-weight: 700;
color: var(--text-dark);
border-bottom: 1px solid #E0E0E0;
border-left: 4px solid var(--green-main);
}

/* キラキらっこ宮崎列 - 黄色背景で強調 */
#comparison td:nth-child(2) {
background: var(--yellow-main);
color: var(--green-dark);
font-weight: 900;
font-size: 17px;
}

/* 最後の行の下部を丸く */
#comparison tbody tr:last-child td:nth-child(2) {
border-radius: 0 0 15px 15px;
}

/* 他業者・自治体列 */
#comparison td:nth-child(3),
#comparison td:nth-child(4) {
background: var(--white);
color: var(--text-gray);
border-bottom: 1px solid #E0E0E0;
}

#comparison tbody tr:last-child td:nth-child(3),
#comparison tbody tr:last-child td:nth-child(4) {
border-bottom: none;
}

/* レスポンシブ */
@media (max-width: 768px) {
#comparison {
    padding: 60px 15px 40px;
}

#comparison .section-title h2 {
    font-size: 20px;
}

#comparison .table-container {
    padding: 30px 15px 20px;
    border-radius: 15px;
    overflow-x: auto;
}

#comparison table {
    min-width: 550px;
}

#comparison .cuore-header {
    font-size: 16px;
    padding: 20px 10px 15px;
    margin-top: -20px;
}

#comparison th:nth-child(3),
#comparison th:nth-child(4) {
    font-size: 14px;
}

#comparison td {
    padding: 12px 8px;
    font-size: 13px;
}

#comparison td:nth-child(2) {
    font-size: 14px;
}
}
/* BEFORE-AFTER-------------------------------------------------------------------------------------------------------- */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

#before-after {
--gold: #C9A227;
--gold-light: #E8D48A;
--gold-dark: #8B7355;
--green-dark: #1B4332;
--green-main: #2D5A3D;
--green-light: #52796F;
--cream: #FDFBF7;
--cream-dark: #F5F0E6;
--white: #FFFFFF;
--text-dark: #2C2C2C;
--text-gray: #5A5A5A;

font-family: 'Noto Serif JP', serif;
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
color: var(--text-dark);
line-height: 1.9;
padding: 80px 20px;
}

#before-after * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#before-after .ba-container {
max-width: 950px;
margin: 0 auto;
}

/* セクションタイトル */
#before-after .section-header {
text-align: center;
margin-bottom: 50px;
}

#before-after .section-title {
font-size: 28px;
font-weight: 700;
color: var(--green-dark);
letter-spacing: 4px;
position: relative;
display: inline-block;
padding: 0 20px;
}

#before-after .section-title::before,
#before-after .section-title::after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#before-after .section-title::before {
right: 100%;
}

#before-after .section-title::after {
left: 100%;
}

#before-after .section-subtitle {
font-size: 12px;
color: var(--gold-dark);
letter-spacing: 3px;
margin-top: 10px;
text-transform: uppercase;
}

/* コンテンツカード */
#before-after .voice-card {
background: var(--white);
border-radius: 3px;
padding: 50px;
box-shadow: 
    0 10px 60px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(201, 162, 39, 0.2);
position: relative;
}

#before-after .voice-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--green-dark), var(--gold), var(--green-dark));
}

/* 引用マーク */
#before-after .quote-mark {
position: absolute;
top: 30px;
left: 40px;
font-size: 80px;
color: var(--gold-light);
opacity: 0.3;
font-family: Georgia, serif;
line-height: 1;
}

/* お客様情報ヘッダー */
#before-after .voice-header {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 25px;
position: relative;
z-index: 1;
}

#before-after .customer-name {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--green-dark);
padding: 8px 18px;
background: var(--cream);
border: 1px solid var(--gold);
letter-spacing: 1px;
}

#before-after .customer-name::before {
content: '';
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
}

#before-after .voice-title {
font-size: 22px;
font-weight: 600;
color: var(--green-dark);
letter-spacing: 1px;
}

/* 本文 */
#before-after .voice-text {
font-size: 15px;
color: var(--text-gray);
line-height: 2.2;
margin-bottom: 40px;
padding-left: 20px;
border-left: 2px solid var(--gold-light);
position: relative;
z-index: 1;
}

#before-after .voice-text .highlight {
color: var(--green-dark);
font-weight: 600;
background: linear-gradient(transparent 60%, var(--gold-light) 60%);
}

/* 区切り線 */
#before-after .divider {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
}

#before-after .divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

#before-after .divider-icon {
color: var(--gold);
font-size: 14px;
}

/* Before/After画像エリア */
#before-after .ba-images {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}

#before-after .ba-item {
flex: 1;
max-width: 380px;
}

#before-after .ba-image-wrapper {
position: relative;
}

#before-after .ba-image {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--cream-dark);
overflow: hidden;
border: 1px solid #E0E0E0;
}

#before-after .ba-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* プレースホルダー画像 */
#before-after .ba-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #E8E8E8 0%, #D8D8D8 100%);
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 13px;
font-family: sans-serif;
letter-spacing: 1px;
}

#before-after .ba-label {
text-align: center;
margin-top: 15px;
}

#before-after .ba-label span {
display: inline-block;
padding: 10px 40px;
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
font-family: 'Arial', sans-serif;
}

#before-after .ba-item.before .ba-label span {
background: var(--white);
color: var(--text-dark);
border: 1px solid var(--text-dark);
}

#before-after .ba-item.after .ba-label span {
background: var(--green-dark);
color: var(--white);
}

/* 矢印 */
#before-after .ba-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex-shrink: 0;
color: var(--gold);
}

#before-after .ba-arrow-icon {
font-size: 24px;
letter-spacing: -5px;
}

/* レスポンシブ */
@media (max-width: 768px) {
#before-after {
    padding: 60px 15px;
}

#before-after .section-title {
    font-size: 22px;
    letter-spacing: 2px;
}

#before-after .section-title::before,
#before-after .section-title::after {
    width: 30px;
}

#before-after .voice-card {
    padding: 30px 25px;
}

#before-after .quote-mark {
    font-size: 50px;
    top: 20px;
    left: 20px;
}

#before-after .voice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

#before-after .voice-title {
    font-size: 18px;
}

#before-after .voice-text {
    font-size: 14px;
    padding-left: 15px;
}

#before-after .ba-images {
    flex-direction: column;
    gap: 20px;
}

#before-after .ba-item {
    max-width: 100%;
}

#before-after .ba-arrow {
    transform: rotate(90deg);
}
}
/* サービス-------------------------------------------------------------------------------------------------------- */
#service {
--green-main: #4CAF50;
--green-dark: #43A047;
--white: #FFFFFF;
--text-dark: #333333;

font-family: 'Noto Sans JP', sans-serif;
background: var(--white);
color: var(--text-dark);
line-height: 1.8;
padding: 60px 20px;
}

#service * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#service .service-container {
max-width: 1000px;
margin: 0 auto;
}

/* 上段3列 */
#service .service-row-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 25px;
}

/* 下段2列（中央寄せ） */
#service .service-row-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
max-width: 680px;
margin: 0 auto;
}

/* サービスカード */
#service .service-card {
display: flex;
flex-direction: column;
}

/* タイトル */
#service .service-title {
background: var(--green-main);
color: var(--white);
font-size: 18px;
font-weight: 700;
text-align: center;
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 12px;
}

/* 画像 */
#service .service-image {
width: 100%;
aspect-ratio: 16 / 11;
overflow: hidden;
margin-bottom: 12px;
}

#service .service-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

#service .service-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #E0E0E0 0%, #C0C0C0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 13px;
}

/* 説明文 */
#service .service-description {
font-size: 14px;
color: var(--text-dark);
line-height: 1.8;
flex: 1;
}

/* もっと見るボタン */
#service .service-more {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}

#service .service-more-btn {
width: 30px;
height: 30px;
background: var(--green-main);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 16px;
text-decoration: none;
font-weight: 700;
}

/* レスポンシブ */
@media (max-width: 800px) {
#service .service-row-top {
    grid-template-columns: repeat(2, 1fr);
}

#service .service-row-bottom {
    max-width: 100%;
}
}

@media (max-width: 550px) {
#service .service-row-top,
#service .service-row-bottom {
    grid-template-columns: 1fr;
}

#service .service-row-bottom {
    max-width: 350px;
}
}
/* 回収可能品目・料金-------------------------------------------------------------------------------------------------------- */
#item-list-price {
--green-main: #00897B;
--green-dark: #00695C;
--green-light: #4DB6AC;
--green-pale: #E0F2F1;
--orange-main: #FF7043;
--orange-light: #FBE9E7;
--white: #FFFFFF;
--gray-bg: #FAFAFA;
--text-dark: #263238;
--text-gray: #546E7A;

font-family: 'Noto Sans JP', sans-serif;
background: var(--gray-bg);
color: var(--text-dark);
line-height: 1.8;
padding: 80px 20px;
}

#item-list-price * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#item-list-price .price-container {
max-width: 1000px;
margin: 0 auto;
}

/* メインタイトル */
#item-list-price .main-title {
text-align: center;
margin-bottom: 50px;
}

#item-list-price .main-title h2 {
font-size: 32px;
font-weight: 700;
color: var(--green-dark);
position: relative;
display: inline-block;
}

#item-list-price .main-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--green-light), var(--green-main));
border-radius: 2px;
}

/* カテゴリーカード */
#item-list-price .category-card {
background: var(--white);
border-radius: 20px;
padding: 0;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
overflow: hidden;
}

/* カテゴリーヘッダー */
#item-list-price .category-header {
background: linear-gradient(135deg, var(--green-main), var(--green-dark));
color: var(--white);
padding: 18px 30px;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}

#item-list-price .category-icon {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}

/* カテゴリー内容 */
#item-list-price .category-body {
padding: 30px;
}

#item-list-price .category-content {
display: flex;
gap: 35px;
}

/* 画像エリア */
#item-list-price .category-images {
flex-shrink: 0;
width: 240px;
}

#item-list-price .image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
border-radius: 15px;
overflow: hidden;
}

#item-list-price .image-grid img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}

#item-list-price .image-single {
border-radius: 15px;
overflow: hidden;
}

#item-list-price .image-single img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}

#item-list-price .image-placeholder {
width: 100%;
aspect-ratio: 1;
background: linear-gradient(135deg, var(--green-pale), #B2DFDB);
display: flex;
align-items: center;
justify-content: center;
color: var(--green-main);
font-size: 12px;
font-weight: 500;
}

#item-list-price .image-placeholder.large {
aspect-ratio: 4/3;
}

/* アイテムリスト */
#item-list-price .item-list {
flex: 1;
}

#item-list-price .item-group {
padding: 20px;
background: var(--gray-bg);
border-radius: 12px;
margin-bottom: 15px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#item-list-price .item-group:last-child {
margin-bottom: 0;
}

/* アイテムヘッダー */
#item-list-price .item-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}

#item-list-price .item-name {
font-size: 17px;
font-weight: 700;
color: var(--text-dark);
}

#item-list-price .item-price {
margin-left: auto;
font-size: 20px;
font-weight: 700;
color: var(--green-main);
}

#item-list-price .item-price .tax {
font-size: 13px;
color: var(--text-gray);
font-weight: 500;
}

/* アイテム詳細リスト */
#item-list-price .item-details {
font-size: 14px;
color: var(--text-gray);
line-height: 1.9;
}

#item-list-price .item-details span {
display: inline-block;
background: var(--white);
padding: 3px 10px;
border-radius: 20px;
margin: 3px 4px 3px 0;
font-size: 13px;
}

/* 注意書き */
#item-list-price .notice-box {
background: var(--orange-light);
border-radius: 12px;
padding: 25px;
display: flex;
align-items: flex-start;
gap: 15px;
margin-top: 25px;
}

#item-list-price .notice-icon {
width: 32px;
height: 32px;
background: var(--orange-main);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}

#item-list-price .notice-text {
font-size: 14px;
color: var(--text-dark);
line-height: 1.9;
}

/* その他カード */
#item-list-price .category-card.other {
background: linear-gradient(135deg, var(--green-pale), #E8F5E9);
border: 2px dashed var(--green-light);
}

#item-list-price .category-card.other .category-header {
background: transparent;
color: var(--green-dark);
border-bottom: 1px solid var(--green-light);
}

#item-list-price .category-card.other .category-icon {
background: var(--green-main);
color: var(--white);
}

#item-list-price .category-card.other .item-group {
background: rgba(255, 255, 255, 0.7);
}

/* レスポンシブ */
@media (max-width: 750px) {
#item-list-price {
    padding: 50px 15px;
}

#item-list-price .main-title h2 {
    font-size: 26px;
}

#item-list-price .category-content {
    flex-direction: column;
}

#item-list-price .category-images {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

#item-list-price .category-header {
    font-size: 18px;
    padding: 15px 20px;
}

#item-list-price .category-body {
    padding: 20px;
}

#item-list-price .item-header {
    flex-wrap: wrap;
}

#item-list-price .item-price {
    width: 100%;
    margin-left: 0;
    margin-top: 5px;
}

#item-list-price .notice-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
}
==========================================
初めての方へ
begginer
==========================================