/* concept_header — style.css の header .inner { height: 178px } を下層ページ向けに補正 */
@media (min-width: 600px) and (max-width: 959px) {
    body.concept header .inner {
        height: auto;
        text-align: left;
    }

    body.concept header .inner h1 {
        margin: 0;
        padding: 20px 0 20px 15px;
    }

    body.concept header .inner h1 img {
        width: 150px;
    }
}

@media (min-width: 769px) and (max-width: 959px) {
    body.concept #wrap {
        margin-top: 74px;
    }
}

/* sp_common */
#concept {
    color: #333;
    margin: 0 auto;
}

#concept .pc {
    display: none !important;
}

#concept .sp {
    display: block !important;
}

#concept p {
    font-size: clamp(11px, calc(100vw * 14 / 390), 16px);
    letter-spacing: 0.075em;
    line-height: 2;
}

#concept p .notemark {
    font-size: clamp(9px, calc(100vw * 12 / 390), 14px);
    vertical-align: middle;
    padding: 0 0.5em;
}

#concept p .note {
    display: block;
    font-size: clamp(9px, calc(100vw * 12 / 390), 14px);
}

#concept .page_title {
    width: 90%;
    margin: 0 auto 3.75em;
}

#concept .page_title::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100vw * 0.5 / 390);
    background: #000
}

#concept .main_title {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(25px, calc(100vw * 28 / 390), 30px);
    color: #000;
    padding: 0 1rem;
}
#concept .sub_title {
    display: block;
    font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: clamp(13px, calc(100vw * 16 / 390), 18px);
    color: #000;
    padding: 0 1.2rem 0.5rem;
}


/* sp_intro */
#concept .intro {
    position: relative;
    margin-bottom: calc(100vw * 73 / 390);
}

#concept .intro_wrap {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#concept .intro_title {
    display: block;
    width: 100%;
}

#concept .intro_title img {
    display: block;
    width: min(calc(100vw * 300 / 390), 400px);
    max-width: 100%;
    margin: 0 auto;
}

#concept .intro_content {
    display: flex;
    flex-direction: column;
    background: url(../images/concept/sp/intro_bg.png) no-repeat top center / contain;
}

#concept .intro_products {
    position: relative;
    display: block;
    width: 100%;
}

#concept .intro_products img {
    position: absolute;
    width: min(calc(100vw * 145 / 390), 250px);
    top: calc(100vw * 8 / 390);
    right: calc(100vw * 65 / 390);
    max-width: 100%;
}
#concept .intro_text {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    text-align: center;
    width: clamp(300px, calc(100vw * 340 / 390), 500px);
    padding-top: calc(100vw * 246 / 390);
    margin: 0 auto;
}
#concept .intro_text h3 {
    font-size: clamp(21px, calc(100vw * 24 / 390), 26px);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #333;
}


/* sp_about */
#concept .about--pearl {
    background: url(../images/concept/sp/pearl_bg.png) no-repeat bottom right / contain;
    padding-bottom: calc(100vw * 60 / 390);
}
#concept .about--natural {
    position: relative;
    z-index: 0;
    background: url(../images/concept/sp/natural_bg.png) no-repeat bottom center / contain;
    padding-bottom: calc(100vw * 45 / 390 + 100vw * 100 / 390);
    margin-bottom: calc(100vw * -80 / 390);
}

#concept .about--pearl h3,
#concept .about--natural h3 {
    text-align: right;
    margin-bottom: calc(100vw * 35 / 390);
}

#concept .about--natural h3 {
    text-align: left;
}

#concept .about--pearl_title img,
#concept .about--natural_title img {
    width: min(calc(100vw * 325 / 390), 480px);
}

#concept .about--pearl_text,
#concept .about--natural_text {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: min(calc(100vw * 320 / 390), 460px);
    margin: 0 auto;
}

#concept .about--pearl_text p,
#concept .about--natural_text p {
    font-size: clamp(10px, calc(100vw * 12 / 390), 14px);
}

/* sp_hook */
#concept .hook {
    position: relative;
    z-index: 1;
    background: transparent;
    margin-bottom: calc(100vw * 107 / 390);
}
#concept .hook h3 {
    font-size: clamp(21px, calc(100vw * 25 / 390), 27px);
    font-weight: 600;
    color: #754c24;
    letter-spacing: 0.076em;
    text-align: left;
    width: min(calc(100vw * 360 / 390), 500px);
    margin: 0 auto 1.4em;
}
#concept .hook_text {
    width: min(calc(100vw * 360 / 390), 500px);
    margin: 0 auto;
}
#concept .hook_text p {
    letter-spacing: 0.01em;
}


/* sp_comparison */
#concept .comparison--before,
#concept .comparison--after {
    padding: calc(100vw * 20 / 390) calc(100vw * 20 / 390) calc(100vw * 25 / 390);
}

#concept .comparison--before {
    background: #fff url(../images/concept/sp/before_bg.png) no-repeat top right / cover;
}

#concept .comparison--after {
    position: relative;
    background: #fff url(../images/concept/sp/after_bg.png) no-repeat top left / cover;
    margin-top: -1px;
}

#concept .comparison--arrow {
    width: 100vw;
    margin: -1px 0 0 calc(50% - 50vw);
    height: calc(100vw * 108 / 390);
    background: url(../images/concept/sp/arrow_bg.png) no-repeat center / 100% auto;
    pointer-events: none;
}

#concept .comparison--before_content,
#concept .comparison--after_content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: calc(100vw * 25 / 390);
}

#concept .comparison--after_content {
    align-items: flex-end;
}

#concept .comparison--before h3,
#concept .comparison--after h3 {
    font-family: "Shippori Mincho", serif;
    font-size: clamp(65.5px, calc(100vw * 68.5 / 390), 70.5px);
    color: rgb(255 255 255 / 53%);
    letter-spacing: 0.035em;
    line-height: 1;
}

#concept .comparison--before_text p,
#concept .comparison--after_text p {
    font-family: "Shippori Mincho", serif;
    font-size: 1.25rem;
    font-size: clamp(12px, calc(100vw * 15 / 390), 17px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #fff;
}

#concept .comparison--before_illustration_wrap,
#concept .comparison--after_illustration_wrap {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5em;
}

#concept .comparison--before_illustration img,
#concept .comparison--after_illustration img {
    width: min(calc(100vw * 250 / 390), 350px);
}


/* sp_outro */
body.concept #wrap {
    overflow: visible;
}

#concept .outro {
    position: relative;
    z-index: 0;
    margin-bottom: calc(100vw * 123 / 390);
    overflow: hidden;
}

#concept .outro_content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: url(../images/concept/sp/outro_bg.png) no-repeat top center / contain;
    margin: calc(100vw * 30 / 390) 0 0;
    padding: calc(100vw * 5 / 390) 0 0;
}

#concept .outro_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
}
#concept .outro_text h3 {
    font-size: clamp(23px, calc(100vw * 26 / 390), 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.075em;
    color: #333;
}

#concept .outro_products {
    display: block;
    width: calc(100vw * 420 / 390);
    margin-right: calc(100vw * -59 / 390);
}

#concept .outro_products img {
    display: block;
    width: 100%;
    max-width: none;
}

/* sp_fivefree — .concept__content .five に合わせる */
#concept .fivefree {
    margin: 0 0 100px;
    text-align: center;
    position: relative;
}

#concept .fivefree::after {
    content: "";
    display: block;
    position: absolute;
    top: 2.5rem;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #fafafa;
}

#concept .fivefree_content {
    position: relative;
}

#concept .fivefree h3 {
    position: static;
    transform: none;
    margin: 40px 0;
    font-family: inherit;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.6;
    text-align: center;
}

#concept .fivefree_text_wrap {
    background: none;
    min-height: 0;
    display: block;
    padding: 0;
}

#concept .fivefree_text {
    width: auto;
    text-align: center;
}

#concept .fivefree_text p {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 2;
}

#concept .fivefree_list {
    margin: 30px 0 0;
    font-size: 0;
    text-align: center;
}

#concept .fivefree_list li {
    display: inline-block;
    margin: 0 10px 15px 0;
    padding: 15px 25px;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    border: 1px solid #9c9c9c;
    border-radius: 30px;
    background: transparent;
}

#concept .fivefree_list li:last-child {
    margin-right: 0;
}

#concept .fivefree_annotation {
    position: static;
    transform: none;
    width: auto;
    margin: 30px 0 0;
    text-align: center;
}

#concept .fivefree_annotation p {
    font-size: clamp(14px, calc(100vw * 14 / 1360), 16px);
    line-height: 2;
    letter-spacing: 0;
}

/* PC */
@media (min-width: 769px) {
    /*pc_common*/
    #concept {
        --c-vw: min(100vw, 1360px);
        --c-inner: min(100vw, 1000px);
        max-width: 1000px;
        padding-top: calc(var(--c-vw) * 30 / 1360);
    }

    #concept .pc {
        display: block !important;
    }

    #concept .sp {
        display: none !important;
    }

    #concept p {
        font-size: clamp(14px, calc(100vw * 14 / 1360), 16px);
    }

    #concept p .notemark {
        font-size: clamp(12px, calc(100vw * 12 / 1360), 14px);
        vertical-align: middle;
        padding: 0 0.5em;
    }
    
    #concept p .note {
        display: block;
        font-size: clamp(12px, calc(100vw * 12 / 1360), 14px);
    }

    #concept .page_title {
        width: 100%;
    }

    #concept .page_title::after {
        height: calc(var(--c-vw) * 0.5 / 1360);
        margin-top: calc(var(--c-vw) * 10 / 1360);
    }

    #concept .main_title {
        font-size: clamp(35px, calc(100vw * 35 / 1360), 37px);
        letter-spacing: 0;
        padding: 0 calc(var(--c-vw) * 30 / 1360) calc(var(--c-vw) * 10 / 1360);
    }

    #concept .sub_title {
        font-size: clamp(11.5px, calc(100vw * 11.5 / 1360), 13.5px);
        padding: 0 1rem 0.5rem calc(var(--c-vw) * 30 / 1360);
    }

    /*pc_intro*/
    #concept .intro {
        margin: 0;
        background: url(../images/concept/pc/intro_bg.png) no-repeat center top calc(var(--c-vw) * -90 / 1360) / 100% auto;
        padding: 0 0 calc(var(--c-vw) * 200 / 1360);
    }

    #concept .intro_wrap {
        margin: 0 calc(var(--c-vw) * 50 / 1360);
    }

    #concept .intro_title img {
        width: 100%;
    }

    #concept .intro_content {
        position: relative;
        background: none;
    }

    #concept .intro_products {
        position: absolute;
        top: 0;
        right: 0;
    }

    #concept .intro_products img {
        width: min(calc(var(--c-vw) * 390 / 1360), 300px);
        top: calc(var(--c-vw) * -20 / 1360);
        right: calc(var(--c-vw) * 80 / 1360);
    }

    #concept .intro_text {
        width: calc(var(--c-vw) * 500 / 1360);
        padding: 0;
        margin: calc(var(--c-vw) * 78 / 1360) 0;
        align-items: flex-start;
        text-align: left;
        gap: 3em;
    }

    #concept .intro_text h3 {
        font-size: clamp(22px, calc(100vw * 22 / 1360), 24px);
    }

    /*pc_about*/
    #concept .about--pearl {
        position: relative;
        background: none;
        padding: 0;
        margin: calc(var(--c-inner) * -200 / 1360) 0 0;
    }

    #concept .about--natural {
        position: relative;
        background: url(../images/concept/pc/pearl_natural_bg.png) no-repeat center center / cover;
        margin: 0;
        padding: 0;
        height: calc(var(--c-inner) * 892 / 1360);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #concept .about--pearl h3, #concept .about--natural h3 {
        text-align: left;
        margin: 0;
    }

    #concept .about--pearl h3 {
        padding: 1.36em 0 2.5em;
    }

    #concept .about--natural h3 {
        padding: 0 0 2.5em;
    }

    #concept .about--pearl_title img {
        width: min(calc(var(--c-inner) * 340 / 1360), 200px);
    }

    #concept .about--natural_title img {
        width: min(calc(var(--c-inner) * 508 / 1360), 300px);
    }

    #concept .about--pearl_text,
    #concept .about--natural_text {
        width: auto;
        max-width: calc(var(--c-inner) * 550 / 1360);
        margin: 0;
    }

    #concept .about--natural_text p {
        line-height: 2.2em;
    }

    #concept .about--pearl_text p, #concept .about--natural_text p {
        font-size: clamp(13px, calc(100vw * 13 / 1360), 15px);
        letter-spacing: 0.01em;
        line-height: 2.1em;
    }

    #concept .about--pearl_content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.818em;
        width: 100%;
    }

    #concept .about--natural_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.818em;
        width: 100%;
    }

    #concept .about--pearl_body,
    #concept .about--natural_body {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }

    #concept .about--pearl_body {
        width: calc(var(--c-inner) * 589 / 1360);
        margin-left: calc(var(--c-inner) * 50 / 1360);
    }

    #concept .about--natural_body {
        width: calc(var(--c-inner) * 538 / 1360);
        margin-right: calc(var(--c-inner) * 50 / 1360);
    }

    #concept .about--pearl_img {
        display: block;
        flex-shrink: 0;
        width: calc(var(--c-inner) * 630 / 1360);
    }

    #concept .about--natural_img {
        display: block;
        flex-shrink: 0;
        width: calc(var(--c-inner) * 635 / 1360);
    }

    /*pc_hook*/
    #concept .hook {
        margin: 0 calc(var(--c-vw) * 76 / 1360) calc(var(--c-vw) * 170 / 1360);
    }

    #concept .hook h3 {
        font-size: clamp(33px, calc(100vw * 33 / 1360), 35px);
        letter-spacing: 0.075em;
        line-height: 1.48;
        width: 100%;
        margin: 0 0 1.05em;
    }

    #concept .hook_text {
        font-size: clamp(13px, calc(100vw * 13 / 1360), 15px);
        letter-spacing: 0.01em;
        line-height: 2.7;
        width: 100%;
        margin: 0;
    }

    /*pc_comparison*/
    #concept .comparison--before, #concept .comparison--after {
        padding: calc(var(--c-vw) * 20 / 1360) calc(var(--c-vw) * 50 / 1360) calc(var(--c-vw) * 100 / 1360);
    }

    #concept .comparison--before {
        background: #fff url(../images/concept/pc/before_bg.png) no-repeat top center / cover;
    }

    #concept .comparison--after {
        background: #fff url(../images/concept/pc/after_bg.png) no-repeat top center / cover;
    }

    #concept .comparison--arrow {
        width: 100%;
        max-width: 1000px;
        margin: -5px auto 0;
        height: calc(var(--c-inner) * 398 / 1360);
        background: url(../images/concept/pc/arrow_bg.png) no-repeat center / 100% auto;
    }

    #concept .comparison--before_content,
    #concept .comparison--after_content {
        gap: 7.42em;
    }

    #concept .comparison--before h3, #concept .comparison--after h3 {
        font-size: clamp(98px, calc(100vw *  98/ 1360), 100px);
        letter-spacing: 0.04em;
    }

    #concept .comparison--before_text p, #concept .comparison--after_text p {
        font-size: clamp(15px, calc(100vw * 15 / 1360), 17px);
        letter-spacing: 0.05em;
        line-height: 1.76;
    }

    #concept .comparison--before_illustration_wrap,
    #concept .comparison--after_illustration_wrap {
        gap: 1.28em;
    }

    #concept .comparison--before_illustration_wrap, #concept .comparison--after_illustration_wrap {
        position: relative;
    }

    #concept .comparison--before_illustration_wrap {
        width: fit-content;
        max-width: 100%;
    }

    #concept .comparison--before_illustration {
        display: block;
        max-width: 100%;
    }

    #concept .comparison--before_illustration img {
        display: block;
        width: calc(var(--c-vw) * 1160 / 1360);
        max-width: 100%;
        height: auto;
    }

    #concept .comparison--after_illustration img {
        width: calc(var(--c-vw) * 1150 / 1360);
    }

    /*pc_outro*/
    #concept .outro {
        --c-outro: 1360px;
        overflow: hidden;
        width: 100%;
        margin: calc(var(--c-outro) * -100 / 1360) 0 calc(var(--c-outro) * 200 / 1360);
        background: url(../images/concept/pc/outro_bg.png) no-repeat center top / 100% auto;
        min-height: calc(var(--c-inner) * 2003 / 2718);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #concept .outro_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: calc(100% - var(--c-outro) * 50 / 1360);
        background: none;
        padding: 0;
        margin: 0 0 0 calc(var(--c-outro) * 50 / 1360);
    }

    #concept .outro_text {
        flex-shrink: 0;
        width: calc(var(--c-outro) * 300 / 1360);
        align-items: flex-start;
        position: static;
        transform: translate(0, 0);
    }

    #concept .outro_text h3 {
        font-size: clamp(33px, calc(100vw * 33 / 1360), 35px);
        letter-spacing: 0.054em;
        line-height: 1.43;
        text-align: center;
        margin-bottom: 0.84em;
    }

    #concept .outro_text p {
        font-size: clamp(13px, calc(100vw * 13 / 1360), 13px);
        letter-spacing: 0;
        line-height: 2.14;
        margin-bottom: 4.64em;
    }

    #concept .outro_cream {
        flex-shrink: 0;
        width: calc(var(--c-outro) * 200 / 1360);
    }

    #concept .outro_products {
        flex-shrink: 1;
        min-width: 0;
        width: min(
            calc(var(--c-outro) * 550 / 1360),
            calc(var(--c-inner) - var(--c-outro) * 350 / 1360)
        );
        margin: 0 calc(var(--c-outro) * -100 / 1360) 0 auto;
    }

    #concept .outro_products img {
        display: block;
        width: 100%;
        height: auto;
    }

    /*pc_fivefree*/
    #concept .fivefree::after {
        top: 4rem;
    }

    #concept .fivefree h3 {
        margin: 80px 0 50px;
        font-size: 5rem;
    }

    #concept .fivefree_list li {
        margin: 0 15px 0 0;
    }

    #concept .fivefree_list li:last-child {
        margin-right: 0;
    }
}