.pencil-basics{
    background-image: url(../img/d/d-main-image-sp.jpg);
}
.pencil-basics__content{
    padding: 80rem 0 60rem;
}
.pencil-basics__nav{
    display: flex;
    gap: 15rem;
    margin-bottom: 48rem;
    text-align: center;
    justify-content: center;
}
.pencil-basics__nav-item{
    width: 160rem;
    padding: 9rem 20rem;
    background-color: var(--color-maron);
    color: var(--color-red);
    font-size: 14rem;
    font-weight: 700;
    line-height: 150%;
    border-radius: 10rem;
    letter-spacing: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "M PLUS Rounded 1c", sans-serif;
}
.pencil-basics__nav-item--is-active{
    background-color: var(--color-red);
    color: var(--color-snow);
    position: relative;
}
.pencil-basics__nav-item--is-active::after{
    content: "";
    position: absolute;
    bottom: -15rem;
    left: 50%;
    transform: translateX(-50%);
    border: 8rem solid transparent;
    border-top-color:var(--color-red); 
}
.pencil-basics__point{
    display: flex;
    flex-direction: column;
    max-width: 992rem;
    margin: 0 auto 60rem;
    gap: 20rem;
}
.pencil-basics__point:last-of-type{
    margin-bottom: 0;
}
.pencil-basics__point-heading{
    font-size: 24rem;
    font-family: "Zain";
    font-weight: 400;
    letter-spacing: 1.2rem;
    position: relative;
}
.pencil-basics__point-media{
    flex-shrink: 0;
}
.pencil-basics__point-media--01{
    width: 335rem;
    height: 280rem;
}
.pencil-basics__point-media--02{
    width: 335rem;
    height: 275rem;
}
.pencil-basics__point-media--03{
    width: 160rem;
    height: 240rem;
}
.pencil-basics__point-image{
    width: 100%;
    display: block;
    height: 100%;
}
.pencil-basics__point-heading::after{
    content: attr(data-point);
    font-size: 48rem; 
    font-family: "Zain";
    font-weight: 400;
    position: absolute;
    transform: translate(6rem,-50%);
    top: 50%;
}
.pencil-basics__point-media-group{
    display: flex;
    gap: 15rem;
}
.pencil-basics__point-heading[data-point="01"] {
    color: var(--color-bright_blue);
}
.pencil-basics__point-heading[data-point="01"]::after {
    color: var(--color-bright_blue);
}
.pencil-basics__point-heading[data-point="02"] {
    color: var(--color-pink);
}
.pencil-basics__point-heading[data-point="02"]::after {
    color: var(--color-pink);
}
.pencil-basics__point-heading[data-point="03"] {
    color: var(--color-brown);
}
.pencil-basics__point-heading[data-point="03"]::after {
    color: var(--color-brown);
}
.pencil-basics__point-description{
    font-family: var(--font-family-jp-primary);
    font-size: 14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 1.2rem;
    color: var(--color-black);
}
.pencil-basics__text{
    font-weight: 700;
}
.pencil-basics__point-note{
    margin: 10rem 0 0;
}
.pencil-basics__text--bright-blue{
    color: var(--color-bright_blue);
}
.pencil-basics__text--orange{
    color: var(--color-orange);
}
.pencil-basics__text--purple{
    color: var(--color-purple);
}
.pencil-basics__video-guide{
    padding: 60rem 0;
    background-color: var(--color-snow);
}
.pencil-basics__video-guide-header{
    text-align: center;
    margin-bottom: 30rem;
}
.pencil-basics__video-guide-intro{
    font-weight: 700;
    margin-bottom: 10rem;
}
.pencil-basics__video-embed{
    width: 335rem;
    height: 188rem;
    background-color: var(--color-light_grey);
    margin: 0 auto 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 992rem;
}
.pencil-basics__video-embed-play-button{
    background-color: var(--color-red);
    width: 60rem;
    height: 60rem;
    border-radius: 50%;
    position: absolute;
}
.pencil-basics__video-embed-play-button::after{
    content: "";
    width:8rem ;
    height:15rem ;
    background-image: url(../img/icons/vector-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
}
.pencil-basics__video-embed iframe {
    height: 100%;
    width: 100%;
}
.pencil-basics__video-guide-title{
    margin: 0;
}
.pencil-basics__definition{
    max-width: 992rem;
}
.pencil-basics__definition-title{
    margin: 0 0 10rem;
}
.pencil-basics__definition-text{
    color: var(--color-pure-black);
    margin: 0;
}

@media screen and (min-width: 768px) {
    .pencil-basics{
        background-image: url(../img/d/d-main-image-pc.jpg);
    }
    .pencil-basics__content{
        padding: 120rem 0 140rem;
    }
    .pencil-basics__nav{
        gap: 48rem;
        margin-bottom: 156rem;
    }
    .pencil-basics__nav-item{
        font-size: 20rem;
        width: 368rem;
        padding: 20rem 30rem;
        border-radius: 20rem;
    }
    .pencil-basics__point-body{
        width: 330rem;
    }
    .pencil-basics__point-media-group{
        gap: 20rem;
    }
    .pencil-basics__nav-item--is-active::after{
        bottom: -31rem;
        border: 16rem solid transparent;
        border-top-color: var(--color-red);    
    }
    .pencil-basics__point{
        flex-direction: row;
        gap: 60rem;
        margin-bottom: 140rem;
        align-items: center;
        justify-content: center ;    
    }
    .pencil-basics__point--reverse{
        flex-direction: row-reverse;    
    }
    .pencil-basics__point-heading{
        margin-bottom: 30rem;
        letter-spacing: 1.6rem;
        font-size: 32rem;
    }
    .pencil-basics__point-note{
        margin-top: 20rem;
    }
    .pencil-basics__point-description{
        font-size: 20rem;
    }
    .pencil-basics__video-embed{
        width: 100%;
        height: auto;
        aspect-ratio: 992 / 557;
        margin-bottom: 60rem;
    }
    .pencil-basics__video-guide{
        padding: 100rem 0;
    }
    .pencil-basics__video-embed-play-button{
        width: 80rem;
        height: 80rem;
    }
    .pencil-basics__video-embed-play-button::after{
        width: 10rem;
        height: 20rem;
    }
    .pencil-basics__video-guide-intro{
        margin-bottom: 20rem;
    }
    .pencil-basics__video-guide-header{
        margin-bottom: 60rem;
    }
    .pencil-basics__definition-title{
        margin-bottom: 20rem;
    }
    .pencil-basics__definition{
        margin: 0 auto;
    }
}

@media screen and (min-width: 960px) {
    .pencil-basics__point {
        gap: 104rem;
        justify-content: space-between;
    }
    .pencil-basics__point-body{
        width: auto;
    }
        .pencil-basics__point-media--01{
        width: 472rem;
        height: 386rem;
    }
    .pencil-basics__point-media--02{
        width: 472rem;
        height: 400rem;
    }
    .pencil-basics__point-media--03{
        width: 230rem;
        height: 345rem;
    }
}


/* d-2 */
.pencil-basics__posture{
    margin-bottom: 60rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30rem;
}
.pencil-basics__posture:last-of-type{
    margin-bottom: 0;
}
.pencil-basics__posture__media{
    width: 335rem;
    height: 450rem;
    flex-shrink: 0;
}
.pencil-basics__posture__image{
    width: 100%;
    display: block;
    border-radius: 40rem;
}
.pencil-basics__posture__title{
    margin: 0 0 20rem 0;
}
.pencil-basics__posture__list{
    list-style-type: none;
}
.pencil-basics__posture__item{
    padding: 16rem 20rem;
    background-color: var(--color-snow);
    border-radius: 20rem;
    display: flex;
    align-items: center;
    margin-bottom: 12rem;
    line-height: 175%;
    gap: 10rem;
    min-height: 72rem;
}
.pencil-basics__posture__item:last-of-type{
    margin-bottom: 0;
}
.pencil-basics__posture__item::before{
    content: attr(data-point);
    font-size: 15rem; 
    font-family: "Zain";
    font-weight: 700;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    color: var(--color-snow);
    flex-shrink: 0;
    display: inline-block;
    text-align: center;
    letter-spacing: normal;
    line-height: 170%;
}
.pencil-basics__posture__item[data-point="1"]::before{
    background-color: var(--color-bright_blue);
}
.pencil-basics__posture__item[data-point="2"]::before {
    background-color: var(--color-orange);
}
.pencil-basics__posture__item[data-point="3"]::before {
    background-color: var(--color-pink);
}
.pencil-basics__posture__text--black{
    font-weight: 700;
}
.pencil-basics__posture__text--bright-blue{
    color: var(--color-bright_blue);
}
.pencil-basics__posture__text--orange{
    color: var(--color-orange);
}
.pencil-basics__posture__text--pink{
    color: var(--color-pink);
}
.pencil-basics__hand-guide{
    background-color: var(--color-snow);
    padding: 60rem 0;
}
.pencil-basics__hand-guide__header{
    text-align: center;
    margin-bottom: 30rem;
}
.pencil-basics__hand-guide__image-wrapper{
    width: 200rem;
    height: 200rem;
    margin: 0 auto 20rem;
}
.pencil-basics__hand-guide__image{
    width: 100%;
    display: block;
    border-radius: 30rem;
}
.pencil-basics__hand-guide__list{
    display: flex;
    flex-direction: column;
    gap: 60rem;
}
.pencil-basics__hand-guide-step__label{
    font-family:"Zain";
    font-weight: 400;
    margin: 0;
}
.pencil-basics__hand-guide-step__label--bright-blue{
    color: var(--color-bright_blue);
}
.pencil-basics__hand-guide-step__label--pink{
    color: var(--color-pink);
}
.pencil-basics__hand-guide-step__label--brown{
    color: var(--color-brown);
}
.pencil-basics__hand-guide-step__label--turquoise{
    color: var(--color-turquoise);
}
.pencil-basics__hand-guide__step{
    flex-grow: 1;
}
.pencil-basics__hand-guide__step-content{
    text-align: center;
}   
.pencil-basics__hand-guide__step-description{
    margin: 0;
}

@media screen and (min-width: 768px) {
    .pencil-basics__posture__title{
        margin-bottom: 40rem;
    }
    .pencil-basics__posture__item{
        width: 370rem;
        padding: 16rem 32rem;
        margin-bottom: 20rem;
    }
    .pencil-basics__posture{
        flex-direction: row-reverse;
        gap: 20rem;
    }
    .pencil-basics__posture__item::before{
        width: 32rem;
        height: 32rem;
        font-size: 20rem;
    }
    .pencil-basics__hand-guide{
        padding: 100rem 0;
    }
    .pencil-basics__hand-guide__header{
        margin-bottom: 60rem;
    }
    .pencil-basics__hand-guide__list{
        flex-direction: row;
        gap: 64rem;
    }
}

@media screen and (min-width: 960px) {
    .pencil-basics__posture__item{
        width: 392rem;
    }
    .pencil-basics__posture{
        gap: 60rem;
    }
}

@media screen and (min-width: 1280px) {
    .pencil-basics__posture{
        margin-bottom: 100rem;
        position: relative;
    }
    .pencil-basics__posture__body{
        position: absolute;
        top: 60rem;
        left: 80rem;
    }
    .pencil-basics__posture__media{
        width: 992rem;
        height: 540rem;
    }
}