/* import: google font */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

/* ************************************************************** */
/* common                                                         */
/* ************************************************************** */
html, body {
  margin:0;
  min-width: 320px;
  color:#222;
  font-size:14px;
  font-family: -apple-system, 'Noto Sans JP', 'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: normal;
  font-feature-settings: "palt";
  letter-spacing: 0;
  line-height:2em;
}
#scroll_top {
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* max-width: 960px; */
  margin: auto;
  z-index: 1;
}
#scroll_top>div {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#scroll_top>div>img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  cursor: pointer;
  opacity: 1;
  transition: opacity .5s;
}
#scroll_top>div>img:hover {
  opacity: .6;
}
.mt_1em  { margin-top: 1em; }
.mt_2em  { margin-top: 2em; }
.mt_3em  { margin-top: 3em; }
.mt_4em  { margin-top: 4em; }
.mt_5em  { margin-top: 5em; }
.mt_6em  { margin-top: 6em; }
.mt_7em  { margin-top: 7em; }
.pb_10em { padding-bottom: 10em; }
.ta_cntr { text-align: center; }
.fc_red  { color: #be221f; }
.fw_lght { font-weight: lighter; }
.fw_bold { font-weight: bold; }


/* ************************************************************** */
/* header                                                         */
/* ************************************************************** */
header {
  position: relative;
  display: block;
  width: 100%;
  background-color: #040404;
}
header::before {
  content: "";
  display: block;
}
header>a>img {
  max-width: 360px;
  width: 60%;
  height: auto;
}
#header_sub {
  max-width: 960px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}
#header_svg_sbjct {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
#header_svg_sbjct>use,
#header_svg_sbjct>path {
  fill: #151515;
}
.header_svg_s_company,
.header_svg_s_products,
.header_svg_s_pressrelease,
.header_svg_s_recruit,
.header_svg_s_contact,
.header_svg_s_sns,
.header_svg_s_sitepolicy,
.header_svg_s_sitemap,
.header_svg_s_manual,
.header_svg_s_news {
  height: 2.2em;
}
.header_svg_s_company {
  width: calc( 2.2em * 5.2 );
}
.header_svg_s_products {
  width: calc( 2.2em * 5.45 );
}
.header_svg_s_pressrelease {
  width: calc( 2.2em * 7.3 );
}
.header_svg_s_recruit {
  width: calc( 2.2em * 4.2 );
}
.header_svg_s_contact {
  width: calc( 2.2em * 4.85 );
}
.header_svg_s_sns {
  width: calc( 2.2em * 1.85 );
}
.header_svg_s_sitepolicy {
  width: calc( 2.2em * 6.25 );
}
.header_svg_s_sitemap {
  width: calc( 2.2em * 4.35 );
}
.header_svg_s_manual {
  width: calc( 2.2em * 7.3 );
}
.header_svg_s_news {
  width: calc( 2.2em * 2.8 );
}
#header_sub>h1,
#header_sub>h2 {
  display: inline-block;
  color: #151515;
  letter-spacing: .1em;
  vertical-align: middle;
}
#header_sub>h1 {
  font-size: 2.2em;
}
#header_sub>h2 {
  font-size: 1.4em;
}
#header_sub>svg#svg_slash {
  display: inline-block;
  margin: 0 .75em;
  width:  2.4em;
  height: 2.4em;
  vertical-align: middle;
}
#header_sub>svg#svg_slash>rect {
  fill: #151515;
}


/* ************************************************************** */
/* contents                                                       */
/* ************************************************************** */
#main_contents {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height:100vh;
}
#contents_wrapper {
  position: relative;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  text-align: left;
  transition: margin-left .5s;
}
#contents_wrapper::before,
#contents_wrapper::after {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#contents_wrapper::before {
  content: "";
  background-color: #F8F8F8;
  background-image:         repeating-linear-gradient(-45deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 1px, transparent 0, transparent 300px);
  background-image: -webkit-repeating-linear-gradient(-45deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 2px, transparent 0, transparent 300px);
  background-image:    -moz-repeating-linear-gradient(-45deg, rgba(240, 240, 240, 0.3), rgba(240, 240, 240, 0.3) 1px, transparent 0, transparent 300px);
  background-image:      -o-repeating-linear-gradient(-45deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 1px, transparent 0, transparent 300px);
}
#contents_wrapper::after {
  content: "";
  background-image:         repeating-linear-gradient(  0deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 1px, transparent 0, transparent 300px);
  background-image: -webkit-repeating-linear-gradient( 90deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 2px, transparent 0, transparent 300px);
  background-image:    -moz-repeating-linear-gradient( 90deg, rgba(240, 240, 240, 0.3), rgba(240, 240, 240, 0.3) 1px, transparent 0, transparent 300px);
  background-image:      -o-repeating-linear-gradient( 90deg, rgba(240, 240, 240, 1.0), rgba(240, 240, 240, 1.0) 1px, transparent 0, transparent 300px);
}

.contents {
  position: relative;
  display: block;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.contents h1 {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid #969696;
  border-bottom: 1px solid #969696;
  text-align: center;
  color: #727272;
  font-weight: bold;
  padding: .75em 0;
}
.contents h2 {
  display: block;
  width: 100%;
  height: auto;
  border-left: 4px solid #727272;
  border-bottom: 1px solid #727272;
  color: #727272;
  font-weight: bold;
  box-sizing: border-box;
}
.contents h3 {
  font-weight: bold;
}
.contents h3::before {
  content: "\25A0";
  font-size: 1.4em;
  font-weight: bold;
  padding-right: .25em;
}
.contents a.link_local,
.contents a.link_inline {
  position: relative;
  color: #FF8F00;
  text-decoration: underline;
  opacity: 1;
  transition: opacity .5s;
}
.contents a.link_local::before {
  content: "\003e\003e\0020";
  letter-spacing: -2px;
}
.contents a.link_local:hover,
.contents a.link_inline:hover {
  opacity: .6;
}
.contents ul.list_dot,
.contents ul.list_notice,
.contents ul.list_asterisk {
  display: table;
  list-style-type: none;
}
.contents ul.list_dot>li,
.contents ul.list_notice>li,
.contents ul.list_asterisk>li {
  display: table-row;
  counter-increment: table-ol;
  font-size: .9em;
}
.contents ul.list_dot>li::before {
  content: "\30FB";
  display: table-cell;
  padding-right: .5em;
}
.contents ul.list_notice>li::before {
  content: "\203B";
  display: table-cell;
  padding-right: .5em;
}
.contents ul.list_asterisk>li::before {
  content: "*";
  display: table-cell;
  padding-right: .5em;
}
.contents .indent_wrapper {
  padding-left: 1em;
  box-sizing: border-box;
}

html[lang="en"] .contents ul.list_notice>li::before,
html[lang="en-US"] .contents ul.list_notice>li::before,
html[lang="fr-US"] .contents ul.list_notice>li::before {
  content: "Note:";
}
html[lang="es"] .contents ul.list_notice>li::before,
html[lang="it"] .contents ul.list_notice>li::before,
html[lang="es-US"] .contents ul.list_notice>li::before {
  content: "Nota:";
}
html[lang="pt-BR"] .contents ul.list_notice>li::before {
  content: "Obs.:";
}
html[lang="fr"] .contents ul.list_notice>li::before {
  content: "Remarque:";
}
html[lang="pl"] .contents ul.list_notice>li::before {
  content: "Uwaga:";
}
html[lang="de"] .contents ul.list_notice>li::before {
  content: "Hinweis:";
}
html[lang="nl"] .contents ul.list_notice>li::before {
  content: "Opmerking:";
}
html[lang="ru"] .contents ul.list_notice>li::before {
  content: "Примечание.";
}


/* pc-tab */
@media all and (min-width: 768px) {
  /* --- contents --- */
  .mt_1hem { margin-top: 1em; }
  .mt_2hem { margin-top: 2em; }
  .mt_3hem { margin-top: 3em; }
  .mt_4hem { margin-top: 4em; }
  .mt_5hem { margin-top: 5em; }
  .mt_6hem { margin-top: 6em; }
  .mt_7hem { margin-top: 7em; }

  .width_adjus {
    width: 100%;
  }
  .width_adjus_flip {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .contents h1 {
    font-size: 1.2em;
  }
  .contents h2 {
    font-size: 1.2em;
    padding: .2em 0 .2em .5em;
  }
  /* --- only --- */
  .wo_ta_cntr { text-align: center; }  
  /* --- header --- */
  .header_svg_s_privacypolicy {
    width: calc( 2.2em * 8.6 );
    height: 2.2em;
  }
  /* --- footer --- */
  footer>p {
    font-size: .8em;
  }
}
/* tab-phone */
@media all and (max-width: 767px) {
  /* --- contents --- */
  .mt_1hem { margin-top:  .5em; }
  .mt_2hem { margin-top:   1em; }
  .mt_3hem { margin-top: 1.5em; }
  .mt_4hem { margin-top:   2em; }
  .mt_5hem { margin-top: 2.5em; }
  .mt_6hem { margin-top:   3em; }
  .mt_7hem { margin-top: 3.5em; }

  .width_adjus {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .width_adjus_flip {
    width: 100%;
  }
  .contents h1 {
    font-size: 1.0em;
  }
  .contents h2 {
    font-size: 1.0em;
    line-height: 1.4em;
    padding: .5em 0 .5em .5em;
  }
  /* --- header --- */
  .header_svg_s_privacypolicy {
    width: calc( 1.8em * 8.6 );
    height: 1.8em;
  }
  /* --- footer --- */
  footer>p {
    font-size: 2.5vw;
  }
}


/* ************************************************************** */
/* footer                                                         */
/* ************************************************************** */
footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
footer>a {
  max-width: 50%;
  width: calc(1em * 11.476);
}
footer>a>img {
  width: 100%;
  max-height: 1.5em;
  height: auto;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  footer {
    padding-bottom: 3em;
  }
}
@media all and (max-width: 767px) {
  footer {
    padding-bottom: 1em;
  }
}


/* ************************************************************** */
/* media query                                                    */
/* ************************************************************** */
/* pc-tab */
@media all and (min-width: 768px) {
  /* --- common --- */
  /* #scroll_top {
    width: 90%;
  }  */
  #scroll_top>div>img {
    width: 60px;
  }
  /* --- header --- */
  header {
    height: 330px;
  }
  header::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #040404;
  }
  header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    max-width: 1900px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1900px 100%;
  }
  html[lang="ja"] header::after {
    background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_ja.jpg');
  }
  html[lang="en"] header::after,
  html[lang="en-US"] header::after {
    background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_en.jpg');
  }
  html[lang="fr"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_fr.jpg'); }
  html[lang="es"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_es.jpg'); }
  html[lang="pl"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_pl.jpg'); }
  html[lang="de"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_de.jpg'); }
  html[lang="it"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_it.jpg'); }
  html[lang="nl"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_nl.jpg'); }
  html[lang="ru"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_ru.jpg'); }
  html[lang="ko"]      header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_ko.jpg'); }
  html[lang="zh-Hant"] header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_zh.jpg'); }
  html[lang="es-US"]   header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_es-us.jpg'); }
  html[lang="fr-US"]   header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_fr-us.jpg'); }
  html[lang="pt-BR"]   header::after { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_w_pt-br.jpg'); }
  /* --- contents --- */
  #contents_wrapper {
    padding-bottom: 5em;
  }
  .contents {
    width: 90%;
  }
}
/* tab-phone */
@media all and (max-width: 767px) {
  /* --- common --- */
  /* #scroll_top {
    width: 100%;
  } */
  #scroll_top>div>img {
    width: 15%;
  }
  #scroll_top>div {
    width: 100%;
  }
  /* --- header --- */
  header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  html[lang="ja"] header {
    background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_ja.jpg');/* //media.fromsoftware.jp/fromsoftware/us */
  }
  html[lang="en"] header,
  html[lang="en-US"] header {
    background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_en.jpg');
  }
  html[lang="fr"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_fr.jpg'); }
  html[lang="es"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_es.jpg'); }
  html[lang="pl"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_pl.jpg'); }
  html[lang="de"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_de.jpg'); }
  html[lang="it"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_it.jpg'); }
  html[lang="nl"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_nl.jpg'); }
  html[lang="ru"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_ru.jpg'); }
  html[lang="ko"]      header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_ko.jpg'); }
  html[lang="zh-Hant"] header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_zh.jpg'); }
  html[lang="es-US"]   header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_es-us.jpg'); }
  html[lang="fr-US"]   header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_fr-us.jpg'); }
  html[lang="pt-BR"]   header { background-image: url('//media.fromsoftware.jp/fromsoftware/us/questionnaire/static/img/common/theduskbloodsnetworktestver/header_n_pt-br.jpg'); }

  header::before {
    padding-top: 42.59%;
  }
  #header_sub>h2 {
    display: block;
    font-size: 1.2em;
    margin-top: .5em;
  }
  #header_sub.small>h1 {
    font-size: 1.8em;
  }
  #header_sub.small>svg#svg_slash {
    width: 1.6em;
  }
  /* --- contents --- */
  #contents_wrapper {
    padding-bottom: 4em;
  }
  .contents {
    width: 100%;
  }
}


#must_notice {
  font-size: .9em;
  line-height: 1.4em;
}
/* #must_notice::before {
  content: "*";
  color: red;
  padding-right: .5em;
} */
#must_notice>span {
  color: red;
  /* padding-right: .5em; */
}

/* ************************************************************** */
/* Select Language                                                */
/* ************************************************************** */
div#lang_wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
div#lang_wrapper.mb {
  margin-bottom: .5em;
}
div#lang_wrapper > div.select_wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 3em;
  border: 3px double #d45120;
  box-sizing: border-box;
  z-index: 0;
  background-color: #fdfdfd;
}
div#lang_wrapper > div.select_wrapper::after {
  /* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; */
  color:#777;
  content: ">";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: .5em;
  height: 0;
  font-family: 'Letter Gothic Std';
  font-weight: bold;
  margin: auto 0;
  transform: rotate(90deg);
  z-index: -1;
}
div#lang_wrapper > div.select_wrapper > select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
div#lang_wrapper > div.select_wrapper > select::-ms-expand {
  display: none;
}
/* ++++++++++++++++++ media query ++++++++++++++++++ */
/* pc-tab */
@media all and (min-width: 768px) {
  div#lang_wrapper {
    width: 100%;
  }
  div#lang_wrapper > div.select_wrapper {
    width: 20%;
    font-size: 0.7em;
  }
  div#lang_wrapper > div.select_wrapper > select {
    padding: .1em .5em;
    font-size: 0.8rem;
  }
}
/* tab-phone */
@media all and (max-width: 767px) {
  div#lang_wrapper {
    width: 90%;
    margin: 1em auto 0 auto;
  }
  div#lang_wrapper > div.select_wrapper {
    width: 50%;
    font-size: 0.6em;
  }
  div#lang_wrapper > div.select_wrapper > select {
    padding: .1em 0 .1em .4em;
    /* font-size: 16px; */
  }
}