@charset "utf-8";

/**
 * スタイル上書き
**/
@media (width <= 767px) {
    #main .bg_wrap {
        padding: 29px 0 0;
    }

    #main .bg_white {
        padding: 25px 16px 75px;
    }

    #main h2 {
        margin-bottom: 22px;
        font-size: 2rem;
    }

    #main h3 {
        padding: 0 0 5px;
        margin: 0 0 22px;
        border-top: none;
    }
}

@media (width >= 767px) {
    #main h2 {
        margin-bottom: 53px;
        font-size: 2.6rem;
    }

    #main h3 {
        padding-bottom: 10px;
        margin-bottom: 30px;
        font-size: 2rem;
    }

    .com_navi li {
        width: calc(100% / 7);
    }

    #pagePath {
        margin-bottom: 62px;
    }
}

/**
 * ページ専用
**/

.p-friend {
    /* spacing */
    --spacing--30: clamp(18px, calc(3.05vw + 6.55px), 30px);
    --spacing--40: clamp(24px, calc(4.07vw + 8.73px), 40px);
    --spacing--60: clamp(36px, calc(6.11vw + 13.1px), 60px);
    --spacing--80: clamp(60px, calc(5.09vw + 40.92px), 80px);
    --spacing--friend--basic: clamp(15px, calc(6.36vw + -8.85px), 40px);
    --spacing--note--top: calc(20 / 12 * 1em);

    /* color */
    --color--friend--primary: #22ac38;
    --color--friend--primary-light: #44b13f;
    --color--friend--primary-pale: #f7f8da;
    --color--friend--white: #fff;
    --color--friend--red: #e60012;

    /* font-size */
    --friend--fs--small: clamp(9px, calc(0.76vw + 6.14px), 12px);

    /* line height */
    --friend--lh--small: calc(20 / 12);
}

.p-friend-wrapper {
    padding: var(--spacing--friend--basic);
    margin-block-end: var(--spacing--60);
    background-color: var(--color--friend--primary-pale);
}

/* nav */
.p-friend-nav {
    display: grid;
    grid-template-areas:
        "first second"
        "third third";
    gap: 1em;
    margin-block: var(--spacing--40) var(--spacing--60);
    font-size: clamp(14px, calc(0.51vw + 12.09px), 16px);

    & > li:nth-child(1) {
        grid-area: first;
    }

    & > li:nth-child(2) {
        grid-area: second;
    }

    & > li:nth-child(3) {
        grid-area: third;
    }
}

.p-friend-nav__anchor {
    position: relative;
    display: grid;
    place-content: center;
    padding-block: 1em;
    color: var(--color--friend--primary-light);
    text-align: center;
    background-color: var(--color--friend--white);
    border: 1px solid;
    border-radius: calc(5 / 16 * 1em);

    &:visited {
        color: var(--color--friend--primary-light);
    }

    & br {
        display: none;
    }
}

.p-friend-nav__arrow {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 1em;
    width: clamp(11px, calc(2.8vw + 0.5px), 22px);
    aspect-ratio: 22 / 15;
    margin: auto;
    fill: currentcolor;
}

@media (width >= 768px) {
    .p-friend-nav {
        grid-template-areas: "first second third";
        grid-template-columns: repeat(3, 1fr);
    }

    .p-friend-nav__anchor {
        height: 70px;
        padding-block: 0;

        & br {
            display: inline;
        }
    }
}

@media (any-hover: hover) {
    .p-friend-nav__anchor {
        transition: 0.4s;
    }
}

/* info */
.p-friend-info__note {
    margin-block: var(--spacing--note--top) var(--spacing--60);
    margin-inline: 0;
    font-size: var(--friend--fs--small);
    line-height: var(--friend--lh--small);
}

.p-friend-info__list {
    counter-reset: friendInfoNote;

    & > li {
        display: flex;
        gap: 0.333em;

        &::before {
            flex-shrink: 0;
            font-weight: 300;
            content: "※" counter(friendInfoNote);
            counter-increment: friendInfoNote;
        }
    }
}

/* products */
.p-friend-products {
    padding-block: var(--spacing--60);
    padding-inline: var(--spacing--friend--basic);
    margin-inline: calc(16px * -1);
    color: var(--color--friend--white);
    background-color: var(--color--friend--primary);
}

.p-friend-products__note {
    margin-block-start: var(--spacing--note--top);
    font-size: var(--friend--fs--small);
    line-height: var(--friend--lh--small);

    & > li {
        display: flex;

        &::before {
            flex-shrink: 0;
            width: 1em;
            font-weight: 300;
            text-align: center;
            content: "※";
        }

        &:first-child::before {
            content: "＊";
        }
    }
}

@media (width >= 768px) {
    .p-friend-products {
        margin-inline: calc(35px * -1);
    }
}

/* copy */
.p-friend-copy {
    margin-block: var(--spacing--60) var(--spacing--80);
    text-align: center;
}

.p-friend-copy__button {
    margin-block-start: var(--spacing--30);
    cursor: pointer;
    background-color: transparent;
    border: none;
}

@media (any-hover: hover) {
    .p-friend-copy__button {
        transition: opacity 0.2s;

        &:hover {
            opacity: 0.7;
        }
    }
}

/**
 * ユーティリティ
**/

.u-bold {
    font-weight: 700;
}

.u-red {
    color: var(--color--friend--red);
}

/* モバイル時、左右にネガティブマージン付与 */
.u-adjust-mobile {
    display: block;
    margin-inline: calc(var(--spacing--friend--basic) * -1);
}

@media (width >= 768px) {
    .u-adjust-mobile {
        margin-inline: 0;
    }
}

/* 視覚的には隠す（読み上げ用） */
.u-visually-hidden {
    position: fixed !important;
    inset: 0 !important;
    visibility: initial !important;
    inline-size: 4px !important;
    block-size: 4px !important;
    padding: unset !important;
    margin: unset !important;
    contain: strict !important;
    pointer-events: none !important;
    border: none !important;
    opacity: 0 !important;
}