@charset "UTF-8";
/*-----------------------------------------------------
* ダーマペン用CSS HP/LP共通
-----------------------------------------------------*/

/*-----------------------------------------------------
    PC
-----------------------------------------------------*/
/* common
-----------------------------------------------------*/
/* system */
:is(#derma-pen,#lp_derma-pen) .forPC {
    display: block;
}

:is(#derma-pen,#lp_derma-pen) .forSP {
    display: none;
}
/* reset */
:is(#derma-pen,#lp_derma-pen) .main :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0;
}
:is(#derma-pen,#lp_derma-pen) .main a {
    text-decoration: none;
}

:is(#derma-pen,#lp_derma-pen) .main p,
:is(#derma-pen,#lp_derma-pen) .main p:first-child,
:is(#derma-pen,#lp_derma-pen) .main p:last-child {
    margin: 0;
    text-align: inherit;
    color: #2D2D2D;
}

:is(#derma-pen,#lp_derma-pen) .main img {
    max-width: 100%;
}

:is(#derma-pen,#lp_derma-pen) .main .card {
    position: static;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    min-width: auto;
    word-wrap: normal;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    border-radius: 0;
}

/* layout */
:is(#derma-pen,#lp_derma-pen) .main {
    font-family: 'Noto Serif JP';
}

:is(#derma-pen,#lp_derma-pen) .inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 0;
}
:is(#derma-pen,#lp_derma-pen) .section {
    /* padding: 48px 0; */
}

/* parts */
:is(#derma-pen,#lp_derma-pen) .cta-button {
    display: block;
    border-radius: 64px;
    background: #032149;
    color: #fff;
    padding: 12px 0;
    text-align: center;
    width: 248px;
    margin: 0 auto;

    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 32px */
    
    position: relative;
    transition: 0.2s ease;
}
:is(#derma-pen,#lp_derma-pen) .cta-button::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ic_arrow_right.svg);
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}
:is(#derma-pen,#lp_derma-pen) .cta-button:hover {
    opacity: 0.4;
    transition: 0.2s ease;
}
/* mainvisual
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #mainvisual {
    background-image: url(../img/mv_bg_pc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
:is(#derma-pen,#lp_derma-pen) #mainvisual .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 16px;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    
}
:is(#derma-pen,#lp_derma-pen) #mainvisual .mv_text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 40px;
    margin-bottom: 100px;
    max-width: 561px;
}
:is(#derma-pen,#lp_derma-pen) #mainvisual .mv_price {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 16px;
    max-width: 535px;
}
/* sec-concept
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-concept {
    background-image: url(../img/concept_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
:is(#derma-pen,#lp_derma-pen) #sec-concept .sec-title{
    color: #002348;
    text-align: center;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 3.84px;
}
:is(#derma-pen,#lp_derma-pen) #sec-concept .sec-subtitle{
    color: #2D2D2D;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}
:is(#derma-pen,#lp_derma-pen) #sec-concept .img-wrapper {
    max-width: 718px;
    margin: 8px auto;
}
/* sec-about
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-about {
    text-align: center;
    background-color: #F5F5F5;
}

:is(#derma-pen,#lp_derma-pen) #sec-about .inner {
    max-width: 880px;
}

:is(#derma-pen,#lp_derma-pen) #sec-about .sec-title {
    color: #195493;
    margin-bottom: 56px;
}
:is(#derma-pen,#lp_derma-pen) #sec-about .sec-title > img {
    margin: 0 auto;
}
:is(#derma-pen,#lp_derma-pen) #sec-about .sec-desc {
    font-size: 20px;
    font-weight: 500;
    line-height: 220%;
}
/* sec-improving 
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-improving {
    text-align: center;
}
:is(#derma-pen,#lp_derma-pen) #sec-improving .improving-text-image {
    margin-bottom: 56px;
}
:is(#derma-pen,#lp_derma-pen) #sec-improving .sec-title {
    font-size: 56px;
    margin-bottom: 56px;
    line-height: 1.6;
    color: #002348;
}
/* :is(#derma-pen,#lp_derma-pen) #sec-improving .sec-subtitle {
    font-size: 24px;
    line-height: 2.2;
} */
/* :is(#derma-pen,#lp_derma-pen) #sec-improving .text-small {
    font-size: 20px;
    margin-bottom: 56px;
    line-height: 2;
    color: #002348;
} */
:is(#derma-pen,#lp_derma-pen) #sec-improving .text-big {
    font-size: 32px;
    line-height: 1.8;
    color: #243A4B;
}

/* sec-aging-care
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .bg-light-blue {
    /* background-color: #88D1D1; */
    background-image: url(../img/aging_care_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 74px 100px;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .bg-light-blue .sec-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    color: #fff;
    line-height: 1;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .bg-light-blue .sec-title {
    font-size: 48px;
    color: #fff;
    margin-bottom: 0;
    line-height: 1;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card {
    display: flex;
    flex-direction: row;
    gap: 32px;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 624px;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-content h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.8;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-img {
    flex: 1;
}
:is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-img img {
    border-radius: 8px;
}
/* sec-method
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-method .sec-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex {
    display: flex;
    flex-direction: row;
    max-width: 984px;
    margin: 0 auto;
    padding: 24px 48px;
    gap: 80px;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-illust {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    width: 140px;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-illust img {
    width: 100%;
}

:is(#derma-pen,#lp_derma-pen) #sec-method .flex-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-content-item {
    display: flex;
    flex-direction: row;
    gap: 80px;
    padding: 40px;
    align-items: center;
    border-top: 1px solid #F5F5F5;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-content-item:last-child {
    border-bottom: 1px solid #F5F5F5;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-content-item-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}
:is(#derma-pen,#lp_derma-pen) #sec-method .flex-content-item-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
}

/* sec-case
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-case .sec-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-case .img-wrapper {
    max-width: 890px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-case p.info {
    text-align: center;
    padding-top: 32px;
}
/* sec-price
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-price .sec-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-price .price-table th {
    background-color: #FCFCFC;
    padding: 24px;
    color: #002348;
    text-align: center;
    width: 200px;
}

:is(#derma-pen,#lp_derma-pen) #sec-price .price-table td {
    background-color: #fff;
    padding: 24px;
    color: #002348;
}

/* sec-cta
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-cta {
    background-image: url(../img/cta_bg.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
:is(#derma-pen,#lp_derma-pen) #sec-cta .sec-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 56px;
    align-items: center;
    margin-top: 64px;
    margin-bottom: 48px;
}
:is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper > img:first-child {
    /* max-width: 431px; */
    width: 42%;
}
:is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper > img:last-child {
    /* max-width: 535px; */
    width: 52%;
}
/* sec-internal-links
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-internal-links .btn-box-menu {
    width: 100%;
    justify-content: center;
    margin-top: 0;
}
:is(#derma-pen,#lp_derma-pen) #sec-internal-links .btn-box-menu .btn {
    min-width: 240px;
    max-width: none;
    width: fit-content;
}
:is(#derma-pen,#lp_derma-pen) #sec-internal-links .btn-box-menu .btn span {
    padding: 8px 16px;
}

/* sec-cautions
-----------------------------------------------------*/
:is(#derma-pen,#lp_derma-pen) #sec-cautions .flex {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions .title {
    color: #8A857E;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Inter';
    line-height: 1.6;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions .block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: #8A857E;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions .card {
    width: 100%;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid #C7C7C7;
    word-break: break-word;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions .card p {
    font-size: 16px;
    color: #8A857E;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions .card a {
    text-decoration: underline;
    color: #0078CA;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions table {
    width: 100%;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions table th {
    width: 200px;
    text-align: center;
    vertical-align: middle;
    background-color: #FCFCFC;
}
:is(#derma-pen,#lp_derma-pen) #sec-cautions table td {
    padding: 24px 16px;
}


/*-----------------------------------------------------
    TB
-----------------------------------------------------*/
@media screen and (max-width: 1280px) {
    
}

/*-----------------------------------------------------
    SP
-----------------------------------------------------*/
@media screen and (max-width: 767px) {
    /* system */
    :is(#derma-pen,#lp_derma-pen) .forPC {
        display: none;
    }
    :is(#derma-pen,#lp_derma-pen) .forSP {
        display: block;
    }
    /* layout */
    :is(#derma-pen,#lp_derma-pen) .inner {
        padding: 64px 24px;
    }
    :is(#derma-pen,#lp_derma-pen) .section {
        /* padding: 48px 0; */
    }
    :is(#derma-pen,#lp_derma-pen) .site-content {
        padding-top: 0 !important;
    }
    /* mainvisual
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #mainvisual {
        background-image: url(../img/mv_bg_sp.jpg);
        background-position: bottom center;
        padding-top: 40px;
    }
    :is(#derma-pen,#lp_derma-pen) #mainvisual .flex {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    :is(#derma-pen,#lp_derma-pen) #mainvisual .mv_text {
        margin-top: 156px;
        margin-bottom: 0;
    }
    :is(#derma-pen,#lp_derma-pen) #mainvisual .mv_price {
        margin: 0;
    } 
    /* sec-concept
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-concept .sec-subtitle {
        font-size: 20px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-concept .sec-title {
        font-size: 40px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-concept .img-wrapper {
        margin: 16px auto;
    }
    /* sec-about
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-about .sec-title {
        margin-bottom: 32px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-about .sec-desc {
        font-size: 16px;
        text-align: left;
    }
    /* sec-improving
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-improving .sec-subtitle {
        font-size: 15px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-improving .sec-title {
        font-size: 34px;
        margin-bottom: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-improving .text-small {
        font-size: 16px;
        margin-bottom: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-improving .text-big {
        font-size: 20px;
    }
    /* sec-aging-care
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-aging-care .bg-light-blue {
        padding: 56px 24px;
        background-image: url(../img/aging_care_bg_sp.jpg);
    }
    :is(#derma-pen,#lp_derma-pen) #sec-aging-care .bg-light-blue .sec-title {
        font-size: 32px;
        line-height: 1.4;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-aging-care .card {
        flex-direction: column-reverse;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-aging-care .card-content h3 {
        font-size: 24px;
    }
    /* sec-method
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-method .flex {
        flex-direction: column;
        padding: 0;
        gap: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-method .flex-illust {
        flex-direction: row;
        width: 100%;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-method .flex-illust img {
        width: calc(100% / 3);
    }
    :is(#derma-pen,#lp_derma-pen) #sec-method .flex-content-item {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        padding: 24px 16px;
    }
    /* sec-price
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-price .price-table th {
        width: 95px;
    }

    /* sec-cta
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-cta  {
        background-image: url(../img/cta_bg_sp.jpg);
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cta .inner {
        padding: 52px 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cta .sec-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper {
        flex-direction: column;
        gap: 24px;
        margin-top: 0;
        margin-bottom: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper > img:first-child {
        width: 100%;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cta .img-wrapper > img:last-child {
        width: 100%;
    }
    /* sec-cautions
    -----------------------------------------------------*/
    :is(#derma-pen,#lp_derma-pen) #sec-cautions .flex {
        gap: 56px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cautions .block {
        gap: 24px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cautions .title {
        font-size: 18px;
    }
    :is(#derma-pen,#lp_derma-pen) #sec-cautions table th {
        width: 95px;
    }


}

/* 画面幅340px以下 header調整 */
@media screen and (max-width: 340px) {
    
}