@charset "UTF-8";@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);#water blockquote,#water code,#water dd,#water div,#water dl,#water dt,#water fieldset,#water form,#water h1,#water h2,#water h3,#water h4,#water h5,#water h6,#water input,#water legend,#water li,#water ol,#water p,#water pre,#water td,#water textarea,#water th,#water ul{margin:0;padding:0}#water table{border-collapse:collapse;border-spacing:0}#water fieldset,#water img{border:0}#water address,#water caption,#water cite,#water code,#water dfn,#water em,#water strong,#water th,#water var{font-style:normal;font-weight:400}#water ol,#water ul{list-style:none}#water caption,#water th{text-align:left}#water h1,#water h2,#water h3,#water h4,#water h5,#water h6{font-size:100%;font-weight:400}#water q:after,#water q:before{content:''}#water #app .app_progress ul li.bar::before,#water #app .app_progress ul li.num p::before,#water #app .app_progress ul::after,#water #intro .start_btn span::after,#water #water_modal .modal_wrap::after,#water .contents#step5 .advice::after,#water .contents#step5 .btns ul li a::after,#water .contents#step5 .btns ul::after{content:""}#water abbr,#water acronym{border:0;font-variant:normal}#water sup{vertical-align:text-top}#water sub{vertical-align:text-bottom}#water input,#water select,#water textarea{font-family:inherit;font-size:inherit;font-weight:inherit}#water legend{color:#000}#water #yui3-css-stamp.cssreset{display:none}/*! ==================================================
*  Web Fonts Title: Yaku Han JP
*  Version: 1.3.1
*  GitHub URL: https://github.com/qrac/yakuhanjp
*  Author: Qrac
*  Author URL: https://twitter.com/Qrac_jp
*  "Noto Sans CJK JP" licensed under the SIL Open Font License
*  https://www.google.com/get/noto/#/
=================================================== */@font-face{font-family:YakuHanJP;font-style:normal;font-weight:100;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Thin.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Thin.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:200;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Light.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Light.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:300;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-DemiLight.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-DemiLight.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:400;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Regular.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Regular.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:500;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Medium.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Medium.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:700;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Bold.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Bold.woff) format("woff")}@font-face{font-family:YakuHanJP;font-style:normal;font-weight:900;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Black.woff2) format("woff2"),url(/sites/default/files/brand/purina/care/water/assets/fonts/YakuHanJP/YakuHanJP-Black.woff) format("woff")}@font-face{font-family:concert-one;font-style:normal;font-weight:400;src:url(/sites/default/files/brand/purina/care/water/assets/fonts/concert-one/concertone-regular.ttf) format("truetype")}#water #app .app_next_btn,#water #app .app_prev_btn,#water #app .app_progress ul li.num span,#water #water_modal .modal_wrap .modal_inr .close_btn,#water .contents#step1 .weight_input .input,#water .contents#step2 .dry_food .water,#water .contents#step2 .dry_food_input .input,#water .contents#step3 .wet_food .water,#water .contents#step3 .wet_food_input .input,#water .contents#step4 .water_input .input,#water .contents#step5 .ogp .result_glass{font-family:YakuhanJP,concert-one,"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",HiraKakuPro-W3,Meiryo,"メイリオ","ＭＳ Ｐゴシック",Osaka,verdana,arial,sans-serif}#water,#water .contents#step2 .dry_food_input .input .input_box .note,#water .contents#step3 .wet_food_input .input .input_box .note{font-family:YakuhanJP,"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",HiraKakuPro-W3,Meiryo,"メイリオ","ＭＳ Ｐゴシック",Osaka,verdana,arial,sans-serif}.page-wrapper{z-index:auto}#water{font-feature-settings:"pwid";-webkit-text-size-adjust:none;text-size-adjust:none;color:#333;margin:0 auto}#water a{text-decoration:none;color:#333}#water .cmn_hover{transition:opacity .3s ease-out;cursor:pointer}#water .cmn_hover:hover{opacity:.6}#water input{-webkit-appearance:none;border-radius:0;outline:0;padding-bottom:10px}#water input:placeholder-shown{color:#C9C2B0}#water input::-webkit-input-placeholder{color:#C9C2B0;line-height:1.5}#water input:-moz-placeholder{color:#C9C2B0}#water input::-moz-placeholder{color:#C9C2B0}@media (max-width:640px){#water .cmn_hover:hover{opacity:1}#water .rfont{font-size:0}#water input{padding-bottom:0}#water .pc-only{display:none;width:0;height:0;visibility:hidden;opacity:0;position:fixed;top:-100%;left:-100%}}#water .sp-only,#water .sp-only-inline,#water .sp-only-inline-block{display:none;width:0;height:0;visibility:hidden;opacity:0;position:fixed;top:-100%;left:-100%}@media (max-width:640px){#water .sp-only,#water .sp-only-inline,#water .sp-only-inline-block{display:block;width:auto;height:auto;visibility:visible;opacity:1;position:static;top:auto;left:auto}#water .sp-only-inline-block{display:inline-block}#water .sp-only-inline{display:inline}#water img{width:100%}}#water img{display:block;height:auto}@keyframes cat_flow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,15px,0)}}@keyframes arw{0%,100%{opacity:1}50%{opacity:0}}@keyframes start_btn{0%,100%{opacity:1}50%{opacity:.5}}#water #intro{overflow:hidden}#water #intro .bg{position:absolute;z-index:0;bottom:0;left:0;padding:19.5679% 0 0;width:100%;height:100%;background:url(../images/intro/bg.png) center center no-repeat;background-size:100% auto}@media (max-width:640px){#water #intro .bg{padding:0;background-image:url(../images/intro/sp/bg.png);background-position:left top}}#water #intro img{width:100%}#water #intro h1{width:573px;padding:184px 0 0;margin:0 auto}#water #intro .copy{font-size:16px;font-weight:500;line-height:1.875;text-align:center;margin:13px auto 0}@media (max-width:640px){#water #intro h1{width:88.59375%;padding:33.28125% 0 0}#water #intro .copy{font-size:240%;line-height:1.583;text-align:left;margin:11px auto 0;width:88.28125%}}#water #intro .start_btn{display:block;width:312px;height:65px;margin:20px auto 0;background:#f7771f;border-radius:32.5px;text-align:center}@media (max-width:640px){#water #intro .start_btn{width:70%;height:0;padding:15% 0 0;border-radius:40px;margin:9px auto 0;position:relative}}#water #intro .start_btn span{display:block;height:100%;font-size:0;white-space:nowrap}#water #intro .start_btn span::after{display:inline-block;width:0;height:100%;vertical-align:middle}@media (max-width:640px){#water #intro .start_btn span{position:absolute;top:0;left:0;width:100%}}#water #intro .start_btn img{display:inline-block;width:257px;vertical-align:middle;animation:start_btn 1s infinite}@media (max-width:640px){#water #intro .start_btn img{width:82.41309%}}#water #intro .wave{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%}#water #intro .wave img{width:182px;position:absolute;bottom:35px;left:50%;z-index:0;margin:0 0 0 -91px;animation:cat_flow 2s infinite}@media (max-width:640px){#water #intro .wave img{width:122px;bottom:22px;margin:0 0 0 -61px}}#water #intro .wave #wave{position:absolute;bottom:0;left:0;z-index:1}#water #app{z-index:1;display:none;opacity:0;background:url(../images/bg.png)}#water #app #app_container{height:100%;transition:transform .4s cubic-bezier(.445,.05,.55,.95)}#water #app .contents{box-sizing:border-box;padding:154px 0 0;color:#4a4542}#water #app .contents .inr{max-width:1172px;margin:0 auto}#water #app .contents .inr h3 img{margin:0 auto}#water #app .app_progress{position:absolute;top:44px;left:0;z-index:0;width:100%}@media (max-width:640px){#water #app .contents{padding:20.46875% 0 0}#water #app .app_progress{top:0;margin:3.28125% 0 0}}#water #app .app_progress ul{display:block;max-width:1172px;margin:0 auto}#water #app .app_progress ul::after{display:table;clear:both}@media (max-width:1200px){#water #app .app_progress ul{transform:scale(.95)}}@media (max-width:640px){#water #app .app_progress ul{transform:scale(1);width:92.5%}}#water #app .app_progress ul li{float:left}#water #app .app_progress ul li.num{width:36px}#water #app .app_progress ul li.num span{display:block;height:36px;border-radius:50%;background:#c9c2b0;color:#fff;line-height:36px;text-align:center;transition:background .2s ease-out}@media (max-width:640px){#water #app .app_progress ul li.num{width:8.10811%;padding:8.10811% 0 0;position:relative}#water #app .app_progress ul li.num span{line-height:1;position:absolute;top:0;left:0;width:100%;height:100%;font-size:0;white-space:nowrap}#water #app .app_progress ul li.num span::after{content:"";display:inline-block;width:0;height:100%;vertical-align:middle}}#water #app .app_progress ul li.num span i{font-size:18px}#water #app .app_progress ul li.num p{width:150px;white-space:nowrap;text-align:center;margin:14px 0 0 -57px;position:relative}#water #app .app_progress ul li.num p::before{display:block;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center 0;transition:opacity .2s ease-out}#water #app .app_progress ul li.num p img{margin:0 auto;position:relative;z-index:1;opacity:0;transition:opacity .2s ease-out}#water #app .app_progress ul li.num.num1 img{width:34px}#water #app .app_progress ul li.num.num1 p::before{background-image:url(../images/common/icon_step1.png);background-size:34px auto}#water #app .app_progress ul li.num.num2 img{width:122px}#water #app .app_progress ul li.num.num2 p::before{background-image:url(../images/common/icon_step2.png);background-size:122px auto}#water #app .app_progress ul li.num.num3 img{width:134px}#water #app .app_progress ul li.num.num3 p::before{background-image:url(../images/common/icon_step3.png);background-size:134px auto}#water #app .app_progress ul li.num.num4 img{width:65px}#water #app .app_progress ul li.num.num4 p::before{background-image:url(../images/common/icon_step4.png);background-size:65px auto}#water #app .app_progress ul li.num.num5 img{width:34px}#water #app .app_progress ul li.num.num5 p::before{background-image:url(../images/common/icon_step5.png);background-size:34px auto}#water #app .app_progress ul li.bar{width:236px;height:5px;background:#c9c2b0;margin:16px 6px 0;position:relative;overflow:hidden}@media (max-width:640px){#water #app .app_progress ul li.num span i{font-size:240%;vertical-align:middle}#water #app .app_progress ul li.bar{width:12.5%;height:0;padding:1.01351% 0 0;margin:3.5473% 1.18243% 0}}#water #app .app_progress ul li.bar span,#water #app .app_progress ul li.bar::before{display:block;left:-100%;width:100%;height:100%;background:#f7771f;transition:left .2s ease-out;top:0;position:absolute}#water #app .app_progress ul li.bar span{background:-moz-linear-gradient(left,#f7771f 0,#c9c2b0 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,#f7771f),color-stop(100%,#c9c2b0));background:-webkit-linear-gradient(left,#f7771f 0,#c9c2b0 100%);background:-o-linear-gradient(left,#f7771f 0,#c9c2b0 100%);background:-ms-linear-gradient(left,#f7771f 0,#c9c2b0 100%);background:linear-gradient(to right,#f7771f 0,#c9c2b0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color', GradientType=1 )}#water #app.step1 .app_progress .bar1 span,#water #app.step2 .app_progress .bar1::before{left:0}#water #app .app_next_btn,#water #app .app_prev_btn{position:absolute;top:0;z-index:10;letter-spacing:.15em;line-height:1;cursor:pointer}#water #app .app_next_btn .arw,#water #app .app_prev_btn .arw{margin:12px auto 0}#water #app .app_prev_btn{font-size:16px;color:#c9c2b0;left:0;margin:326px 0 0 85px;transform-origin:center left}@media (max-width:1310px){#water #app .app_prev_btn{margin-left:10px;transform:scale(.7)}}@media (max-width:640px){#water #app .app_next_btn,#water #app .app_prev_btn{width:8.4375%}#water #app .app_next_btn .arw,#water #app .app_prev_btn .arw{padding:246.2963% 0 0}#water #app .app_prev_btn{font-size:10px;text-align:right;margin:70.625% 0 0;transform:scale(1)}#water #app .app_prev_btn .arw{background:url(../images/common/sp/back_arw.png) no-repeat;background-size:100% 100%}}#water #app .app_prev_btn .arw img{margin:0 0 0 7px}#water #app .app_next_btn{width:112px;font-size:31px;color:#f7771f;right:0;margin:314px 85px 0 0;text-align:center;transform-origin:center right;opacity:.4}@media (max-width:1310px){#water #app .app_next_btn{margin-right:10px;transform:scale(.7)}}@media (max-width:640px){#water #app .app_next_btn{font-size:10px;text-align:left;width:8.4375%;margin:70.625% 0 0;transform:scale(1)}#water #app .app_next_btn .arw{background:url(../images/common/sp/next_arw.png) no-repeat;background-size:100% 100%}}#water #app .app_next_btn p.app_next_txt2{display:none}#water #app .app_next_btn p.app_next_txt2 img{width:107px}#water #app .app_next_btn .arw{font-size:0;letter-spacing:0}#water #app.step1 .app_progress .num1 span,#water #app.step2 .app_progress .num1 span,#water #app.step2 .app_progress .num2 span,#water #app.step3 .app_progress .num1 span,#water #app.step3 .app_progress .num2 span,#water #app.step3 .app_progress .num3 span,#water #app.step4 .app_progress .num1 span,#water #app.step4 .app_progress .num2 span,#water #app.step4 .app_progress .num3 span,#water #app.step4 .app_progress .num4 span,#water #app.step5 .app_progress .num1 span,#water #app.step5 .app_progress .num2 span,#water #app.step5 .app_progress .num3 span,#water #app.step5 .app_progress .num4 span,#water #app.step5 .app_progress .num5 span{background:#f7771f}#water #app .app_next_btn .arw img{display:inline-block;margin:0 0 0 -5px;animation:arw 1.5s ease-out infinite}#water #app.step1 .app_prev_btn,#water #app.step4 .app_next_btn p{display:none}#water #app .app_next_btn .arw img:nth-child(2){animation-delay:.15s}#water #app .app_next_btn .arw img:nth-child(3){animation-delay:.3s}#water #app .app_next_btn.enable{opacity:1}#water #app .app_next_btn.enable:hover{opacity:.6}@media (max-width:640px){#water #app .app_next_btn.enable:hover{opacity:1}}#water #app.step1 #app_container{transform:translate3d(0,0,0)}#water #app.step1 .app_progress .num1 img{opacity:1}#water #app.step1 .app_progress .num1 p::before{opacity:0}#water #app.step2 #app_container{transform:translate3d(-100%,0,0)}#water #app.step2 .app_progress .num1 img,#water #app.step2 .app_progress .num2 img{opacity:1}#water #app.step2 .app_progress .num1 p::before,#water #app.step2 .app_progress .num2 p::before{opacity:0}#water #app.step2 .app_progress .bar1 span{left:100%}#water #app.step2 .app_progress .bar2 span,#water #app.step3 .app_progress .bar1::before,#water #app.step3 .app_progress .bar2::before{left:0}#water #app.step3 #app_container{transform:translate3d(-200%,0,0)}#water #app.step3 .app_progress .num1 img,#water #app.step3 .app_progress .num2 img,#water #app.step3 .app_progress .num3 img{opacity:1}#water #app.step3 .app_progress .num1 p::before,#water #app.step3 .app_progress .num2 p::before,#water #app.step3 .app_progress .num3 p::before{opacity:0}#water #app.step3 .app_progress .bar1 span,#water #app.step3 .app_progress .bar2 span{left:100%}#water #app.step3 .app_progress .bar3 span,#water #app.step4 .app_progress .bar1::before,#water #app.step4 .app_progress .bar2::before,#water #app.step4 .app_progress .bar3::before{left:0}#water #app.step4 #app_container{transform:translate3d(-300%,0,0)}#water #app.step4 .app_progress .num1 img,#water #app.step4 .app_progress .num2 img,#water #app.step4 .app_progress .num3 img,#water #app.step4 .app_progress .num4 img{opacity:1}#water #app.step4 .app_progress .num1 p::before,#water #app.step4 .app_progress .num2 p::before,#water #app.step4 .app_progress .num3 p::before,#water #app.step4 .app_progress .num4 p::before{opacity:0}#water #app.step4 .app_progress .bar1 span,#water #app.step4 .app_progress .bar2 span,#water #app.step4 .app_progress .bar3 span{left:100%}#water #app.step4 .app_progress .bar4 span,#water #app.step5 .app_progress .bar1::before,#water #app.step5 .app_progress .bar2::before,#water #app.step5 .app_progress .bar3::before,#water #app.step5 .app_progress .bar4::before{left:0}#water #app.step4 .app_next_btn p.app_next_txt2{display:inline-block}#water #app.step5 #app_container{transform:translate3d(-400%,0,0)}#water #app.step5 .app_progress .num1 img,#water #app.step5 .app_progress .num2 img,#water #app.step5 .app_progress .num3 img,#water #app.step5 .app_progress .num4 img,#water #app.step5 .app_progress .num5 img{opacity:1}#water #app.step5 .app_progress .num1 p::before,#water #app.step5 .app_progress .num2 p::before,#water #app.step5 .app_progress .num3 p::before,#water #app.step5 .app_progress .num4 p::before,#water #app.step5 .app_progress .num5 p::before,#water .contents#step1 .weight .cat.cat_l,#water .contents#step1 .weight .cat.cat_m{opacity:0}#water #app.step5 .app_progress .bar1 span,#water #app.step5 .app_progress .bar2 span,#water #app.step5 .app_progress .bar3 span,#water #app.step5 .app_progress .bar4 span{left:100%}#water #app.step5 .app_next_btn,#water #app.step5 .app_prev_btn{display:none}#water .contents#step1 .inr h3 img{width:436px}@media (max-width:640px){#water .contents#step1 .inr h3 img{width:75%}}#water .contents#step1 .weight{position:absolute;top:68px;left:111px;background:url(../images/step1/weight.png) no-repeat;background-size:100% auto;width:449px;height:483px;transform-origin:bottom center}@media (max-width:640px){#water .contents#step1 .weight{top:0;left:0;background:url(../images/step1/sp/weight.png) no-repeat;background-size:100% auto;width:71.875%;height:0;padding:73.4375% 0 0;margin:68.125% 0 0 13.90625%}}#water .contents#step1 .weight .cat{position:absolute;top:0;left:0;width:203px;margin:107px 0 0 139px}@media (max-width:640px){#water .contents#step1 .weight .cat{width:45%;margin:23.47826% 0 0 31.30435%}}#water .contents#step1 .weight_input{position:absolute;top:0;left:0;margin:144px 0 0 611px}@media (max-width:640px){#water .contents#step1 .weight_input{width:100%;margin:18.75% 0 0;text-align:center}}#water .contents#step1 .weight_input .hukidashi{background:#ffde00;width:195px;height:45px;line-height:45px;text-align:center;font-size:16px;font-weight:500;letter-spacing:-.05em;border-radius:22.5px;margin:0 0 0 70px;position:relative}@media (max-width:640px){#water .contents#step1 .weight_input .hukidashi{display:inline-block;width:auto;height:auto;font-size:220%;line-height:1;border-radius:15px;padding:8px 9px;margin:0}}#water .contents#step1 .weight_input .hukidashi::after{content:"";width:0;height:0;border-style:solid;border-width:9px 9px 0;border-color:#ffde00 transparent transparent;position:absolute;top:100%;left:87px}@media (max-width:640px){#water .contents#step1 .weight_input .hukidashi::after{left:50%;margin:0 0 0 -9px}}#water .contents#step1 .weight_input .input{margin:24px 0 0}#water .contents#step1 .weight_input .input input{display:inline-block;border:2px solid #c9c2b0;border-radius:10px;box-sizing:border-box;background:#fff;text-align:center;font-size:109px;letter-spacing:5px;color:#4a4542;height:138px}#water .contents#step1 .weight_input .input input.input_weight{width:184px}@media (max-width:640px){#water .contents#step1 .weight_input .input{margin:16px 0 0}#water .contents#step1 .weight_input .input input{height:auto;font-size:1090%;letter-spacing:5px}#water .contents#step1 .weight_input .input input.input_weight{width:28.75%;margin:0 0 0 .75em}}#water .contents#step1 .weight_input .input input.input_weight2{width:112px}#water .contents#step1 .weight_input .input span{display:inline-block;vertical-align:text-bottom;position:relative;top:20px;margin:0 3px;font-size:75.6px}@media (max-width:640px){#water .contents#step1 .weight_input .input input.input_weight2{width:17.5%}#water .contents#step1 .weight_input .input span{font-size:756%;top:.35em}}#water .contents#step1 .weight_input .note{font-size:15px;font-weight:500;line-height:1;color:#666;margin:12px 0 0 124px;letter-spacing:2px}#water .contents#step2{left:100%}#water .contents#step2 .inr h3 img{width:822px}@media (max-width:640px){#water .contents#step1 .weight_input .note{font-size:220%;margin:2.34375% 0 0}#water .contents#step2{padding:16.25% 0 0}#water .contents#step2 .inr h3 img{width:88.28125%}}#water .contents#step2 .copy{font-size:16px;font-weight:500;line-height:1.875;text-align:center;margin:13px 0 0}@media (max-width:640px){#water .contents#step2 .copy{font-size:240%;line-height:1.583;margin:9px 0 0}}#water .contents#step2 .note{color:#666;font-size:14px;font-weight:500;line-height:1;text-align:center;margin:5px 0 0}#water .contents#step2 .dry_food{position:absolute;top:0;left:0;margin:191px 0 0 105px;width:384px;height:349px}@media (max-width:640px){#water .contents#step2 .note{font-size:220%;line-height:1.454}#water .contents#step2 .dry_food{width:49.6875%;height:auto;padding:45% 0 0;margin:102.96875% 0 0 25.625%}}#water .contents#step2 .dry_food .cat,#water .contents#step2 .dry_food .food,#water .contents#step2 .dry_food .pkg,#water .contents#step2 .dry_food .shadow,#water .contents#step2 .dry_food .water{position:absolute}#water .contents#step2 .dry_food .shadow{bottom:0;left:0;margin:0 0 0 87px;width:207px}@media (max-width:640px){#water .contents#step2 .dry_food .shadow{width:54.40252%;margin:0 0 0 21.69811%}}#water .contents#step2 .dry_food .cat{bottom:0;left:0;margin:0 0 57px 120px;width:177px;transform-origin:bottom left;transition:transform .45s ease-out .5s}@media (max-width:640px){#water .contents#step2 .dry_food .cat{width:45.59748%;margin:0 0 15.09434% 31.76101%}}#water .contents#step2 .dry_food .food{top:0;left:0;margin:-18px 0 0 236px;width:100px}@media (max-width:640px){#water .contents#step2 .dry_food .food{width:25.4717%;margin:-4.71698% 0 0 60.37736%}}#water .contents#step2 .dry_food .pkg{bottom:0;right:0;margin:0 94px 12px 0;width:220px;transform-origin:bottom right;transition:transform .45s ease-out .5s}@media (max-width:640px){#water .contents#step2 .dry_food .pkg{width:56.91824%;margin:0 25.4717% 3.45912% 0}}#water .contents#step2 .dry_food .water{top:0;right:0;margin:32px 0 0;width:61px;height:86px;background:url(../images/common/water.png) no-repeat;background-size:100% auto;color:#fff;letter-spacing:1px;transform-origin:top center}@media (max-width:640px){#water .contents#step2 .dry_food .water{width:21.38365%;height:0;padding:30.18868% 0 0;margin:5.03145% 0 0}}#water .contents#step2 .dry_food .water p{position:absolute;top:0;left:0;width:100%;text-align:center;line-height:1;padding:41px 0 0}#water .contents#step2 .dry_food .water span.plus{font-size:21px}@media (max-width:640px){#water .contents#step2 .dry_food .water p{padding:69.11765% 0 0}#water .contents#step2 .dry_food .water span.plus{font-size:214%}}#water .contents#step2 .dry_food .water span.foodwater_num{font-size:23.5px}@media (max-width:640px){#water .contents#step2 .dry_food .water span.foodwater_num{font-size:239%}}#water .contents#step2 .dry_food .water span.percent{font-size:11px}#water .contents#step2 .dry_food_input{position:absolute;top:0;left:0;margin:198px 0 0 574px}@media (max-width:640px){#water .contents#step2 .dry_food .water span.percent{font-size:114%}#water .contents#step2 .dry_food_input{margin:50.9375% 0 0}#water .contents#step2 .dry_food_input .input{text-align:center}}#water .contents#step2 .dry_food_input .input{font-size:0;white-space:nowrap}#water .contents#step2 .dry_food_input .input .input_box,#water .contents#step2 .dry_food_input .input .sep,#water .contents#step2 .dry_food_input .input .txt,#water .contents#step2 .dry_food_input .input input{display:inline-block;vertical-align:middle}#water .contents#step2 .dry_food_input .input .txt{position:relative;margin:0 20px 0 0}#water .contents#step2 .dry_food_input .input .txt .about_water{width:57px;position:absolute;bottom:-39px;right:17px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input .txt{margin:0 6px 0 0}#water .contents#step2 .dry_food_input .input .txt .about_water{width:30.19802%;bottom:0;right:0;margin:0 8.91089% -21.28713% 0}}#water .contents#step2 .dry_food_input .input .txt.txt1{width:187px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input .txt.txt1{width:30.9375%}}#water .contents#step2 .dry_food_input .input .txt.txt2{width:190px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input .txt.txt2{width:31.5625%}}#water .contents#step2 .dry_food_input .input input{width:242px;height:113px;box-sizing:border-box;border:2px solid #c9c2b0;border-radius:10px;background:#fff;font-size:78.77px;color:#4a4542;text-align:center;letter-spacing:7px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input input{width:31.5625%;height:auto;font-size:787%;letter-spacing:5px}#water .contents#step2 .dry_food_input .input .input_box{width:31.5625%}#water .contents#step2 .dry_food_input .input .input_box input{width:100%}}#water .contents#step2 .dry_food_input .input .input_box .note{font-size:13px;font-weight:500;text-align:center;margin:13px 0 0;color:#666}@media (max-width:640px){#water .contents#step2 .dry_food_input .input .input_box .note{display:inline-block;font-size:220%;line-height:1.136;margin:4px 0 0}}#water .contents#step2 .dry_food_input .input .sep{font-size:54.6px;vertical-align:text-bottom;position:relative;top:40px;margin:0 0 0 6px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input .sep{width:.5em;font-size:546%;top:.5em;margin:0 0 0 3px}}#water .contents#step2 .dry_food_input .input:nth-last-child(1){margin:48px 0 0}#water .contents#step2 #dryfood_bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;overflow:hidden}#water .contents#step2.animate .dry_food .cat{transform:rotate(-30deg)}#water .contents#step2.animate .dry_food .pkg{transform:rotate(15deg)}#water .contents#step3{left:200%}#water .contents#step3 .inr h3 img{width:840px}@media (max-width:640px){#water .contents#step2 .dry_food_input .input:nth-last-child(1){margin:9px 0 0}#water .contents#step2 .dry_food_input .input:nth-last-child(1) .txt{vertical-align:baseline}#water .contents#step2 .dry_food_input .input:nth-last-child(1) .sep{top:0}#water .contents#step3{padding:16.25% 0 0}#water .contents#step3 .inr h3 img{width:88.28125%}}#water .contents#step3 .copy{font-size:16px;font-weight:500;line-height:1.875;text-align:center;margin:13px 0 0}@media (max-width:640px){#water .contents#step3 .copy{font-size:240%;line-height:1.583;margin:9px 0 0}}#water .contents#step3 .note{color:#666;font-size:14px;font-weight:500;line-height:1;text-align:center;margin:5px 0 0}#water .contents#step3 .wet_food{position:absolute;top:0;left:0;margin:167px 0 0 94px;width:443px}@media (max-width:640px){#water .contents#step3 .note{font-size:220%;line-height:1.454}#water .contents#step3 .wet_food{margin:101.71875% 0 0 21.875%;width:55.46875%}}#water .contents#step3 .wet_food .cat,#water .contents#step3 .wet_food .food,#water .contents#step3 .wet_food .pkg,#water .contents#step3 .wet_food .water{position:absolute}#water .contents#step3 .wet_food .pkg{top:0;left:0;margin:34px 0 0 162px;width:220px}@media (max-width:640px){#water .contents#step3 .wet_food .pkg{width:49.57746%;margin:7.60563% 0 0 36.61972%}}#water .contents#step3 .wet_food .food{top:0;left:0;margin:230px 0 0;width:185px}@media (max-width:640px){#water .contents#step3 .wet_food .food{width:41.69014%;margin:51.5493% 0 0}}#water .contents#step3 .wet_food .cat{top:0;left:0;margin:0 0 0 28px;width:169px}@media (max-width:640px){#water .contents#step3 .wet_food .cat{width:38.02817%;margin:0 0 0 6.47887%}}#water .contents#step3 .wet_food .water{top:0;right:31px;width:61px;height:86px;background:url(../images/common/water.png) no-repeat;background-size:100% auto;color:#fff;letter-spacing:1px;transform-origin:top center}@media (max-width:640px){#water .contents#step3 .wet_food .water{right:0;width:21.38365%;height:0;padding:30.18868% 0 0}}#water .contents#step3 .wet_food .water p{position:absolute;top:0;left:0;width:100%;text-align:center;line-height:1;padding:41px 0 0}#water .contents#step3 .wet_food .water span.plus{font-size:21px}@media (max-width:640px){#water .contents#step3 .wet_food .water p{padding:69.11765% 0 0}#water .contents#step3 .wet_food .water span.plus{font-size:214%}}#water .contents#step3 .wet_food .water span.foodwater_num{font-size:23.5px}@media (max-width:640px){#water .contents#step3 .wet_food .water span.foodwater_num{font-size:239%}}#water .contents#step3 .wet_food .water span.percent{font-size:11px}#water .contents#step3 .wet_food_input{position:absolute;top:0;left:0;margin:194px 0 0 565px}@media (max-width:640px){#water .contents#step3 .wet_food .water span.percent{font-size:114%}#water .contents#step3 .wet_food_input{margin:50.9375% 0 0}#water .contents#step3 .wet_food_input .input{text-align:center}}#water .contents#step3 .wet_food_input .input{font-size:0;white-space:nowrap}#water .contents#step3 .wet_food_input .input .input_box,#water .contents#step3 .wet_food_input .input .sep,#water .contents#step3 .wet_food_input .input .txt,#water .contents#step3 .wet_food_input .input input{display:inline-block;vertical-align:middle}#water .contents#step3 .wet_food_input .input .txt{position:relative;margin:0 20px 0 0}#water .contents#step3 .wet_food_input .input .txt .about_water{width:57px;position:absolute;bottom:-39px;right:28px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input .txt{margin:0 6px 0 0}#water .contents#step3 .wet_food_input .input .txt .about_water{width:28.90995%;bottom:0;right:0;margin:0 12.32227% -20.37915% 0}}#water .contents#step3 .wet_food_input .input .txt.txt1{width:201px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input .txt.txt1{width:32.8125%}}#water .contents#step3 .wet_food_input .input .txt.txt2{width:202px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input .txt.txt2{width:32.96875%}}#water .contents#step3 .wet_food_input .input input{width:242px;height:113px;box-sizing:border-box;border:2px solid #c9c2b0;border-radius:10px;background:#fff;font-size:78.77px;color:#4a4542;text-align:center;letter-spacing:7px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input input{width:31.5625%;height:auto;font-size:787%;letter-spacing:5px}#water .contents#step3 .wet_food_input .input .input_box{width:31.5625%}#water .contents#step3 .wet_food_input .input .input_box input{width:100%}}#water .contents#step3 .wet_food_input .input .input_box .note{font-size:13px;font-weight:500;text-align:center;margin:13px 0 0;color:#666}@media (max-width:640px){#water .contents#step3 .wet_food_input .input .input_box .note{display:inline-block;font-size:220%;line-height:1.136;margin:4px 0 0}}#water .contents#step3 .wet_food_input .input .sep{font-size:54.6px;vertical-align:text-bottom;position:relative;top:40px;margin:0 0 0 6px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input .sep{width:.5em;font-size:546%;top:.5em;margin:0 0 0 3px}}#water .contents#step3 .wet_food_input .input:nth-last-child(1){margin:48px 0 0}#water .contents#step3 #wetfood_bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;overflow:hidden}#water .contents#step4{left:300%}#water .contents#step4 .inr h3 img{width:635px}@media (max-width:640px){#water .contents#step3 .wet_food_input .input:nth-last-child(1){margin:9px 0 0}#water .contents#step3 .wet_food_input .input:nth-last-child(1) .txt{vertical-align:baseline}#water .contents#step3 .wet_food_input .input:nth-last-child(1) .sep{top:0}#water .contents#step4{padding:17.1875% 0 0}#water .contents#step4 .inr h3 img{width:79.6875%}}#water .contents#step4 .glass{width:300px;height:371px;position:absolute;top:0;left:0;margin:116px 0 0 227px}@media (max-width:640px){#water .contents#step4 .glass{width:159px;height:196px;left:50%;margin:80.3125% 0 0 -79.5px}}#water .contents#step4 .glass .glass_cover{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}#water .contents#step4 .glass .water{position:absolute;bottom:2px;left:.5%;z-index:0;width:99%;transition:height .2s ease-out}#water .contents#step4 .glass .water .cat{position:absolute;bottom:100%;left:0;z-index:0;width:100%}#water .contents#step4 .glass .water .cat img{width:173px;margin:0 auto}@media (max-width:640px){#water .contents#step4 .glass .water .cat img{width:92px}}#water .contents#step4 .glass .water .water_left,#water .contents#step4 .glass .water .water_right{position:absolute;top:0;z-index:1;width:50%;height:100%}#water .contents#step4 .glass .water .water_left{left:0;background:#05a9cc}#water .contents#step4 .glass .water .water_right{right:0;background:#1e96d1}#water .contents#step4 .glass .water #glass_water{position:absolute;top:-19px;left:0;z-index:1;width:100%}#water .contents#step4 .glass.animation .water .cat{animation:cat_flow 2s infinite}#water .contents#step4 .water_input{position:absolute;top:0;left:0;margin:138px 0 0 598px}@media (max-width:640px){#water .contents#step4 .water_input{width:47.34375%;margin:24.375% 0 0 22.96875%}}#water .contents#step4 .water_input .input_txt{width:233px;margin:0 0 0 51px}@media (max-width:640px){#water .contents#step4 .water_input .input_txt{width:84.15842%;margin:0 auto}}#water .contents#step4 .water_input .input{margin:37px 0 0;position:relative}#water .contents#step4 .water_input .input input{width:151px;height:121px;box-sizing:border-box;border:2px solid #c9c2b0;border-radius:10px;font-size:84px;color:#4a4542;letter-spacing:5px;text-align:center;position:relative;z-index:1}@media (max-width:640px){#water .contents#step4 .water_input .input{margin:13px 0 0}#water .contents#step4 .water_input .input input{width:49.83498%;height:auto;font-size:924%}}#water .contents#step4 .water_input .input .input_txt2{position:absolute;top:36px;left:82px;z-index:0;width:218px}@media (max-width:640px){#water .contents#step4 .water_input .input .input_txt2{top:0;left:0;width:73.59736%;margin:14.52145% 0 0 26.40264%}}#water .contents#step4 #water_bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;overflow:hidden}#water .contents#step4 #water_bg .obj_water{display:block;width:46px;height:66px;position:absolute;background:url(../images/common/water.png) no-repeat;background-size:100%}#water .contents#step5{left:400%;padding:188px 0 0}@media (max-width:640px){#water .contents#step4 #water_bg .obj_water{width:23px;height:33px}#water .contents#step5{padding:15.625% 0 0}#water .contents#step5 .result_wrap{font-size:100%}}#water .contents#step5 img{width:100%}#water .contents#step5 .result_wrap{position:relative}#water .contents#step5 .ogp{width:940px;margin:0 auto;box-shadow:0 10px 35px rgba(0,0,0,.15);position:relative}#water .contents#step5 .ogp .result_glass{position:absolute;top:153px;left:719px;z-index:1;color:#05a9cc}@media (max-width:640px){#water .contents#step5 .ogp{width:93.75%;box-shadow:none;font-size:100%}#water .contents#step5 .ogp .result_glass{width:100%;top:0;left:0;margin:51.5% 0 0;font-size:100%}}#water .contents#step5 .ogp .result_glass .result_txt{width:150px;position:relative}@media (max-width:640px){#water .contents#step5 .ogp .result_glass .result_txt{width:44.66667%;position:absolute;top:0;left:0;margin:11.16667% 0 0 45.66667%}}#water .contents#step5 .ogp .result_glass .glass{width:135px;margin:6px 0 0 8px;position:relative}@media (max-width:640px){#water .contents#step5 .ogp .result_glass .glass{width:30.66667%;margin:0 0 0 9.16667%;font-size:100%}}#water .contents#step5 .ogp .result_glass .glass .water_max,#water .contents#step5 .ogp .result_glass .glass .water_min{position:absolute;font-size:27px;color:#fff;text-align:center;line-height:1;right:57px}#water .contents#step5 .ogp .result_glass .glass .water_max{top:84px}@media (max-width:640px){#water .contents#step5 .ogp .result_glass .glass .water_max,#water .contents#step5 .ogp .result_glass .glass .water_min{font-size:386%;right:42.3913%}#water .contents#step5 .ogp .result_glass .glass .water_max{top:42.06642%}}#water .contents#step5 .ogp .result_glass .glass .water_min{top:128px}@media (max-width:640px){#water .contents#step5 .ogp .result_glass .glass .water_min{top:63.83764%}}#water .contents#step5 .ogp .result_img{position:relative;z-index:0}#water .contents#step5 .advice_btn{width:62px;position:absolute;top:0;right:26px;cursor:pointer}#water .contents#step5 .advice_btn img{width:100%}#water .contents#step5 .advice{position:absolute;top:-52px;right:15px;box-shadow:0 15px 45px rgba(0,0,0,.1);border-radius:15px;background:#fff;width:363px;padding:25px 22px;box-sizing:border-box;color:#05a9cc}@media (max-width:1200px){#water .contents#step5 .advice{right:45px}}@media (max-width:640px){#water .contents#step5 .advice{position:relative;top:auto;right:auto;box-shadow:none;border-radius:7.5px;font-size:100%;width:93.75%;padding:18px 0;margin:23px auto 0;display:block!important;opacity:1!important}}#water .contents#step5 .advice .advice_close{width:36px;position:absolute;top:-15px;right:-15px;cursor:pointer}#water .contents#step5 .advice p{position:relative;z-index:1}#water .contents#step5 .advice p.ttl{width:120px;margin:0 auto}#water .contents#step5 .advice p.txt{font-size:14px;font-weight:500;line-height:1.642;margin:5px auto 0;letter-spacing:-.06em}@media (max-width:640px){#water .contents#step5 .advice p.ttl{width:37.5%}#water .contents#step5 .advice p.txt{width:83.33333%;font-size:260%;line-height:1.769;margin:8px auto 0}}#water .contents#step5 .advice p.note{font-size:11px;line-height:1;margin:3px 0 0}#water .contents#step5 .advice::after{display:block;border-style:solid;border-width:0 30px 30px;border-color:transparent transparent #fff;transform:rotate(-45deg);position:absolute;bottom:3px;left:152px;z-index:0}@media (max-width:640px){#water .contents#step5 .advice p.note{width:83.33333%;font-size:220%;margin:3px auto 0}#water .contents#step5 .advice::after{transform:rotate(0);border-width:0 25px 25px;bottom:100%;left:50%;margin:0 0 -11px -25px}}#water .contents#step5 .note{font-size:11px;line-height:1.45;color:#888;text-align:center;margin:18px auto 0}@media (max-width:640px){#water .contents#step5 .note{width:90.625%;line-height:1.545;text-align:left;margin:10px auto 0;padding-left:1em;text-indent:-1em}}#water .contents#step5 .share{width:62px;position:absolute;bottom:0;right:26px;text-align:center}@media (max-width:640px){#water .contents#step5 .share{position:static;width:100%;margin:18px auto 0;font-size:0;white-space:nowrap}#water .contents#step5 .share::after{content:"";display:inline-block;width:0;height:100%;vertical-align:middle}#water .contents#step5 .share ul{display:inline-block;vertical-align:middle}}#water .contents#step5 .share ul li{font-size:14px;font-weight:500;line-height:1.1}@media (max-width:640px){#water .contents#step5 .share ul li{display:inline-block;font-size:12px;line-height:1;text-align:center}}#water .contents#step5 .share a{display:block;margin:12px 0 0}@media (max-width:640px){#water .contents#step5 .share a{display:inline-block;vertical-align:middle;width:42px;margin:0 0 0 12px}}#water .contents#step5 .btns{margin:20px auto 0}@media (max-width:640px){#water .contents#step5 .btns{width:65.625%;margin:16px auto 0}}#water .contents#step5 .btns ul{width:496px;margin:0 auto;text-align:center}#water .contents#step5 .btns ul::after{display:table;clear:both}#water .contents#step5 .btns ul li{display:block;float:right;margin:0 0 0 24px}@media (max-width:640px){#water .contents#step5 .btns ul{width:100%}#water .contents#step5 .btns ul li{float:none;margin:0}}#water .contents#step5 .btns ul li a{display:block;background:#f7771f;border-radius:27px;width:236px;height:54px;font-size:0;white-space:nowrap}#water .contents#step5 .btns ul li a::after{display:inline-block;width:0;height:100%;vertical-align:middle}@media (max-width:640px){#water .contents#step5 .btns ul li a{width:100%;white-space:normal;height:auto;border-radius:20px;padding:6.19048% 0}}#water .contents#step5 .btns ul li a img{display:inline-block;vertical-align:middle}#water .contents#step5 .btns ul li a img.again{width:143px}@media (max-width:640px){#water .contents#step5 .btns ul li a img.again{width:54.04762%}}#water .contents#step5 .btns ul li a img.back_top{width:160px}#water .contents#step5 .btns ul li:nth-last-child(1){float:none;margin:0}@media (max-width:640px){#water .contents#step5 .btns ul li a img.back_top{width:60.47619%}#water .contents#step5 .btns ul li:nth-last-child(1){margin:15px 0 0}}#water #water_modal{display:none;opacity:0;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:url(../images/water_modal/pattern.png) rgba(5,169,204,.95)}#water #water_modal .modal_wrap{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;text-align:center;font-size:0;white-space:nowrap}#water #water_modal .modal_wrap::after{display:inline-block;width:0;height:100%;vertical-align:middle}#water #water_modal .modal_wrap img{width:100%}#water #water_modal .modal_wrap .modal_inr{display:none;vertical-align:middle;box-sizing:border-box;border:4px solid #fff;border-radius:15px;position:relative;background:#fff;white-space:normal;padding:0 0 10px}#water #water_modal .modal_wrap .modal_inr .close_btn{position:absolute;top:-50px;right:-25px;width:62px;cursor:pointer}#water #water_modal .modal_wrap .modal_inr .close_btn span{display:block;font-size:16px;line-height:1;color:#fff}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr{border-radius:7.5px;border-width:2px;padding:0 0 13px}#water #water_modal .modal_wrap .modal_inr .close_btn{top:0;right:-2px;width:13.7931%;margin:-21.37931% 0 0}#water #water_modal .modal_wrap .modal_inr .close_btn span{font-size:11px}}#water #water_modal .modal_wrap .modal_inr .close_btn img{margin:5px 0 0}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr .close_btn img{margin:3px 0 0}}#water #water_modal .modal_wrap .modal_inr .txt{font-size:16px;font-weight:500;line-height:1;text-align:center;color:#ff6800;margin:18px auto 0}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr .txt{font-size:13px;line-height:1.294615;margin:15px auto 0;width:86.2069%;text-align:left}}#water #water_modal .modal_wrap .modal_inr .note{font-size:11.25px;line-height:1.545;color:#888;width:445px;margin:6px auto 0;text-align:left}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr .note{font-size:10px;line-height:1.524;width:86.2069%;margin:5px auto 0}}#water #water_modal .modal_wrap .modal_inr.dryfood{width:532px}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr.dryfood{width:90.625%}}#water #water_modal .modal_wrap .modal_inr.wetfood{width:485px}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr.wetfood{width:90.625%}}#water #water_modal .modal_wrap .modal_inr.wetfood .note{width:419px}#water.ie input{line-height:.5em;padding-bottom:0}#water.ie input:-ms-input-placeholder{color:#C9C2B0!important}#water .water_wrap{height:767px;padding:0 0 40px;background:url(../images/bg.png);position:relative;transition:height .3s ease-out;transform-origin:top left;overflow:hidden}@media (max-width:640px){#water #water_modal .modal_wrap .modal_inr.wetfood .note{width:86.2069%}#water .water_wrap{height:0;padding:165.3125% 0 0;transition:padding .3s ease-out}}#water .water_wrap .contents{position:absolute;top:0;left:0;width:100%;height:100%}#water .water_wrap .contents .inr{position:relative;z-index:1}#water.show_result .water_wrap{height:849px}@media (max-width:640px){#water.show_result .water_wrap{height:0;padding:305.9375% 0 0}}