@charset "UTF-8";
html, body { width: 100%; min-width: 1024px; transform-origin: left top; }

@media only screen and (min-width: 1024px) { html, body { transform: scale(1) !important; } }

@media only screen and (max-width: 767px) { html, body { transform: scale(1) !important; } }

.l-breadcrumb { display: none; }

.l-main { margin-bottom: 0; min-width: 1024px; overflow: hidden; }

.l-container { background: #f8f9f9; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; /*reset
-------------------------------------------------- */ /*common
-------------------------------------------------- */ /*kv
-------------------------------------------------- */ /*routine
-------------------------------------------------- */ /*voice
-------------------------------------------------- */ /*dessert
-------------------------------------------------- */ }

.l-container html, .l-container body, .l-container header, .l-container main, .l-container aside, .l-container footer, .l-container section, .l-container article, .l-container nav, .l-container h1, .l-container h2, .l-container h3, .l-container h4, .l-container h5, .l-container h6, .l-container table, .l-container caption, .l-container tbody, .l-container tfoot, .l-container thead, .l-container tr, .l-container th, .l-container td, .l-container form, .l-container label, .l-container legend, .l-container hgroup, .l-container figcaption, .l-container figure, .l-container img, .l-container canvas, .l-container iframe, .l-container details, .l-container summary, .l-container code, .l-container pre, .l-container audio, .l-container video, .l-container address, .l-container time, .l-container blockquote, .l-container div, .l-container ul, .l-container ol, .l-container li, .l-container dl, .l-container dt, .l-container dd, .l-container p, .l-container a, .l-container span, .l-container small, .l-container strong, .l-container sub, .l-container sup { margin: 0; padding: 0; border: 0; box-sizing: border-box; }

.l-container header, .l-container main, .l-container aside, .l-container nav, .l-container footer, .l-container section, .l-container article { display: block; }

.l-container h1, .l-container h2, .l-container h3, .l-container h4, .l-container h5, .l-container h6 { font-weight: normal; }

.l-container table { border-collapse: collapse; border-spacing: 0; }

.l-container th, .l-container td { text-align: left; }

.l-container ol, .l-container ul { list-style: none; }

.l-container img, .l-container video { max-width: 100%; }

.l-container img { border: 0; vertical-align: bottom; }

.l-container p { line-height: 1.5; }

.l-container .inner { margin: 0 auto; width: 1000px; }

.l-container a { text-decoration: none; cursor: pointer; transition: opacity .3s; }

.l-container a:hover { opacity: .8; }

.l-container h2 { position: relative; line-height: 1; text-align: center; }

.l-container h2 small { display: block; }

.l-container h2 .icon { position: absolute; top: -6px; left: 0; }

.l-container h2 .main_ttl { margin: 30px 0 0 -6px; display: inline-block; width: 794px; height: 42px; }

.l-container h2 .pc_hidden { display: none; }

.l-container .flexbox { display: flex; display: -ms-flexbox; -ms-flex: 0 1 auto; }

.l-container .pc_hidden { display: none; }

.l-container #kv { padding-top: 62px; position: relative; height: 741px; background: url(../images/kv-bgi.jpg) no-repeat center top; background-size: cover; color: #fff; font-size: 16px; font-weight: bold; text-align: center; }

.l-container #kv:before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: #f8f9f9; content: ""; }

.l-container #kv:after { display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 294px; background: url(../images/kv-wave.png) repeat-x center top; background-size: 100% 294px; content: ""; }

@media only screen and (max-width: 1920px) { .l-container #kv:after { background-size: 1920px 294px; } }

.l-container #kv .lead { margin-top: 12px; line-height: 1.75; }

.l-container #kv .cup, .l-container #kv .spoon { position: absolute; bottom: -20px; left: 50%; z-index: 800; }

.l-container #kv .cup { margin: 0 0 21px -425px; }

.l-container #kv .spoon { margin: 0 0 68px 95px; }

.l-container #routine { padding: 37px 0 0; color: #585083; }

.l-container .routine_list { margin-top: 56px; }

.l-container .routine_list li { position: relative; }

.l-container .makeup, .l-container .bottle { position: absolute; top: 0; left: 50%; z-index: 800; }

.l-container .makeup { margin: -47px 0 0 -7px; }

.l-container .bottle { margin: 0 0 -157px -463px; top: auto; bottom: 0; }

.l-container .text_line { margin: 43px 55px; width: 428px; }

.l-container .text_line span { padding: .1em 30px 0; display: block; height: 30px; line-height: 30px; background: url(../images/text_line.png) repeat-x left top; background-size: auto 1px; color: #3d3567; font-size: 15px; font-weight: 500; }

.l-container .text_line span:last-child { background: url(../images/text_line.png) repeat-x left top, url(../images/text_line.png) repeat-x left bottom; background-size: auto 1px,auto 1px; }

.l-container .text_line span.pc_hidden { display: none; }

.l-container .routine2 { margin-top: 79px; }

.l-container .routine2 .main_box { padding: 80px 87px; width: 100%; height: 395px; background: url(../images/routine2-bgi.jpg) no-repeat; background-size: contain; }

.l-container .routine2 .main_box p { margin-top: 28px; line-height: 1.9; letter-spacing: -.05em; }

.l-container .routine2 .flexbox { justify-content: flex-end; position: relative; }

.l-container .routine2 .img_arrange { margin: -127px 0 0 -88px; position: absolute; top: 0; left: 0; }

.l-container .routine2 .text_line { margin-top: 65px; position: relative; }

.l-container .routine2 .text_line span { padding-left: 54px; padding-right: 0; }

.l-container .routine2 .text_line:before { display: block; position: absolute; top: 10px; left: 0; width: 83px; height: 17px; content: ""; background: url(../images/routine2-arrow.png) no-repeat; background-size: contain; }

.l-container .routine3 { margin-top: 91px; }

.l-container .routine3 h3 { margin-left: 87px; }

.l-container .routine3 .text_line { margin-top: 32px; }

.l-container .routine3 .photo { position: absolute; top: -113px; right: -20px; }

.l-container #user_voice { padding: 30px 10px 100px; }

.l-container #user_voice .inner { margin: 0 auto; padding: 106px 40px 80px; border-radius: 20px; width: 100%; height: 703px; max-width: 1286px; background: url(../images/user_voice-bgi.jpg) no-repeat #6f4f99 center top; background-size: cover; }

.l-container #user_voice .icon { margin-left: -500px; left: 50%; }

.l-container #user_voice .main_ttl { margin: 30px 0 0 10px; width: 814px; height: 42px; }

.l-container .voice_list { margin: 60px auto 0; width: 1000px; justify-content: space-between; flex-wrap: wrap; color: #fff; }

.l-container .voice_list:after { display: block; width: 226px; content: ""; }

.l-container .voice_list li { padding: 35px 30px; width: 226px; height: 176px; line-height: 1.45; background: url(../images/user_voice-balloon.png) no-repeat; background-size: contain; }

.l-container .voice_list li:nth-child(n+5) { margin-top: 12px; padding-top: 50px; }

.l-container #dessert { padding: 65px 0 105px; background: #f7f2ed; }

.l-container #dessert .main_ttl { margin: 30px 0 0 25px; width: 824px; height: 42px; }

.l-container .dessert_list { margin: 59px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; }

.l-container .dessert_list li { border-radius: 40px; width: 483px; }

.l-container .dessert_list li:nth-child(n+3) { margin-top: 40px; }

.l-container .dessert_list li > img { border-radius: 10px 10px 0 0; }

.l-container .dessert_list .text_area { padding: 20px 50px 25px; border-radius: 0 0 10px 10px; background: #fff; color: #585083; text-align: center; }

.l-container .dessert_list h3 { padding-bottom: .5em; border-bottom: solid 1px #585083; font-size: 22px; font-weight: bold; }

.l-container .dessert_list p { margin: 17px 0; text-align: left; }

.l-container .dessert_list .btn { display: inline-block; }

.ieStyle { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

@media only screen and (max-width: 1124px) { .l-container #user_voice .inner { padding: 106px 20px 80px; } .l-container #user_voice .icon { margin-left: -450px; transform: translateY(-50%); } .l-container .voice_list { width: 940px; } .l-container .voice_list li { width: 220px; } }

@media only screen and (max-width: 767px) { html, body { min-width: 0; } .l-main { min-width: 0; } .l-container { overflow: hidden; /*common
-------------------------------------------------- */ /*kv
-------------------------------------------------- */ /*routine
-------------------------------------------------- */ /*voice
-------------------------------------------------- */ /*dessert
-------------------------------------------------- */ } .l-container .inner { margin: 0 auto; width: 94.6666666667%; } .l-container img { width: 100%; height: auto; } .l-container a { text-decoration: none; cursor: pointer; transition: opacity .3s; } .l-container a:hover { opacity: .8; } .l-container h2 { position: relative; line-height: 1; text-align: center; } .l-container h2 small { display: block; } .l-container h2 .icon { position: absolute; top: -1.2em; left: 0.6666666667em; font-size: 30px; font-size: 3rem; font-size: 4vw; width: 3.6666666667em; height: auto; } .l-container h2 .main_ttl { margin: 5.6338028169% 0 0; width: 82.9577464789%; height: auto; } .l-container h2 .pc_hidden { display: inline-block; } .l-container .pc_hidden { display: block; } .l-container .sp_hidden { display: none !important; } .l-container #kv { padding-top: 13.3333333333%; height: auto; background: url(../images/kv-bgi-sp.jpg) no-repeat center top; background-size: 100% auto; font-size: 23px; font-size: 2.3rem; font-size: 3.0666666667vw; } .l-container #kv:after { bottom: 0; width: 100%; height: 15.1739130435em; background: url(../images/kv-wave-sp.png) repeat-x center top; background-size: 100% auto; } .l-container #kv .lead { margin-top: 1.6%; padding-bottom: 45.0666666667%; } .l-container #kv .cup, .l-container #kv .spoon { display: none; } .l-container #routine { padding: 6.4% 0 0; } .l-container #routine h2 small { margin: 0 auto; display: block; width: 49.1549295775%; } .l-container .routine_list { margin-top: 6.1971830986%; } .l-container .makeup, .l-container .bottle { left: 0; } .l-container .makeup { margin: -4.2253521127% 0 0 2.8169014085%; } .l-container .bottle { margin: 0 0 -28.7323943662% 0; top: auto; bottom: 0; width: 28.8732394366%; } .l-container .text_line { margin: 8.5915492958% auto; width: 88.4507042254%; letter-spacing: -.02em; } .l-container .text_line span { padding: .1em 0 0; height: 2em; line-height: 2em; background: url(../images/text_line-sp.png) repeat-x left top; background-size: 100% 1px; font-size: 28px; font-size: 2.8rem; font-size: 3.7333333333vw; } .l-container .text_line span:last-child { background: url(../images/text_line-sp.png) repeat-x left top, url(../images/text_line-sp.png) repeat-x left bottom; background-size: 100% 1px,100% 1px; } .l-container .text_line span.pc_hidden { display: block; } .l-container .routine2 { margin-top: 14.3661971831%; } .l-container .routine2 .main_box { padding: 0; width: 100%; height: auto; background: none; } .l-container .routine2 .main_box p { margin-top: 5.4929577465%; line-height: 2; letter-spacing: -.02em; } .l-container .routine2 .flexbox { display: block; } .l-container .routine2 .img_arrange { margin: -15.9154929577% 0 0 0.2816901408%; position: relative; width: 96.1971830986%; } .l-container .routine2 .text_line { margin-top: -0.8450704225%; } .l-container .routine2 .text_line span { padding: 0; } .l-container .routine2 .text_line:before { content: none; } .l-container .routine3 { margin-top: 12.1333333333%; } .l-container .routine3 h3 { margin: -0.8450704225% 0 0 5.6338028169%; width: 45.3521126761%; } .l-container .routine3 .text_line { margin-top: 6.338028169%; } .l-container .routine3 .photo { margin: -20.8450704225% -2.8169014085% 0 0; position: absolute; top: 0; right: 0; } .l-container #user_voice { padding: 5.8666666667% 0 13.3333333333%; } .l-container #user_voice .inner { margin: 0 auto; padding: 13.4666666667% 5.3333333333% 10.6666666667%; border-radius: 20px; width: 94.6666666667%; height: 54.3928571429em; max-width: 100%; background: url(../images/user_voice-bgi-sp.jpg) no-repeat #6f4f99 center top; background-size: 100% 100%; font-size: 28px; font-size: 2.8rem; font-size: 3.7333333333vw; } .l-container #user_voice h2 small { margin: 0 auto; width: 60.1587301587%; } .l-container #user_voice .icon { margin-left: -3.1746031746%; left: 0; width: 17.4603174603%; } .l-container #user_voice .main_ttl { margin: 6.3492063492% 0 0; width: 94.6031746032%; height: auto; } .l-container .voice_list { margin: 9.5238095238% auto 0; width: 100%; } .l-container .voice_list:after { width: 10.8928571429em; } .l-container .voice_list li { padding: 4.7619047619% 4.126984127% 4.7619047619% 4.7619047619%; width: 10.8928571429em; height: 8.8214285714em; line-height: 1.5; background: url(../images/user_voice-balloon-sp.png) no-repeat; background-size: contain; } .l-container .voice_list li:nth-child(n+3) { margin-top: 3.0158730159%; padding-top: 4.7619047619%; } .l-container .voice_list li:nth-child(n+5) { margin-top: 3.3333333333%; padding-top: 7.1428571429%; } .l-container #dessert { padding: 13.6% 0 14%; } .l-container #dessert h2 small { margin: 0 auto; width: 59.7183098592%; } .l-container #dessert h2 small img { margin-left: .4em; } .l-container #dessert .main_ttl { margin: 5.3521126761% 0 0; width: 83.2394366197%; height: auto; } .l-container .dessert_list { margin: 8.3098591549% auto 0; display: block; } .l-container .dessert_list li { margin: 0 auto; width: 88.7323943662%; } .l-container .dessert_list li:nth-child(n+2) { margin-top: 8.4507042254%; } .l-container .dessert_list .text_area { padding: 4.126984127% 6.3492063492% 6.3492063492%; } .l-container .dessert_list h3 { padding-bottom: .66em; font-size: 32px; font-size: 3.2rem; font-size: 4.2666666667vw; } .l-container .dessert_list p { margin: 4% 0; font-size: 28px; font-size: 2.8rem; font-size: 3.7333333333vw; } .l-container .dessert_list .btn { margin: 0 auto; display: block; width: 65.0909090909%; } }