*{line-height:1.4;}
section,p,dl,dd,dt,ul,li,span,div, input{box-sizing:border-box;}

body{padding:0;font-size:16px;margin:0;box-sizing:border-box;line-height:1.4;}
body { font-family: "M PLUS Rounded 1c"; }
body { background: repeating-linear-gradient(-45deg,#ffc4dd 0,#ffc4dd 20px,#fff 20px,#fff 40px); min-height:100vh; margin:0 auto;}
header{top:0;width:100%;height:30px;z-index:10;}

main{ width:480px; background:#fff;margin:0 auto;max-width:100%; box-shadow: 0px 0 10px rgba(0,0,0,0.4);padding-bottom:20px;}

@media screen and (max-width:768px) { 
  .modePC{display:none;};
}
@media screen and (min-width:769px) { 
  .modeSP{display:none;};
}

header{
  text-align:center;
  font-size:18px;
  font-weight:500;
  margin:0 auto;
  padding: 3px 0;
  background: #d57cff;
  color: #fff;
}
h1 {text-align:center;}
h1 img{
  width: 100%;
}
h2{
  background:#ff75af;
  color:#fff;
  text-align:center;
  font-size:18px;
  font-weight:500;
  margin:0px auto;
  box-sizing:border-box;
}
h3{
  font-size:18px;
  font-weight:500;
  padding:10px;
}
p{
  padding: 10px;
}
section{
  margin:0 auto;
  padding:0;
  max-width:480px;
  opacity: 1;
  animation: show 1s linear 0s;
  box-sizing:border-box;
}
button{
  display:block;
  width:80%;
  max-width:480px;
  margin:10px auto;
}
.bottomArea{
  width:100%;
  border-top:solid #bbb 1px;
  background-color: #000;
  position: fixed;
  padding:0;
  bottom:0;
  left:0;
  right:0;
}
.bottomArea button{
  padding:10px 0;
  border: none;
  border-radius: 5px;
  background:#900;
  color: #fff;
  font-weight:600;
}
.bottomArea button:focus{
  outline:0;
}
select{
  width: 100%;
  padding:10px 0;
}
button.bottom{
  position: fixed;
  padding:10px 0;
  bottom:0;
  left:0;
  right:0;
}
.taL{text-align: left;}
.taC{text-align: center;}
.taR{text-align: right;}
.off{
  display:none;
  opacity: 0;
}
dl{
  width:100%;
  
}
p{margin-bottom:10px;}
input{margin-bottom:10px;}
input{font-size:18px;}



@keyframes show{
  from{
      opacity: 0;
  }
  to{
      opacity: 1;
  }
}


/* スタート画面 */
body#start .nameInput dt{
  margin-top:40px;
  font-size:2rem;
  text-align: center;
  padding: 0px 10px;
}
body#start .nameInput dd{
  font-size:1.5rem;
  text-align: center;
  width:100%;
  padding: 0px 10px;
}
body#start .nameInput dd input{
  border-radius: 5px;
  border: solid #ccc 1px;
  padding: 10px;
  margin-top:20px;
  width:60%;
  margin-left:10px;
}
body#start input.start{
  border-radius: 50px;
  border:solid #ff75af 6px;
  color:#ff75af;
  font-weight:800;
  height:100px;
  width:100px;
  text-align: center;
  margin:20px auto;
  display:block;
  background:#fff;
  transition:all 0.5s ease;
  cursor : pointer;
}
body#start input.start:hover{
  background: #ff75af;
  color:#fff;
}
body#start input.start:focus{
  outline:0;
}
a#tweet {
  background:#00acee;
  color:#fff;
  border-radius:5px;
  padding:5px;
  text-decoration:none;
}
a#facebook {
  background:#3B5998;
  color:#fff;
  border-radius:5px;
  padding:5px;
  text-decoration:none;
}
a#tweet2 {
  display:block;
  width:60%;
  margin:10px auto;
  background:#00acee;
  color:#fff;
  border-radius:5px;
  padding:5px;
  text-decoration:none;
}
dl.history{
  padding:0 10px;
}
/* ゲーム描画 */
#game section .mode1 #contents{
  background:#3072ff;
}

section#gameArea{
  background:#4e75d9;
  height:340px;
  padding:20px 0;
}
div#stage{
  display: block;
  width: 300px;
  height: 300px;
  position: relative;
  background:#8de3bc;
  margin: auto;
  border-radius: 10px;
}
@media screen and (max-width:768px) { 
  div#stage .flickinfo{
    opacity: 0.5;
    width:60%;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (min-width:769px) { 
  div#stage .flickinfo{
    display:none;
  }
}
img.furbImg{
  width:30px;
  image-rendering:pixelated;
  position: absolute;
/*  transition:top 0.2s ease,left 0.2s ease;*/
}
.timeArea{
  padding:5px;
  display:flex;
  flex-wrap:wrap;
}
div#timeTitle{
  color:#ff75af;
  text-align:center;
  font-family: "Nico Moji";
  width:20%;
}
div#timeBarBack{
  width:70%;
  height:20px;
  position:relative;
  padding:0;
}
div#timeBar{
  position:absolute;
  width:100%;
  height:20px;
  background: linear-gradient(0deg, #f88, #fcc, #f66);
  border-radius:10px;
  border:solid 1px #666;
  transition:all 0.2s ease;
}
div#timeBar2{
  position:absolute;
  width:100%;
  height:20px;
  background: #666;
  border-radius:10px;
  border:solid 1px #666;
}
div.buttonArea ul.buttonList{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
div.buttonArea ul li{
}
div.buttonArea ul li.list100{
  width:100%;
  text-align:center;
}
div.buttonArea button{
  border-radius: 10px;
  border:solid #ff75af 6px;
  color:#ff75af;
  font-weight:800;
  height:60px;
  width:60px;
  text-align: center;
  margin:0px auto;
  display:block;
  background:#fff;
  transition:all 0.5s ease;
  cursor : pointer;
}

/*スマホではボタンは固定*/
@media screen and (max-width:768px) { 
  .buttonArea{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    opacity:.5;
  }
}
/* PCではpadding大きめに */
@media screen and (min-width:769px) { 
  div.buttonArea{
    padding:20px;
  }
}
div.buttonArea button:hover{
  background: #ff75af;
  color:#fff;
}
div.buttonArea button:focus{
  outline:0;
}
div.buttonArea ul li.listL button{
  margin:0 10px 0 auto;
  height:120px;
}
div.buttonArea ul li.listR button{
  margin:0 auto 0 10px;
  height:120px;
}

div.info{
  position: relative;
}
#feed{position: absolute;}

dl.infoDl{
  display: flex;
  background:#ff75af;
  color:#fff;
  justify-content: space-between;
  font-family: "Nico Moji";
}
dl.infoDl dt{
  margin-left:20px;
}
dl.infoDl dd{
  margin-right:20px;
}
p.end{
  color:#fff;
  text-align:center;
  font-family: "Nico Moji";
  width:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* ゲーム結果 */

#result dl.scoreArea{
  margin:10px auto;
}
#result dl.scoreArea dt{
  font-size:16px;
  text-align: center;
}
#result dl.scoreArea dd{
  font-size:20px;
  font-weight:600;
  text-align: center;
}
div.snsArea{
  margin:20px auto 40px;
  text-align: center;
}
#result .gameButtonList{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:20px auto;
}
#result .gameButtonList li{
  width: 45%;
  margin:5px;
}
#result .gameButton{
  display:block;
  border-radius: 20px;
  border:solid #ff75af 6px;
  color:#ff75af;
  font-weight:800;
  text-align: center;
  margin:5px auto;
  background:#fff;
  cursor : pointer;
  padding:5px 5px;
  text-decoration:none;
  transition:all 1s ease;
}
#result .gameButton:hover{
  background: #ff75af;
  color:#fff;
  transition:all 0.2s ease;
}
/*スマホではボタンは縦*/
@media screen and (max-width:768px) { 
  #result .gameButtonList li{
    width:100%;
  }
}