@charset "UTF-8";

/* ########## JBL株式会社  ########## */

/*
 * "Noto Sans JP" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */
/*
/*
 * "Oswald" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* Copyright (c) 2025 JBL株式会社  
 Released under the MIT license
 https://opensource.org/licenses/mit-license.php */



/* ########## ブレンド ########## */
#assessment2 .text {
  line-height: 1.5;
}

.display-block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.multiply {
  mix-blend-mode: multiply;
}

.small-80 {
  font-size: 80%;
}

.signage-contentInner {
  position: relative;
  z-index: 2;
}

.blend::after {
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background-color: rgba(45, 97, 151, 0.5);
  overflow: hidden;
  -webkit-animation: fadeIn 1s ease 0.5s;
  -moz-animation: fadeIn 1s ease 0.5s;
  -ms-animation: fadeIn 1s ease 0.5s;
  -o-animation: fadeIn 1s ease 0.5s;
  animation: fadeIn 1s ease 0.5s;
  animation-fill-mode: both;
  mix-blend-mode: multiply;
}

.signageVideo {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  transform: translateZ(0);
  filter: drop-shadow(0px 0px #ffffff);
  /* 黒線がでるの消すコード */
}



/* ########## 下層ページ共通 ########## */

.border-bottom1,
.border-bottom-black {
  border-bottom: 1px solid #464646;
}

.margin-top1 {
  margin-top: 1em !important;
}

.margin-top15 {
  margin-top: 1.5em !important;
}

.margin-top2 {
  margin-top: 2em !important;
}

.margin-top3 {
  margin-top: 3em !important;
}

.underlayer__top {
  position: relative;
  padding-top: 90px;
}

/* ########### 乗り換え査定 ###########  */
input[type="date"] {
  padding: 3px 5px;
  text-align: left !important;
  background-color: #ffffff;
  border: none;
  position: relative;
}

/* カレンダー非表示にして全体でクリック  */
input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.contacttable input[type="date"] {
  padding-left: 6px;
  width: 180px;
  height: 38px;
}

/*
table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
 */
/* ########### AIオンライン10秒査定 ###########  */

video.signageVideo {
  position: relative;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  -webkit-animation: fadeIn 1s ease 0.5s;
  -moz-animation: fadeIn 1s ease 0.5s;
  -ms-animation: fadeIn 1s ease 0.5s;
  -o-animation: fadeIn 1s ease 0.5s;
  animation: fadeIn 1s ease 0.5s;
  animation-fill-mode: both;
}

.bold-blue {
  color: #184c78;
  font-weight: 700;
}

.assetmentflex label {
  font-weight: 700 !important;
}

#assessment2 input[type="radio"] {
  display: none;
  /* checkboxを非表示にする */
}

#box2,
#box3,
#box4,
#box5,
.assessment-result-back {
  display: none;
}

#box2b,
#box3b,
#box4b,
#box5b {
  display: none;
}

#assessment2 input[type="radio"]:checked+label {
  background-color: #184c78;
  color: rgb(255, 255, 255);
  /* マウス選択時の背景色を指定する */
}

/* 入力制限 */

/* 入力可能時のCSS */

.box1 {
  background-color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(80, 80, 80);
}

.box1.js--active,
.box2.js--active,
.box3.js--active,
.box4.js--active,
.box5.js--active {
  background-color: rgb(255, 255, 255) !important;
  ;
  border: 1px solid rgb(80, 80, 80);
}

/*labelのpaddingを移動する*/

.box1 a,
.box2 a .box4 a .box5 a {
  width: 100%;
  height: 100%;
}

/* 入力可能時のCSS */
.box1b {
  background-color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(80, 80, 80);
}

.box1b.js--active,
.box2b.js--active,
.box3b.js--active,
.box4b.js--active {
  background-color: rgb(255, 255, 255) !important;
  ;
  border: 1px solid rgb(80, 80, 80);
}

/*labelのpaddingを移動する*/
.box1b a,
.box2b a .box4b a {
  width: 100%;
  height: 100%;
}

/* ########### お申込みフォーム ###########  */

.contacttable td input[type=file] {
  width: 100%;
  margin-left: -10px;
  padding: 7px 8px 9px;
  border: #464646 0px solid;
  color: #464646;
}

.client-info2,
.client-info3 {
  display: none;
  margin-top: 45px;
}

#op_btn,
#op_btn2 {
  margin-top: 15px;
  display: inline-block;
  background-color: #0058a2 !important;
  border: 2px solid #0058a2 !important;
  color: rgb(255, 255, 255) !important;
  padding: 5px 7px;
  cursor: pointer;
}

.contacttable th.file {
  padding-bottom: 0;
}

.contacttable td.file {
  padding-bottom: 0;
}

.contacttable th.file2 {
  padding-bottom: 0;
  padding-top: 0;
}

.contacttable td.file2 {
  padding-bottom: 0;
  padding-top: 0;
}

/* ########## お問い合わせ ########## */


.illust-position-contact {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 180px;
}

.radio-input label {
  display: inline-flex;
  align-items: center;
}

/* wordpressでずれるのでこのコードが必要 */
.radio-input label {
  margin-top: 8px;
}

/* wordpressで空きが出るのでこのコードが必要 */
.radio-input span {
  margin-left: 0;
  margin-right: 8px;
}

/* inputがずれるの解決方法パターン２：スピナーを非表示にする */
div.wpcf7 .wpcf7-spinner {
  display: none !important;
}

/* 
input[type=radio] {
  width: 15px;
  height: 15px;
  vertical-align: sub;
  margin-right: 5px;
  accent-color: #184c78;
} */

.douitext {
  padding-top: 5px;
}

.radiotext {
  padding-right: 15px;
  font-size: 16px;
  white-space: nowrap;
}

.radiotext a {
  font-weight: 500;
  font-size: inherit !important;
}

/* 
input[type=checkbox] {
  width: 15px;
  height: 15px;
  vertical-align: sub;
  display: inline-block;
  margin-right: 5px;
}
*/
label {
  margin-top: 5px;
  display: inline-block;
}

::placeholder,
.contacttable::placeholder {
  font-size: 16px;
  -webkit-text-fill-color: #d6d6d6 !important;
}

.contacttable .hitusu {
  position: absolute;
  top: 21px;
  right: 25px;
  vertical-align: 2px;
  margin-left: 10px;
  margin-bottom: 3px;
  line-height: 1.35;
  padding: 3px 5px 2px;
  font-weight: 700;
  color: #cbbb6b;
  border: #cbbb6b 1px solid;
  font-size: 14px;
}

.contacttable th {
  font-size: 16px;
  font-weight: 900;
  width: 240px;
  padding: 25px 0px 13px;
  color: #184c78;
  position: relative;
}

.contacttable td {
  padding: 14px 0px;
  font-weight: 500;
}

.contacttable td input[type=text],
.contacttable td input[type=tel],
.contacttable td input[type=email],
.contacttable td select {
  font-size: 16px;
  color: #464646;
  padding: 8px 15px;
  font-weight: 500;
  border: #ffffff 0px solid;
  background-color: #ffffff;
  -webkit-text-fill-color: #464646 !important;
  font-family: "Noto Sans JP", sans-serif;
}

.contacttable td input[type=text]:not(.wpcf7-free-text) {
  width: 100%;
}

.contacttable td input[type=tel],
.contacttable td input[type=email] {
  width: 100%;
  max-width: 100%;
}

.contacttable td select {
  width: 298px;
  padding-top: 9px;
  padding-bottom: 7px;
  max-width: 100%;
  appearance: none;
  /* ブラウザデフォルトの矢印を非表示 */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' style='fill:none;stroke:darkgray;stroke-width:2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
}


/* まず通常の色（選択肢を選んだ時）を黒にする */
.contacttable td select {
  color: #464646 !important;
}

/* value=""（プレースホルダー）が選ばれている間だけグレーにする */
.contacttable td select:has(option:checked[value=""]) {
  -webkit-text-fill-color: #464646 !important;
}

.contacttable td textarea {
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  padding: 8px 15px;
  width: 100%;
  height: 135px;
  border: #ffffff 0px solid;
  background-color: #ffffff;
  -webkit-text-fill-color: #464646 !important;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
}

input.adjust:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgb(229, 229, 231) inset;
}

/* 上からずれるけどwodpressではずれない
.radio-other-adjust {
  margin-top: -5px;
}
*/
.radio-other-adjust {
  margin-top: 2px;
}

input.wpcf7-free-text {
  margin-top: -2px;
  margin-left: 5px;
  width: 170px;
}

/* ########## 共通ボタン ########## */

.button-common {
  position: relative;
  text-align: center;
}

.button-common>a {
  font-size: 19px;
  padding: 6px 55px;
  line-height: 0;
  min-width: 240px;
  height: 52px;
  border-radius: 55px;
  max-width: 100%;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  gap: 10px;
  color: #184c78;
  background-color: #cbbb6b;
  border: #cbbb6b 1px solid;
  transition: all .25s ease 0s;
}

.button-common.white-btn>a {
  color: #cbbb6b;
  background-color: #184c78;
  border: #cbbb6b 1px solid;
}

.button-common.white-btn>a::after {
  background: #cbbb6b;
}

@media (any-hover: hover) {
  .button-common>a:hover {
    color: #cbbb6b;
    background-color: #184c78;
    border: #cbbb6b 1px solid;
  }

  .button-common.white-btn>a:hover {
    color: #184c78;
    background-color: #cbbb6b;
  }

  .button-common.white-btn>a:hover::after {
    background: #ffffff;
  }
}

.input-wrapper {
  width: fit-content;
  margin-inline: auto;
  padding-inline: 10px;
}

.button-common>input {
  font-size: 19px;
  padding: 6px 30px;
  width: 240px;
  height: 52px;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  font-weight: 700;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  color: #ffffff;
  background-color: #184c78;
  border: #184c78 1px solid;
  transition: all .25s ease 0s;
}

.button-common.back-button>input {
  padding: 6px 30px;
}

.back-button>input {
  color: #ffffff;
  background-color: #9296ad;
  border: #9296ad 1px solid;
}

@media (any-hover: hover) {
  .input-button>input:hover {
    background-color: rgba(24, 76, 120, 0.8);
    border: rgba(24, 76, 120, 0.8) 1px solid;
  }


  .back-button>input:hover {
    background-color: rgba(146, 150, 173, 0.8);
    border: rgba(146, 150, 173, 0.8) 1px solid;
  }
}

/* ########## お問い合わせ確認画面 ########## */

.formTable {
  border-top: #464646 0px solid;
}

.formTable th {
  color: #184c78;
  border-bottom: #464646 0px solid;
  font-weight: 700;
  width: 230px;
  height: 45px;
  min-height: 45px;
  padding-bottom: 16px;
  text-align: left;
}

.formTable td {
  min-height: 45px;
  font-weight: 500;
  border-bottom: #464646 0px solid;
  width: 100%;
  padding-bottom: 16px;
}

p.error_messe {
  margin: 5px 0;
  color: #184c78;
}

.confirm-button {
  width: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* ########## パンくず ########## */
.breadcrumb__list {
  position: relative;
  z-index: 3;
  margin-bottom: 35px;
  margin-right: 30px;
  display: block;
  line-height: 1.15;
  font-size: 12px;
}

.breadcrumb__item:not(:last-child)::after {
  content: "＞";
  padding: 3px;
}

.breadcrumb__item {
  display: inline-block;
  line-height: 1.15;
  font-size: 12px;
  font-weight: 500;
}

.breadcrumb__item a {
  font-size: inherit;
  font-weight: inherit;
}

/* ####################################### 479px以下 ####################################### */

@media (max-width: 479px) {

  /* ############## 共通 ############## */

  .contents {
    padding: 30px 15px;
  }

  /* ########## パンくず ########## */

  .breadcrumb__list {
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .breadcrumb__item {
    font-size: 10px;
  }


  /* ########### 乗り換え査定 ###########  */
  .contacttable input[type="date"] {
    width: 150px;
    height: 38px;
    font-size: 14px;
    padding-left: 4px;
  }

  /* ########### AIオンライン10秒査定 ###########  */
  .ai-wrapper {
    flex-direction: column;
  }

  .ai-wrapper img {
    margin-top: 10px;
    width: 110px;
  }

  .yellowbox.assessment {
    vertical-align: top;
    border-radius: 15px;
    padding: 20px 15px;
    width: 100%;
  }

  .assessment-h2title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .assessment-h2result-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .yellowbox.assessment label:not(.radiotext) {
    padding: 15px 9px;
    line-height: 1.35;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
    text-align: center;
    color: rgb(80, 80, 80);
    background-color: rgb(229, 229, 231);
    border-radius: 10px;
    margin-bottom: 8px;
    width: 100%;
    display: inline-block;
  }

  .assessment-h2result-subtitle {
    text-align: center;
    font-size: 17px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.75;
    margin-bottom: 35px;
    border-bottom: #184c78 1px solid;
  }

  .assessment-h2result-subtitle2 {
    text-align: center;
    font-size: 16px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-right: 0px;
  }

  .assessment-result-back {
    padding: 15px;
    background-color: rgb(255, 255, 255);
    border: rgb(80, 80, 80) 1px solid;
    border-radius: 15px;
  }

  .assessment-resultblock {
    display: block;
    text-align: center;
  }

  .result-display {
    width: 100%;
    display: inline-block;
    vertical-align: bottom;
    margin: 10px 0 15px;
    padding: 7px 15px 7px 15px;
    background-color: rgb(255, 255, 255);
    border: #184c78 2px solid;
    border-radius: 8px;
  }

  .result-display-unit {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    vertical-align: 12px;
    margin-left: 2px;
    padding-bottom: 4px;
    color: #184c78;
  }

  #odo1,
  #odo2,
  #odo3,
  #odo4 {
    font-size: 22px;
    color: #184c78;
    font-weight: bold;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .odometer div {
    font-size: 22px;
  }

  .result-display span {
    color: #184c78;
  }

  .result-display div {
    color: #184c78;
  }

  .result-kara {
    font-size: 16px;
    color: #184c78 !important;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  .result-kara2 {
    font-size: 16px;
    color: #184c78;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  #price {
    color: #184c78;
    font-weight: bold;
    font-size: 20px;
    width: 210px;
    display: inline-block;
    vertical-align: bottom;
    margin: 10px 5px 10px 0;
    padding: 4px 6px;
    background-color: rgb(229, 229, 231);
    border: none;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .assessment-arrow {
    margin-top: -5px;
    margin-bottom: -5px;
    text-align: center;
  }

  #sysMessage {
    font-size: 16px;
    color: #184c78;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

  /* ########### お申込みフォーム ###########  */

  /* ########## お問い合わせ ########## */

  .illust-position-contact {
    position: relative;
    top: -25px;
    margin-bottom: -60px;
    width: 140px;
    margin-inline: auto;
  }

  .contacttable th {
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 15px 0px 0px 0px;
    margin-bottom: 7px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  .contacttable td {
    width: 100%;
    padding: 0px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  ::placeholder,
  .contacttable ::placeholder {
    font-size: 14px;
  }

  .contacttable .hitusu {
    padding: 2px 5px 2px;
    font-size: 12px;
    top: 10px;
    right: 0px
  }

  .contacttable td input[type=text],
  .contacttable td input[type=tel],
  .contacttable td input[type=email] {
    font-size: 14px;
    padding: 7px 10px;
  }

  .contacttable td select {
    font-size: 14px;
    padding: 7px 30px 7px 10px;
  }

  .contacttable td textarea {
    font-size: 14px;
    padding: 7px 15px;
    height: 110px;
  }

  .radiotext {
    padding-right: 10px;
    font-size: 13px;
  }

  .radio-other-adjust {
    margin-top: 0px;
  }

  /* ########## 共通ボタン ########## */

  .button-common>a {
    padding: 8px 45px;
    font-size: 16px;
    min-width: 200px;
    height: 45px;
    border-radius: 45px;
  }

  .button-common>input {
    font-size: 16px;
    width: 200px;
    height: 45px;
  }

  /* ########## お問い合わせ確認画面 ########## */

  .formTable th {
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding-bottom: 5px;
    display: block;
  }

  .formTable td {
    width: 100%;
    display: block;
  }

  .confirm-button {
    flex-wrap: wrap;
    width: 100%;
    gap: 0px;
  }

}

/* ####################################### 480px以上768px以下 ####################################### */

@media (min-width: 480px) and (max-width: 767px) {


  /* ############## 共通 ############## */

  .contents {
    padding: 40px 20px;
  }

  /* ########## パンくず ########## */

  .breadcrumb__list {
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .breadcrumb__item {
    font-size: 11px;
  }

  /* ########### AIオンライン10秒査定 ###########  */
  .ai-wrapper {
    flex-direction: column;
  }

  .ai-wrapper img {
    margin-top: 10px;
    width: 110px;
  }

  .yellowbox.assessment {
    vertical-align: top;
    border-radius: 15px;
    padding: 20px 15px;
    width: 100%;
  }

  .assessment-h2title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .assessment-h2result-title {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 15px;
  }



  .yellowbox.assessment label:not(.radiotext) {
    padding: 15px 9px;
    line-height: 1.35;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    text-align: center;
    color: rgb(80, 80, 80);
    background-color: rgb(229, 229, 231);
    border-radius: 10px;
    margin-bottom: 6px;
    width: 100%;
    display: inline-block;
  }


  .assessment-h2result-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.75;
    margin-bottom: 35px;
    border-bottom: #184c78 1px solid;
  }

  .assessment-h2result-subtitle2 {
    text-align: center;
    font-size: 17px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-right: 0px;
  }

  .assessment-result-back {
    padding: 15px;
    background-color: rgb(255, 255, 255);
    border: rgb(80, 80, 80) 1px solid;
    border-radius: 15px;
  }

  .assessment-resultblock {
    display: block;
    text-align: center;
  }

  .result-display {
    width: 100%;
    display: inline-block;
    vertical-align: bottom;
    margin: 10px 0 15px;
    padding: 7px 15px 7px 15px;
    background-color: rgb(255, 255, 255);
    border: #184c78 2px solid;
    border-radius: 8px;
  }

  .result-display-unit {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: 12px;
    margin-left: 2px;
    padding-bottom: 4px;
    color: #184c78;
  }

  #odo1,
  #odo2,
  #odo3,
  #odo4 {
    font-size: 24px;
    color: #184c78;
    font-weight: bold;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .odometer div {
    font-size: 24px;
  }

  .result-display span {
    color: #184c78;
  }

  .result-display div {
    color: #184c78;
  }

  .result-kara {
    font-size: 18px;
    color: #184c78 !important;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  .result-kara2 {
    font-size: 17px;
    color: #184c78;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  #price {
    color: #184c78;
    font-weight: bold;
    font-size: 22px;
    width: 210px;
    display: inline-block;
    vertical-align: bottom;
    margin: 10px 5px 10px 0;
    padding: 4px 6px;
    background-color: rgb(229, 229, 231);
    border: none;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .assessment-arrow {
    margin-top: -5px;
    margin-bottom: -5px;
    text-align: center;
  }

  #sysMessage {
    font-size: 16px;
    color: #184c78;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

  /* ########### お申込みフォーム ###########  */

  /* ########## お問い合わせ ########## */

  .illust-position-contact {
    position: relative;
    top: -45px;
    margin-bottom: -120px;
    width: 165px;
    margin-inline: auto;
  }

  .contacttable th {
    font-size: 15px;
    width: 100%;
    padding: 20px 0px 0px 0px;
    margin-bottom: 7px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  .contacttable td {
    width: 100%;
    padding: 0px 0px 5px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  ::placeholder,
  .contacttable::placeholder {
    font-size: 15px;
  }

  .contacttable .hitusu {
    padding: 2px 5px 2px;
    font-size: 13px;
    top: 10px;
    right: 0px
  }

  .contacttable td input[type=text],
  .contacttable td [type=tel],
  .contacttable td [type=email] {
    font-size: 15px;
    padding: 7px 15px;
  }

  .contacttable td select {
    font-size: 15px;
    padding: 7px 30px 7px 15px;
  }

  .contacttable td textarea {
    font-size: 15px;
    padding: 7px 15px;
    height: 110px;
  }

  .radiotext {
    padding-right: 15px;
    font-size: 14px;
  }

  .radio-other-adjust {
    margin-top: 0px;
  }

  /* ########## 共通ボタン ########## */

  .button-common>a {
    padding: 8px 45px;
    font-size: 18px;
    min-width: 210px;
    height: 50px;
    border-radius: 50px;
  }

  .button-common>input {
    font-size: 18px;
    width: 210px;
    height: 50px;
  }

  /* ########## お問い合わせ ########## */

  .contacttable th {
    font-size: 15px;
    width: 100%;
    padding: 20px 0px 0px 0px;
    margin-bottom: 7px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  .contacttable td {
    width: 100%;
    padding: 0px 0px 5px;
    text-align: left;
    display: block;
    border-bottom: #8aa5b3 0px solid;
  }

  .contacttable::placeholder {
    font-size: 12px;
  }

  .contacttable .hitusu {
    padding: 2px 5px 2px;
    font-size: 12px;
    top: 15px;
    right: 0px
  }

  .contacttable td input[type=text],
  .contacttable td [type=tel],
  .contacttable td [type=email] {
    font-size: 15px;
    padding: 7px 15px;
  }

  .contacttable td select {
    font-size: 15px;
    padding: 7px 30px 7px 15px;
  }

  .contacttable td textarea {
    font-size: 15px;
    padding: 7px 15px;
    height: 110px;
  }

  .radiotext {
    padding-right: 15px;
    font-size: 14px;
  }


  .radio-other-adjust {
    margin-top: 0px;
  }

  /* ########## お問い合わせ確認画面 ########## */

  .formTable th {
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding-bottom: 5px;
    display: block;
  }

  .formTable td {
    width: 100%;
    display: block;
  }

  .confirm-button {
    max-width: 440px;
  }

}

/* ####################################### 768px以上 ####################################### */

@media (min-width: 768px) {

  .sf {
    display: none !important;
  }

  .tb {
    display: none !important;
  }

  .pc {
    display: block !important;
  }

  /* ########## お問い合わせ確認画面 ########## */
  .formTable th {
    width: 230px;
    height: 45px;
    padding-bottom: 5px;
    display: block;
  }
}

/* ####################################### 調整 ####################################### */

@media (min-width: 768px) and (max-width: 1099px) {

  /* ########## 共通 ########## */
  .contents {
    padding: 60px 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1160px;
  }

  /* ########### AIオンライン10秒査定 ###########  */
  .ai-wrapper {
    margin-left: -140px;
  }

  .yellowbox.assessment {
    vertical-align: top;
    border-radius: 15px;
    padding: 20px 15px;
    width: 100%;
  }

  .assessment-h2title {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .assessment-h2result-title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .yellowbox.assessment label:not(.radiotext) {
    padding: 15px 9px;
    line-height: 1.35;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    text-align: center;
    color: rgb(80, 80, 80);
    background-color: rgb(229, 229, 231);
    border-radius: 10px;
    margin-bottom: 8px;
    width: 100%;
    display: inline-block;
  }


  .assessment-h2result-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.75;
    margin-bottom: 35px;
    border-bottom: #184c78 1px solid;
  }

  .assessment-h2result-subtitle2 {
    text-align: center;
    font-size: 17px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-right: 0px;
  }

  .assessment-result-back {
    padding: 15px;
    background-color: rgb(255, 255, 255);
    border: rgb(80, 80, 80) 1px solid;
    border-radius: 15px;
  }

  .assessment-resultblock {
    display: block;
    text-align: center;
  }

  .result-display {
    width: 100%;
    display: inline-block;
    vertical-align: bottom;
    margin: 10px 0 15px;
    padding: 7px 15px 7px 15px;
    background-color: rgb(255, 255, 255);
    border: #184c78 2px solid;
    border-radius: 8px;
  }

  .result-display-unit {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: 16px;
    margin-left: 5px;
    padding-bottom: 8px;
    color: #184c78;
  }

  #odo1,
  #odo2,
  #odo3,
  #odo4 {
    font-size: 24px;
    color: #184c78;
    font-weight: bold;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .odometer div {
    font-size: 24px;
  }

  .result-display span {
    color: #184c78;
  }

  .result-display div {
    color: #184c78;
  }

  .result-kara {
    font-size: 18px;
    color: #184c78 !important;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  .result-kara2 {
    font-size: 18px;
    color: #184c78;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  #price {
    color: #184c78;
    font-weight: bold;
    font-size: 24px;
    width: 350px;
    display: inline-block;
    vertical-align: bottom;
    margin: 15px 0;
    padding: 7px;
    background-color: rgb(229, 229, 231);
    border: none;
    border-radius: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .assessment-arrow {
    margin-top: -10px;
    margin-bottom: -10px;
    text-align: center;
  }

  #sysMessage {
    font-size: 22px;
    color: #184c78;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

}

@media (min-width: 1100px) {

  .contents {
    padding: 60px 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1160px;
  }

  /* ########## ヘッダーで隠れる空きを調整 ########## */
  #main {
    padding-top: 110px;
  }

  .underlayer__top {
    padding-top: 110px;
  }

  /* ########### AIオンライン10秒査定 ###########  */
  .ai-wrapper {
    margin-left: -140px;
  }

  .yellowbox.assessment {
    vertical-align: top;
    border-radius: 15px;
    padding: 20px 15px;
    width: 100%;
  }

  .assessment-h2title {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .assessment-h2result-title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #184c78;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .assetmentflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }


  .yellowbox.assessment label:not(.radiotext) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 9px;
    line-height: 1.35;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    text-align: center;
    color: rgb(80, 80, 80);
    background-color: rgb(229, 229, 231);
    border-radius: 10px;
    margin-bottom: 8px;
    width: 49%;
  }


  .assessment-h2result-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.75;
    margin-bottom: 35px;
    border-bottom: #184c78 1px solid;
  }

  .assessment-h2result-subtitle2 {
    text-align: center;
    font-size: 17px;
    font-weight: 700 !important;
    color: #184c78;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-right: 0px;
  }

  .assessment-result-back {
    padding: 15px;
    background-color: rgb(255, 255, 255);
    border: rgb(80, 80, 80) 1px solid;
    border-radius: 15px;
  }

  .assessment-resultblock {
    width: 49%;
    display: inline-block;
    vertical-align: top;
  }

  .result-display {
    text-align: center;
    width: 98%;
    display: inline-block;
    vertical-align: bottom;
    margin: 15px 1%;
    padding: 7px 15px;
    background-color: rgb(255, 255, 255);
    border: #184c78 2px solid;
    border-radius: 10px;
  }

  .result-display-unit {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: 16px;
    margin-left: 5px;
    padding-bottom: 8px;
    color: #184c78;
  }

  #odo1,
  #odo2,
  #odo3,
  #odo4 {
    font-size: 24px;
    color: #184c78;
    font-weight: bold;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .odometer div {
    font-size: 24px;
  }

  .result-display span {
    color: #184c78;
  }

  .result-display div {
    color: #184c78;
  }

  .result-kara {
    font-size: 18px;
    color: #184c78 !important;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  .result-kara2 {
    font-size: 18px;
    color: #184c78;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    font-family: "Noto Sans JP", sans-serif;
  }

  #price {
    color: #184c78;
    font-weight: bold;
    font-size: 24px;
    width: 350px;
    display: inline-block;
    vertical-align: bottom;
    margin: 15px 0;
    padding: 7px;
    background-color: rgb(229, 229, 231);
    border: none;
    border-radius: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
  }

  .assessment-arrow {
    margin-top: -10px;
    margin-bottom: -10px;
    text-align: center;
  }

  #sysMessage {
    font-size: 22px;
    color: #184c78;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

  .borpc {
    border-bottom: 0px solid rgb(255, 255, 255) !important;
  }

}


/* ----------------------------------------------------------------------
ヘッダーインフォメーション
---------------------------------------------------------------------- */
@media screen and (min-width: 1201px),
print {
  .head_info {
    float: right;
    width: 715px !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }

  .headCopy {
    position: absolute;
    left: 15px;
    top: 10px;
    font-size: 11px !important;
  }

  .head_info_pc {
    height: 100%;
  }

  .head_info_sp {
    display: none;
  }

  .head_info01 {
    padding-top: 10px;
    width: 230px;
    padding-right: 10px;
  }

  .headTime span {
    font-size: 90%;
    border: 1px #000 solid;
    display: inline-block;
    margin-left: 5px;
    box-sizing: border-box;
  }

  .headUketsuke {
    background: #184c78;
    border-radius: 100px;
    padding: 5px;
    box-sizing: border-box;
  }

  .head_info02,
  .head_info03,
  .head_info04,
  .head_info05,
  .head_info06 {
    width: 95px;
    transition: all 0.5s ease 0s;
  }

  .head_info02 a,
  .head_info03 a,
  .head_info04 a,
  .head_info05 a,
  .head_info06 a {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    transition: all 0.5s ease 0s;
  }

  .head_info02 a {
    background: #34aa37;
  }

  .head_info03 a {
    background: #cbbb6b;
  }

  .head_info06 a {
    background: #184c78
  }

  .head_info06 a:hover {
    background: rgba(24, 76, 120, 0.8)
  }

  .head_info02 a:hover {
    background: rgba(52, 170, 55, 0.8);
  }

  .head_info03 a:hover {
    background: rgba(203, 187, 107, 0.8);
  }


  .head_info04:hover {
    opacity: 0.8;
  }

  .head_info05:hover {
    opacity: 0.8;
  }


  .headMailIco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
  }

  .head_info04 .headMailIco {
    top: 48%;
  }

  .head_info04 .headMailIco p {
    margin-top: -2%;
  }

  .head_info06 .headMailIco {
    top: 48%;
  }

  .head_info06 .headMailIco p {
    margin-top: -2%;
  }
}

@media screen and (max-width: 1200px) {

  .head_info_pc {
    display: none;
  }

  .head_info_sp {
    width: 258px;
    position: absolute;
    top: 0;
    right: 43px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }

  .head_info01,
  .head_info02,
  .head_info03,
  .head_info04,
  .head_info05,
  .head_info06 {
    width: 43px;
    height: 56px;
  }

  .global-nav-button {
    width: 43px;
  }

  .head_info01 a,
  .head_info02 a,
  .head_info03 a,
  .head_info04 a,
  .head_info05 a,
  .head_info06 a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }

  .head_info01 a {
    background: #246dac;
  }

  .head_info02 a {
    background: #34aa37;
  }

  .head_info03 a {
    background: #cbbb6b;
  }

  .head_info06 a {
    background: #184c78;
  }

  .head_info01 a img,
  .head_info02 a img,
  .head_info03 a img,
  .head_info04 a img,
  .head_info05 a img,
  .head_info06 a img {
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .head_info04 a img {
    width: 23px;
    height: 34px;
  }

  .head_info05 a img {
    width: 36px;
    height: 29px;
  }

  .head_info06 a img {
    width: 23px;
    height: 34px;
  }


  .headCopy {
    display: none;
  }
}

@media screen and (min-width: 1201px) {

  .head_info04 a img {
    width: 24px;
    height: 36px;
  }

  .head_info05 a img {
    width: 36px;
    height: 29px;
  }

  .head_info06 a img {
    width: 24px;
    height: 36px;
  }
}

@media screen and (max-width: 380px) {
  .logo {
    top: 2.5px;
    margin-left: 10px;
  }

  .logo img {
    width: 127px;
  }

  .head_info_sp {
    width: 156px;
    right: 26px;
  }

  .head_info01,
  .head_info02,
  .head_info03,
  .head_info04,
  .head_info05,
  .head_info06 {
    width: 26px;
    height: 40px;
  }

  .head_info01 a img,
  .head_info02 a img,
  .head_info03 a img,
  .head_info04 a img,
  .head_info05 a img,
  .head_info06 a img {
    width: 20px;
  }

  .head_info04 a img {
    width: 16px;
    height: 23px;
  }

  .head_info05 a img {
    width: 23px;
    height: 18px;
  }

  .head_info06 a img {
    width: 16px;
    height: 23px;
  }

  .header-bar {
    height: 40px;
  }

  .global-nav-button {
    width: 26px;
    height: 40px;
  }

  .header-bar-fixed .global-nav {
    top: 40px;
  }
}

@media (min-width: 380px) and (max-width: 500px) {
  .logo {
    top: 2.5px;
    margin-left: 10px;
  }

  .logo img {
    width: 130px;
  }

  .head_info_sp {
    width: 198px;
    right: 33px;
  }

  .head_info01,
  .head_info02,
  .head_info03,
  .head_info04,
  .head_info05,
  .head_info06 {
    width: 33px;
    height: 40px;
  }

  .head_info01 a img,
  .head_info02 a img,
  .head_info03 a img {
    width: 20px;
  }

  .head_info04 a img {
    width: 18px;
    height: 27px;
  }

  .head_info06 a img {
    width: 18px;
    height: 27px;
  }

  .head_info05 a img {
    width: 27px;
    height: 21px;
  }

  .header-bar {
    height: 40px;
  }

  .global-nav-button {
    width: 33px !important;
    height: 40px;
  }

  .header-bar-fixed .global-nav {
    top: 40px;
  }
}

.head_info04 {
  position: relative;
}

.head_info04 {
  background: url("../images2/ico_head_assessment-back.png") no-repeat center / cover;
}

.head_info05 {
  background: url("../images2/ico_head_transfer-back.png") no-repeat center / cover;
}