@charset "utf-8";
/*---------------------------------------------------------------------
PC Style
pc.css
-----------------------------------------------------------------------
Copyright 2026 (c) linkpath Allrights Reserved.
Coding: Hinako Hayashi
Last Update: 2026.04.07
---------------------------------------------------------------------*/
/*===========================================================
    font-size
===========================================================*/
.section-worries h2,
.flow-content p span,
.section-flow dd span {
    font-size: 160%;
}
.buy-balloon,
.section-worries h3 {
    font-size: 150%;
}
.section-flow dt,
.buy-content dt {
    font-size: 120%;
}
.section-reason .buy-balloon {
    font-size: 100%;
}

/*===========================================================
    parts
===========================================================*/
/* buy-contents */
.buy-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 3em;
}
.buy-content {
    min-width: 300px;
    max-width: 500px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
    border-radius: 1em;
    padding: 2em;
}
.buy-img {
    width: 7em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
}
.buy-icon {
    width: 3em;
    height: 3em;
}

.buy-content dl {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.buy-content dt {
    text-align: center;
    font-weight: 600;
    line-height: 1.8em;
}

/* buy-balloon */
.buy-balloon {
    width: 3rem;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    right: -1em;
    top: 0;
}
.buy-balloon::before {
    content: "";
    width: 0.75rem;
    height: 0.5rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(44deg);
}
.buy-balloon.back-main::before {
    background: var(--color-main);
}
.buy-balloon.back-accent::before {
    background: var(--color-accent);
}

/* triangle-icon */
.triangle-icon {
    width: 2em;
    height: 1em;
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 2em auto;
}

/*===========================================================
    article-worries
===========================================================*/
.section-worries h2 {
    text-align: center;
    font-weight: 600;
}

.section-worries p {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 3em;
}

.section-worries h3 {
    text-align: center;
    font-weight: 700;
}
.section-worries h3 span {
    font-weight: 700;
    display: inline-block;
    padding: 0.25em;
}
/*===========================================================
    article-reason
===========================================================*/
.reason-contents {
    padding-top: 3em;
}

/*===========================================================
    article-flow
===========================================================*/
article.article-flow {
    padding-top: 3em;
}
.section-flow > p {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 3em;
}
.flow-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2em;
}
.flow-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    border-radius: 1em;
    padding: 1.5em 1em;
    position: relative;
}
.flow-content::before {
    content: "";
    width: 2em;
    height: 1em;
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--color-accent);
    position: absolute;
    top: 50%;
    right: -2.5em;
    transform: rotate(-90deg) translateY(-50%);
}
.flow-content:last-child::before {
    content: none;
}
.flow-content h3 {
    font-weight: 700;
    border-radius: 200px;
    padding: 0.5em 1em;
}
.flow-content p span {
    text-align: center;
    font-weight: 700;
    display: block;
    padding: 1rem 0;
}
.flow-icon {
    width: 4em;
    height: 4em;
}

.section-flow dl {
    padding-top: 5em;
}
.section-flow dt {
    width: fit-content;
    font-weight: 700;
    border-radius: 200px;
    padding: 0.5em 1.5em;
    margin: 0 auto;
}
.section-flow dd {
    text-align: center;
    padding-top: 1.75em;
}
.section-flow dd span {
    font-weight: 600;
    display: block;
    padding-bottom: 1.25rem;
}