@charset "utf-8";
/* ************************************************************
  sim06.css 
  ver 1 // 2022.12.26
************************************************************ */

/* simulator06 */
.sim06_stage               {position:relative;}
.sim06_stage1              {display:block;}
.sim06_stage2              {display:none;}
.sim06_stage3              {display:none;}
.sim06_stage4              {display:none;}
.sim06_head_sub            {left:265px; top:9px;}
.sim06_input_word          {width:40px; height:40px; background-color:transparent; background-repeat:no-repeat; background-position:center; border-radius:4px; text-align:center;}
.sim06_input_word1         {background-image:url(../img/sim06/input_word1.png);}
.sim06_input_word2         {background-image:url(../img/sim06/input_word2.png);}
.sim06_input_word3         {background-image:url(../img/sim06/input_word3.png);}
.sim06_input_word4         {background-image:url(../img/sim06/input_word4.png);}
.sim06_input_word5         {background-image:url(../img/sim06/input_word5.png);}
.sim06_input_word6         {background-image:url(../img/sim06/input_word6.png);}
.sim06_input_word7         {background-image:url(../img/sim06/input_word7.png);}
.sim06_input_word8         {background-image:url(../img/sim06/input_word8.png);}
.sim06_input_word9         {background-image:url(../img/sim06/input_word9.png);}
.sim06_input_word10        {background-image:url(../img/sim06/input_word10.png);}
.sim06_input_word11        {background-image:url(../img/sim06/input_word11.png);}
.sim06_input_word12        {background-image:url(../img/sim06/input_word12.png);}
.sim06_input_word13        {background-image:url(../img/sim06/input_word13.png);}
.sim06_input_word14        {background-image:url(../img/sim06/input_word14.png);}
.sim06_input_word15        {background-image:url(../img/sim06/input_word15.png);}
/* stage1 */
.sim06_s1_catch            {left:588px; top:51px;}
.sim06_s1_selmvs_area      {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; left:15px; top:60px; width:540px; height:530px; padding:16px 20px; background-color:#fff; border-radius:20px; box-sizing:border-box;}
.sim06_s1_selmv_btn        {position:relative; width:160px; height:90px; cursor:pointer;}
.sim06_s1_selmv_btn>img,
.sim06_s1_selmv_btn>span   {position:absolute; left:0; top:0;}
.sim06_s1_selmv_reset_area {left:535px; top:500px; width:150px; height:90px; padding:9px 9px 0; background-color:#fff; border-radius:0 20px 20px 0; box-sizing:border-box;}
.sim06_s1_selmv_reset_btn  {cursor:pointer;}
.sim06_s1_movie_area       {left:588px; top:182px; width:420px; height:245px;}
.sim06_s1_movie_poster     {width:400px;}
.sim06_s1_go_edit_area     {left:704px; top:500px; width:292px; height:95px;}
.sim06_s1_go_edit_btn      {opacity:.2;}
.sim06_s1_screen_btns      {width:400px; height:225px;}
.sim06SelectedMovie>span   {width:100%; height:100%; border:5px solid #0402fd; box-sizing:border-box;}
.sim06GoEditActive .sim06_s1_go_edit_btn{cursor:pointer; opacity:1;}

/* stage2 */
.sim06_s2_head_sub         {display:none;}
.sim06_s2_catches          {left:640px; top:110px;}
.sim06_s2_cath             {display:none;}
.sim06_s2_movie_area       {left:15px; top:45px;}
.sim06_s2_movie_poster     {width:576px;}
.sim06_s2_movie_logo_area  {right:16px; top:16px;}
.sim06_s2_conpane_btns     {width:307px;}
.sim06_s2_conpane_play     {display:none;}
.sim06_s2_edit_area        {left:22px; top:454px; width:980px; height:165px; padding:0 30px; background-color:#fff; border-radius:20px; box-sizing:border-box;}
.sim06_s2_edit_area::before,
.sim06_s2_edit_area::after {position:absolute; bottom:0; width:76px; height:45px; background-repeat:no-repeat; content:"";}
.sim06_s2_edit_area::before{left:0; background-image:url(../img/sim06/s2a_mv_edit_icn_start.png);}
.sim06_s2_edit_area::after {right:0; background-image:url(../img/sim06/s2a_mv_edit_icn_end.png);}
.sim06_s2_edit_movies      {position:relative; display:flex; justify-content:space-between; margin:15px 0 0;}
.sim06_s2_edit_movie_box   {position:relative;}
.sim06_s2_edit_movie_box:nth-child(-n+4)::after{position:absolute; right:-24px; top:50%; width:17px; height:30px; background-image:url(../img/sim06/s2a_mv_edit_icn_ar.png); background-repeat:no-repeat; content:""; transform:translateY(-50%);}
.sim06_s2_edit_btns        {display:flex; justify-content:space-between; position:relative; height:50px; margin:5px 0 0;}
.sim06_s2_edit_btn_box     {display:none; position:relative; width:160px;}
.sim06_s2_edit_btn         {position:absolute; top:0; cursor:pointer;}
.sim06_s2_edit_btn_left    {left:10px;}
.sim06_s2_edit_btn_right   {right:10px;}
.sim06_s2_go_select_area   {display:none; left:764px; top:394px; width:212px; height:75px; cursor:pointer;}
.sim06_s2_go_edit_area     {display:none; left:631px; top:363px; width:362px; height:75px; cursor:pointer;}
.sim06_s2_go_save_read_area{top:5px; width:152px; height:75px; opacity:.2;}
.sim06_s2_go_save_area     {left:628px;}
.sim06_s2_go_read_area     {left:788px;}
.sim06_s2_go_sample_area   {display:none;}
.sim06_s2_go_sample_btn    {display:none; cursor:pointer;}
.sim06_s2_go_sample1_area  {left:628px; top:277px; width:182px; height:75px;}
.sim06_s2_go_sample2_area  {left:812px; top:277px; width:182px; height:75px;}
/* stage2a: s2edit(動画並べる) */
.sim06_stage2a .sim06_s2edit              {display:block;}
.sim06_stage2a .sim06_s2_go_save_read_area{opacity:1; cursor:pointer;}
/* stage2b: s2sample1(サンプル1) */
.sim06_stage2b .sim06_s2sample1           {display:block;}
/* stage2c: s2sample2(サンプル2) */
.sim06_stage2c .sim06_s2sample2           {display:block;}
/* stage2d: s2friend(みんなの映像) */
.sim06_stage2d .sim06_s2friend            {display:block;}

/* stage3 */
.sim06_s3_box              {left:50%; top:90px; width:800px; height:470px; padding:46px 0 0; background-color:#fff; border-radius:20px; box-sizing:border-box; transform:translateX(-50%);}
.sim06_s3_box_hd           {text-align:center;}
.sim06_s3_box_words        {display:flex; justify-content:center; align-items:center; width:400px; height:85px; margin:36px auto 0; background-color:#fff; border:5px solid #999; box-sizing:border-box;}
.sim06_s3_box_lead         {margin:27px 0 0; text-align:center;}
.sim06_s3_go_edit_area     {width:432px; height:95px; margin:21px auto 0; cursor:pointer;}

/* stage4 */
.sim06_s4_box              {left:50%; top:60px; width:840px; height:540px; padding:27px 0 0; background-color:#fff; border-radius:20px; box-sizing:border-box; transform:translateX(-50%);}
.sim06_s4_box_hd           {text-align:center;}
.sim06_s4_box_lead         {margin:36px 66px 0;}
.sim06_s4_box_input        {display:flex; justify-content:space-between; margin:27px 54px 0;}
.sim06_s4_input_col:nth-child(1){width:380px; margin-top:12px;}
.sim06_s4_input_col:nth-child(2){width:308px;}
.sim06_s4_input_frames     {display:flex; justify-content:space-between;}
.sim06_s4_input_frame      {display:flex; justify-content:center; align-items:center; position:relative; width:65px; height:85px; background-color:#ccc; border:5px solid #999; box-sizing:border-box;}
.sim06_s4_input_frame_done {background-color:#fff;}
.sim06_s4_input_frame_act  {position:relative; background-color:#fff;}
.sim06_s4_input_reset      {width:182px; margin:-80px 0 0 153px; cursor:pointer;}
.sim06_s4_input_btns       {display:flex; justify-content:space-between; flex-wrap:wrap; height:;}
.sim06_s4_input_btn        {position:relative; width:60px; height:64px; background-image:url(../img/sim06/s4_input_btn.png); background-repeat:no-repeat; cursor:pointer;}
.sim06_s4_input_btn .sim06_input_word{position:absolute; left:50%; top:50%; transform:translate(-50%, -22px);}
.sim06_s4_go_btns          {display:flex; justify-content:space-between; margin:24px 78px 0;}
.sim06_s4_go_btns>div      {width:332px; height:115px;}
.sim06_s4_go_edit_area     {cursor:pointer;}
.sim06_s4_go_friend_area   {opacity:.2;}
.sim06SelectedWord         {cursor:default;}
.sim06SelectedWord>span    {background-color:#fffeb3;}
.sim06GofriendActive       {cursor:pointer; opacity:1;}
.sim06AllSelectedWords>div {cursor:default;}
.sim06_s4_input_frame_act::after{position:absolute; left:50%; bottom:9px; width:42px; height:8px; background-color:#ff7631; border-radius:4px; transform:translateX(-50%); content:"";}
.sim06_s4_input_frame_act::after{animation:sim04s4Flash 1.2s ease .6s infinite;}
@keyframes sim04s4Flash{
	0%,100%{opacity:1;}
	50%{opacity:0;}
}