@charset "utf-8";
/* CSS Document */
/* RESPONSIVE CSS */
/* ---------------------------------------------------****  ****--------------------------------------------------- */
@media only screen and (min-width: 768px){
.drawer-toggle.drawer-hamburger { display: none; }

}
/* ---------------------------------------------------****  ****--------------------------------------------------- */
@media (max-width: 992px) {

}
/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.navbar-nav .nav-item .nav-link .nav-en { display: none; }

}
/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {
body { font-size: 12px; }
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { font-size: 12px; }

.header-top { display: none; }
.navbar, .header-sticky.scroll-header .navbar { padding: 10px 0; }
.navbar-brand img, .header-sticky.scroll-header .navbar-brand img { height: 50px; }

.navbar-nav .nav-item .nav-link { display: block; border: none; padding: 14px 8px; }
.navbar-nav .nav-item .nav-link .nav-jp { display: inline-block; line-height: 15px; }
.navbar-nav .nav-item .nav-link .nav-en { display: inline-block; }
.navbar-nav .nav-item .nav-link .nav-en::before { margin: 0 3px; content: "/"; }
.navbar-nav .nav-item .nav-link::before { bottom: 3px; width: 25%; }
.navbar-nav .nav-item.nav-lang { display: block; }

.drawer-nav { padding: 10px; width: 100%; }
.drawer--right .drawer-nav { right: -100%; }
.drawer-hamburger { margin-top: 10px; margin-right: 10px; padding: 10px; width: 30px; height: 30px; background-color: #b8b5ab; border-radius: 50%; }
.drawer-hamburger:hover { background-color: #b8b5ab; }
.drawer-hamburger-icon { margin-top: 0; }
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { background-color: #fff; }
.drawer--right.drawer-open .drawer-hamburger { right: 0; margin-right: 10px; }
.drawer-nav .navbar-nav { position: relative; margin-top: 50px; height: auto; overflow: hidden; }
.drawer-nav .top-link ul li { display: inline-block; margin-bottom: 10px; text-align: center; }

a.btn-more { width: 100%; }

.sections { padding: 20px 0; }
.sections::before { height: 60px; font-size: 50px; }
.section-title { margin: 0 0 10px 0; }
.section-title .title-jp { line-height: 22px; }

.section-title-2 { margin: 0 0 30px 0; }
.section-title-2 .title-jp { font-size: 20px; line-height: 22px; }

.about-desc { margin-top: 0; }
.about-desc::after { display: none; }
.about-highlight { margin-bottom: 10px; width: 100%; }
.about-img { margin-bottom: 10px; width: 100%; height: auto; }
.about-txt { position: relative; padding: 15px; width: 100%; height: auto; line-height: 20px; }
.about-txt a.btn-more { position: relative; bottom: auto; left: auto; }
.about-txt-more { margin: 20px auto; padding: 15px; line-height: 20px; }

.services-list li, .package-list li, .products-list li { padding: 5px 10px; }
.services-txt { padding: 15px; }
.services-txt h3 { margin-bottom: 10px; }
.services-txt p { line-height: 20px; }
.package-title { padding: 10px 10px 20px 10px; font-size: 14px; }
.package-desc { padding: 15px; line-height: 20px; }
.products-txt { padding: 15px; }
.products-desc .content-img { margin-right: 0; margin-bottom: 20px; width: 100%; float: none; }
.products-desc-highlight { margin: 10px auto; width: 100%; }

.hair-ingredient { margin: 10px 0; padding: 10px; }
.hairingredient-item { margin: 10px 0; width: 100%; }

.reviews-area h3, .video-area h3 { margin: 0 0 20px 0; }
.reviews-list, .videos-list { width: 100%; }
.reviews-list li, .videos-list li { padding: 5px 10px; }
.reviews-item { padding: 15px; }
.reviews-result { width: 100%; float: none; }
.reviews-img { margin-bottom: 10px; }
.reviews-txt { margin-left: 0; width: 100%; }
.reviews-txt .reviews-highlight { margin: 10px 0; padding: 10px; }
.reviews-txt .reviews-highlight::after { right: auto; top: auto; bottom: 100%; left: 50%; margin-top: 0; margin-left: -10px; border-right-color: transparent; border-bottom-color: #fff; }
.reviews-txt p { line-height: normal; }

.footer p { letter-spacing: 0; }

.form-contact form { padding: 15px; }
.fancybox-hide .form-contact { width: 100%; }

.blog-problems p { font-size: 14px; }
.blog-problems .blog-inside { height: auto; }
.blog-problems .img-problems { position: relative; top: auto; bottom: 0; margin-top: 10px; width: 50%; height: auto; }
.blog-problems .right-column { margin-left: 0; }
.blog-problems .problems-txt { margin: 10px 0 0 0; padding: 10px; }
.blog-problems .problems-txt::after { display: none; }

.blog-machine h3 { margin: 0 0 10px 0; }
.blog-machine h4 { line-height: 24px; }
.blog-machine p { line-height: 20px; }
.blog-machine .img-machine { width: 100%; height: auto; }
.blog-machine .machine-txt { height: auto; }
.blog-machine .content-img { margin-bottom: 20px; width: 100%; float: none; }
.blog-machine .content-img.floatL {margin-right: 0; }
.blog-machine .content-img.floatR { margin-left: 0; }
.worries-item { margin: 10px 1%; width: 99%; }

.blog-ingredient .img-ingredient { margin: 10px 0; }
.blog-ingredient ul.essence { padding: 0; }
.blog-ingredient ul.essence li { padding: 5px; width: 50%; }
.blog-ingredient .essence-txt { width: 100%; height: 50px; line-height: 50px; border-radius: 50% / 25px; }
.example-ingredient { padding: 10px; }
.example-item { margin: 40px 0 10px 0; padding: 50px 10px 10px 10px; width: 100%; }

.packagesale-item { margin: 40px 0 10px 20px; padding: 10px; width: -webkit-fill-available; }
.packagesale-item p { padding-left: 50px; }
.packagesale-item .packagesale-txt { height: auto; }
.packagesale-item ul { margin-bottom: 10px; }

.store-area h6 { margin: 0 0 20px 0; }
.store-area .content-img { margin-left: 0; width: 100%; float: none; }

.pagetitle { height: 200px; background-size: auto; }
.pagetitle .center-div { padding-top: 70px; }

.point-list { margin-bottom: 20px; padding: 10px 10px 20px 10px; }
.point-list .point-item { margin: 50px 1% 0 1%; }
.point-list.list-3 .point-item { width: 98%; }
.point-list.list-5 .point-item { width: 98%; }

.blog-content .content-img.floatL, .blog-content .content-img.floatR, .blog-content .content-img2.floatL, .blog-content .content-img2.floatR { margin-left: 0; margin-right: 0; margin-bottom: 20px; float: none; }	
.blog-content .content-img, .blog-content .content-img2 { width: 100%; }
.services-page h3 { margin: 0 0 10px 0; }
.services-page .content-img { margin-bottom: 20px; }

.table-l { font-size: 12px; }
.table-l thead { display: none; }
.table-l th, .table-l td { padding: 5px; width: 100%; }
.table-l tbody th.c1 { display: block; width: 100%; background-color: #c5a05f; border-right: none; color: #fff; }
.table-l tbody td.c2 { width: 100%; border-right: none; }
.table-l tbody td { position: relative; display: block; padding-left: 35%; width: 100%; border-top: none; }
.table-l tbody td:before { position: absolute; top: 5px; left: 0; content: attr(label); width: 36%; text-align: center; font-weight: bold; }
.table-l span { font-size: 10px; }

.course-list li { width: 100%; }

.point-rating li span.posit { width: 100px; }
.point-rating li span.score { width: auto; text-align: left; }

.company-info .bloc-inside { padding: 10px; }
.company-info ul li { flex-direction: column; }
.company-info ul li span, .company-info ul li span+span { flex: unset; padding: 10px; width: 100%; border-bottom: none; border-right: solid 1px #b8b5ab; }
.company-info ul li:first-child span+span { border-top: 0; }
.company-info ul li:last-child span { border-bottom: 0; }

}
/* ---------------------------------------------------**** Large Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.drawer-nav .navbar-nav { display: block; }
.drawer-nav .navbar-nav .nav-item { margin: 0 1%; width: 48%; float: left; }
.drawer-nav .navbar-nav .nav-item.nav-lang { margin-top: 0; }
.drawer-nav .top-link ul li { width: 50%; float: left; }
.reviews-result { width: 35%; float: left; }
.reviews-txt { margin-left: 40%; width: auto; }
.reviews-txt .reviews-highlight { margin: 0 0 10px 0; padding: 15px; }
.reviews-txt .reviews-highlight::after { bottom: auto; left: auto; right: 100%; top: 50%; margin-left: 0; margin-top: -10px; border-bottom-color: transparent; border-right-color: #fff; }

.blog-problems .blog-inside { height: 260px; }
.blog-problems .img-problems { position: absolute; bottom: auto; top: 0; left: 50%; margin-top: 0; width: 150px; height: auto; }
.blog-problems .right-column { margin-left: 33.33333%; }
.blog-problems .problems-txt::after { display: block; }

.blog-machine .machine-txt { height: 300px; }

.worries-item { margin: 1%; width: 48%; }

}

/* ---------------------------------------------------**** Slider ****--------------------------------------------------- */
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 1023px) {

}
@media screen and (max-width: 800px) { 

}
@media screen and (max-width: 768px) { 

}
@media screen and (max-width: 767px) { 
.slider-wrapper, .slider-wrapper #slides, .slider-wrapper [class*='bg-slide-'] { height: 360px !important; }
.slider-wrapper .slider-content { top: 70px; }
.slider-wrapper .slide-img.left { left: 0; }
.slider-wrapper .slide-img.right { right: 0; }	
.slider-wrapper .slide-img img { max-width: fit-content; height: 360px; }
.slider-wrapper .slide-txt { padding: 10px; }
.slider-wrapper #slider h1 { margin-bottom: 20px; }

}
@media screen and (max-width: 640px) {
.slider-wrapper, .slider-wrapper #slides, .slider-wrapper [class*='bg-slide-'] { height: 360px !important; }
.slider-wrapper .slider-content { top: 70px; }
.slider-wrapper .slide-img.left { left: -15%; }
.slider-wrapper .slide-img.right { right: -15%; }
.slider-wrapper .slide-img img { max-width: fit-content; height: 360px; }
.slider-wrapper .slide-txt { padding: 10px; width: 100%; background-color: rgba(255, 255, 255, 0.75); text-align: center; }
.slider-wrapper #slider h1 { margin-bottom: 15px; }

}
@media screen and (max-width: 360px) {
.slider-wrapper, .slider-wrapper #slides, .slider-wrapper [class*='bg-slide-'] { height: 360px !important; }
.slider-wrapper .slider-content { top: 70px; }
.slider-wrapper .slide-img.left { left: -15%; }
.slider-wrapper .slide-img.right { right: -15%; }
.slider-wrapper .slide-img img { max-width: fit-content; height: 360px; }
.slider-wrapper .slide-txt { padding: 10px; width: 100%; background-color: rgba(255, 255, 255, 0.75); text-align: center; }
.slider-wrapper #slider h1 { margin-bottom: 15px; }

}