@charset "UTF-8";

/*--------------------------------------------------
   Local Module
-------------------------------------------------- */


/*--------------------------------------------------
   Style
-------------------------------------------------- */


/* ---------- Enquete Copy ---------- */ 

#enqueteCopy { margin: 0 5px; }


/* ---------- Question Unit ---------- */ 

#enqueteGraph { margin-top: 20px; letter-spacing: -.40em; }
#enqueteGraph .graphUnit { width: 210px; height: 410px; display: inline-block; vertical-align: top; margin-left: 15px; border: 1px solid  #ddd; letter-spacing: normal;
border-radius: 3px;
}
#enqueteGraph .graphUnit:nth-child(3n+1) { margin-left: 0; }
#enqueteGraph .graphUnit:nth-child(4),
#enqueteGraph .graphUnit:nth-child(5),
#enqueteGraph .graphUnit:nth-child(6) { height: 460px; margin-top: 15px; }
#enqueteGraph .graphUnit .graphTitle { padding: 10px; background: #D7F5FA; font-weight: bold; font-size: 14px;
box-shadow: 0 0 0 1px #d6e9ec;
border-radius: 3px 3px 0 0;
}
#enqueteGraph .graphUnit .graph { width: 212px; margin-top: 15px; text-align: center; }
#enqueteGraph .graphUnit .graph .imgcanvas { }
#enqueteGraph .graphUnit .graphList { padding: 10px 10px 0; }
#enqueteGraph .graphUnit .graphList .list { position: relative; overflow: hidden; }
#enqueteGraph .graphUnit .graphList .list + .list { padding-top: 7px; }
#enqueteGraph .graphUnit .graphList .list .item { width: 70%; float: left; font-size: 12px; text-indent: -1.2em; padding-left: 1.2em; }
#enqueteGraph .graphUnit .graphList .list .item:before { content: ''; width: 10px; height: 10px; display: inline-block; margin-right: 5px; background: #888; }
#enqueteGraph .graphUnit .graphList .list:nth-child(1) .item:before { background: #99C5DB; }
#enqueteGraph .graphUnit .graphList .list:nth-child(2) .item:before { background: #EDB39C; }
#enqueteGraph .graphUnit .graphList .list:nth-child(3) .item:before { background: #D3E88E; }
#enqueteGraph .graphUnit .graphList .list:nth-child(4) .item:before { background: #91CFC8; }
#enqueteGraph .graphUnit .graphList .list:nth-child(5) .item:before { background: #F2DF74; }
#enqueteGraph .graphUnit .graphList .list:nth-child(6) .item:before { background: #B8BBCF; }
#enqueteGraph .graphUnit .graphList .list:nth-child(7) .item:before { background: #EDB86B; }
#enqueteGraph .graphUnit .graphList .list:nth-child(8) .item:before { background: #D4A7CF; }
#enqueteGraph .graphUnit .graphList .list .percent { width: 2.5em; float: right; text-align: right; }
#enqueteGraph .graphUnit .graphList .list .percent em { }


/* ---------- enqueteComment ---------- */ 

#enqueteComment { margin-top: 20px; }
#enqueteComment .title { padding: 10px; background: #D7F5FA; border: 1px solid  #d6e9ec; font-size: 17px; font-weight: bold;
border-radius: 3px; }
#enqueteComment .commentUnit { display: table; }
#enqueteComment .commentUnit + .commentUnit { vertical-align: middle; background: url(../../imageFile/line_dot_1px_aaa_pitch2.png) left top repeat-x; }
#enqueteComment .commentUnit .item,
#enqueteComment .commentUnit .comment { display: table-cell; padding: 15px 0; }
#enqueteComment .commentUnit .item { width: 17%; padding: 0 10px; font-weight: bold; color: #5bc; }
#enqueteComment .commentUnit .comment { padding-right: 10px; line-height: 1.7; }


/*--------------------------------------------------
 For Smart Phone 
-------------------------------------------------- */

@media screen and (max-width: 640px) {


/* ---------- Enquete Copy ---------- */ 

#enqueteCopy { margin: 0 10px; }


/* ---------- Question Unit ---------- */ 

#enqueteGraph .graphUnit { width: 100%; height: auto; margin: 0; border: none;  }
#enqueteGraph .graphUnit:nth-child(4),
#enqueteGraph .graphUnit:nth-child(5),
#enqueteGraph .graphUnit:nth-child(6) { height: auto; }
#enqueteGraph .graphUnit .graphTitle { background: #7cd; border: none; color: #fff; font-size: 17px;
border-radius: 0;
box-shadow: none;
}
#enqueteGraph .graphUnit .graph { width: 100%; }
#enqueteGraph .graphUnit .graphList { padding: 12px 15px 15px; }
#enqueteGraph .graphUnit .graphList .list { }
#enqueteGraph .graphUnit .graphList .list + .list { padding-top: 5px; }
#enqueteGraph .graphUnit .graphList .list .item { font-size: 15px; }
#enqueteGraph .graphUnit .graphList .list .percent { width: 3em; }
#enqueteGraph .graphUnit .graphList .list .percent em { font-size: 20px; }

/* ---------- enqueteComment ---------- */ 

#enqueteComment { margin-top: 10px; }
#enqueteComment .title { background: #7cd; border: none; color: #fff; font-size: 16px;
border-radius: 0; }
#enqueteComment .commentUnit { margin: 0 10px; padding: 13px 5px 0; }
#enqueteComment .commentUnit { margin-top: 10px; }
#enqueteComment .commentUnit .item,
#enqueteComment .commentUnit .comment { display: block; width: 100%; padding: 0; }
#enqueteComment .commentUnit .item { padding: 0; font-size: 16px; }
#enqueteComment .commentUnit .comment { margin-top: 10px; font-size: 15px; }

}