@charset "UTF-8";

/* =========================================
Service Page: サービス詳細セクション
========================================= */

.service-detail-section {
padding: 120px 0;
background-color: #153828; /* 背景色の一貫性 */
}

.service-block {
display: flex;
align-items: center;
gap: 80px;
margin-bottom: 140px;
}

/* 偶数番目のブロックを反転させる */
.service-block.reverse {
flex-direction: row-reverse;
}

/* --- 画像エリア --- */
.service-img {
flex: 1;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(212, 175, 55, 0.2);
}

.service-img img {
width: 100%;
height: auto;
display: block;
filter: brightness(0.9);
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-block:hover .service-img img {
transform: scale(1.05);
filter: brightness(1);
}

/* --- テキストエリア --- */
.service-text {
flex: 1;
}

/* 背景に溶け込む巨大なサービス番号 */
.service-num {
font-size: 5rem; /* 少し大きくしてインパクトを強化 */
font-weight: 900;
color: rgba(212, 175, 55, 0.08);
display: block;
line-height: 1;
margin-bottom: -25px; /* タイトルと少し重ねる */
font-family: 'Noto Sans JP', sans-serif;
}

.service-text h3 {
font-size: 2.2rem;
color: var(--gold);
margin-bottom: 25px;
font-weight: 900;
letter-spacing: 0.05em;
}

.lead-text {
font-size: 1.25rem;
font-weight: 700;
color: var(--white);
margin-bottom: 25px;
line-height: 1.6;
}

.service-text p {
font-size: 1rem;
line-height: 2;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}

/* --- 特徴リスト（金色の三角形） --- */
.service-points {
list-style: none;
padding: 0;
}

.service-points li {
padding-left: 28px;
position: relative;
margin-bottom: 15px;
font-weight: 700;
color: var(--white);
font-size: 1rem;
}

.service-points li::before {
content: '▶';
position: absolute;
left: 0;
color: var(--gold);
font-size: 0.8rem;
top: 5px;
}

/* =========================================
Service Page: Responsive
========================================= */

@media (max-width: 992px) {
.service-block,
.service-block.reverse {
flex-direction: column;
gap: 50px;
text-align: center;
margin-bottom: 100px;
}

.service-img {
width: 100%;
max-width: 600px; /* スマホ・タブレットで広がりすぎないように */
}

.service-text h3 {
font-size: 1.8rem;
}

.service-num {
margin-bottom: -15px;
font-size: 4rem;
}

.service-points li {
text-align: left;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
}