/* ============================================================
   ABOUT.CSS — Plusらぼについて ページ専用スタイル
   ============================================================ */

body {
    padding-top: var(--header-h);
}

/* ============================================================
   FV
   ============================================================ */
.p-fv {
    background-color: var(--color-bg);
    padding-top: clamp(48px, calc(72 / 1728 * 100vw), 72px);
    overflow: hidden;
}

.p-fv__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, calc(48 / 1728 * 100vw), 48px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, calc(48 / 1728 * 100vw), 48px);
    min-height: clamp(300px, calc(440 / 1728 * 100vw), 440px);
}

.p-fv__text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: clamp(10px, calc(14 / 1728 * 100vw), 14px);
    padding-left: clamp(48px, calc(296 / 1728 * 100vw), 296px);
}

.c-label {
    color: var(--color-accent-lime);
}

.p-fv__title {
    color: var(--color-primary);
    font-size: clamp(16px, calc(71 / 1728 * 100vw), 32px);
    font-weight: 700;
    line-height: 1.3;
}

.p-fv__visual {
    display: flex;
    align-items: flex-start;
}

.p-fv__visual img {
    width: 100%;
    max-width: clamp(300px, calc(540 / 1728 * 100vw), 540px);
    height: auto;
    display: block;
}

/* ============================================================
   STORY
   ============================================================ */
.p-story {
    background-color: var(--color-bg);
    padding-block: clamp(80px, calc(140 / 1728 * 100vw), 140px);
}

.p-story__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(184px, calc(80 / 1728 * 100vw), 220px);
}

.p-story__photo {
    display: flex;
    align-items: center;
}

.p-story__blob {
    width: clamp(240px, calc(460 / 1728 * 100vw), 460px);
    aspect-ratio: 573 / 800;
    border-radius: 0;
    overflow: hidden;
}

.p-story__blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.p-story__content {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(24 / 1728 * 100vw), 24px);
    padding-top: clamp(32px, calc(56 / 1728 * 100vw), 56px);
}

.p-story__title {
    color: var(--color-primary);
    font-size: clamp(24px, calc(48 / 1728 * 100vw), 48px);
    font-weight: 700;
    line-height: 1.45;
}

.p-story__body {
    width: 27.777vw;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, calc(18 / 1728 * 100vw), 40px);
    font-size: clamp(13px, calc(15 / 1728 * 100vw), 15px);
    line-height: 1.9;
}

.p-story__emphasis {
    font-size: clamp(15px, calc(18 / 1728 * 100vw), 18px);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-accent-lime);
}

/* ============================================================
   FEATURES
   ============================================================ */
.p-features {
    padding-block: clamp(64px, calc(120 / 1728 * 100vw), 120px);
}

.p-features__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(4%, calc(153 / 1728 * 100vw), 153px);
}

.p-features__title {
    color: var(--color-primary);
    font-size: clamp(22px, calc(36 / 1728 * 100vw), 36px);
    font-weight: 700;
    text-align: center;
    margin-bottom: clamp(40px, calc(72 / 1728 * 100vw), 72px);
}

.p-features__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, calc(48 / 1728 * 100vw), 48px);
}

.p-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(12px, calc(16 / 1728 * 100vw), 16px);
}

.p-features__icon {
    width: clamp(56px, calc(80 / 1728 * 100vw), 80px);
    height: clamp(56px, calc(80 / 1728 * 100vw), 80px);
}

.p-features__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.p-features__item-title {
    font-size: clamp(15px, calc(18 / 1728 * 100vw), 18px);
    font-weight: 700;
    line-height: 1.5;
}

.p-features__item-desc {
    font-size: clamp(13px, calc(14 / 1728 * 100vw), 14px);
    line-height: 1.9;
}

/* ============================================================
   ACCESS
   ============================================================ */
.p-access {
    background-color: var(--color-bg);
    padding-block: clamp(132px, calc(156 / 1728 * 100vw), 156px);
}

.p-access__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, calc(48 / 1728 * 100vw), 48px);
}

.p-access__head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 2fr;
    align-items: flex-start;
    gap: clamp(32px, calc(64 / 1728 * 100vw), 64px);
    margin-bottom: clamp(40px, calc(64 / 1728 * 100vw), 64px);
}

.p-access__head-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(8px, calc(12 / 1728 * 100vw), 12px);
    padding-bottom: clamp(40px, calc(80 / 1728 * 100vw), 80px);
}

.p-access__head-text {
    z-index: 2;
}

.c-label {
    color: var(--color-accent-lime);
}

.p-access__title {
    color: var(--color-primary);
    font-size: clamp(16px, calc(48 / 1728 * 100vw), 32px);
    font-weight: 700;
    line-height: 1.3;
    position: relative;
}

.p-access__deco {
    width: clamp(194px, calc(693 / 1728 * 100vw), 693px);;
    position: absolute;
    top: -70%;
    left: 40%;
    z-index: 0;
}

.p-access__photo {
    border-radius: clamp(12px, calc(20 / 1728 * 100vw), 20px);
    position: relative; 
}

.p-access__photo img {
    width: 100%;
    height: auto;
    display: block;
    position: relative; 
    z-index: 2;
    border-radius: 8px;
}



/* Company Info */
.p-access__info {
    width: clamp(264px, calc(416 / 1728 * 100vw), 416px);
    grid-column: 2;
}

.p-access__info-row {
    display: grid;
    grid-template-columns: clamp(80px, calc(120 / 1728 * 100vw), 120px) 1fr;
    gap: clamp(20px, calc(40 / 1728 * 100vw), 40px);
    padding-block: clamp(14px, calc(20 / 1728 * 100vw), 20px);
    align-items: baseline;
}

.p-access__info-dt {
    font-size: clamp(13px, calc(14 / 1728 * 100vw), 14px);
    font-weight: 700;
    color: var(--color-primary);
}

.p-access__info-dd {
    font-size: clamp(13px, calc(15 / 1728 * 100vw), 15px);
    line-height: 1.85;
}

/* ============================================================
   MAP
   ============================================================ */
.p-map {
    width: clamp(361px, calc(1136 / 1728 * 100vw), 1136px);
    height: clamp(220px, calc(560 / 1728 * 100vw), 560px);
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: clamp(116px, calc(130 / 1728 * 100vw), 130px);
}

.p-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}




/* ============================================================
   SP (768px以下)
   ============================================================ */
@media (max-width: 768px) {
    .c-label {
        text-align: center;
    }

  /* FV */
    .p-fv {
        padding-top: calc(96 / 390 * 100vw);
    }

    .p-fv__inner {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 0;
        padding-inline: 20px;
    }

    .p-fv__text {
        padding-bottom: calc(24 / 390 * 100vw);
        gap: calc(8 / 390 * 100vw);
        padding-left: 0;
    }

    .p-fv__title {
        font-size: clamp(16px, calc(71 / 1728 * 100vw), 32px);
        text-align: center;
    }

    .p-fv__visual {
        justify-content: center;

        & img {
        max-width: calc(300 / 390 * 100vw);
        }
    }

    /* Story */
    .p-story {
        padding-block: calc(56 / 390 * 100vw);
    }

    .p-story__inner {
        grid-template-columns: 1fr;
        padding-inline: 20px;
        gap: calc(32 / 390 * 100vw);
    }

    .p-story__photo {
        display: none;
    }

    .p-story__title {
        font-size: calc(22 / 390 * 100vw);
    }

    .p-story__body {
        font-size: calc(13 / 390 * 100vw);
        width: 100%;
    }

    .p-story__emphasis {
        font-size: calc(15 / 390 * 100vw);
    }

    /* Features */
    .p-features {
        padding-block: calc(56 / 390 * 100vw);
    }

    .p-features__inner {
        padding-inline: 20px;
    }

    .p-features__title {
        font-size: calc(22 / 390 * 100vw);
        margin-bottom: calc(40 / 390 * 100vw);
    }

    .p-features__list {
        grid-template-columns: 1fr;
        gap: calc(40 / 390 * 100vw);
    }

    .p-features__item {
        text-align: left;
    }

    .p-features__icon {
        width: calc(64 / 390 * 100vw);
        height: calc(64 / 390 * 100vw);
    }

    .p-features__item-title {
        font-size: calc(16 / 390 * 100vw);
    }

    .p-features__item-desc {
        font-size: calc(13 / 390 * 100vw);
    }

    /* Access */
    .p-access {
        padding-block: calc(56 / 390 * 100vw);
    }

    .p-access__inner {
        padding-inline: 20px;
    }

    .p-access__head {
        grid-template-columns: auto 1fr;
        gap: calc(16 / 390 * 100vw);
    }

    .p-access__head-left {
        padding-bottom: calc(40 / 390 * 100vw);
    }

    .p-access__head-text {
        transform: translateY(-80%);
    }

    .p-access__deco {
        width: 200%;
        height: auto;
        overflow: visible;
        top: -70%;
        left: -20%;
    }

    .p-access__info-dd {
        text-decoration: none;
    }

    .p-access__info-row {
        grid-template-columns: calc(72 / 390 * 100vw) 1fr;
        gap: calc(16 / 390 * 100vw);
    }

    /* Map */
    .p-map {
        width: auto;
        height: calc(340 / 390 * 100vw);
        margin-inline: 20px;
        margin-bottom: calc(56 / 390 * 100vw);
    }

    /* CTA */
    .p-cta {
        padding-block: calc(48 / 390 * 100vw);
    }

    .p-cta__inner {
        grid-template-columns: 1fr;
        padding-inline: 20px;
        gap: calc(24 / 390 * 100vw);
        justify-items: center;
        text-align: center;
    }

    .p-cta__visual {
        width: calc(140 / 390 * 100vw);
    }

    .p-cta__title {
        font-size: calc(22 / 390 * 100vw);
    }
}

/* ============================================================
   1729px以上 — 固定サイズ
   ============================================================ */
@media (min-width: 1729px) {

    /* FV */
    .p-fv { padding-top: 72px; }
    .p-fv__inner { padding-inline: 48px; gap: 48px; min-height: 440px; grid-template-columns: 2fr 3fr; }
    .p-fv__text { padding-bottom: 80px; gap: 14px; }
    .p-fv__title { font-size: clamp(16px, calc(71 / 1728 * 100vw), 32px); }
    .p-fv__visual img { max-width: 540px; }

    /* Story */
    .p-story { padding-block: 140px; }
    .p-story__inner { padding-inline: 48px; gap: 80px; }
    .p-story__title { font-size: 38px; }
    .p-story__blob { width: 460px; }
    .p-story__body { font-size: 15px; gap: 18px; }
    .p-story__emphasis { font-size: 18px; }

    /* Features */
    .p-features { padding-block: 120px; }
    .p-features__inner { padding-inline: 48px; }
    .p-features__title { font-size: 36px; margin-bottom: 72px; }
    .p-features__list { gap: 48px; }
    .p-features__icon { width: 80px; height: 80px; }
    .p-features__item-title { font-size: 18px; }
    .p-features__item-desc { font-size: 14px; }

    /* Access */
    .p-access { padding-block: 140px; }
    .p-access__inner { padding-inline: 48px; }
    .p-access__head { gap: 64px; margin-bottom: 64px; }
    .p-access__head-left { padding-bottom: 80px; }
    .p-access__title { font-size: 48px; }
    .p-access__deco { width: 200px; height: 200px; left: -24px; }
    .p-access__photo { border-radius: 20px; }
    .p-access__info-row { grid-template-columns: 120px 1fr; gap: 40px; padding-block: 20px; }
    .p-access__info-dt { font-size: 14px; }
    .p-access__info-dd { font-size: 15px; }

    /* Map */
    .p-map { height: 480px; }

    /* CTA */
    .p-cta { padding-block: 100px; }
    .p-cta__inner { padding-inline: 48px; gap: 72px; }
    .p-cta__title { font-size: 36px; }
    .p-cta__visual { width: 200px; }
}