@charset "UTF-8";
/* sass */
#questionnaire { font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,"ＭＳ Ｐゴシック", sans-serif; width: 660px; padding: 40px 41px; border: 4px solid #2f50a5; background: rgba(248, 250, 255, 0.8); border-radius: 10px; margin: 50px auto; position: relative; font-size: 62.5%; line-height: 1.5; color: #333333; }
@media all and (max-width: 767px) { #questionnaire { width: auto; margin: 50px 5px 30px; padding: 20px; border-width: 2px; border-radius: 5px; } }
#questionnaire .questionnaireClose { position: absolute; width: 54px; height: 54px; right: -20px; top: -21px; display: block; background: url(image/closebtn.png) no-repeat; text-indent: 100%; overflow: hidden; }
@media all and (max-width: 767px) { #questionnaire .questionnaireClose { position: fixed; width: 44px; height: 44px; position: fixed; top: 5px; right: 7px; left: auto; background-size: 44px 44px; margin: 0; } }
#questionnaire .questionnaireHead { font-size: 1.8em; font-weight: bold; padding-bottom: 15px; border-bottom: 2px solid #7e94d1; margin-bottom: 25px; }
@media all and (max-width: 767px) { #questionnaire .questionnaireHead { font-size: 1.5em; padding-bottom: 4px; margin-bottom: 12px; } }
#questionnaire .QAcontainer .question { display: table; font-size: 1.6em; font-weight: bold; margin-bottom: 20px; width: 100%; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .question { font-size: 1.3em; margin-bottom: 15px; } }
#questionnaire .QAcontainer .question .questionSeq { width: 25px; padding: 8px 10px; display: table-cell; background: #7e94d1; color: #FFF; text-align: center; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .question .questionSeq { width: 5px; padding: 3px 5px; } }
#questionnaire .QAcontainer .question .questionTxt { width: 595px; padding: 8px 10px; display: table-cell; background: #dae2f6; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .question .questionTxt { width: auto; padding: 3px 20px 3px 8px; } }
#questionnaire .QAcontainer .answer { margin-bottom: 20px; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer { margin-bottom: 15px; } }
#questionnaire .QAcontainer .answer .customSelectParent { display: inline-block; position: relative; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .customSelectParent { display: block; } }
#questionnaire .QAcontainer .answer .customSelectParent select { min-width: 200px; font-size: 1.4em; -moz-appearance: none; -webkit-appearance: none; border-radius: 4px; border: 1px solid #ccc; padding: 7px 30px 7px 10px; color: #666; background: #FFF; box-shadow: -4px 3px 3px -3px rgba(0, 0, 0, 0.2) inset; }
#questionnaire .QAcontainer .answer .customSelectParent select::-ms-expand { display: none; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .customSelectParent select { min-width: 0; width: 100%; font-size: 1.6em; border-radius: 2px; padding: 7px 30px 7px 8px; box-shadow: -3px 3px 3px -3px rgba(0, 0, 0, 0.2) inset; } }
#questionnaire .QAcontainer .answer .customSelectParent::after { content: ''; display: block; width: 14px; height: 12px; background: url(image/customselect_icon.png) no-repeat; background-size: 14px 12px; top: 50%; right: 10px; margin-top: -4px; position: absolute; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .customSelectParent::after { width: 8px; height: 7px; background-size: 8px 7px; } }
#questionnaire .QAcontainer .answer .choiceList { display: flex; flex-wrap: wrap; width: 100%; }
#questionnaire .QAcontainer .answer .choiceList.choiceListColumn2 > li { width: 50%; padding: 0 5px 10px 0; }
#questionnaire .QAcontainer .answer .choiceList.choiceListColumn3 > li { width: 33.3333%; padding: 0 5px 10px 0; }
#questionnaire .QAcontainer .answer .choiceList > li { box-sizing: border-box; padding: 0 30px 10px 0; }
#questionnaire .QAcontainer .answer .choiceList > li .customRadioParent { display: inline-block; cursor: pointer; position: relative; }
#questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > input { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; width: 0; height: 0; overflow: hidden; }
#questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > span { position: relative; display: block; font-size: 1.4em; line-height: 1.5; padding-left: 42px; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > span { padding-left: 38px; } }
#questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > span::after { content: ""; position: absolute; display: block; background: url(image/customradio.png) no-repeat 0 0; top: 1px; left: 15px; width: 21px; height: 20px; background-size: 21px; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > span::after { left: 8px; } }
#questionnaire .QAcontainer .answer .choiceList > li .customRadioParent > input:checked + span::after { background-position: 0 bottom; }
#questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent { display: inline-block; cursor: pointer; position: relative; }
#questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > input { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; width: 0; height: 0; overflow: hidden; }
#questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > span { display: block; position: relative; font-size: 1.4em; line-height: 1.5; padding-left: 42px; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > span { padding-left: 38px; } }
#questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > span::after { content: ""; position: absolute; display: block; background: url(image/customcheckbox.png) no-repeat 0 0; top: 2px; left: 15px; width: 18px; height: 19px; background-size: 18px; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > span::after { left: 8px; } }
#questionnaire .QAcontainer .answer .choiceList > li .customCheckboxParent > input:checked + span::after { background-position: 0 bottom; }
@media all and (max-width: 767px) { #questionnaire .QAcontainer .answer .choiceList { display: block; }
  #questionnaire .QAcontainer .answer .choiceList > li, #questionnaire .QAcontainer .answer .choiceList.choiceListColumn2 > li, #questionnaire .QAcontainer .answer .choiceList.choiceListColumn3 > li { width: 100%; } }
#questionnaire .questionnaireFoot { border-top: 2px solid #2f50a5; padding-top: 30px; }
@media all and (max-width: 767px) { #questionnaire .questionnaireFoot { padding-top: 25px; } }
#questionnaire .questionnaireFoot .submitBtnWrap { text-align: center; margin-bottom: 25px; }
@media all and (max-width: 767px) { #questionnaire .questionnaireFoot .submitBtnWrap { margin-bottom: 20px; } }
#questionnaire .questionnaireFoot .submitBtnWrap .customBtn01 { display: inline-block; min-width: 200px; padding: 12px 15px; border: 2px solid #2f50a5; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkOTNkMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJmNTBhNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7d93d0), color-stop(100%, #2f50a5)); background: -moz-linear-gradient(#7d93d0, #2f50a5); background: -webkit-linear-gradient(#7d93d0, #2f50a5); background: linear-gradient(#7d93d0, #2f50a5); box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.2); color: #FFF; border-radius: 5px; font-size: 24px; cursor: pointer; }
#questionnaire .questionnaireFoot .submitBtnWrap .customBtn01:hover { opacity: 0.8; }
@media all and (max-width: 767px) { #questionnaire .questionnaireFoot .submitBtnWrap .customBtn01 { padding: 8px 15px; min-width: 140px; font-size: 17px; border-width: 1px; border-radius: 3px; box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); } }
#questionnaire .questionnaireFoot .footTxt { text-align: center; font-size: 2.0em; font-weight: bold; }
@media all and (max-width: 767px) { #questionnaire .questionnaireFoot .footTxt { font-size: 1.5em; margin-bottom: 5px; } }