*{ padding:0; margin:0; font-family:Meiryo,"Meiryo UI","Microsoft JhengHei UI","Microsoft JhengHei",sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
a{ -webkit-tap-highlight-color:transparent; border:none; }
a img{ border:none; }
a:link,a:visited{ color:#000; text-decoration:none; }
a:hover,a:active{ color:#000; text-decoration:none; }
html,body{ height:100%; overflow:hidden}
body{ font-family:Meiryo,"Meiryo UI","Microsoft JhengHei UI","Microsoft JhengHei",sans-serif; background:#f9f0e1 url(../images/bg.png) no-repeat center bottom/ auto 100%; }
.txthide{ text-indent:-999%; overflow:hidden; white-space:nowrap; }
/*換背景*/
body.sty_1{ background:#f9f0e1 url(../images/bg_sty1.png) repeat-x center bottom/ contain; }


/*選單 nav*/
.nav{ width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(200,65,55,.95); z-index:99999; top:-100%; }
.nav.show{ top:0; }
.nav .inner{ max-width:700px; width:100%; max-height:400px; left:50%; top:100px; transform:translateX(-50%); -webkit-transform:translateX(-50%); position:absolute; padding:0px 5%; }
.nav .inner li{ width:100%; height:70px; list-style:none; margin-bottom:30px; text-align:center; line-height:70px; font-size:28px; }
.nav .inner li a{ color:#fff; display:block; text-decoration:none; background:#ffb748; border-radius:10px;/*border:1px solid #000; */ }
.nav .inner li a span{ width: 150px; height: 60px; display: inline-block; background:url(../images/logo_coworker.png) no-repeat center center ; background-size: 100% auto; vertical-align: -16px; margin-left: 10px; margin-right: 10px; }
.nav .inner li a:hover{ background:#c57312; }
.nav .btn_close{ background:url(../images/btn_close.png) no-repeat; width:42px; height:42px; position:absolute; right:30px; top:30px; cursor:pointer; }

/*結構*/
.wrapper_box{ position:relative; height:100%; transition:opacity 1s; }
.header{ position:fixed; top:0; width:100%; height:80px; background:#c44137; z-index:55; }
.header .main_logo{ width:550px; height:60px; background:url(../images/logo.png) center no-repeat; background-size:100% auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.header .main_logo a{ width:49%; display:inline-block; height:100%; }
.header .btn_open{ position:absolute; top:28px; right:30px; background:url(../images/btn_open.png) no-repeat; width:52px; height:36px; cursor:pointer; }
.wrapper{ height:100%; }

@media (max-width:767px){ 
body{ background-image:url(../images/bg_m.png); background-position:center center; background-size: cover; }
body.sty_1{ background:#f9f0e1 url(../images/bg_sty1_m.png) repeat-x center bottom/auto 100%; }
.header{ height:60px; background-size:70% auto; background-position:20px center; }
.header .main_logo{ width:80%; left:0; transform: translate(10px, -50%); }
.header .main_logo a{ width:48%; }
.header .btn_open{ top:18px; right:10px; width:35px; height:30px; background-size:85% auto; }
.nav .btn_close{ width:35px; height:35px; right:15px; top:15px; background-size:85% auto; }
.nav .inner li{ margin-bottom:20px; line-height:45px; height:45px; font-size:22px; }
.nav .inner li a span{ width:120px; height:35px; vertical-align:-10px; }
}

/*內容*/
.title{ background:url(../images/title_1.png) no-repeat center/auto 100%; max-width:550px; max-height:80px; text-indent:-999%; overflow:hidden; white-space:nowrap; margin:10px auto 20px; height:15%; }
.btn{ display:inline-block; width:100%; height:100%; text-indent:-999%; overflow:hidden; white-space:nowrap; border:none; }
.step{ height:100%; text-align:center; position:relative; display:none; }
.step .inner{ text-align:center; width:100%; height:100%; max-width:750px; max-height:calc(100% ); padding-top:30px; z-index:5; position:relative; margin:0 auto; }

/* step_0 */
.step.step_0 .txt{ margin-bottom:3%; height:15%; max-height:90px; background:url(../images/image_3.png)no-repeat center/ auto 100%; text-indent:-9999px; }
.btn.step_0_btn{ width:100%; max-width:495px; max-height:550px; background:url(../images/btn_step0.png)no-repeat center top/ auto 100%;  height:50%; position:relative; }
.step_0_btn::before{ content:""; display:block; width:140px; height:16%; background:url(../images/cloud_1.png) no-repeat center top/ auto 100%; animation:flow1 3s infinite; position:absolute; right:5%; top:5%; }
.step_0_btn::after{ content:""; display:block; width:140px; height:16%; background:url(../images/cloud_2.png) no-repeat center top/ auto 100%; animation:flow2 3s infinite; position:absolute; left:6%; bottom:16%; }

@keyframes flow1{ 
0%{ transform:translateX(0%); }
50%{ transform:translateX(20%); }
100%{ transform:translateX(0%); }
}
@keyframes flow2{ 
0%{ transform:translateX(0%); }
50%{ transform:translateX(-20%); }
100%{ transform:translateX(0%); }
}

/* step_1 */
.btn.step_1_btn{ width:120px; height:160px; background:url(../images/btn_step1.png)no-repeat center/100% auto; position:relative; top:-50px; }

.step_1 .visual_1{ max-width:400px; max-height:550px; margin:0 auto; background:url(../images/desk.png) no-repeat center top/auto 100%; height:70%; position:relative; }
.step_1 .visual_1 .vase{ width:64%; height:15%; background:url(../images/vase.png) no-repeat center/auto 100%; position:absolute; left:19%; top:25%; transform:translateY(-40px); opacity:0; animation:move1 1.5s forwards 0.5s; }
.step_1 .visual_1 .supply{ width:64%; height:11%; background:url(../images/supply.png) no-repeat center/auto 100%; position:absolute; left:18%; top:46%; transform:translateY(40px); opacity:0; animation:move1 1.5s forwards 1.3s; }
.step_1 .visual_1 .guide{ width:240px; height:240px; background:url(../images/guide.png) no-repeat center/auto 100%; position:absolute; top:15%; left:50%; transform:translateX(-50%); opacity:0; animation:show 10s 3s; z-index:100; }

@keyframes move1{ 
to{ transform:translateY(0px); opacity:1; }
}
@keyframes show{ 
from{ opacity:1; }
to{ opacity:1; }
}

/* step_2 */
.step_2 .txt_60{ width:280px; max-width:70%; line-height:1.4; font-size:22px; background:rgba(196,65,55,.95); border-radius:5px; color:#fff; position:absolute; left:50%; top:35%; transform:translateX(-50%); z-index:100; padding:10px; }
.step_2 .txt_60 span{ color:#cacd92; font-weight:bold; }
.btn.step_2_btn{ width:120px; height:160px; background:url(../images/btn_step2.png)no-repeat center/100% auto; position:relative; top:-50px; }
.step_2 .visual_1{ max-width:400px; max-height:550px; margin:0 auto; background:url(../images/desk.png) no-repeat center top/auto 100%; height:70%; position:relative; }
.step_2 .visual_1 .vase{ width:63%; height:15%; background:url(../images/vase.png) no-repeat center/auto 100%; position:absolute; left:20%; top:25%; }
.step_2 .visual_1 .supply{ width:63%; height:11%; background:url(../images/supply.png) no-repeat center/auto 100%; position:absolute; left:20%; top:46%; }

/* step_3 */
.step_3 .btn_restart{ background:url(../images/btn_1.png) no-repeat center/auto 100%; ; width:120px; height:40px; margin-top:20px; }
.step_3 .btn_result{ background:url(../images/btn_2.png) no-repeat center/auto 100%; width:120px; height:40px; margin-top:20px; cursor:pointer; }
.step_3 .block{ display:none; height:100%; margin-top:3%; }
.step_3 .block .pic{ margin:0 auto; max-width:250px; max-height:340px; height:50%; margin-bottom:2%; }
.step_3 .block.style_1 .pic{ background:url(../images/result_1.png) center top no-repeat; background-size:auto 100%; }
.step_3 .block.style_2 .pic{ background:url(../images/result_2.png) center top no-repeat; background-size:auto 100%; }
.step_3 .block.style_3 .pic{ background:url(../images/result_3.png) center top no-repeat; background-size:auto 100%; }

/* overlay */
.overlay{ width:100%; height:100%; background:#f9f0e1 url(../images/bg.png) no-repeat center/ auto 100%; position:absolute; left:0px; top:0px; z-index:150; display:none; }
.overlay .gif_ani{ height:100vh; display:flex; justify-content:center; align-items:center; }
.overlay .gif_ani .ani_1{ display:block; width:200px; height:200px; background:url(../images/ani1.png)no-repeat center/100%; animation:shake 0.3s infinite; display:none; }
.overlay .gif_ani .ani_2{ display:block; width:200px; height:200px; background:url(../images/ani2.png)no-repeat center/ 100%; animation:shake 0.3s infinite; display:none; }

@keyframes shake{ 
0%{ transform:translate(0,0) rotate(0deg); }
25%{ transform:translate(6px,6px) rotate(6deg); }
50%{ transform:translate(0,0) rotate(0eg); }
75%{ transform:translate(-6px,6px) rotate(-6deg); }
100%{ transform:translate(0,0) rotate(0deg); }
}

/*result.htm*/
.block_1{ height:100%; margin-top:20px; text-align:center; padding:1%; text-align:center; }
.block_1 .pic{ display:inline-block; max-height:60%; overflow:hidden; height:100%; }
.block_1 .pic img{ height:100%; width:auto; max-height:410px; box-shadow:3px 3px 3px #9d6839; }
.block_1 .btn_3{ background:url(../images/btn_3.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; display:block; margin:20px auto; }

/*share.htm*/
.scrollbar_wrap{ max-width:660px;/*max-height:68%; */  max-height:calc(100% - 250px); height:100%; margin:0 auto; overflow:auto; -webkit-overflow-scrolling:touch; margin-bottom:2%; background-color:rgba(255,255,255,.8); border:3px solid #ffcd51; }
.text_area{ height:100%; margin:0 auto; text-align:left; color:#333; padding:20px 10px; line-height:1.8; }
.text_area h3{ font-weight:normal; color:#c22121; font-size:20px; }
.text_area h4{ font-weight:normal; color:#c22121; font-size:20px; margin-bottom:10px; }
.btn_area{ margin:10px; }
.btn_area .btn{ margin:5px; }
.btn_area .btn_1{ background:url(../images/btn_1.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; }
.btn_area .btn_4{ background:url(../images/btn_4.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; }
.btn_area .btn_5{ background:url(../images/btn_5.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; }
.btn_area .btn_6{ background:url(../images/btn_6.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; }
.btn_area .btn_7{ background:url(../images/btn_7.png) no-repeat center/ auto 100%; width:120px; height:40px; margin-top:20px; }

@media (max-width:1024px){ 
.btn.step_0_btn{width:100%; }
}

@media (max-width:767px){ 
.title{ margin:10px auto; padding-bottom:16%; background-size:85% auto; width:100%; height:0px; }
.step .inner{ max-height:calc(100%); padding:0px 10px; padding-top:70px; }
.step:after{ width:100%; height:130px; background-size:auto 90%; bottom:40px; }
.step .txt{ height:0; max-height:120px; padding-bottom:17%; background-size:80% auto; margin:0 auto; margin-bottom:5%;}
.step.step_0 .txt{background-size:96% auto;}
.btn.step_0_btn{margin-top:20px;}
.step .txt_60{ font-size:18px; }
.step_3 .block .pic{ max-height:240px; }

/* overlay */
.overlay{ background:url(../images/bg_m.png) no-repeat center/cover; }

/*result.htm*/
.block_1{ max-height:calc(100% - 50px); height:100%; margin-top:60px; padding-top:.5%; }
.block_1 .pic img{ width:100%; height:auto; }
.block_1 .pic{ display:inline-block; height:auto; }
.block_1 .btn_3{ background-size:contain; width:100px; height:30px; margin-top:10px; }
.block_1 .scrollbar_wrap{ max-height:calc(100% - 200px); margin:0 10px 5px 10px; }
.btn_area .btn{ margin:5px; }
.block_1 .btn_area .btn_1{ background-size:contain; width:100px; height:30px; }
.block_1 .btn_area .btn_4{ background-size:contain; width:100px; height:30px; }
.block_1 .btn_area .btn_5{ background-size:contain; width:100px; height:30px; }
.block_1 .btn_area .btn_6{ background-size:contain; width:100px; height:30px; }
.block_1 .btn_area .btn_7{ background-size:contain; width:100px; height:30px; }
}

@media (max-width:320px){ 
.title{ margin:10px auto 0px; }
.step.step_0 .txt{ margin-bottom:0%; height:13%; }
}


/* list.htm */
body.sty_list{ background:#ece0d2 url(../images/bg_list.png) no-repeat center bottom/ auto 100%; }
.wrapper{ padding-top:73px; position:relative; }
.menu_1{ width:100%; height:70%; max-width:750px; max-height:calc(100%); z-index:5; position:relative; margin:0 auto; }
.menu_1::before{ content:""; display:block; width:10%; height:20%; background:url(../images/lantern_4.png) no-repeat center top/auto 100%; position:absolute; left:32%; top:-10px; pointer-events: none;}
.menu_1::after{ content:""; display:block; width:15%; height:30%; background:url(../images/lantern_0.png) no-repeat center top/auto 100%; position:absolute; left:55%; top:-10px; pointer-events: none;}
.menu_1 a{ display:block; text-indent:-9999px; }
.menu_1 a:nth-of-type(1){ width:22%;  height:70%; background:url(../images/lantern_1.png) no-repeat center top/ auto 100%; position:absolute; left:16%; top:-15px; }
.menu_1 a:nth-of-type(2){ width:22%;  height:85%; background:url(../images/lantern_2.png) no-repeat center top/ auto 100%; position:absolute; left:41%; top:0px; }
.menu_1 a:nth-of-type(3){ width:22%;  height:70%; background:url(../images/lantern_3.png) no-repeat center top/ auto 100%; position:absolute; left:66%; top:0px; }
.deco{ width:100%; height:35%; background:url(../images/deco_1.png) no-repeat center/auto 100%; position:absolute; left:50%; bottom:0px; transform:translateX(-50%); animation:move 1.5s ease-in-out infinite alternate; }

@keyframes move{ 
to{ transform:translate(-50%,20px); }
}

@media (max-width:1280px){ 
.menu_1{ max-width:550px; }
}

@media (max-width:1024px){ 
.menu_1::before{ width:15%; left:27%; }
.menu_1::after{ width:20%; left:59%; }
.menu_1 a:nth-of-type(1){ width:32%; left:0%; }
.menu_1 a:nth-of-type(2){ width:32%; left:37%; }
.menu_1 a:nth-of-type(3){ width:32%; left:72%; }
}

@media (max-width:767px){ 
body.sty_list{ background:#ece0d2 url(../images/bg_list_m.png) no-repeat center bottom/ cover; }
.wrapper{ padding-top:60px; }
.menu_1::before{ left:30%; top:-15px; }
.menu_1::after{ left:57%; top:-25px; }
.menu_1 a:nth-of-type(1){ width:25%;  left:10%; }
.menu_1 a:nth-of-type(2){ width:25%;  left:39%; }
.menu_1 a:nth-of-type(3){ width:25%;  left:68%; }
.deco{ height:32%; }
@keyframes move{ 
  to{ transform:translate(-50%,15px); }
}

}

@media (max-width:480px){ 
  .menu_1 a:nth-of-type(1){ width:28%; }
  .menu_1 a:nth-of-type(2){ width:28%; }
  .menu_1 a:nth-of-type(3){ width:28%; }
}