@media screen and (min-width: 768px) { .sp { display: none; } }

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

.c_mv img { width: 100%; }

@media screen and (min-width: 768px) { .sec2 { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 459px; background: url(../img/sec2_bg.png) center 0/cover no-repeat; } }
@media screen and (max-width: 767px) { .sec2 { height: calc( 682 / 1125 * 100vw ); background: url(../img/sp/sec2_bg.png) center 0/cover no-repeat; } }
@media screen and (min-width: 768px) { .sec2 div.image1 { margin-bottom: 80px; } }

.sec3 { text-align: center; }
@media screen and (min-width: 768px) { .sec3 { padding: 70px 0 0; height: 1024px; background: url(../img/sec3_bg.png) center 0/cover no-repeat; } }
@media screen and (max-width: 767px) { .sec3 { height: calc( 1746 / 1125 * 100vw ); background: url(../img/sp/sec3_bg.png) center 0/cover no-repeat; } }
@media screen and (min-width: 768px) { .sec3 div.image1 { margin-bottom: 80px; padding: 0 20px; } }

@media screen and (min-width: 768px) { section.c_product { padding: 140px 0; } }
@media screen and (max-width: 767px) { section.c_product .c_inner { max-width: 100% !important; padding: 0 !important; } }

section.c_care { background: none; }
@media screen and (max-width: 767px) { section.c_care { padding-bottom: 0; } }
@media screen and (min-width: 768px) { section.c_care div.image1 { margin: 50px 0 70px; padding: 0 20px; } }
@media screen and (max-width: 767px) { section.c_care .c_sectionTitle { padding: 0 !important; } }
@media screen and (max-width: 767px) { section.c_care .c_sectionTitle .c_img { max-width: 100% !important; } }

section.c_careMethods { background: none; }

@media screen and (min-width: 768px) { .moisture .image1 { padding: 50px 0 100px; } }
@media screen and (max-width: 767px) { .moisture .c_inner { max-width: 100% !important; padding: 0 !important; } }
@media screen and (max-width: 767px) { .moisture .c_sectionTitle { max-width: 100% !important; padding: 0 !important; } }

.allinone h2 { max-width: 100% !important; text-align: center; }
@media screen and (max-width: 767px) { .allinone h2 { padding: 0 !important; } }
.allinone .image1 { background: #e0f7f7; background: linear-gradient(180deg, #e0f7f7 0%, white 100%); text-align: center; }
@media screen and (min-width: 768px) { .allinone .image1 { padding: 20px 20px 100px; } }
@media screen and (max-width: 767px) { .allinone .image1 { padding: 0 0 0; } }

section.researcher .c_careTitle { text-align: center; }
@media screen and (max-width: 767px) { section.researcher h2 { max-width: 100% !important; padding: 0 !important; } }
section.researcher .c_beautician { box-sizing: border-box; }
@media screen and (min-width: 768px) { section.researcher .c_beautician { max-width: 700px; margin: 40px auto !important; padding: 30px; } }
@media screen and (max-width: 767px) { section.researcher .c_beautician { margin: 26px auto !important; padding: 20px; } }
@media screen and (min-width: 768px) { section.researcher .c_beautician .c_beauticianTitle { padding: 20px; } }
@media screen and (max-width: 767px) { section.researcher .c_beautician .c_beauticianTitle { padding: 10px; } }
section.researcher .c_beautician .c_beauticianTitle p { font-family: YuMincho, "Hiragino Mincho ProN", serif !important; }
@media screen and (min-width: 768px) { section.researcher .c_beautician .c_beauticianTitle p { font-size: 20px; } }
@media screen and (max-width: 767px) { section.researcher .c_beautician .c_beauticianTitle p { font-size: 14px; } }
section.researcher .c_beautician .c_beauticianWrap { padding: 0; }
@media screen and (min-width: 768px) { section.researcher .c_beautician .c_beauticianWrap { margin-top: 20px; } }
@media screen and (max-width: 767px) { section.researcher .c_beautician .c_beauticianWrap { display: flex; margin-top: 14px; } }
section.researcher .c_beautician .c_beauticianWrap .c_text { display: flex; align-items: center; line-height: 1.6; font-family: YuMincho, "Hiragino Mincho ProN", serif !important; }
@media screen and (min-width: 768px) { section.researcher .c_beautician .c_beauticianWrap .c_text { font-size: 20px; } }
section.researcher .chat { max-width: 700px; margin: 0 auto; }

@media screen and (min-width: 768px) { section.c_howto { margin: 100px 0 0; } }
@media screen and (max-width: 767px) { section.c_howto { margin: 50px 0 0; } }

@media screen and (min-width: 768px) { section.cm { margin-top: 100px; } }
@media screen and (max-width: 767px) { section.cm { margin-top: 50px; } }
section.cm h2 { text-align: center; }
@media screen and (max-width: 767px) { section.cm h2 { max-width: 100% !important; padding: 0 !important; } }
section.cm .image1 { text-align: center; }
@media screen and (min-width: 768px) { section.cm .image1 { margin-top: 70px; } }
@media screen and (max-width: 767px) { section.cm .image1 { margin-top: 40px; } }
section.cm h3 { text-align: center; font-weight: bold; }
@media screen and (min-width: 768px) { section.cm h3 { margin-top: 20px; font-size: 20px; } }
@media screen and (max-width: 767px) { section.cm h3 { margin-top: 10px; font-size: 18px; } }

@media screen and (min-width: 768px) { section.c_introduceProduct { padding-top: 0; } }
@media screen and (max-width: 767px) { section.c_introduceProduct { padding-top: 0; } }
section.c_introduceProduct h2 { margin-right: 30px; }
@media screen and (min-width: 768px) { section.c_introduceProduct > .c_inner { margin-top: 0; } }

.frameBox { position: relative; z-index: 19; }
@media screen and (min-width: 768px) { .frameBox { margin-top: 60px; padding: 0 20px; } }
@media screen and (max-width: 767px) { .frameBox { padding: 20px; } }

@media screen and (min-width: 771px) { .yt-wrap { margin: 0 auto; width: 86.5%; max-width: 762px; } }
.yt-wrap:not(:last-child) { margin-bottom: 3.5714285714vw; }

@media screen and (min-width: 961px) { .yt-wrap:not(:last-child) { margin-bottom: 50px; } }
@media screen and (max-width: 770px) { .yt-wrap:not(:last-child) { margin-bottom: 5.46875vw; } }
.yt-block { position: relative; }

.videoWrapper, .videoWrapper02 { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }

.videoWrapper iframe, .videoWrapper02 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videoWrapper::after, .videoWrapper02::after { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }

.videoWrapper::after { background-image: url("../images/movie_cover01.jpg"); }

.videoWrapper02::after { background-image: url("../images/movie_cover02.jpg"); }

.videoWrapper.pv::after, .videoWrapper02.pv::after { display: none; }

#play, #play02 { cursor: pointer; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 6.4285714286vw; height: 6.4285714286vw; }

@media screen and (min-width: 961px) { #play, #play02 { width: 90px; height: 90px; } }
@media screen and (max-width: 770px) { #play, #play02 { width: 12.1875vw; height: 12.1875vw; } }
#play .playBG, #play02 .playBG { -webkit-transition: 0.7s; transition: 0.7s; border: 1px solid #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#play .playBG:hover, #play02 .playBG:hover { -webkit-transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.3); }

#play .playTxt, #play02 .playTxt { color: #fff; white-space: nowrap; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; }

@media screen and (max-width: 770px) { #play .playTxt, #play02 .playTxt { font-size: 2.8125vw; } }