@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;
}

.relative {
  position: relative;
}

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

.blend::after {
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  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: rgb(229, 229, 231);
  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;
}

.contacttable {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

/* ########### AIオンライン10秒査定 ###########  */

img.signageImage {
  object-fit: cover;
  width: 100%;
  height: 425px;
  -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;
}

video.signageVideo {
  object-fit: cover;
  width: 100%;
  height: 425px;
  -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;
}

.absolute50-50 {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  left: 0;
  z-index: 2;
}

.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: 17px 0px;
  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: rgb(229, 229, 231) 0px solid;
  background-color: rgb(229, 229, 231);
  -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: rgb(229, 229, 231);
  -webkit-text-fill-color: #464646 !important;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgb(229, 229, 231) 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: 768px),
print {
  .topInfoPc {
    width: 580px;
    justify-content: space-between;
  }

  .topInfoSp {
    display: none;
  }

  .topInfoTel {
    padding-top: 6px;
    width: 280px;
    letter-spacing: 0.05em;
  }


  p.telNo {
    color: #133c66;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 5px;
  }

  p.telNo::before {
    content: url(../images/ico_freedial.png);
    position: relative;
    top: 3px;
    margin-right: 5px;
    display: inline-block;
  }

  p.hour {
    font-size: 14px;
    color: #333;
    display: table-cell;
    vertical-align: middle;
  }


  .topInfoMail,
  .topInfoAssessment,
  .topInfoTransfer {
    width: 100px;
    height: 80px;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
  }

  .topInfoMail a {
    background: #c4b159;
  }

  .topInfoMail a,
  .topInfoAssessment a,
  .topInfoTransfer a {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    display: block;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
  }

  .topInfoMail a span,
  .topInfoAssessment a span,
  .topInfoTransfer a span {
    color: #fff;
    font-size: 14px;
    line-height: 1.2em;
    display: block;
  }

  .topInfoMail a img,
  .topInfoAssessment a img,
  .topInfoTransfer a img {
    display: block;
    width: 45px;
    margin: 0 auto 5px;
    padding-top: 4px;
  }

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

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

  .topInfoMail a:hover,
  .topInfoAssessment a:hover,
  .topInfoTransfer a:hover {
    background: #133c66;
  }
}

@media (min-width: 768px) and (max-width: 850px) {
  .topInfoPc {
    width: 490px;
    justify-content: space-between;
  }

  .topInfoSp {
    display: none;
  }

  .topInfoTel {
    padding-top: 6px;
    width: 250px;
    letter-spacing: 0.05em;
  }

  .topInfoMail,
  .topInfoAssessment,
  .topInfoTransfer {
    width: 80px;
  }

  p.telNo {
    color: #133c66;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 5px;
  }

  p.telNo::before {
    content: url(../images/ico_freedial.png);
    position: relative;
    top: 6px;
    margin-right: 5px;
    display: inline-block;
  }

  .topInfoMail a span,
  .topInfoAssessment a span,
  .topInfoTransfer a span {
    font-size: 12.5px;
  }

}

@media screen and (max-width: 767px) {
  .lp-midashi>img {
    width: 70px;
  }

  .logo {
    width: 180px;
  }

  .logo h1 {
    top: 8.5px;
  }

  .topInfoSp {
    width: 200px;
    padding-top: 7.5px;
    margin-right: 15px;
    justify-content: space-between;
  }

}

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

  .logo {
    width: 145px;
  }

  .logo h1 {
    top: 12.5px;
  }

  .topInfoSp {
    width: 155px;
    padding-top: 13.5px;
    margin-right: 12.5px;
    justify-content: space-between;
  }

  .topInfoTel,
  .topInfoMail,
  .topInfoAssessment,
  .topInfoTransfer {
    width: 34px;
  }

  .topInfoTel img,
  .topInfoMail img,
  .topInfoAssessment img,
  .topInfoTransfer img {
    width: 34px;
  }
}

/* ----------------------------------------------------------------------
 inner
---------------------------------------------------------------------- */


.innerOrigin {
  width: calc(100% - 30px);
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}

.inner960 {
  max-width: 960px;
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}



/*ボタン（上から背景がするっと降りてくる）W300*/
.button00 {
  display: inline-block;
  width: 100%;
  height: 60px;
  text-align: center;
  text-decoration: none !important;
  line-height: 55px;
  outline: none;
  font-size: 16px;
  cursor: pointer;
}

.button00::before,
.button00::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button00,
.button00::before,
.button00::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

a.button00:hover {
  text-decoration: none;
}

/*ボタン矢印 →*/
.button00 span {
  display: block;
  position: relative;
}

.button00 span::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061";
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}


/*ボタン01（ネイビー）*/
.button01 {
  position: relative;
  z-index: 2;
  background-color: #cbbb6b;
  border: 2px solid #cbbb6b;
  color: #184c78;
  overflow: hidden;
  border-radius: 100px;
}

.button01:hover {
  color: #cbbb6b;
}

.button01::after {
  top: -100%;
  width: 100%;
  height: 100%;
}

.button01:hover::after {
  top: 0;
  background-color: #184c78;
}

.btn300 {
  /*ボタンW300*/
  max-width: 300px;
}

html {
  scroll-behavior: smooth;
}