@charset "UTF-8";

/*********************
ライフメイトについて ページ専用
page-whats-lifemate.php でのみ読み込み
*********************/

/*h2の英字が長いページ用*/
.phl-h2 span {
    white-space: nowrap;
}

/*philosophy*/
.phl-poem {
    text-align: center;
}

.phl-poem p {
    font-size: 1.8rem;
    line-height: 2.2;
    margin: 0 0 2.2em;
}

.phl-poem span {
    display: block;
    text-wrap: balance;
}

.phl-group {
    margin: 0 auto;
    max-width: 800px;
}

.phl-group img {
    display: block;
    width: 100%;
}

/*customer focus / what's life mate*/
.phl-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.phl-row--reverse {
    flex-direction: row-reverse;
}

.phl-row-img,
.phl-row-text {
    width: 48%;
}

.phl-row-img img {
    display: block;
    width: 100%;
}

.phl-row-text > *:last-child {
    margin-bottom: 0;
}

.phl-row-text strong {
    font-weight: 500;
}

.phl-list {
    list-style: none;
    margin: 2em 0;
}

.phl-list li {
    font-weight: 500;
    margin: 0 0 1em;
    padding-left: 1.6em;
    position: relative;
}

.phl-list li::before {
    content: "";
    background-color: var(--main-color);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .55em;
    height: .8em;
    width: .8em;
}

.phl-list-note {
    display: block;
}

.phl-mark {
    float: right;
    margin: 0 0 15px 25px;
    width: 120px;
}

.phl-gap {
    margin-top: 2em;
}

@media only screen and (max-width: 960px) {
    .phl-h2 span {
        font-size: 4rem;
    }

    .phl-row,
    .phl-row--reverse {
        flex-direction: column;
        row-gap: 18px;
    }

    .phl-row-img,
    .phl-row-text {
        width: 100%;
    }

    .phl-poem p {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 560px) {
    .phl-h2 span {
        font-size: 3.2rem;
    }

    .phl-poem p {
        font-size: 1.4rem;
        letter-spacing: 0;
        line-height: 2;
    }

    .phl-mark {
        width: 84px;
    }
}