@charset "UTF-8";

body {
    margin-inline: auto;
    padding: 0;
    font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "Radio Canada Big";
    color: #333;
    line-height: 1.3;
    word-wrap: break-word;
    width: 100%;
    height: 100dvh;
    font-weight: 500;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    position: relative;
    top: 0;
    background-color: #ffda50;
}

img {
    display: block;
    width: 100%;
    height: auto;
}
a {
    outline: none;
    text-decoration: none;
}

main {
    margin: 0 auto;
    overflow: hidden;
    width: min(768px, 90%);
}

section {
    background: #FFFFFF;
}

h2 {
    display: block;
    width: 100%;
    padding: 0.5% 0 4%;
    font-size: clamp(1.438rem, 0.902rem + 2.68vw, 2.188rem);
    font-weight: 800;
    text-shadow: 1px 0 0 #FFF, 0 1px 0 #FFF, -1px 0 0 #FFF, 0 -1px 0 #FFF;
    text-align: center;
    background: url(../images/ribbon.png) no-repeat center center / contain;
}

.attention {
    font-size: 15px;
    line-height: 1.8;
}

.marker {
    display: block;
    width: 100%;
    width: fit-content;
    padding: 0 2%;
}


/* 表示・非表示 */
@media screen and (max-width: 425px){
    .br-sp-none {
        display: none;
    }
}

.br-pc-none {
    display: none;
}
@media screen and (max-width: 425px){
    .br-pc-none {
        display: block;
    }
}


/* トップ */
#firnds-introduce .top  {
    display: block;
    width: 100%;
    padding: 4.3% 2.3% 4.7%;
    margin-top: 15%;
    position: relative;
    margin-bottom: 54px;
    position: relative;
}

#firnds-introduce .top::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 52px solid transparent;
    border-left: 52px solid transparent;
    border-top: 43px solid #ffffff;
    border-bottom: 0;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top::after {
        bottom: -4.5%;;
    }
}
@media screen and (max-width: 576px) {
    #firnds-introduce .top::after {
        bottom: -6%;;
    }
}

#firnds-introduce .top  h1 {
    margin-bottom: -13px;
    color: #000;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top  h1 {
        margin-bottom: 4.8%;
    }
}

#firnds-introduce .top  .top-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 2%;
    margin: 0 auto -9px;
    position: relative;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top  .top-wrapper {
        display: block;
        width: 100%;
        justify-content: center;
        gap: 2%;
        margin: 0 auto 6%;
        position: relative;
    }
}

#firnds-introduce .top  .top-and {
    position: relative;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top  .top-and {
        margin-bottom: 3%;
    }
}

#firnds-introduce .top  .top-and::after {
    content: "";
    display: block;
    height: 4.4vmin;
    width: 4.4vmin;
    position: absolute;
    background: url(../images/and.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    right: -3vmin;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top  .top-and::after {
        top: 96%;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 768px) {
    #firnds-introduce .top  .top-sp-none {
        display: none;
    }
}


#firnds-introduce .top  .top-pc-none {
    display: none;
}
@media screen and (max-width: 768px) {
    #firnds-introduce .top  .top-pc-none {
        display: block;
    }
}

#firnds-introduce .top  .top-girl {
    display: block;
    width: fit-content;
    position: absolute;
    z-index: 2;
    top: -35%;
    left: -1.5%;
}

#firnds-introduce .top  .top-boy {
    display: block;
    width: fit-content;
    position: absolute;
    z-index: 2;
    top: -23%;
    right: -2%;
}

#firnds-introduce .top  .top-main-text {
    display: block;
    width: fit-content;
    font-weight: 900;
    font-size: clamp(1rem, -0.484rem + 7.42vw, 2.188rem);
    margin: 0 auto;
    background:linear-gradient(transparent 77%,#ffd223 50%,#ffd223 100%);
    padding: 0 2%;
}


/* about */
#firnds-introduce .about {
    display: block;
    width: 100%;
    padding: 11.7% 2.3% 0;
    position: relative;
}

#firnds-introduce .about .about-main-text {
    display: block;
    width: 84.8%;
    margin: 6.7% auto 3%;
    font-size: clamp(1rem, 0.688rem + 1.56vw, 1.438rem);
    line-height: 1.6;
}

#firnds-introduce .about .about-color-text {
    font-weight: 600;
}

#firnds-introduce .about .about-color-text.pink {
    color: #ef567b;
}

#firnds-introduce .about .about-color-text.blue {
    color: #3aafe6;
}

#firnds-introduce .about .about-color-text.orange {
    color: #ff9000;
}

#firnds-introduce .about .attention {
    display: block;
    width: 84.8%;
    margin: 0 auto 6%;
}

#firnds-introduce .about .about-wrapper {
    display: flex;
    width: 100%;
    gap: 2.3%;
    justify-content: center;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-wrapper {
        display: block;
        width: 100%;
    }
}

#firnds-introduce .about .about-inviter-container,
#firnds-introduce .about .about-invitee-container {
    display: block;
    width: 48.7%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-inviter-container,
    #firnds-introduce .about .about-invitee-container {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-inviter-container,
    #firnds-introduce .about .about-invitee-container {
        margin-bottom: 10%;
    }
}

#firnds-introduce .about dl {
    border-radius: 10px;
    padding-bottom: 5%;
    height: 65vmin;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about dl {
        height: 118vmin;
    }
}


#firnds-introduce .about .about-inviter-container dl{
    background-color: #ffd2dd;
}

#firnds-introduce .about .about-invitee-container dl{
    background-color: #abe4ff;
}

#firnds-introduce .about dt {
    font-size: clamp(1.438rem, 0.902rem + 2.68vw, 2.188rem);
    font-weight: 800;
    color: #FFF;
    text-align: center;
    padding: 2.4% 0;
    border-radius: 10px 10px 0px 0px;
}

#firnds-introduce .about .about-inviter-container dt {
    background: #fb87a3;
}

#firnds-introduce .about .about-invitee-container dt {
    background: #3aafe6;
}

#firnds-introduce .about .about-space {
    display: block;
    width: 90%;
    height: 53vmin;
    background: #FFF;
    margin: 7.2% auto 0;
    border-radius: 0px 0px 10px 10px;
    padding: 4%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-space {
        height: 97vmin;
    }
}

#firnds-introduce .about .about-benefit-text {
    font-size: 3.3vmin;
    font-weight: 800;
    margin: 0 auto;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-benefit-text {
        font-size: clamp(1rem, -0.484rem + 7.42vw, 2.188rem);
    }
}

#firnds-introduce .about .about-inviter-container .about-benefit-text {
    margin-top: 3%;
}

#firnds-introduce .about .marker.pink {
    background:linear-gradient(transparent 70%,#ffd2dd 50%,#ffd2dd 100%);
}

#firnds-introduce .about .marker.blue {
    background:linear-gradient(transparent 70%,#abe4ff 50%,#abe4ff 100%);
}

#firnds-introduce .about .about-inviter-color-text,
#firnds-introduce .about .about-invitee-color-text {
    font-size: 3.6vmin;
    font-weight: 800;
    text-align: center;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-inviter-color-text,
    #firnds-introduce .about .about-invitee-color-text {
        font-size: clamp(1.125rem, -0.08rem + 6.03vw, 2.813rem);
}
}

#firnds-introduce .about .about-inviter-color-text.pink {
    color: #fb87a3;
    padding-left: 11%;
    position: relative;
}

#firnds-introduce .about .about-inviter-color-text.pink::before {
    content: "";
    display: block;
    height: 77%;
    width: 12%;
    background: url(../images/gift_logo.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: -2%;
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-inviter-color-text.pink::before {
        height: 81%;
        width: 8%;
        left: 13%;
}
}

#firnds-introduce .about .about-invitee-color-text.blue {
    color: #3aafe6;
    margin-bottom: 7%;
    padding-left: 11%;
    position: relative;
}

#firnds-introduce .about .about-invitee-color-text.blue::before {
    content: "";
    display: block;
    height: 77%;
    width: 12%;
    background: url(../images/gift_logo.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: -2%;
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-invitee-color-text.blue::before {
        height: 81%;
        width: 8%;
        left: 13%;
}
}

#firnds-introduce .about .canada {
    font-family: "Radio Canada Big";
}

#firnds-introduce .about .about-small-text {
    font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
    color: #333;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-small-text {
        font-size: clamp(1rem, 0.688rem + 1.56vw, 1.25rem);
    }
}

#firnds-introduce .about .about-attention-text {
    font-size: 2vmin;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-attention-text {
        font-size: clamp(0.938rem, 0.848rem + 0.45vw, 1.063rem);
    }
}

#firnds-introduce .about .about-img {
    display: block;
    width: 32vmin;
    margin: 0 auto;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .about-img {
        width: 80%;
    }
}

#firnds-introduce .about .button {
    display: block;
    width: 50.7%;
    font-size: clamp(1.563rem, 1.229rem + 0.69vw, 1.75rem);
    font-weight: 700;
    color: #FFF;
    text-align: center;
    margin: 0 auto;
    border-radius: 10px;
    padding: 2% 10% 2% 2%;
    margin-top: 5.2%;
    position: relative;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .about .button {
        width: 40%;
        font-size: clamp(1.125rem, 0.344rem + 3.91vw, 1.75rem);
        margin-top: 3.2%;
    }
}

#firnds-introduce .about .button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 14.3px solid #ffffff;
    border-bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    right: 20%;
    position: absolute;
}

#firnds-introduce .about .button.pink {
    background: #fb87a3;
}

#firnds-introduce .about .button.pink:hover {
    background: #ffa4ba;
}

#firnds-introduce .about .button.blue {
    background: #3aafe6;
}

#firnds-introduce .about .button.blue:hover {
    background: #74cffa;
}

/* e-gift */

#firnds-introduce .about .e-gift-container {
    display: flex;
    width: 92%;
    justify-content: center;
    gap: 3%;
    margin: 10.8% auto 0;
}

#firnds-introduce .about .e-gift-img {
    display: block;
    width: 28%;
    min-width: 45px;
}

#firnds-introduce .about .e-gift-ttl {
    display: block;
    width: fit-content;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 2.4%;
}

#firnds-introduce .about .e-gift-container .attention {
    width: auto;
    margin: 0;
    text-align: justify;
}



/* 対象講座 */
#firnds-introduce .classes {
    padding: 17% 0 18%;
}

#firnds-introduce .classes ul {
    display: grid;
    width: 92.4%;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 2.6vw, 20px);
    margin: 3% auto 17%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes ul {
        grid-template-columns: 1fr;
    }
}

#firnds-introduce .classes li {
    border-radius: 10px;
    padding: 3% 5.2%;
    color: #FFF;
}

#firnds-introduce .classes .classes-robot,
#firnds-introduce .classes .classes-program {
    padding: 6% 5.2% 4%;
}

#firnds-introduce .classes .classes-science,
#firnds-introduce .classes .classes-math {
    padding: 3% 5.2% 4%;
}


#firnds-introduce .classes .classes-ttl {
    font-size: clamp(1.125rem, 0.946rem + 0.89vw, 1.375rem);
    font-weight: 600;
    padding-left: 18%;
    position: relative;
}


#firnds-introduce .classes .classes-robot .classes-ttl,
#firnds-introduce .classes .classes-program .classes-ttl {
    margin-bottom: 6%;
}

#firnds-introduce .classes .classes-science .classes-ttl,
#firnds-introduce .classes .classes-math .classes-ttl {
    margin-bottom: 2%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-science .classes-ttl,
    #firnds-introduce .classes .classes-math .classes-ttl {
        margin-bottom: 3%;
    }
}


#firnds-introduce .classes .classes-program p:nth-of-type(1) {
    font-size: 21px;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-program p:nth-of-type(1) {
        font-size: clamp(1.125rem, 0.946rem + 0.89vw, 1.375rem);
    }
}

#firnds-introduce .classes .classes-subtitle {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 40;
    margin-top: -0.5%;
}

#firnds-introduce .classes .classes-robot {
    background: #f39800;
}

#firnds-introduce .classes .classes-program {
    background: #ed798e;
}

#firnds-introduce .classes .classes-science {
    background: #6bc8f2;
}

#firnds-introduce .classes .classes-math {
    background: #b73f91;
}

#firnds-introduce .classes .classes-robot .classes-ttl::before {
    content: "";
    display: block;
    width: 16%;
    height: 160%;
    position: absolute;
    background: url(../images/robot_icon.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-robot .classes-ttl::before {
        width: 14%;
        height: 230%;
    }
}

#firnds-introduce .classes .classes-program .classes-ttl::before {
    content: "";
    display: block;
    width: 16%;
    height: 160%;
    position: absolute;
    background: url(../images/program_icon.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-program .classes-ttl::before {
        width: 14%;
        height: 230%;
    }
}

#firnds-introduce .classes .classes-science .classes-ttl::before {
    content: "";
    display: block;
    width: 16%;
    height: 160%;
    position: absolute;
    background: url(../images/science_icon.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-science .classes-ttl::before {
        width: 14%;
        height: 118%;
    }
}

#firnds-introduce .classes .classes-math .classes-ttl::before {
    content: "";
    display: block;
    width: 16%;
    height: 160%;
    position: absolute;
    background: url(../images/math_icon.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-math .classes-ttl::before {
        width: 14%;
        height: 118%;
    }
}

#firnds-introduce .classes .classes-img {
    width: 100%;
}

#firnds-introduce .classes img {
    border-radius: 10px;
}

/* お悩み */
#firnds-introduce .classes .worry {
    display: block;
    width: 100%;
    padding-top: 5.5%;
}

#firnds-introduce .classes .worry {
    display: block;
    width: 100%;
    background: #fffac0;
}

#firnds-introduce .classes .worry h3 {
    display: block;
    width: 62%;
    margin: 0 auto;
    margin-bottom: 5.7%;
}

#firnds-introduce .classes .worry-text1 {
    display: block;
    width: 92%;
    font-size: clamp(1rem, 0.841rem + 0.8vw, 1.438rem);
    font-weight: 600;
    line-height: 1.5;
    background: #ffd2dd;
    border-radius: 0px 20px 20px 0px;
    padding: 6.9% 3.7% 6.9% 30.7%;
    margin-bottom: 6%;
    position: relative
}

#firnds-introduce .classes .worry-text1::before {
    content: "";
    display: block;
    width: 17vmin;
    height: 26vmin;
    position: absolute;
    background: url(../images/mother1.png) no-repeat center center / contain;
    left: 10%;
    bottom: 0;
}

#firnds-introduce .classes .worry-text2 {
    display: block;
    width: 92%;
    font-size: clamp(1rem, 0.841rem + 0.8vw, 1.438rem);
    font-weight: 600;
    line-height: 1.5;
    background: #abe4ff;
    border-radius: 20px 0px 0px 20px;
    padding: 5.6% 35% 5.6% 3.7%;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 3.5%;
    position: relative
}

#firnds-introduce .classes .worry-text2::after {
    content: "";
    display: block;
    width: 18vmin;
    height: 23vmin;
    position: absolute;
    background: url(../images/mother2.png) no-repeat center center / contain;
    right: 12%;
    bottom: 0;
}

#firnds-introduce .classes .worry-text-color-pink {
    color: #fc4c77;
}

#firnds-introduce .classes .worry-text-color-blue {
    color: #0277c9;
}

#firnds-introduce .classes .worry-mothers-img {
    display: block;
    width: 27%;
}

#firnds-introduce .classes .worry-wrapper {
    display: flex;
    width: auto;
    justify-content: center;
    align-items: center;
    gap: 3%;
    margin-bottom: 6.5%;
}

#firnds-introduce .classes .worry-text3 {
    display: block;
    width: 40.5%;
    padding-top: 5%;
}

#firnds-introduce .classes .worry-family-img {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 3%;
}

#firnds-introduce .classes .worry-text4 {
    display: block;
    width: 100%;
    font-size: 3vmin;
    line-height: 1.6;
    text-align: center;
}

#firnds-introduce .classes .worry-text-color-orange {
    color: #ff9000;
    font-weight: 600;
}


/* 手順 */
#firnds-introduce .flow {
    display: block;
    width: 100%;
    padding: 0 4% 17%;
}

#firnds-introduce .flow .flow-wrapper {
    display: block;
    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-wrapper {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
}

#firnds-introduce .flow .flow-inviter-container {
    margin-top: 2.3%;
}

#firnds-introduce .flow .flow-inviter-step-all,
#firnds-introduce .flow .flow-invitee-step-all {
    padding: 2.6% 3%;
    border-radius: 10px;
    position: relative;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-inviter-step-all,
    #firnds-introduce .flow .flow-invitee-step-all {
        padding: 4.6% 5%;
        margin-top: 8%;
    }
}

#firnds-introduce .flow .flow-inviter-step-all {
    background: #ffd2dd;
}

#firnds-introduce .flow .flow-invitee-step-all {
    background: #abe4ff;
}

#firnds-introduce .flow .flow-inviter-step-all::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle_pink.png) no-repeat center center / contain;
    bottom: -3.4%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-inviter-step-all::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -2.3%;
    }
}

#firnds-introduce .flow .flow-invitee-step-all::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle_blue.png) no-repeat center center / contain;
    bottom: -1.8%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-invitee-step-all::after{
        width: 12vmin;
        height: 5vmin;
        bottom: -1.2%;
    }
}

#firnds-introduce .flow .flow-step-ttl {
    display: block;
    width: 100%;
    font-size: clamp(1.25rem, 0.714rem + 2.68vw, 2rem);
    font-weight: 800;
    color: #FFF;
    text-align: center;
    border-radius: 10px;
    padding: 1.8% 0;
}

#firnds-introduce .flow .flow-inviter-step-all .flow-step-ttl{
    background: #fb87a3;
}

#firnds-introduce .flow .flow-invitee-step-all .flow-step-ttl{
    background: #3aafe6;
}

#firnds-introduce .flow .flow-inviter-step,
#firnds-introduce .flow .flow-invitee-step {
    display: flex;
    width: 100%;
    border-radius: 10px;
    margin-top: 2.3%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-inviter-step,
    #firnds-introduce .flow .flow-invitee-step {
        display: block;
        margin-top: 5%;
    }
}

#firnds-introduce .flow .triangle1,
#firnds-introduce .flow .triangle3,
#firnds-introduce .flow .triangle4,
#firnds-introduce .flow .triangle5,
#firnds-introduce .flow .triangle6 {
    margin-bottom: 6%;
    position: relative;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle1,
    #firnds-introduce .flow .triangle3,
    #firnds-introduce .flow .triangle4,
    #firnds-introduce .flow .triangle5,
    #firnds-introduce .flow .triangle6 {
        margin-bottom: 11%;
    }
}

#firnds-introduce .flow .triangle1::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -8%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle1::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -4%;
    }
}

#firnds-introduce .flow .triangle2 {
    position: relative;
}

#firnds-introduce .flow .triangle2::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -7%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle2::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -7%;
    }
}

#firnds-introduce .flow .triangle3::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -13%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle3::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -12%;
    }
}

#firnds-introduce .flow .triangle4::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -28%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle4::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -19%;
    }
}

#firnds-introduce .flow .triangle5::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -7%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle5::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -4%;
    }
}

#firnds-introduce .flow .triangle6::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -17%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle6::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -11%;
    }
}

#firnds-introduce .flow .triangle7::after {
    content: "";
    display: block;
    width: 73px;
    height: 28px;
    background: url(../images/triangle.png) no-repeat center center / contain;
    bottom: -0.5%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .triangle7::after {
        width: 12vmin;
        height: 5vmin;
        bottom: -0.3%;
    }
}

#firnds-introduce .flow dt {
    display: flex;
    font-size: 35px;
    color: #FFF;
    text-align: center;
    line-height: 0.9;
    font-weight: 700;
    border-radius: 10px 0px 0px 10px;
    padding: 0 1%;
    flex-flow: column;
    justify-content: center;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow dt {
        display: block;
        font-size: clamp(1.438rem, 1.125rem + 1.56vw, 1.688rem);
        color: #FFF;
        text-align: center;
        line-height: 0.9;
        font-weight: 700;
        border-radius: 10px 10px 0px 0px;
        padding: 2% 1%;
        flex-flow: column;
        justify-content: center;
    }
}

#firnds-introduce .flow .flow-inviter-step dt {
    background: #fb87a3;
}

#firnds-introduce .flow .flow-invitee-step dt {
    background: #3aafe6;
}

#firnds-introduce .flow .flow-invitee-step .step7-attention {
    color: #ff0000;
}

#firnds-introduce .flow .flow-step-small {
    font-size: 17px;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-step-small {
        font-size: clamp(1.438rem, 1.125rem + 1.56vw, 1.688rem);
    }
}

#firnds-introduce .flow .flow-pc-none {
    display: none;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-pc-none {
        display: inline;
    }
}

#firnds-introduce .flow .flow-code-img,
#firnds-introduce .flow .flow-lynx-img {
    display: block;
    width: 65%;
    padding: 3% 0 3% 2%;
    background: #FFF;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-code-img,
    #firnds-introduce .flow .flow-lynx-img {
        width: 100%;
        padding: 6% 13% 0%;
    }
}

#firnds-introduce .flow .flow-form-img {
    display: block;
    width: 65%;
    padding: 3% 5% 3%;
    background: #FFF;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-form-img {
        width: 100%;
        padding: 3% 20% 0;
    }
}


#firnds-introduce .flow .flow-inviter-step-all img {
    border: solid 2px #fb87a3;
}

#firnds-introduce .flow .flow-invitee-step-all img {
    border: solid 2px #3aafe6;
}

#firnds-introduce .flow .flow-text-wrapper {
    display: block;
    width: 100%;
    background: #FFF;
    border-radius: 0px 10px 10px 0;
    padding: 5% 5% 5% 2.6%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-text-wrapper {
        border-radius: 0px 0px 10px 10px;
        padding: 5%;
    }
}

#firnds-introduce .flow .flow-text {
    font-size: 2vmin;
    line-height: 1.6;
    text-align: justify;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-text {
        font-size: 3.5vmin;
    }
}

#firnds-introduce .flow .flow-text-mB {
    margin-bottom: 6.4%;
}

#firnds-introduce .flow .flow-lynx {
    color: #65c706;
}

#firnds-introduce .flow .flow-code {
    color: #ef567b;
}

#firnds-introduce .flow .flow-button {
    display: block;
    width: 100%;
    border-radius: 13px;
    font-size: 2.5vmin;
    font-weight: 800;
    color: #FFF;
    text-align: center;
    background: #fb87a3;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-button {
        font-size: clamp(1rem, 0.844rem + 0.78vw, 1.125rem);
    }
}

#firnds-introduce .flow .flow-button a {
    display: block;
    padding: 5.5% 11%;
    color: #FFF;
    
}

#firnds-introduce .flow .flow-button:hover {
    background: #ffa4ba;
}

#firnds-introduce .flow .flow-get-text {
    display: block;
    width: 100%;
    font-size: clamp(1rem, 0.777rem + 1.12vw, 1.313rem);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    margin: 7.3% auto 0;
}

#firnds-introduce .flow .flow-inviter-container .flow-get-text span {
    background:linear-gradient(transparent 66%,#abe4ff 50%,#abe4ff 100%);
}

#firnds-introduce .flow .flow-invitee-container .flow-get-text span {
    background:linear-gradient(transparent 66%,#ffd2dd 50%,#ffd2dd 100%);
}

#firnds-introduce .flow .flow-get-img {
    display: block;
    margin: 0 auto;
    width: 82.4%;
    margin-top: 3.5%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-get-img {
        display: block;
        margin: 0 auto;
        width: 100%;
        margin-top: 3.5%;
    }
}

#firnds-introduce .flow .attention {
    font-size: 1.7vmin;
    text-align: center;
    margin-top: 4%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .attention {
        font-size: 2.8vmin;
    }
}

#firnds-introduce .flow .flow-invitee-container {
    margin-top: 10%;
}

#firnds-introduce .flow .flow-button-class {
    display: block;
    width: 60%;
    border-radius: 13px;
    font-size: 2.5vmin;
    font-weight: 800;
    color: #FFF;
    text-align: center;
    background: #3aafe6;
    margin: 3.3% auto 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .flow .flow-button-class {
        width: 80%;
        font-size: clamp(1rem, 0.844rem + 0.78vw, 1.125rem);
    }
}

#firnds-introduce .flow .flow-button-class:hover {
    background: #74cffa;
}

#firnds-introduce .flow .flow-button-class a {
    display: block;
    padding: 5.5% 11%;
    color: #FFF;
}


#firnds-introduce .flow .triangle7 .attention {
    text-align: justify;
}


/* よくある質問 */
#firnds-introduce .question {
    padding: 0 7.8% 5.7%;
}

#firnds-introduce .question ul {
    margin-top: 4.3%;
}

#firnds-introduce .question dt {
    display: block;
    width: 100%;
    font-size: clamp(1rem, 0.866rem + 0.67vw, 1.188rem);
    background: #ffd223;
    border-radius: 10px 10px 0px 0px;
    padding: 3.8% 11% 3.8% 14.3%;
    position: relative;
}

#firnds-introduce .question dt::after {
    content: "";
    display: block;
    width: 5%;
    height: 56%;
    background: url(../images/q_icon.png) no-repeat center center / contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4%;
}

#firnds-introduce .question .triangle-button {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-top: 21px solid #FFF;
    border-bottom: 0;
    position: absolute;
    right: 3.4%;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 576px) {
    #firnds-introduce .question .triangle-button {
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: 16px solid #FFF;
        border-bottom: 0;
        position: absolute;
        right: 3.4%;
    }
}

#firnds-introduce .question .question-container {
    display: none;
    width: 100%;
    font-size: clamp(1rem, 0.866rem + 0.67vw, 1.188rem);
    line-height: 1.8;
    background: #fff6c2;
    border-radius: 0px 0px 10px 10px;
    padding: 5% 6.8% 5% 14.3%;
    position: relative;
}

#firnds-introduce .question .question-a1 {
    position: relative;
}

#firnds-introduce .question .question-a1:after {
    content: "";
    display: block;
    width: 5%;
    height: 11%;
    background: url(../images/a_icon.png) no-repeat center center / contain;
    top: 3vmin;
    left: 3.3vmin;
    position: absolute;
}

#firnds-introduce .question .question-a2 {
    position: relative;
}

#firnds-introduce .question .question-a2:after {
    content: "";
    display: block;
    width: 5%;
    height: 12%;
    background: url(../images/a_icon.png) no-repeat center center / contain;
    top: 3vmin;
    left: 3.3vmin;
    position: absolute;
}

#firnds-introduce .question .question-a3 {
    position: relative;
}

#firnds-introduce .question .question-a3:after {
    content: "";
    display: block;
    width: 5%;
    height: 15%;
    background: url(../images/a_icon.png) no-repeat center center / contain;
    top: 3vmin;
    left: 3.3vmin;
    position: absolute;
}

#firnds-introduce .question dd {
    font-feature-settings: "palt";
}

#firnds-introduce .question .question-text {
    display: block;
    width: 100%;
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 3.8%;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .question .question-text {
        font-size: clamp(0.938rem, 0.625rem + 1.56vw, 1.188rem);
    }
}

#firnds-introduce .question .question-button {
    display: block;
    width: 59%;
    border-radius: 13px;
    font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
    font-weight: 800;
    color: #FFF;
    text-align: center;
    background: #ffd223;
    margin: 0 auto;
    margin: 4% auto;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .question .question-button {
        width: 80%;
    }
}

#firnds-introduce .question .question-button:hover {
    background: #ffe271;
}

#firnds-introduce .question .question-button a {
    display: block;
    padding: 2.5% 0%;
    color: #FFF;
}

#firnds-introduce .question dt:not(:first-child) {
    margin-top: 4.7%;
}


/* 20260415追記 */
/* アート教室 */
#firnds-introduce .classes .classes-art {
    padding: 6% 5.2% 4%;
    background: #B73F91;
}

#firnds-introduce .classes .classes-art .classes-ttl {
    margin-bottom: 6%;
}

#firnds-introduce .classes .classes-art .classes-ttl::before {
    content: "";
    display: block;
    width: 16%;
    height: 160%;
    position: absolute;
    background: url(../images/art_icon.png) no-repeat center center / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
@media screen and (max-width: 576px) {
    #firnds-introduce .classes .classes-art .classes-ttl::before {
        width: 14%;
        height: 230%;
    }
}