@charset "UTF-8";




@media print,screen and (min-width:768px) {
  /* ----- container ----- */
  .container {
    margin: 0;
    max-width: 100%;
    padding: 0;
    border: none;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }

  .preview-block {
    order: 2;
    padding: 0;
    margin-top: 16px;
    font-size: 1.6rem;
  }
  .form-column {
    margin: 0;
  }
  .description-block > .text {
    margin: 1em 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .description-block > .text > .form-required {
    display: inline-block;
    background-color: #e10618;
    color: #fff;
    vertical-align: top;
    height: 21px;
    margin-right: .6em;
    padding: .2em .7em .5em;
    font-size: 1.2rem;
    font-weight: 700;
  }
  .form-column-heading {
    margin: 50px 0 0 0;
  }
  .form-column-textarea {
    margin: 30px 0 0 0;
  }
  .form-column-textarea > label,.form-column-text > label,.form-column-zip-code-jp > label {
    order: 1;
  }
  .form-column-textarea > .description-block,.form-column-text > .description-block,.form-column-email > .description-block,.form-column-tel > .description-block,.form-column-zip-code-jp > .description-block {
    order: 2;
    font-size: 1.6rem;
    margin: 16px 0 0 0;
    color: #333;
  }
  .form-column-textarea > textarea,.form-column-zip-code-jp >.input-group {
    order: 3;
  }
  .form-column-textarea,.form-column-text,.form-column-email,.form-column-tel,.form-column-zip-code-jp {
    display: flex;
    flex-flow: column;
  }
  .form-column-email,.form-column-tel {
    margin-top: 32px;
  }
  .form-column-text,.form-column-zip-code-jp,.form-column-prefecture-jp {
    margin-top: 41px;
  }
  .form-column > h2 {
    margin: 0 0 25px 0;
    font-size: 2.6rem;
    display: inline-block;
    position: relative;
    line-height: 1.4;
    padding-left: 34px;
  }
  .form-column > h2:before {
      position: absolute;
      top: .6em;
      left: 0;
      background: #e10618;
      content: "";
      width: 16px;
      height: 3px;
  }
  .form-column-heading + div {
    margin: 0!important;
    }
  fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }
  fieldset >.label {
    padding: 14px;
  }
  .label {
    background-color: #eef3f7;
    width: 100%;
    margin: 0;
    padding: 14px 14px 13px 14px;
    font-size: 1.6rem;
  }
  .label > .badge-required {
    display: inline-block;
    background-color: #e10618;
    color: #fff;
    vertical-align: top;
    padding: .3em .6em;
    margin-left: 10px;
    height: 21px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 0;
  }
  .input-group {
    display: flex;
    flex-flow: row wrap;
    font-size: 1.6rem;
    margin-top: 18px;

  }
  .input-group > .option {
    width: calc(((100% - (72px)) / 3) - .1px);
    margin-left: 36px;
    cursor: pointer;
  }
  .input-group > .option:first-child {
    margin-left: 0!important;
  }
  .input-group > .option:nth-child(n+4) {
    margin-top: 13px;
  }
  .input-group > .option:nth-child(3n+1) {
    margin-left: 0!important;
  }
  input[type="radio"] {
    accent-color: #444d5c;
    cursor: pointer;
  }
  input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus {
    border-color: #444d5c!important;
    outline: none;
  }
  .form-column-tel > input[type="tel"] {
    order: 3;
    margin-top: 9px;
    width: 376px;
    height: 50px;
    padding: 10px 18px;
    font-size: 1.6rem;
    border: solid 1px #ccc;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .form-column-text > input[type="text"],.form-column-email > input[type="email"] {
    order: 3;
    margin-top: 10px;
    width: 582px;
    height: 50px;
    padding: 10px 18px;
    font-size: 1.6rem;
    border: solid 1px #ccc;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .form-column-zip-code-jp > .input-group > input[type="text"]{
    width: 272px;
    height: 50px;
    padding: 10px 18px;
    font-size: 1.6rem;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    border: solid 1px #ccc;
  }
  .option-text {
    margin-left: 8px;
  }
  textarea {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 15px 17px;
    height: 200px;
    font-size: 1.6rem;
    border: solid 1px #ccc;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  textarea:focus {
    border-color: #444d5c;
    outline: none;
  }
  .form-column-zip-code-jp > .input-group {
    margin-top: 9px!important;
  }
  .form-column-prefecture-jp > select {
    width: 272px;
    height: 50px;
    margin-top: 18px;
    padding: 5px 15px 5px 20px;
    font-size: 1.6rem;
    font-weight: bold;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    border: solid 1px #444d5c;
    cursor: pointer;
  }
  .form-column-prefecture-jp > select:focus {
    border: solid 1px #444d5c;
    outline: none;
  }
  .button-group {
    text-align: center;
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    align-items: center;
    margin: 65px 0 0;
  }
  .button-group > button[data-tf-type="confirm"],
  .button-group button[data-tf-type="submit"] {
    padding: 5px 12px 5px 5px;
    min-width: 377px;
    height: 50px;
    border-radius: 0;
    font-weight: bold;
    font-size: 1.6rem;
    color: #fff;
    border: none;
    background-color: #444d5c;
    margin: 0;
    position: relative;
    transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
  }
  .button-group button[data-tf-type="back"] {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1px solid #444d5c;
    line-height: 1.4;
    text-align: center;
    margin: 1.8em 0 0;
    padding: 13px 28px 13px 23px;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 0;
    transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
  }
  .button-group > button:before {
    content: "";
    position: absolute;
    top: 20px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
  }
  .button-group > button[data-tf-type="back"]:before {
    content: "";
    position: absolute;
    top: 19px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #e10618;
    border-right: 2px solid #e10618;
    transform: rotate(45deg);
  }
  .button-group button[data-tf-type="confirm"]:hover,
  .button-group button[data-tf-type="submit"]:hover {
    background-color: #e10618;
    color: #fff;
  }
  .button-group button[data-tf-type="back"]:hover {
    background-color: #e10618;
    border-color: #e10618;
    color: #fff;
  }
  .button-group > button[data-tf-type="back"]:hover:before {
    border-color: #fff;
  }
  .button-group button[data-tf-type="submit"] > .icon:first-child {
    display: none;
  }
  .button-group button[data-tf-type="submit"][disabled] {
    background-color: #a1a6ad;
    opacity: 1;
  }
  .help-block {
    display: none;
  }
  .form-column-recaptcha div[data-tf-type="recaptcha"] {
    margin-top: 25px;
  }
  #form-container {
    background: url("https://www.mitsubishisteel.co.jp/inquiry/img/index_bg01.webp") no-repeat 0 0;
    background-size: contain;
    padding-top: 60px;
  }
  #confirmation-container {
    background: url("https://www.mitsubishisteel.co.jp/inquiry/img/index_bg02.webp") no-repeat 0 0;
    background-size: contain;
    padding-top: 60px;
  }
  #confirmation-container > *:first-child {
    margin-top: 50px;
  }
  #confirmation-container .description-block {
    display: none;
  }
  #confirmation-container.form-column-textarea > label,.form-column-text > label,.form-column-zip-code-jp > label {
    order: 1;
  }
  /* ----- error-container ----- */
  .content.content-error {
    margin-bottom: 2.3em;
  }
  .message-block.message-block-error {
    margin-bottom: 0;
    padding: 30px 26px;
    background-color: #ffebeb;
    border: none;
    border-radius: 0;
  }
  .message-block.message-block-error > span {
    display: none;
  }
  .message-block.message-block-error > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .message-block.message-block-error > ul > li {
    margin-top: 1.2em;
  }
  .message-block.message-block-error > ul > li:first-child {
    margin-top: 0!important;
  }
  .message-block.message-block-error > ul > li > a {
    display: inline-flex;
    position: relative;
    padding-left: 1.6em;
    color: #c00;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    text-decoration: none;
    transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
  }
  .message-block.message-block-error > ul > li > a:hover {
    text-decoration: underline;
  }
  .message-block.message-block-error > ul > li > a::before {
    display: inline-block;
    position: absolute;
    top: .35em;
    left: 7px;
    width: 9px;
    height: 9px;
    margin-top: 0;
    -webkit-backface-visibility: hidden;
    border-top: 2px solid #c00;
    border-right: 2px solid #c00;
    content: "";
    transform: rotate(135deg);
    vertical-align: middle;
  }
}


@media only screen and (max-width:767px) {
  /* ----- container ----- */
  .container {
    margin: 0;
    max-width: 100%;
    padding: 0;
    border: none;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .preview-block {
    order: 2;
    padding: 0;
    margin-top: 18px;
    font-size: 1.4rem;
    color: #333;
    text-decoration: none;
  }
  .form-column {
    margin: 0;
  }
  .description-block > .text {
    margin: 1em 0 0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
    font-family: Yu Gothic,Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .description-block > .text > .form-required {
    display: inline-block;
    background-color: #e10618;
    color: #fff;
    vertical-align: top;
    margin-right: .8em;
    padding: .3em .7em;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
  }
  .form-column-heading {
    margin: 31px 0 0 0;
  }
  .form-column-textarea {
    margin: 33px 0 0 0;
  }
  .form-column-textarea > label,.form-column-text > label,.form-column-zip-code-jp > label {
    order: 1;
  }
  .form-column-textarea > .description-block,.form-column-text > .description-block,.form-column-email > .description-block,.form-column-tel > .description-block,.form-column-zip-code-jp > .description-block {
    order: 2;
    font-size: 1.4rem;
    margin: 18px 0 0 0;
    color: #333;
  }
  .form-column-textarea > textarea,.form-column-zip-code-jp >.input-group {
    order: 3;
  }
  .form-column-textarea,.form-column-text,.form-column-email,.form-column-tel,.form-column-zip-code-jp {
    display: flex;
    flex-flow: column;
  }
  .form-column-email,.form-column-tel {
    margin-top: 34px;
  }
  .form-column-text,.form-column-zip-code-jp,.form-column-prefecture-jp {
    margin-top: 35px;
  }
  .form-column > h2 {
    margin: 0 0 18px 0;
    font-size: 2.0rem;
    display: inline-block;
    position: relative;
    line-height: 1.4;
    padding-left: 21px;
  }
  .form-column > h2:before {
      position: absolute;
      top: .6em;
      left: 0;
      background: #e10618;
      content: "";
      width: 10px;
      height: 3px;
    }
  .form-column-heading + div {
    margin: 0!important;
    }
  fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }
  fieldset >.label {
    padding: 13px 13px 10px;
  }
  .label {
    background-color: #eef3f7;
    width: 100%;
    margin: 0;
    padding: 13px 13px 10px;
    font-size: 1.4rem;
    font-weight: 600;
  }
  .label > .badge-required {
    display: inline-block;
    background-color: #e10618;
    color: #fff;
    vertical-align: top;
    padding: .3em .7em .2em;
    line-height: 1;
    margin-left: 8px;
    height: 19px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0;
  }
  .input-group {
    display: flex;
    flex-flow: row wrap;
    font-size: 1.4rem;
    margin-top: 18px;
  }
  .input-group > .option {
    width: calc((100% - (14px)) / 2);
    line-height: 1.6;
    padding-left: 19px;
    position: relative;
  }
  .form-column .input-group .option > input {
    position: absolute;
    top: .2em;
    left: 0;
  }
  .input-group > .option:nth-child(2n) {
    margin-left: 14px;
  }
  .input-group > .option:nth-child(n+3) {
    margin-top: 14px;
  }
  input[type="radio"] {
    accent-color: #444d5c;
  }
  input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus {
  border-color: #444d5c!important;
  outline: none;
}
  .form-column-tel > input[type="tel"] {
    order: 3;
    margin-top: 11px;
    width: 345px;
    max-width: 100%;
    height: 45px;

    padding: 10px 16px 7px;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    font-size: 1.6rem;
    border: solid 1px #ccc;
  }
  .form-column-text > input[type="text"],.form-column-email > input[type="email"] {
    order: 3;
    margin-top: 11px;
    width: 345px;
    max-width: 100%;
    height: 45px;
    padding: 10px 16px 7px;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    border: solid 1px #ccc;
    font-size: 1.6rem;
    color: #333;
  }
  .form-column-zip-code-jp > .input-group > input[type="text"]{
    width: 345px;
    max-width: 100%;
    height: 45px;
    padding: 10px 16px 7px;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    font-size: 1.6rem;
    border: solid 1px #ccc;
  }
  .option-text {
    margin-left: 1px;
  }
  textarea {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 13px 16px;
    font-size: 1.6rem;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
    height: 192px;
    border: solid 1px #ccc;
  }
  textarea:focus {
    border-color: #444d5c;
    outline: none;
  }
  .form-column-zip-code-jp > .input-group {
    margin-top: 10px!important;
  }
  .form-column-prefecture-jp > select {
    width: 345px;
    max-width: 100%;
    height: 45px;
    margin-top: 18px;
    padding: 5px 16px;
    font-size: 1.4rem;
    border: solid 1px #ccc;
    font-family: Hiragino Kaku Gothic Pro,Hiragino Sans,Meiryo,Osaka,Arial,MS PGothic,sans-serif;
  }
  .form-column-prefecture-jp > select:focus {
    border: solid 1px #444d5c;
    outline: none;
  }
  .button-group {
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 47px;
    text-align: center;
  }
  .button-group > button {
    padding: 7px 26px 5px 10px;
    width: 345px;
    max-width: 100%;
    height: 45px;
    border-radius: 0;
    font-weight: bold;
    font-size: 1.4rem;
    color: #fff;
    border: none;
    background-color: #444d5c;
    margin: 0;
    position: relative;
  }
  .button-group > button[data-tf-type="confirm"]:before {
    content: "";
    position: absolute;
    top: 18px;
    right: 17px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
  }
  .button-group > button[data-tf-type="submit"]:before {
    content: "";
    position: absolute;
    top: 17px;
    right: 17px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
  }
  .button-group button[data-tf-type="submit"] {
    padding: 8px 24px 7px 5px;

    width: 345px;
    height: 42px;
    border-radius: 0;
    font-weight: bold;
    font-size: 1.4rem;
    color: #fff;
    border: none;
    background-color: #444d5c;
    margin: 0;
    position: relative;
  }
  .button-group button[data-tf-type="back"] {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1px solid #444d5c;
    line-height: 1.4;
    text-align: center;
    margin: 15px 0 0;
    padding: 5px 22px 5px 10px;
    font-size: 1.4rem;
    width: 103px;
    font-weight: bold;
    border-radius: 0;
    transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
    background-color: #fff;
    color: #333;
  }
  .button-group > button[data-tf-type="back"]:before {
    content: "";
    position: absolute;
    top: 17px;
    right: 17px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #e10618;
    border-right: 2px solid #e10618;
    transform: rotate(45deg);
  }
  .button-group button[data-tf-type="submit"] > .icon:first-child {
    display: none;
  }
  .button-group button[data-tf-type="submit"][disabled] {
    background-color: #a1a6ad;
    opacity: 1;
  }
  .help-block {
    display: none;
  }
  .form-column-recaptcha div[data-tf-type="recaptcha"] {
    margin-top: 28px;
  }
  #form-container {
    background: url("https://www.mitsubishisteel.co.jp/inquiry/img/index_bg01_sp.webp") no-repeat;
    background-size: 345px;
    padding-top: 83px;
  }
  #confirmation-container {
    background: url("https://www.mitsubishisteel.co.jp/inquiry/img/index_bg02_sp.webp") no-repeat;
    background-size: 345px;
    padding-top: 83px;
  }
  #confirmation-container > *:first-child {
    margin-top: 30px;
  }
  #confirmation-container .badge {
    display: none;
  }
  #confirmation-container .description-block {
    display: none;
  }
  #confirmation-container.form-column-textarea > label,.form-column-text > label,.form-column-zip-code-jp > label {
    order: 1;
  }
  #confirmation-container .form-column-textarea {
    margin: 22px 0 0 0;
  }
  #confirmation-container .form-column-email,#confirmation-container .form-column-tel {
    margin-top: 18px;
  }
  #confirmation-container .button-group {
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 27px;
    text-align: center;
  }
  /* ----- error-container ----- */
  .content.content-error {
    margin-bottom: 1.8em;
  }
  .message-block.message-block-error {
    margin-bottom: 0;
    padding: 15px;
    background-color: #ffebeb;
    border: none;
    border-radius: 0;
  }
  .message-block.message-block-error > span {
    display: none;
  }
  .message-block.message-block-error > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .message-block.message-block-error > ul > li {
    margin-top: .6em;
  }
  .message-block.message-block-error > ul > li:first-child {
    margin-top: 0!important;
  }
  .message-block.message-block-error > ul > li > a {
    display: inline-flex;
    position: relative;
    padding-left: 1.6em;
    color: #c00;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6;
    text-decoration: none;
    transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
  }
  .message-block.message-block-error > ul > li > a:hover {
    text-decoration: underline;
  }
  .message-block.message-block-error > ul > li > a::before {
    display: inline-block;
    position: absolute;
    top: .2em;
    left: 1px;
    width: 10px;
    height: 10px;
    margin-top: 0;
    -webkit-backface-visibility: hidden;
    border-top: 2px solid #c00;
    border-right: 2px solid #c00;
    content: "";
    transform: rotate(135deg);
    vertical-align: middle;
  }
}