@charset "UTF-8";
/*font*/
/*SHOPPING INFORMATION非表示*/
#footerinfoColor, #footerInfoSP { display: none; }

.infoArea, .infoTtl, #pagetop { display: none !important; }

/*販売名非表示*/
#headerChapSp p.siteTex { display: none; }

/*main PC*/
div#container._pcView main#howtouse { width: 100%; /*商品毎使い方ページ用*/ /*HowToUse QA*/ }
div#container._pcView main#howtouse .innerWrap > h2 { width: 31%; }
div#container._pcView main#howtouse .innerWrap > h2 + p { margin-bottom: 90px; font-weight: 500; }
div#container._pcView main#howtouse .innerWrap { max-width: 900px; padding: 100px 25px; /*HowToUse TOP*/ /*HowToUse 詳細*/ /*KV*/ /*塗りシャンの方法（シャンプー）*/ /*STEP*/ }
div#container._pcView main#howtouse .innerWrap .intro { font-size: 18px; letter-spacing: 0.1em; margin-bottom: 60px; font-weight: normal; }
div#container._pcView main#howtouse .innerWrap h3.htuCat { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; display: inline-block; position: relative; font-size: 20px; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 50px; line-height: 1; }
div#container._pcView main#howtouse .innerWrap h3.htuCat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background-color: currentColor; }
div#container._pcView main#howtouse .innerWrap .howtouseLink { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li { width: 430px; height: 430px; margin-bottom: 40px; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a { display: block; width: 430px; height: 430px; border: 1px	solid #e3e3e3; text-align: center; display: flex; align-items: center; flex-direction: column; padding-top: 50px; box-sizing: border-box; transition: all 0.35s ease-in-out; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a:hover { border: 1px	solid #000000; /*outline: 1px solid #000;*/ box-shadow: 0 0 0 1px #000; text-decoration: none; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figure { width: auto; height: 270px; margin: 0 0 50px 0; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figure img { height: 270px; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figcaption { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: 22px; line-height: 1; letter-spacing: 0.01em; font-weight: 500; color: #000; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figcaption.alcs { line-height: 1.2; margin-top: -3%; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figcaption.alcs span { display: block; }
div#container._pcView main#howtouse .innerWrap .howtouseLink li a figcaption span { margin-left: 0.5em; }
div#container._pcView main#howtouse .innerWrap .htuKv { margin-bottom: 90px; }
div#container._pcView main#howtouse .innerWrap .htuKv .proImg { margin-bottom: 30px; }
div#container._pcView main#howtouse .innerWrap .htuKv p { text-align: center; line-height: 1; letter-spacing: 0.08em; }
div#container._pcView main#howtouse .innerWrap .htuKv p.proName { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: 18px; font-weight: 600; margin-bottom: 10px; }
div#container._pcView main#howtouse .innerWrap .htuKv p.proCap { font-size: 16px; font-weight: 500; }
div#container._pcView main#howtouse .innerWrap .method { margin: -30px 0 60px; text-align: center; }
div#container._pcView main#howtouse .innerWrap .method h2 { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; color: #0e7e87; position: relative; display: inline-block; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; margin-bottom: 30px; }
div#container._pcView main#howtouse .innerWrap .method h2 sup { font-size: 0.8em; vertical-align: top; }
div#container._pcView main#howtouse .innerWrap .method h2:after { content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 1px; background-color: #0e7e87; }
div#container._pcView main#howtouse .innerWrap .method > p { font-size: 16px; font-weight: 500; text-align: center; line-height: 1; letter-spacing: 0.08em; }
div#container._pcView main#howtouse .innerWrap .method div { width: 900px; margin-inline: auto; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming { list-style: none; margin: 0; padding: 0 0 0 185px; text-align: left; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming li { display: flex; align-items: center; gap: 0; font-size: 16px; letter-spacing: 0.08em; margin-bottom: 20px; font-weight: 500; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming li + li { margin-top: 12px; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming li img { flex: 0 0 30px; width: auto; max-width: 30px; object-fit: contain; margin-right: 15px; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming li span { flex-shrink: 0; margin-right: 1em; }
div#container._pcView main#howtouse .innerWrap .method div ul.oilTiming li > p { flex: 1; min-width: 0; margin: 0; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li { display: flex; justify-content: space-between; margin-bottom: 40px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li:last-of-type { margin-bottom: 0; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepImg { width: 250px; margin-right: 40px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent { width: 610px; padding-top: 15px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle { margin-bottom: 20px; font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle span { color: #0e7e87; font-size: 18px; display: inline-block; margin-right: 30px; text-decoration: underline; text-underline-offset: 3px; vertical-align: 1px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle span.txtSmall { font-size: 16px; text-decoration: none; vertical-align: baseline; margin: 0; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepDesc { font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: 0; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend { margin-top: 30px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend h4 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend h4 span { display: inline-block; background: #e9e9e9; color: #000; font-size: 12px; padding: 4px 10px; margin-right: 19px; line-height: 1; vertical-align: 1px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a { position: relative; display: inline-block; padding-right: 25px; text-decoration: none; color: inherit; transition: opacity 0.3s ease; font-size: 16px; color: #000 !important; font-weight: 600; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a::after { content: ""; position: absolute; top: 47%; right: 1%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: right 0.3s ease; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background-color: currentColor; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a:hover { opacity: 0.5; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a:hover::after { right: -0.1em; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint { margin-top: 25px; padding: 30px; background: #eff6f6; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint h4 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint h4 span { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; display: inline-block; background: #0e7e87; color: #fff; font-size: 12px; margin-right: 20px; margin-left: -30px; padding: 4px 10px 4px 30px; line-height: 1; vertical-align: 1px; }
div#container._pcView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint p { font-size: 16px; letter-spacing: 0; line-height: 1.75; }
div#container._pcView main#howtouse section.qaAcco { background: #eff6f6; }
div#container._pcView main#howtouse section.qaAcco div.innerColumn h3 { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: 20px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 50px; }

/*main SP*/
div#container._spView main#howtouse { /*商品毎使い方ページ用*/ /*HowToUse QA*/ }
div#container._spView main#howtouse.htuProduct .innerWrap { padding-bottom: calc(135vw/7.5); }
div#container._spView main#howtouse.htuProduct .innerWrap > h2 { width: calc(252vw/7.5); }
div#container._spView main#howtouse.htuProduct .innerWrap > h2 + p { margin-bottom: calc(100vw/7.5); }
div#container._spView main#howtouse .innerWrap { padding-bottom: calc(100vw/7.5); /*HowToUse TOP*/ /*HowToUse 詳細*/ /*KV*/ /*塗りシャンの方法（シャンプー）*/ /*STEP*/ }
div#container._spView main#howtouse .innerWrap > h2 { width: calc(386vw/7.5); margin: 0 auto calc(20vw/7.5); }
div#container._spView main#howtouse .innerWrap > h2 + p { display: block; font-size: calc(18vw/7.5); text-align: center; font-weight: bold; margin-bottom: calc(100vw/7.5); letter-spacing: 0.1em; }
div#container._spView main#howtouse .innerWrap .intro { font-size: calc(24vw/7.5); letter-spacing: 0.1em; margin-bottom: calc(80vw/7.5); text-align: center; }
div#container._spView main#howtouse .innerWrap h3.htuCat { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; display: inline-block; position: relative; font-size: calc(30vw/7.5); font-weight: 500; letter-spacing: 0.08em; margin-bottom: calc(77vw/7.5); margin-left: calc(40vw/7.5); }
div#container._spView main#howtouse .innerWrap h3.htuCat::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-16vw/7.5); height: 1px; background-color: currentColor; }
div#container._spView main#howtouse .innerWrap .howtouseLink { width: 89.333333333%; margin: 0 auto calc(84vw/7.5); display: flex; justify-content: space-between; flex-wrap: wrap; }
div#container._spView main#howtouse .innerWrap .howtouseLink li { width: calc(320vw/7.5); height: calc(478vw/7.5); margin-bottom: calc(30vw/7.5); }
div#container._spView main#howtouse .innerWrap .howtouseLink li a { display: block; width: 100%; height: 100%; border: 1px	solid #e3e3e3; text-align: center; display: flex; align-items: center; flex-direction: column; padding-top: calc(50vw/7.5); box-sizing: border-box; transition: all 0.35s ease-in-out; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a:hover { border: 1px	solid #000000; /*outline: 1px solid #000;*/ box-shadow: 0 0 0 1px #000; text-decoration: none; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a figure { width: auto; height: calc(270vw/7.5); margin: 0 0 calc(50vw/7.5) 0; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a figure img { height: calc(270vw/7.5); -o-object-fit: contain; object-fit: contain; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a figcaption { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: calc(25vw/7.5); line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: #000; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a figcaption.alcs { margin-top: -7%; }
div#container._spView main#howtouse .innerWrap .howtouseLink li a figcaption span { margin: 0; display: block; }
div#container._spView main#howtouse .innerWrap .htuKv { margin-bottom: calc(90vw/7.5); }
div#container._spView main#howtouse .innerWrap .htuKv .proImg { margin-bottom: calc(35vw/7.5); }
div#container._spView main#howtouse .innerWrap .htuKv p { text-align: center; line-height: 1; letter-spacing: 0.08em; }
div#container._spView main#howtouse .innerWrap .htuKv p.proName { font-size: calc(26vw/7.5); font-weight: 600; margin-bottom: calc(15vw/7.5); }
div#container._spView main#howtouse .innerWrap .htuKv p.proCap { font-size: calc(22vw/7.5); }
div#container._spView main#howtouse .innerWrap .method { width: 89.333333333%; margin: calc(100vw/7.5) auto; text-align: center; }
div#container._spView main#howtouse .innerWrap .method h2 { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; position: relative; display: inline-block; color: #0e7e87; font-size: calc(30vw/7.5); font-weight: 600; line-height: 1; letter-spacing: 0.08em; margin-bottom: calc(50vw/7.5); }
div#container._spView main#howtouse .innerWrap .method h2 sup { font-size: 0.8em; vertical-align: top; }
div#container._spView main#howtouse .innerWrap .method h2:after { content: ""; position: absolute; left: 0; bottom: calc(-15vw/7.5); width: 100%; height: 1px; background-color: #0e7e87; }
div#container._spView main#howtouse .innerWrap .method > p { font-size: calc(24vw/7.5); text-align: left; line-height: 1.75; letter-spacing: 0.08em; font-weight: 500; }
div#container._spView main#howtouse .innerWrap .method div { width: calc(670vw/7.5); }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming { list-style: none; margin: 0; padding: 0; text-align: left; }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming li { display: flex; align-items: baseline; gap: 0; font-size: calc(24vw/7.5); letter-spacing: 0.1em; margin-bottom: calc(20vw/7.5); font-weight: 500; }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming li + li { margin-top: calc(10vw/7.5); }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming li img { flex: 0 0 calc(30vw/7.5); width: auto; max-width: calc(30vw/7.5); object-fit: contain; margin-right: calc(10vw/7.5); transform: translateY(calc(5vw / 7.5)); }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming li span { flex-shrink: 0; margin-right: 1em; }
div#container._spView main#howtouse .innerWrap .method div ul.oilTiming li > p { flex: 1; min-width: 0; margin: 0; line-height: 1.75; }
div#container._spView main#howtouse .innerWrap .stepWrap { width: 89.333333333%; margin: 0 auto; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li { margin-bottom: calc(80vw/7.5); }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li:last-of-type { margin-bottom: 0; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepImg { width: calc(375vw/7.5); margin: 0 auto calc(38vw/7.5); }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; margin-bottom: calc(30vw/7.5); font-size: calc(30vw/7.5); font-weight: 800; line-height: 1; letter-spacing: 0.08em; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle span { color: #0e7e87; font-size: calc(25vw/7.5); display: inline-block; margin-right: calc(40vw/7.5); text-decoration: underline; text-underline-offset: 3px; vertical-align: 2px; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent h3.stepTitle span.txtSmall { font-size: calc(24vw/7.5); text-decoration: none; vertical-align: baseline; margin: 0; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepDesc { font-size: calc(24vw/7.5); line-height: 1.75; letter-spacing: 0.08em; font-weight: 500; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend { margin-top: calc(40vw/7.5); }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend h4 { font-size: calc(24vw/7.5); font-weight: 600; margin-bottom: calc(25vw/7.5); border: none; text-shadow: none; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend h4 span { display: inline-block; background: #e9e9e9; color: #000; font-size: calc(24vw/7.5); padding: 4px 10px; margin-right: calc(30vw/7.5); line-height: 1; vertical-align: 0; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a { position: relative; display: inline-block; padding-right: calc(23vw/7.5); text-decoration: none; color: inherit; transition: opacity 0.3s ease; font-size: calc(24vw/7.5); color: #000 !important; font-weight: 600; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a::after { content: ""; position: absolute; top: 47%; right: 1%; width: calc(10vw/7.5); height: calc(10vw/7.5); border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: right 0.3s ease; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-7vw/7.5); height: 1px; background-color: currentColor; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a:hover { opacity: 0.5; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepRecommend p a:hover::after { right: -0.1em; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint { margin-top: calc(40vw/7.5); padding: calc(40vw/7.5); background: #eff6f6; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint h4 { font-size: calc(24vw/7.5); font-weight: 600; margin-bottom: calc(22vw/7.5); /*PRECS　CSS RESET*/ border: none; text-shadow: none; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint h4 span { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; display: inline-block; background: #0e7e87; color: #fff; font-size: calc(18vw/7.5); margin-right: calc(30vw/7.5); margin-left: calc(-40vw/7.5); padding: calc(8vw/7.5) calc(15vw/7.5) calc(6vw/7.5) calc(45vw/7.5); line-height: 1; vertical-align: 1px; }
div#container._spView main#howtouse .innerWrap .stepWrap ol.stepList li .stepContent .stepPoint p { font-size: calc(24vw/7.5); letter-spacing: 0.04em; line-height: 1.75; }
div#container._spView main#howtouse section.qaAcco { background: #eff6f6; }
div#container._spView main#howtouse section.qaAcco div.innerColumn h3 { font-family: "Yu Mincho", "游明朝", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif; font-size: calc(30vw/7.5); font-weight: 800; letter-spacing: 0.08em; margin-bottom: calc(60vw/7.5); }