/* font-face */
@font-face { font-family: "Ionicons"; src: url("../../fonts/ionicons.eot?v=2.0.0"); src: url("../../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../../fonts/ionicons.woff?v=2.0.0") format("woff"), url("../../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal; }

/* ************************************************************** */
/* common                                                         */
/* ************************************************************** */
body {
  counter-reset: question;
}


/* ************************************************************** */
/* page navi                                                      */
/* ************************************************************** */
.navi_wrapper {
  position: relative;
  display: flex;
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
}
.navi_wrapper>li {
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
}
.navi_wrapper>li>a,
.navi_wrapper>li button {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  color: #3c3c3c;
  text-decoration: none;
  line-height: 1em;
  border: 1px solid #3c3c3c;
  box-sizing: border-box;
  opacity: 1;
  z-index: 0;
  transition: color .5s;
  cursor: pointer;
}
.navi_wrapper>li>a::before,
.navi_wrapper>li button::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: #3c3c3c;
  z-index: -1;
  transition: width .5s;
}
.navi_wrapper>li:nth-child(1)>a::before,
.navi_wrapper>li:nth-child(1) button::before {
  left: 0;
}
.navi_wrapper>li:nth-child(2)>a::before,
.navi_wrapper>li:nth-child(2) button::before {
  right: 0;
}
.navi_wrapper>li>a:hover,
.navi_wrapper>li button:hover {
  color: #f8f8f8;
}
.navi_wrapper>li>a:hover::before,
.navi_wrapper>li button:hover::before {
  width: 100%;
}
.navi_wrapper>li>a::after,
.navi_wrapper>li button::after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  width:  1em;
  height: 1em;
  line-height: 1em;
  letter-spacing: 0;
}
.navi_wrapper>li:nth-child(1)>a::after,
.navi_wrapper>li:nth-child(1) button::after {
  content: "\FF1E";
  right: 1em;
}
.navi_wrapper>li:nth-child(2)>a::after,
.navi_wrapper>li:nth-child(2) button::after {
  content: "\FF1C";
  left: 1em;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .navi_wrapper {
    flex-direction: row-reverse;
    justify-content: space-around;
    width: 100%;
    max-width: 1080px;
  }
  .navi_wrapper>li {
    width: 45%;
  }
}
@media all and (max-width: 767px) {
  .navi_wrapper {
    flex-direction: column-reverse;
    justify-content: center;
    width: 100%;
  }
  .navi_wrapper>li {
    width: 100%;
  }
  .navi_wrapper>li:nth-child(1) {
    margin-top: 1em;
  }
  .navi_wrapper>li:nth-child(2) {
    margin-bottom: 1em;
  }
}


/* ************************************************************** */
/* form                                                           */
/* ************************************************************** */
form#form_questionnaire>p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
p.getQuestionCounter::before {
  content: "問" counter(question);
}
.question_wrapper {
  position: relative;
  display: block;
  width: 100%;
  font-size: .9em;
}
.question_wrapper.hidden {
  display: none;
}
.err_note {
  position: relative;
  display: none;
  color: #be221f;
  font-weight: bold;
}
.err_note.actv {
  display: block;
}
.question_wrapper>div {
  position: relative;
  display: flex;
  width: 100%;
  border: 1px solid #111;
  border-collapse: collapse;
}
.question_wrapper+.question_wrapper>div {
  border-top: none;
}
.question_wrapper+.question_wrapper>.actv+div {
  border-top: 1px solid #111;
}
.question_wrapper.mt_4em>div {
  border-top: 1px solid #111;
}
.err_note.actv+div>section {
  background-color: rgba(190,34,31,0.3) !important;
}
.question_wrapper.untargeted>.err_note {
  display:none;
}
.question_wrapper.untargeted>div::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .question_wrapper>div {
    flex-direction: row;
  }
}
@media all and (max-width: 767px) {
  .question_wrapper>div {
    flex-direction: column;
  }
}

.qstn,
.answ {
  box-sizing: border-box;
}
.qstn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #cfcfcf;
}
.qstn::before {
  counter-increment: question;
  content: "Q" counter(question);
  font-family: Century;
}
.qstn.keep_count::before {
  counter-increment: none;
}
html[lang="ja"] .qstn>div>p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang="de"] .qstn>div>ul.list_notice>li::before,
html[lang="en"] .qstn>div>ul.list_notice>li::before,
html[lang="es"] .qstn>div>ul.list_notice>li::before,
html[lang="fr"] .qstn>div>ul.list_notice>li::before,
html[lang="it"] .qstn>div>ul.list_notice>li::before,
html[lang="nl"] .qstn>div>ul.list_notice>li::before,
html[lang="pl"] .qstn>div>ul.list_notice>li::before,
html[lang="ru"] .qstn>div>ul.list_notice>li::before,
html[lang="en-US"] .qstn>div>ul.list_notice>li::before,
html[lang="es-US"] .qstn>div>ul.list_notice>li::before,
html[lang="fr-US"] .qstn>div>ul.list_notice>li::before,
html[lang="pt-BR"] .qstn>div>ul.list_notice>li::before {
  content: '';
}
.qstn.required>div>p::after {
  content: "*";
  color: #be221f;
  padding-left: .5em;
  box-sizing: border-box;

}
.answ {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.answ>div {
  position: relative;
  display: block;
  width: 100%;
}
.answ>.hidden_on,
.answ>div.hidden_m2,
.answ>div.hidden_m3 {
  display: none;
  visibility: hidden;
}
.answ>div:not(:first-child) {
  margin-top: .5em;
}
.answ>div.nomargin {
  margin-top: 0;
}
.answ>div>p {
  word-break: break-all;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .qstn {
    width: 40%;
    padding: 1em;
  }
  .qstn::before {
    font-size: 1.8em;
  }
  .qstn>div {
    border: none;
    border-left: 1px solid rgba(1, 1, 1, .4);
    border-collapse: collapse;
    margin-left: 1em;
    padding-left: 1em;
    box-sizing: border-box;
  }
  .answ {
    width: 60%;
    padding: 1em 1.5em;
  }
  .widearea {
    width: 100%;
  }
  .qstn + .answ {
    width: 60% !important;
  }
}
@media all and (max-width: 767px) {
  .qstn,
  .answ {
    width: 100%;
    padding: 1em .5em;
  }
  .qstn::before {
    position: absolute;
    display: block;
    bottom: .2em;
    right: .2em;
    color: rgba(117,106,114,0.3);
    font-size: 2.5em;
    font-weight: bold;
  }
}


.target_move {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  width: 50%;
  border: 1px solid #111;
  margin-top: -1em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: .6em 0;
  color: #111;
  cursor: pointer;
  z-index: 0;
  transition: color .5s, margin-top .5s, opacity .5s;
  background-color: #dbd8c5;
  z-index: 1;
  border-radius: .4em;
  opacity: 0;
  visibility: hidden;
}
.target_move.actv {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}
.target_move::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  transition: width .5s;
  background-color: #666;
  z-index: -1;
}
.target_move:hover {
  color: #ededed;
}
.target_move:hover::before {
  width: 100%;
}
.target_move::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: .5em;
  bottom: 0;
  margin: auto 0;
  width: 1em;
  height: 1em;
  background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/arrow.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}


/* //////////////////////////////////////////////////////////////////////////////// */
/* - label ------------------------------------------------------------------------ */
.answ input { display: none; }
.answ label {
  display: inline-block;
  position: relative;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
  margin-left: 2.1em;
  opacity: .9;
  transition: color .5s, opacity .5s;
}
.answ label:hover {
  color: #000;
  opacity: 1;
}
.answ input:disabled+label {
  /* color: #666;
  cursor: default; */
  display: none;
  visibility: hidden;
}
.answ input:disabled+label::before {
  border-color: #666;
}
.answ input:checked+label {
  color: #000;
  font-weight: bold;
  opacity: 1;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* - radio ------------------------------------------------------------------------ */
.answ input[type="radio"]+label::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  width:  1.25em;
  height: 1.25em;
  border: 1px solid #151515;
  box-sizing: border-box;
  border-radius: 50%;
  margin-left: -2em;
}
.answ input[type="radio"]:checked+label::after {
  content: "";
  position: absolute;
  top: .74em;
  left: .25em;
  width: .75em;
  height: .75em;
  background: #545454;
  border-radius: 50%;
  margin-left: -2em;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* - checkbox --------------------------------------------------------------------- */
.answ input[type="checkbox"]+label:before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  width:  1.25em;
  height: 1.25em;
  border: 1px solid #151515;
  box-sizing: border-box;
  margin-left: -2em;
}
.answ input[type="checkbox"]:checked+label::after {
  content: "";
  position: absolute;
  top: .74em;
  left: .25em;
  width: .75em;
  height: .75em;
  background: #545454;
  margin-left: -2em;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* - select ----------------------------------------------------------------------- */
.answ>div.select {
  border: 1px solid #3c3c3c;
  box-sizing: border-box;
  border-collapse: collapse;
}
.answ>div.select::before {
  content: "\f35f";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  font-size: 1.2em;
  font-family: "Ionicons";
  font-weight: bold;
  color: #151515;
  line-height: 1em;
  letter-spacing: 0;
}
.answ select {
  position: relative;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-progress-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  width: 100%;
  height: auto;
  padding: .1em 0 .1em .1em;
}
.answ select::-ms-expand {
  display: none;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* - select ----------------------------------------------------------------------- */
.answ textarea {
  position: relative;
  display: block;
  width: 100%;
  height: 8em;
  border: 1px solid #151515;
  box-sizing: border-box;
}


#button_next {
  position: relative;
  display: block;
  margin: 0 auto;
  border: 1px solid #000;
  line-height: 1em;
  font-size: 1.0em;
  padding: 1em .5em;
  width: 150px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  background-color: #e8e8e8;
  transition: opacity .5s, visibility .5s, background-color .5s;
}
#button_next.actv {
  opacity: 1;
  visibility: visible;
}
#button_next:hover {
  background-color: #d5d5d5;
}


.question_wrapper.hide {
  display: none;
}


/* ******************************************************************************** */
/* progress bar                                                                     */
/* ******************************************************************************** */
#question_progress {
  position: fixed;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;
  width: 100%;
  height: .4em;
  background-color: #dbd8c5;
  z-index: 1;
}
#question_progress>div {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  background-color: #49598C;
  transition: width .5s;
}
#question_progress>div.checked {
  width: calc(100% / 50);
}
#question_progress>div.untargeted {
  width: calc(100% / 50);
  background-color: #464646;
}


/* ******************************************************************************** */
/* jump balloon                                                                     */
/* ******************************************************************************** */
.answ>div.jump_balloon {
  position: absolute;
  display: none;
  left: 0;
  bottom: -4em;
  width: 14em;
  color: #000;
  font-size: .8em;
  font-weight: bold;
  letter-spacing: .1em;
  padding: .5em 1em;
  background-color: #bdb76b;
  border-radius: .5em;
  cursor: pointer;
  z-index: 0;
}
.answ>div.jump_balloon:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 15%;
  margin-left: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  z-index: 1;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #bdb76b transparent;
}


/* ******************************************************************************** */
/* sns link                                                                         */
/* ******************************************************************************** */
.answ>div>a {
  position: relative;
  display: inline-block;
  width: 2em;
  margin-left: 1em;
}
.answ>div>a::before {
  content: "";
  display: block;
  padding-top: 72%;
}
.answ>div>a::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/external_link_gray.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: background-image .5s;
}
.answ>div>a:hover::after {
  background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/external_link_orange.svg');
}


#wallpaper_wrapper>li>div:nth-child(1)     { text-align: center; height: auto; }
#wallpaper_wrapper                         { margin-top: 4.0em; }
#wallpaper_wrapper>li>div>p                { line-height: 2.0em; }
#wallpaper_wrapper>li>div>img              { width: 80%; height: auto; box-sizing: border-box; border: 1px solid #232020; }
#wallpaper_wrapper>li>div>ul               { list-style-type: none; }
#wallpaper_wrapper>li>div>ul>li>a          { font-size: .8em; letter-spacing: .1em; text-decoration: underline; }

@media all and (min-width: 768px) {
  #wallpaper_wrapper                         { display: table; width: 100%; height: auto; box-sizing: border-box; }
  #wallpaper_wrapper>li                      { display: table-row; }
  #wallpaper_wrapper>li>div                  { display: table-cell; border: 1px solid #212121; padding-top: 1.0em; padding-bottom: 1.0em; vertical-align: middle; }
  #wallpaper_wrapper>li>div:nth-child(1)     { width: 40%; border-right: none; }
  #wallpaper_wrapper>li:not(:last-child)>div { border-bottom: none; }
  #wallpaper_wrapper>li>div>ul>li            { padding: .5em 0 .5em 2.0em; }
}
@media all and (max-width: 767px) {
  #wallpaper_wrapper                         { list-style-type: none; width: 100%; height: auto; }
  #wallpaper_wrapper>li                      { padding: 1.0em 0; }
  #wallpaper_wrapper>li>div                  { display: block; width: 100%; height: auto; border: 1px solid #212121; padding-top: .5em; padding-bottom: .5em; }
  #wallpaper_wrapper>li>div:nth-child(1)     { border-bottom: none; }
  #wallpaper_wrapper>li>div>ul>li            { padding: .5em 0 .5em 1.0em; }
}


/* ******************************************************************************** */
/* target q                                                                         */
/* ******************************************************************************** */
[class*="t_q"],
section.answ.fmt_range>div[class*="t_q"],
section.answ.fmt_range>div.range_title[class*="t_q"] {
  display: none;
  visibility: hidden;
}
[class*="t_q"].slct,
section.answ.fmt_range>div[class*="t_q"].slct,
section.answ.fmt_range>div.range_title[class*="t_q"].slct {
  display: inherit;
  visibility: visible;
}
p[class*="t_q"].slct {
  display: block;
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}

section.answ.fmt_range {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
section.answ.fmt_range>div>p.tl,
section.answ.fmt_range>div>p.tr {
  flex-shrink: 0;
  font-weight: bold;
  box-sizing: border-box;
}
section.answ.fmt_range>div>p.arrow {
  position: relative;
  display: block;
  width: 100%;
  background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/arrow_l.png'), url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/arrow_r.png'), url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/form/arrow_c.png');
  background-position: left center, right center, center center;
  background-repeat: no-repeat, no-repeat,repeat-x;
  background-size: 13px 8px, 13px 8px, 1px 8px;
}
section.answ.fmt_range>div>p.tl {
  padding-right: 1em;
}
section.answ.fmt_range>div>p.tr {
  padding-left: 1em;
  text-align: right;
}
section.answ.fmt_range>p.ta {
  width: 100%;
}
section.answ.fmt_range>p.ta::before {
  content: "";
  position: relative;
  display: inline-block;
  width: .9em;
  height: .9em;
  background-color: #282828;
  margin-right: .5em;
}
section.answ.fmt_range>div {
  width: 10%;
  margin: 0;
  text-align: center;
}
section.answ.fmt_range>div.range_title {
  display: flex;
  flex-direction: row;
  width: 100%;
}
section.answ.fmt_range>div>label {
  width: 100%;
  height: 1.5em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: text-top;
}
section.answ.fmt_range>div>label>p {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1em;
  margin: auto;
  line-height: 1em;
  letter-spacing: 0;
  color: #222;
  font-size: .8em;
  font-weight: 200;
  z-index: 1;
}
section.answ.fmt_range input[type="radio"]:checked+label>p {
  color: #cecece;
}
section.answ.fmt_range input[type="radio"] + label::before,
section.answ.fmt_range input[type="radio"] + label::after {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
}
section.answ.fmt_range input[type="radio"] + label::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5em;
}
section.answ.fmt_range>div input[type="radio"] + label::before {
  border-left: none;
}
section.answ.fmt_range>p+div input[type="radio"] + label::before,
section.answ.fmt_range>div.range_title+div input[type="radio"] + label::before {
  border-left: 1px solid #151515;
}
section.answ.fmt_range input[type="radio"] + label::after {
  top: 3px;
  left: 3px;
  width: calc( 100% - 6px );
  height: calc( 1.5em - 6px );
}

.mt_sec {
  margin-top: 4em;
}
p.slct+.mt_sec,
p.slct+p+.mt_sec {
  margin-top: 1em;
}
.mt_sec>div {
  border-top: 1px solid #111 !important;
}

p.q_inc::before {
  content: "Q"counter(question);
}
/* //////////////////////////////////////////////////////////////////////////////// */
/* - radio ------------------------------------------------------------------------ */
.answ>.range_desc {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.answ>.range_desc>li>p {
  font-size: .9em;
  letter-spacing: 0;
  line-height: 1em;
}
.answ>div.range {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.5em;
}
.answ>div.range>div {
  position: relative;
  display: block;
  width: calc( 10% - 4px );
  height: 1.4em;
}
.answ>div.range input[type="radio"]+label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: 0;
}
.answ>div.range input[type="radio"][disabled]+label {
  cursor: default;
}
.answ>div.range input[type="radio"]+label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width:  100%;
  height: 100%;
  border: 1px solid #151515;
  border-collapse: collapse;
  border-radius: 0;
  border-radius: unset !important;
  box-sizing: border-box;
  margin-left: 0;
}
.answ>div.range input[type="radio"]+label::after {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width:  89%;
  height: 68%;
  background-color: #545454;
  border-radius: 0;
  border-radius: unset !important;
  margin: 0;
  opacity: 0;
}
.answ>div.range>div.checked>input[type="radio"]+label::after {
  opacity: 1;
}

.answ>ul.list_notice>li::before {
  width: 1em;
  box-sizing: border-box;
}
html[lang="en"] .answ>ul.list_notice>li::before,
html[lang="es"] .answ>ul.list_notice>li::before,
html[lang="it"] .answ>ul.list_notice>li::before,
html[lang="fr"] .answ>ul.list_notice>li::before,
html[lang="pl"] .answ>ul.list_notice>li::before,
html[lang="de"] .answ>ul.list_notice>li::before,
html[lang="nl"] .answ>ul.list_notice>li::before,
html[lang="ru"] .answ>ul.list_notice>li::before,
html[lang="en-US"] .answ>ul.list_notice>li::before,
html[lang="fr-US"] .answ>ul.list_notice>li::before,
html[lang="es-US"] .answ>ul.list_notice>li::before,
html[lang="pt-BR"] .answ>ul.list_notice>li::before {
  content: "*";
}


div#addQuestion {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border-collapse: collapse;
  box-sizing: border-box;
  background-color: #8c8c8c;
  margin: 1.5em auto 0;
  cursor: pointer;
  opacity: 1;
  transition: background-color .4s ease, opacity .4s ease;
}
div#addQuestion::after {
  content: "+";
  position: relative;
  display: block;
  width: auto;
  height: .8em;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 0;
}
div#addQuestion:hover {
  background-color: #222;
}


.intg > div {
  border-bottom: none;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .intg + div > div > section:nth-child(1) {
    width: 40%;
    background-color: #cfcfcf;
  }
}
@media all and (max-width: 767px) {
  .intg {
    margin-top: 4em;
  }
  .intg > div {
    border-top: 1px solid #111 !important;
  }
}