@charset "utf-8";

/* 共通 ============================== */
body { background-color: red; letter-spacing: 0.05em; }

p.binder { position: fixed; top: 0; left: 50%; margin-left: -125px; }

div.wrapper { background-color: white; border-left: solid 16px red; border-right: solid 16px red; min-width: 948px; margin-top: 16px; padding-bottom: 60px; }

div.hearWrap { padding: 15px 15px 0; background: url(../images/surveyspecial_icon.png) 50% 33px no-repeat; min-height: 133px; }
div.hearWrap p.secret { float: left; }
div.hearWrap p.dglogo { float: right; }

p.surveySPtit { text-align: center; padding: 24px 0 36px; }

div.contWrap { width: 828px; margin: 0 auto; }

div.surveySPnoteFrm { padding: 5px 16px 0; }
ul.surveySPnote { letter-spacing: 0; color: white; line-height: 1.35; min-width: 948px; }
ul.surveySPnote li { text-indent: -1.35em; margin-left: 1.35em; margin-top: 10px; }

div.aboutFoot { padding: 10px 16px 35px; text-align: right; line-height: 1.25; min-width: 948px; }



/* 入力画面 ============================== */
div.inputLead { text-align: center; }
div.inputLead p.deadLine { margin-top: 20px; display: inline-block; background-color: #eee; padding: 2px 8px; border-radius: 3px; line-height: 1.35; }
div.inputLead p.inputNote { margin-top: 30px; line-height: 1.35; }

div.inputSec { margin-top: 30px; border-top: dashed 1px #ccc; }
div.inputSec div.subSec1frm { padding-top: 20px;  }
div.inputSec div.subSec2frm { margin-top: 30px; border-top: dashed 1px #ccc; padding-top: 20px;  }

div.inputSec p.qNum { float: left; height: 48px; width: 64px; background-color: red; border-radius: 50%; color: white; text-align: center; padding-top: 16px; font-size: 240%; line-height: 1; }
div.inputSec div.qFrm { float: right; width: 556px; }
div.inputSec div.qFrm p.qTxt { line-height: 1.25; padding-top: 16px; }
div.inputSec div.qFrm div.inputArea { background-color: #eee; padding: 0 30px 10px; line-height: 1.25; margin-top: 20px; display: inline-block; }
div.inputSec div.qFrm div.inputArea ul.qList li { float: left; padding-right: 30px; margin-top: 10px; }
div.inputSec div.qFrm div.inputArea ul.qList li:last-child { padding-right: 0; }
div.inputSec div.qFrm div.inputArea ul.qList li input { float: left; }
div.inputSec div.qFrm div.inputArea ul.qList li label { padding-left: 6px; float: left; }
div.inputSec div.qFrm div.sampleArea { margin-top: 20px; }
div.inputSec div.qFrm div.sampleArea a { background: url(../images/icon_arrow.png) 0px 8px no-repeat; display: inline-block; text-decoration: none; padding: 5px 5px 3px 15px; line-height: 1.25; }
div.inputSec div.qFrm div.sampleArea p.sample2 { margin-top: 5px; }

div.inputSection1 { background: url(../images/surveyspecial_abe.png) left bottom no-repeat; padding-left: 188px; }
div.inputSection2 { background: url(../images/surveyspecial_yu.png) right bottom no-repeat; padding-right: 188px; }
div.inputSection3 { background: url(../images/surveyspecial_kry.png) left bottom no-repeat; padding-left: 188px; }
div.inputSection4 { background: url(../images/surveyspecial_ino.png) right bottom no-repeat; padding-right: 188px; }
div.inputSection5 { background: url(../images/surveyspecial_oba.png) left bottom no-repeat; padding-left: 188px; }

div.inputSec div.cmntFrm { padding-top: 20px; }
div.inputSec div.cmntFrm p.iconRed { float: left; height: 24px; width: 24px; background-color: red; border-radius: 50%; }
div.inputSec div.cmntFrm div.cmntArea { float: right; width: 794px; }
div.inputSec div.cmntFrm div.cmntArea p.cmntLead { line-height: 1.25; }
div.inputSec div.cmntFrm div.cmntArea div.inputFrm { margin-top: 15px; background-color: #eee; padding: 15px; display: inline-block; }
div.inputSec table.cmntInput td { line-height: 1.25; padding-top: 5px; padding-bottom: 5px; vertical-align: top; }
div.inputSec table.cmntInput td.subtit { text-align: right; padding-right: 15px; }
div.inputSec table.cmntInput td.subtitSelect { text-align: right; padding-right: 15px; padding-top: 10px; }
div.inputSec table.cmntInput td.row2 { padding-top: 10px; }
div.inputSec table.cmntInput td.row2selectTit { padding-top: 15px; }

div.inputSec table.cmntInput td textarea { width: 640px; height: 180px; border: solid 1px #ccc; padding: 5px; }
div.inputSec table.cmntInput td select { border: solid 1px #ccc; }
div.inputSec table.cmntInput td input { border: solid 1px #ccc; }
div.inputSec table.cmntInput td input.w240 { padding: 5px; width: 240px; }
div.inputSec table.cmntInput td input.w60 { padding: 5px; width: 60px; }
div.inputSec table.cmntInput td.vMiddle { vertical-align: middle; }

div.inputBtnSec { padding-top: 30px; text-align: center; }
div.inputBtnSec input.surveyBtn { color: white; background-color: black; border: none; border-radius: 7px; font-size: 200%; letter-spacing: 0.15em; padding: 15px 30px; line-height: 1; box-shadow: 3px 3px 5px rgba(0,0,0,0.3); cursor: pointer; }
div.inputBtnSec input.surveyBtn:hover { background-color: red; }
div.inputBtnSec input.surveyBtn:active { color: black; box-shadow: 0 0 5px rgba(0,0,0,0.3); }

div.inputAlert { margin-top: 30px; border: double 3px red; padding: 15px; text-align: center; background-color: #ffeeee; }
div.inputSec div.qFrm div.inputAreaErr { background-color: #ffeeee; }



/* 完了画面 ============================== */
p.thanksLead { margin-top: 40px; }
p.thanksAbe { margin-top: 30px; }
p.thanksNote { margin-top: 40px; padding-bottom: 80px; }



/* 調査結果 ============================== */
div.resultWrap { padding: 0 30px; }

p.resultTit { text-align: center; padding: 24px 0 0; }

div.resultSec { margin-top: 30px; border-top: dashed 1px #ccc; padding-top: 20px; }

div.resultTitFrm { text-align: center; } 
div.resultTit { margin: 0 auto; display: inline-block; }
div.resultTit p.qNum { float: left; height: 48px; width: 64px; background-color: red; border-radius: 50%; color: white; text-align: center; padding-top: 16px; font-size: 240%; line-height: 1; }
div.resultTit p.qTxt { float: left; line-height: 1.25; padding: 16px 0 0 20px; }

div.resultSec div.graphArea { margin: 0 auto; width: 640px; }


div.resultSec div.sampleArea { margin-top: 20px; text-align: right; }
div.resultSec div.sampleArea a { background: url(../images/icon_arrow.png) 6px 8px no-repeat; display: inline-block; text-decoration: none; padding: 5px 5px 3px 25px; line-height: 1.25; background-color: #eee; border-radius: 5px; }
div.resultSec div.sampleArea p.sample2 { margin-top: 8px; }


div.cmntOpn { border: solid 1px red; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px 10px 3px; line-height: 1.25; text-align: center; margin-top: 20px; cursor: pointer; border-bottom: dashed 1px red; }
div.cmntOpn div.arrow { background: url(../images/arrow_down.png) 0 0.2em no-repeat; }
div.cmntOpn div.arrow p { background: url(../images/arrow_down.png) 100% 0.2em no-repeat; }
div.opened div.arrow { background: url(../images/arrow_up.png) 0 0.1em no-repeat; }
div.opened div.arrow p { background: url(../images/arrow_up.png) 100% 0.1em no-repeat; }

div.answerArea { display: none; border-bottom: solid 1px red; border-left: solid 1px red; border-right: solid 1px red; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 0 30px 20px; }
div.answerArea div.ansArea2L { float: left; width: 47%; }
div.answerArea div.ansArea2R { float: right; width: 47%; }
div.answerArea div.ansArea3L { float: left; width: 30%; }
div.answerArea div.ansArea3M { float: left; width: 30%; margin-left: 5%; }
div.answerArea div.ansArea3R { float: right; width: 30%; }

div.answerArea div.ansSubtit { margin-top: 30px; padding-bottom: 8px; border-bottom: solid 1px #ccc; background: url(../images/icon_circle18_red.png) 0 0.25em no-repeat; padding-left: 25px; line-height: 1.25; }

div.answerArea ul.ansList li { margin-top: 20px; background: url(../images/quotation_L.png) left top no-repeat; }
div.answerArea ul.ansList li p.ansFrm { background: url(../images/quotation_R.png) right top no-repeat; padding: 6px 32px 0; line-height: 1.5; }
div.answerArea ul.ansList li div.listnerFrm { color: #888; text-align: right; margin-top: 5px; line-height: 1.35; }
div.answerArea ul.ansList li p.rname { background: url(../images/icon_lineG.png) left top no-repeat; padding-left: 18px; display: inline-block; text-align: left; }
div.answerArea ul.ansList li p.listnerInfo { padding-top: 2px; }
div.answerArea ul.ansList li p.listnerInfo span { padding-left: 1em; }

div.thanksArea { text-align: center; }
div.thanksArea p.abe { margin-top: 20px; }