@charset "UTF-8";

/* ===============================================
  Services — 事業案内（ページ固有のみ）
  共通: common/css/base.css, project.css, layout.css 等
=============================================== */

/* ==============================
  Lead（#lead）
============================== */
.services-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    align-items: center;
}

.services-lead__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5em;
}

.services-lead__title {
    letter-spacing: 0.06em;
    line-height: 2;
}

.services-lead__text {
    line-height: 2;
    letter-spacing: 0.06em;
}

.services-lead__diagram img {
    width: 100%;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .services-lead {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2em, 5vw, 3.25em);
        align-items: center;
    }

    .services-lead__diagram img {
        margin-inline: 0;
    }
}

/* ==============================
  Anchor nav 拡張（#lead）
============================== */
.services-nav__thumb {
    flex-shrink: 0;
    width: min(5.625em, 90px, 28vw);
    max-width: 90px;
    aspect-ratio: 86 / 57;
    height: auto;
    border-radius: 0.3125em;
    object-fit: cover;
}

.services-nav__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.services-nav__label {
    font-size: 0.636em;
    color: var(--color-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.services-nav__name-row {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .services-nav__label {
        white-space: nowrap;
    }
}

/* ==============================
  Service badge
============================== */
.service-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375em;
    min-width: 8em;
    padding: 0.35em 1em;
    background: var(--color-primary);
    border-radius: 0.3125em;
    color: var(--color-white);
    font-family: "Oswald", sans-serif;
    font-size: 0.545em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-badge__num {
    font-size: 1.667em;
    letter-spacing: 0.12em;
}

/* ==============================
  Service block（#service-01 〜 #service-03）
============================== */
.service-block + .service-block {
    border-top: 1px solid var(--color-light-gold);
}

.service-block__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 1.5em;
}

.service-block__title {
    letter-spacing: 0.05em;
    line-height: 1.35;
}

.service-block__note {
    margin-left: 0.35em;
    font-size: 0.8em;
    letter-spacing: 0.06em;
}

.service-block__photo {
    display: block;
    width: 100%;
    aspect-ratio: 541 / 360;
    border-radius: 15px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .service-block .column--2-3 {
        align-items: center;
    }

    .service-block__photo {
        border-radius: 30px;
    }
}

.service-block__catch {
    color: var(--color-primary);
    letter-spacing: 0.06em;
    line-height: 1.45;
}

.service-block__catch + .txt-group {
    margin-top: 1.5em;
}

/* ==============================
  Target box（こんな方に）
============================== */
.target-box {
    position: relative;
    padding: clamp(2em, 5vw, 3em) clamp(1.5em, 5vw, 7.5em) clamp(2em, 5vw, 3em) clamp(1.5em, 5vw, 7.5em);
    background: var(--color-light-gray);
    border-radius: 0.625em;
    overflow: hidden;
}

.target-box__head {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 1.5em;
}

.target-box__icon {
    flex-shrink: 0;
    width: 1.5625em;
    height: auto;
}

.target-box__title {
    font-size: 0.909em;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.target-box__illust {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: clamp(1rem, 3vw, 2rem);
    width: clamp(8rem, 18vw, 12.6875em);
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}

.check-list {
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    max-width: 42em;
}

.check-list__item {
    letter-spacing: 0.06em;
    line-height: 2;
}

/* ==============================
  Product table（#service-03）
============================== */
.product-table-wrap {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.product-table__heading {
    letter-spacing: 0.06em;
}

.product-table {
    margin: 0;
    border: 1px solid #e0e0e0;
    border-radius: 0.25em;
    overflow: hidden;
}

.product-table__row {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid #e0e0e0;
}

.product-table__row:last-child {
    border-bottom: none;
}

.product-table__label,
.product-table__value {
    margin: 0;
    padding: 1em 1.5em;
    letter-spacing: 0.06em;
    line-height: 2;
}

.product-table__label {
    background: var(--color-light-gold);
    font-weight: 700;
}

@media (min-width: 768px) {
    .product-table__row {
        grid-template-columns: 8.5em minmax(0, 1fr);
    }

    .product-table__label {
        display: flex;
        align-items: center;
    }
}

/* ==============================
  Note（#service-01）
============================== */
.services-note {
    max-width: 54.5em;
}