@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

p {
  line-height: 1.725;
}

html {
  font-size: 16px;
  line-height: 1.8;
  overflow: auto;
}

body {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  color: #333333;
  overflow: hidden;
}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

a {
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.7;
}

/* --------------------------------------------
 *  ヘッダー
 * -------------------------------------------- */
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 102px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
}
@media screen and (max-width: 1024px) {
  .header__inner {
    height: 80px;
  }
}
@media screen and (max-width: 767px) {
  .header__inner {
    height: 56px;
  }
}
.header__logo {
  width: 192px;
  aspect-ratio: 24/7;
}
@media screen and (max-width: 1024px) {
  .header__logo {
    width: 176px;
  }
}
@media screen and (max-width: 767px) {
  .header__logo {
    width: 137px;
  }
}
.header__contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.headerContactTel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.headerContactTel__number {
  position: relative;
  font-size: 48px;
  font-weight: 500;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .headerContactTel__number {
    font-size: 32px;
  }
}
.headerContactTel__number::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -56px;
  background-image: url(../images/free-tel-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 48px;
  height: 32px;
}
@media screen and (max-width: 1024px) {
  .headerContactTel__number::before {
    width: 32px;
    height: 24px;
    left: -36px;
  }
}
.headerContactTel__hour {
  font-size: 14px;
}

.contactButton {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 20px 24px 20px 16px;
  background-color: #fa6908;
}
.contactButton::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.contactButton__tag {
  display: flex;
  padding: 4px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: #fa6908;
  border-radius: 16px;
  background-color: #fff;
}
@media screen and (max-width: 1024px) {
  .contactButton__tag {
    font-size: 14px;
    padding: 2px 8px;
  }
}
.contactButton__text {
  color: var(--white, #fff);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 1024px) {
  .contactButton__text {
    font-size: 18px;
  }
}

/* --------------------------------------------
 *  スマホ固定ボタン
 * -------------------------------------------- */
.fixCta {
  position: fixed;
  z-index: 5000;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px 12px;
  background-color: #fff;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}

.fixCta.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.fixCta__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

@media screen and (max-width: 767px) {
  .fixCta__tel {
    pointer-events: none;
  }
}
@media screen and (max-width: 575px) {
  .fixCta__tel {
    pointer-events: auto;
  }
}

/* --------------------------------------------
 *  キービジュアル
 * -------------------------------------------- */
.keyVisual {
  width: 100%;
  height: 720px;
  background-image: url(../images/keyVisual-bg2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1200px) {
  .keyVisual {
    height: 60vw;
  }
}
@media screen and (max-width: 575px) {
  .keyVisual {
    height: 132vw;
  }
}
.keyVisual__inner {
  position: relative;
  height: inherit;
}
.keyVisual__body {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  max-width: 1062px;
  z-index: 2;
}
.keyVisual__staff {
  position: absolute;
  bottom: 0;
  right: -120px;
  width: 680px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .keyVisual__staff {
    width: 57vw;
  }
}
@media screen and (max-width: 1024px) {
  .keyVisual__staff {
    right: -90px;
  }
}
@media screen and (max-width: 767px) {
  .keyVisual__staff {
    right: -50px;
  }
}
@media screen and (max-width: 575px) {
  .keyVisual__staff {
    width: 52vw;
    right: 0;
  }
}

.bgColor {
  width: 100%;
  height: 142px;
  background-color: #d3e8f7;
}
@media screen and (max-width: 1200px) {
  .bgColor {
    height: 17vw;
  }
}
@media screen and (max-width: 575px) {
  .bgColor {
    height: 0;
  }
}

/* --------------------------------------------
 *  空き家リスクのアテンション
 * -------------------------------------------- */
.attention__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background-color: #004387;
  padding: 16px 24px;
}
@media screen and (max-width: 575px) {
  .attention__heading {
    padding: 16px;
  }
}

.attention__headingIcon {
  width: 60px;
  height: 60px;
}
@media screen and (max-width: 767px) {
  .attention__headingIcon {
    width: 35px;
  }
}

.attention__headingText {
  font-size: 28px;
  color: #ffff00;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .attention__headingText {
    font-size: 19px;
  }
}

.attention__headingTextEmphasis {
  color: #dd0000;
}

.attention__inner {
  background-color: #f3f3f3;
  width: 100%;
}

.attention__content {
  width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  padding: 40px 0;
}
@media screen and (max-width: 1024px) {
  .attention__content {
    width: 100%;
    gap: 30px;
  }
}
@media screen and (max-width: 767px) {
  .attention__content {
    display: block;
    padding: 30px 0;
  }
}
@media screen and (max-width: 575px) {
  .attention__content {
    padding-bottom: 0;
  }
}

.attention__body {
  width: 55%;
  margin-left: 24px;
}
@media screen and (max-width: 767px) {
  .attention__body {
    width: 100%;
    margin: 0 0 30px;
    padding: 0 16px;
  }
}

.attention__bodyText {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
  .attention__bodyText {
    font-size: 15px;
  }
}

.attention__bodyTextEmphasis {
  color: #dd0000;
}

.attention__bodyAnnotation {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid currentColor;
}

.attention__imgArea {
  width: 45%;
  margin-right: 24px;
}
@media screen and (max-width: 767px) {
  .attention__imgArea {
    width: 100%;
    max-width: 600px;
    margin-right: 0;
    margin: 0 auto;
  }
}

.attention__img {
  margin-bottom: 20px;
}

/* --------------------------------------------
 *  CTA1
 * -------------------------------------------- */
.ctaArea1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 96px;
}
@media screen and (max-width: 767px) {
  .ctaArea1 {
    margin-top: 10vw;
  }
}

/* --------------------------------------------
 *  悩み
 * -------------------------------------------- */
.worries {
  width: 100%;
  background-color: #004387;
  padding: 48px 0;
  margin-top: 96px;
}
@media screen and (max-width: 1024px) {
  .worries {
    padding: 40px 0;
    margin-top: 80px;
  }
}
@media screen and (max-width: 767px) {
  .worries {
    margin-top: 40px;
  }
}
.worries__heading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.worries__headingText {
  font-size: 48px;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .worries__headingText {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .worries__headingText {
    font-size: 32px;
  }
}
@media screen and (max-width: 575px) {
  .worries__headingText {
    -moz-text-align-last: left;
         text-align-last: left;
  }
}
.worries__content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  .worries__content {
    flex-direction: column-reverse;
    margin-top: 24px;
    gap: 24px;
  }
}
.worries__img {
  width: 100%;
  max-width: 320px;
}
@media screen and (max-width: 1024px) {
  .worries__img {
    max-width: 240px;
  }
}
@media screen and (max-width: 767px) {
  .worries__img {
    min-width: 288px;
  }
}
.worries__lists {
  gap: 12px;
}
.worries__list {
  font-size: 20px;
  background-color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  /* 各リストアイテムの末尾以外に12pxの下マージンを付与 */
}
@media screen and (max-width: 1024px) {
  .worries__list {
    font-size: 16px;
  }
}
@media screen and (max-width: 575px) {
  .worries__list {
    padding: 8px 16px;
    font-size: 3.6vw;
  }
}
.worries__list:not(:last-child) {
  margin-bottom: 12px;
}
.worries__arrow {
  width: 320px;
  margin: 0 auto;
  margin-top: -30px;
}

.worriesAnswer {
  padding-top: 64px;
}
@media screen and (max-width: 1024px) {
  .worriesAnswer {
    padding-top: 24px;
  }
}
.worriesAnswer__img {
  width: 92%;
  margin: 0 auto;
}

/* --------------------------------------------
 *  事例 1
 * -------------------------------------------- */
.case1 {
  width: 100%;
  margin-top: 120px;
  margin-bottom: 120px;
}
@media screen and (max-width: 1024px) {
  .case1 {
    margin-top: 96px;
    margin-bottom: 96px;
  }
}
@media screen and (max-width: 767px) {
  .case1 {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
.case1__content {
  border-radius: 16px;
  border: 4px solid #004387;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .case1__content {
    gap: 16px;
    padding: 32px 16px;
  }
}
.case1__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.case1__cards > * {
  flex: 0 0 calc((100% - 32px) / 3);
}
@media screen and (max-width: 767px) {
  .case1__cards > * {
    /* gap:16pxを考慮して二列で横幅いっぱいに分割 */
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media screen and (max-width: 575px) {
  .case1__cards > * {
    flex: 0 0 100%;
  }
}
.case1__text {
  font-size: 16px;
  text-align: center;
}
@media screen and (max-width: 575px) {
  .case1__text {
    font-size: 14px;
  }
}
.case1__lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .case1__lists {
    flex-direction: column;
    gap: 12px;
  }
}
.case1__list {
  /* 最大2つまで横並び（幅を均等に） */
  flex: 0 0 calc((100% - 16px) / 2);
  max-width: calc((100% - 16px) / 2);
  padding: 8px 16px;
  border: 1px solid #004387;
  /* 小画面やコンテンツ幅以下の場合は縦並びに */
}
@media screen and (max-width: 1024px) {
  .case1__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .case1__list {
    padding: 4px 16px;
  }
}
.case1__listText {
  font-size: 16px;
  width: 352px;
  /* 折り返しなしでテキスト幅を保持 */
  white-space: nowrap;
}
@media screen and (max-width: 575px) {
  .case1__listText {
    width: 280px;
    font-size: 14px;
  }
}

/* --------------------------------------------
 *  お約束
 * -------------------------------------------- */
.promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 120px;
  background-color: #f3f3f3;
}
@media screen and (max-width: 1024px) {
  .promise {
    padding-top: 104px;
  }
}
@media screen and (max-width: 767px) {
  .promise {
    padding-top: 80px;
  }
}
@media screen and (max-width: 575px) {
  .promise {
    padding-top: 64px;
  }
}
.promise__containerWrapper {
  margin-top: 160px;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .promise__containerWrapper {
    margin-top: 144px;
  }
}
@media screen and (max-width: 767px) {
  .promise__containerWrapper {
    margin-top: 120px;
  }
}
@media screen and (max-width: 575px) {
  .promise__containerWrapper {
    margin-top: 96px;
  }
}
.promise__container {
  position: relative;
  width: 100%;
  padding: 120px 0 160px;
  border-top: 1px solid #004387;
}
@media screen and (max-width: 1024px) {
  .promise__container {
    padding: 104px 0 144px;
  }
}
@media screen and (max-width: 575px) {
  .promise__container {
    padding: 72px 0 96px;
  }
}
.promise__container:last-child {
  padding-bottom: 120px;
}
@media screen and (max-width: 1024px) {
  .promise__container:last-child {
    padding-bottom: 104px;
  }
}
@media screen and (max-width: 767px) {
  .promise__container:last-child {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 575px) {
  .promise__container:last-child {
    padding-bottom: 64px;
  }
}
.promise__containerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 92%;
  max-width: 912px;
  margin: 0 auto;
}
.promise__containerInner--l {
  max-width: 1040px;
}
.promise__h3 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .promise__h3 {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .promise__h3 {
    font-size: 28px;
  }
}
@media screen and (max-width: 575px) {
  .promise__h3 {
    font-size: 22px;
  }
}
.promise__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.promise__imgArea {
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .promise__imgArea {
    flex-direction: column;
  }
}
.promise__img {
  max-width: calc((100% - 16px) / 2);
}
@media screen and (max-width: 575px) {
  .promise__img {
    max-width: 100%;
  }
}
.promise__text {
  font-size: 16px;
  margin-top: 16px;
  width: 92%;
  max-width: 736px;
  margin: 0 auto;
}
.promise__text--center {
  text-align: center;
}
.promise__number {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 192px;
  aspect-ratio: 192/160;
}
@media screen and (max-width: 1024px) {
  .promise__number {
    width: 176px;
    top: -73px;
  }
}
@media screen and (max-width: 767px) {
  .promise__number {
    width: 160px;
    top: -67px;
  }
}
@media screen and (max-width: 575px) {
  .promise__number {
    width: 120px;
    top: -48px;
  }
}
.promise__cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 48px;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .promise__cards {
    margin-top: 24px;
  }
}
@media screen and (max-width: 767px) {
  .promise__cards {
    margin-top: 8px;
  }
}
.promise__lists {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 16px;
  width: 92%;
}
@media screen and (max-width: 575px) {
  .promise__lists {
    flex-direction: column;
    gap: 12px;
  }
}
.promise__list {
  /* 最大2つまで横並び（幅を均等に） */
  flex: 0 0 calc((100% - 16px) / 2);
  max-width: calc((100% - 16px) / 2);
  padding: 8px 16px;
  border: 1px solid #004387;
  height: inherit;
  background-color: #fff;
  /* 小画面やコンテンツ幅以下の場合は縦並びに */
}
@media screen and (max-width: 767px) {
  .promise__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}
.promise__listText {
  font-size: 16px;
  width: 352px;
  /* 折り返しなしでテキスト幅を保持 */
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .promise__listText {
    width: 250px;
  }
}

.promiseCard {
  border: 1px solid #004387;
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
}
.promiseCard__caseWrapper {
  display: flex;
  justify-content: space-between;
}
.promiseCard__caseWrapper > .promiseCard__case,
.promiseCard__caseWrapper > .promiseCard__answer {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .promiseCard__caseWrapper > .promiseCard__case {
    width: 54%;
  }
  .promiseCard__caseWrapper > .promiseCard__answer {
    width: 46%;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__caseWrapper {
    flex-direction: column;
  }
  .promiseCard__caseWrapper > .promiseCard__case,
.promiseCard__caseWrapper .promiseCard__answer {
    width: 100%;
  }
}
.promiseCard__case {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 24px;
  background-color: #004387;
}
@media screen and (max-width: 1024px) {
  .promiseCard__case {
    gap: 16px;
    padding: 8px 16px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__case {
    gap: 8px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__case {
    gap: 16px;
  }
}
.promiseCard__caseTag {
  display: flex;
  align-items: end;
  color: #fff;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .promiseCard__caseTag {
    gap: 6px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__caseTag {
    gap: 4px;
  }
}
.promiseCard__caseTagText {
  font-size: 20px;
  padding-bottom: 3px;
}
@media screen and (max-width: 1024px) {
  .promiseCard__caseTagText {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__caseTagText {
    font-size: 12px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__caseTagText {
    font-size: 16px;
  }
}
.promiseCard__caseTagNumber {
  font-size: 32px;
}
@media screen and (max-width: 1024px) {
  .promiseCard__caseTagNumber {
    font-size: 20px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__caseTagNumber {
    font-size: 24px;
  }
}
.promiseCard__caseText {
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .promiseCard__caseText {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__caseText {
    font-size: 14px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__caseText {
    font-size: 16px;
  }
}
.promiseCard__answer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 112px;
  width: 100%;
  border-bottom: 1px solid #004387;
}
@media screen and (max-width: 1024px) {
  .promiseCard__answer {
    padding-left: 96px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__answer {
    padding-left: 0;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
}
.promiseCard__answerText {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  white-space: nowrap;
  background: linear-gradient(to top, #ffff00 30%, transparent 30%);
}
@media screen and (max-width: 1024px) {
  .promiseCard__answerText {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__answerText {
    font-size: 16px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__answerText {
    font-size: 20px;
  }
}
.promiseCard__answerImg {
  position: absolute;
  bottom: 0;
  left: 16px;
  width: 147px;
  height: 121px;
}
@media screen and (max-width: 1024px) {
  .promiseCard__answerImg {
    width: 106.9px;
    height: 88px;
    left: 8px;
  }
}
.promiseCard__content {
  display: flex;
  padding: 24px;
  align-items: flex-start;
  gap: 32px;
}
.promiseCard__content > * {
  /* mainImgArea と body を同じ比率で縮める */
  flex: 1;
  /* flex: 1 1 0; basis を 0 にして残りスペースを等分 */
  min-width: 0;
  /* 子要素の width:100% が原因のはみ出しを防止 */
}
@media screen and (max-width: 1024px) {
  .promiseCard__content {
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .promiseCard__content {
    padding: 24px 16px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__content {
    flex-direction: column;
  }
}
.promiseCard__mainImgArea {
  width: 100%;
}
.promiseCard__mainImg {
  width: 100%;
  max-width: 448px;
}
.promiseCard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 448px;
}
@media screen and (max-width: 767px) {
  .promiseCard__body {
    gap: 16px;
  }
}
.promiseCard__tagArea {
  width: 100%;
}
.promiseCard__tag {
  font-size: 18px;
  color: #fff;
  background-color: #004387;
  padding: 4px 16px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .promiseCard__tag {
    font-size: 16px;
  }
}
.promiseCard__date {
  font-size: 18px;
  padding: 4px 16px;
  text-align: center;
  border-right: 1px solid #004387;
  border-left: 1px solid #004387;
  border-bottom: 1px solid #004387;
}
@media screen and (max-width: 767px) {
  .promiseCard__date {
    font-size: 14px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__date {
    font-size: 16px;
  }
}
.promiseCard__textArea {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .promiseCard__textArea {
    gap: 8px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__textArea {
    gap: 16px;
  }
}
.promiseCard__text {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .promiseCard__text {
    font-size: 14px;
  }
}
@media screen and (max-width: 575px) {
  .promiseCard__text {
    font-size: 16px;
  }
}
.promiseCard__subImgArea {
  display: flex;
  gap: 16px;
}
.promiseCard__subImg {
  width: 100%;
  max-width: calc((100% - 16px) / 2);
}

/* --------------------------------------------
 *  どうして買取できるのか
 * -------------------------------------------- */
.reason {
  padding: 120px 0 40px;
}
@media screen and (max-width: 1024px) {
  .reason {
    padding: 104px 0 40px;
  }
}
@media screen and (max-width: 767px) {
  .reason {
    padding: 80px 0 40px;
  }
}
@media screen and (max-width: 575px) {
  .reason {
    padding: 64px 0 40px;
  }
}
.reason__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .reason__content {
    margin-top: 64px;
  }
}
@media screen and (max-width: 575px) {
  .reason__content {
    margin-top: 48px;
  }
}

/* --------------------------------------------
 *  ビフォーアフター
 * -------------------------------------------- */
.beforeAfter {
  background-color: #d3e8f7;
  padding: 24px 0;
}
.beforeAfter__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
.beforeAfter__img {
  width: 100%;
}

.beforeAfter__swiper-wrapper {
  transition-timing-function: linear;
}

/* --------------------------------------------
 *  メッセージ
 * -------------------------------------------- */
.message {
  padding: 96px 0;
  background-image: url(../images/message-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .message {
    padding: 80px 0;
  }
}
@media screen and (max-width: 767px) {
  .message {
    padding: 64px 0;
  }
}
@media screen and (max-width: 575px) {
  .message {
    padding: 48px 0;
  }
}
.message__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media screen and (max-width: 575px) {
  .message__inner {
    gap: 24px;
  }
}
.message__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
@media screen and (max-width: 1024px) {
  .message__content {
    gap: 32px;
  }
}
@media screen and (max-width: 767px) {
  .message__content {
    flex-direction: column;
    gap: 24px;
  }
}
.message__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.message__tag {
  width: 80%;
  margin: 0 auto;
}
.message__text {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .message__text {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .message__text {
    font-size: 18px;
  }
}
@media screen and (max-width: 575px) {
  .message__text {
    font-size: 16px;
  }
}
.message__text--large {
  font-size: 32px;
  font-family: "Noto Sans JP";
}
@media screen and (max-width: 1024px) {
  .message__text--large {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  .message__text--large {
    font-size: 24px;
  }
}
@media screen and (max-width: 575px) {
  .message__text--large {
    font-size: 20px;
  }
}
.message__mainImgArea {
  width: 100%;
  max-width: 416px;
}
.message__mainImg {
  width: 100%;
}
.message__imgArea {
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .message__imgArea {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }
}
.message__imgItem {
  width: 100%;
  max-width: calc((100% - 32px) / 3);
}
@media screen and (max-width: 575px) {
  .message__imgItem {
    max-width: 100%;
  }
}

/* --------------------------------------------
 *  買取の流れ
 * -------------------------------------------- */
.flow {
  padding: 120px 0;
  background-color: #004387;
}
@media screen and (max-width: 1024px) {
  .flow {
    padding: 105px 0;
  }
}
@media screen and (max-width: 767px) {
  .flow {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .flow {
    padding: 64px 0;
  }
}
.flow__heading {
  line-height: 1;
}
.flow__heading--sub {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .flow__heading--sub {
    font-size: 20px;
  }
}
@media screen and (max-width: 575px) {
  .flow__heading--sub {
    font-size: 18px;
  }
}
.flow__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 80px;
}
@media screen and (max-width: 1024px) {
  .flow__content {
    margin-top: 64px;
  }
}
@media screen and (max-width: 767px) {
  .flow__content {
    margin-top: 48px;
  }
}
.flow__arrow {
  width: 76px;
  margin: 0 auto 4px;
}

.flowItem {
  display: flex;
  gap: 16px;
  background-color: #fff;
  border-radius: 16px;
  padding: 24px 32px;
}
@media screen and (max-width: 1024px) {
  .flowItem {
    padding: 24px 24px;
  }
}
@media screen and (max-width: 767px) {
  .flowItem {
    flex-direction: column;
    width: 92%;
    max-width: 560px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 575px) {
  .flowItem {
    padding: 24px 16px;
    width: 100%;
  }
}
.flowItem__number {
  /* 固定幅で縮まないように設定 */
  flex: 0 0 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 767px) {
  .flowItem__number {
    width: 80px;
    margin: 0 auto;
  }
}
.flowItem__content {
  /* 可変幅で縮むように設定 */
  flex: 1 1 auto;
  min-width: 0;
  /* 子要素のはみ出し防止 */
  display: flex;
  gap: 16px;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .flowItem__content {
    flex-direction: column;
  }
}
.flowItem__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flowItem__heading {
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .flowItem__heading {
    gap: 8px;
  }
}
.flowItem__headingText {
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
}
@media screen and (max-width: 575px) {
  .flowItem__headingText {
    font-size: 18px;
  }
}
.flowItem__headingTag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.2em;
  background-color: #004387;
  padding: 2px 12px 2px 14px;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 575px) {
  .flowItem__headingTag {
    font-size: 16px;
  }
}
.flowItem__text {
  line-height: 1.725;
}
.flowItem__imgArea {
  width: 100%;
  max-width: 190px;
}
@media screen and (max-width: 767px) {
  .flowItem__imgArea {
    max-width: 240px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 575px) {
  .flowItem__imgArea {
    max-width: 190px;
  }
}
.flowItem__img {
  width: 100%;
}

/* --------------------------------------------
 *  CTA2
 * -------------------------------------------- */
.ctaArea2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 96px;
}
@media screen and (max-width: 1024px) {
  .ctaArea2 {
    margin-top: 64px;
  }
}
@media screen and (max-width: 767px) {
  .ctaArea2 {
    margin-top: 8vw;
  }
}

/* --------------------------------------------
 *  事例紹介 2
 * -------------------------------------------- */
.case2 {
  width: 100%;
  margin-top: 120px;
  margin-bottom: 120px;
}
@media screen and (max-width: 1024px) {
  .case2 {
    margin-top: 96px;
    margin-bottom: 96px;
  }
}
@media screen and (max-width: 767px) {
  .case2 {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
.case2__inner {
  padding: 48px 24px;
}
@media screen and (max-width: 767px) {
  .case2__inner {
    padding: 32px 16px;
  }
}
.case2__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .case2__content {
    gap: 16px;
  }
}
.case2__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 80px;
}
@media screen and (max-width: 1024px) {
  .case2__cards {
    margin-top: 72px;
  }
}
.case2__cards > * {
  flex: 0 0 calc((100% - 32px) / 3);
}
@media screen and (max-width: 767px) {
  .case2__cards {
    margin-top: 64px;
  }
  .case2__cards > * {
    /* gap:16pxを考慮して二列で横幅いっぱいに分割 */
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media screen and (max-width: 575px) {
  .case2__cards {
    margin-top: 48px;
  }
  .case2__cards > * {
    flex: 0 0 100%;
  }
}

/* --------------------------------------------
 *  お客様の声
 * -------------------------------------------- */
.voice {
  padding: 120px 0;
  background-image: url(../images/voice-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .voice {
    padding: 104px 0;
  }
}
@media screen and (max-width: 767px) {
  .voice {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .voice {
    padding: 64px 0;
  }
}
.voice__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.voice__slider {
  margin: 64px auto 0;
}

.voiceCard {
  width: 100%;
  max-width: 340px;
  height: 560px;
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 4px 0px rgba(51, 51, 51, 0.5);
}
@media screen and (max-width: 767px) {
  .voiceCard {
    margin: 0 auto;
  }
}

.voiceCard__img {
  border: 1px solid rgba(51, 51, 51, 0.4);
}

.voiceCard__content {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 102px;
}

.voiceCard__text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: auto;
}

.voiceCard__name {
  font-size: 14px;
  padding-top: 10px;
  text-align: right;
}

.voice__slider {
  padding: 0 30px 16px;
}

.voice__swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  background-color: #004387;
  transition: opacity 0.3s;
  cursor: pointer;
}
.swiper-button-prev :hover,
.swiper-button-next :hover {
  opacity: 0.7;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  position: absolute;
  top: 50%;
  left: 46%;
  width: 16px;
  height: 16px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.swiper-button-prev::after {
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* --------------------------------------------
 *  お任せください
 * -------------------------------------------- */
.strength {
  padding: 120px 0 240px;
  background-color: #d3e8f7;
}
@media screen and (max-width: 1024px) {
  .strength {
    padding: 104px 0 208px;
  }
}
@media screen and (max-width: 767px) {
  .strength {
    padding: 80px 0 160px;
  }
}
@media screen and (max-width: 575px) {
  .strength {
    padding: 64px 0 128px;
  }
}
.strength__content {
  margin-top: 80px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (max-width: 1024px) {
  .strength__content {
    margin-top: 64px;
  }
}
@media screen and (max-width: 767px) {
  .strength__content {
    margin-top: 56px;
    width: 92%;
    max-width: 560px;
  }
}
@media screen and (max-width: 575px) {
  .strength__content {
    margin-top: 48px;
  }
}
.strength .strengthCard {
  display: flex;
  padding: 24px 32px;
  background-color: #fff;
  border-radius: 16px;
  gap: 32px;
}
@media screen and (max-width: 1024px) {
  .strength .strengthCard {
    padding: 24px 24px;
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .strength .strengthCard {
    flex-direction: column;
  }
}
@media screen and (max-width: 575px) {
  .strength .strengthCard {
    padding: 16px 16px;
    gap: 16px;
  }
}
.strength .strengthCard__img {
  width: 100%;
  max-width: 256px;
  aspect-ratio: 256/192;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 767px) {
  .strength .strengthCard__img {
    max-width: 100%;
  }
}
.strength .strengthCard__textArea {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.strength .strengthCard__title {
  font-size: 20px;
  font-weight: bold;
  padding: 0 16px;
  border-left: 6px solid #004387;
}
@media screen and (max-width: 767px) {
  .strength .strengthCard__title {
    font-size: 18px;
  }
}
@media screen and (max-width: 575px) {
  .strength .strengthCard__title {
    font-size: 16px;
    padding-left: 8px;
  }
}
@media screen and (max-width: 575px) {
  .strength .strengthCard__text {
    font-size: 14px;
  }
}

/* --------------------------------------------
 *  CTA3
 * -------------------------------------------- */
.ctaArea3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -120px;
}
@media screen and (max-width: 767px) {
  .ctaArea3 {
    margin-top: -12vw;
  }
}

/* --------------------------------------------
 *  よくある質問
 * -------------------------------------------- */
.faq {
  padding: 120px 0;
}
@media screen and (max-width: 1024px) {
  .faq {
    padding: 104px 0;
  }
}
@media screen and (max-width: 767px) {
  .faq {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .faq {
    padding: 64px 0;
  }
}
.faq__accordion {
  margin-top: 80px;
}
@media screen and (max-width: 1024px) {
  .faq__accordion {
    margin-top: 72px;
  }
}
@media screen and (max-width: 767px) {
  .faq__accordion {
    margin-top: 64px;
  }
}
@media screen and (max-width: 575px) {
  .faq__accordion {
    margin-top: 48px;
  }
}

.accordion__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.accordion__item {
  width: 100%;
  margin: 0 auto;
}
.accordion__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
  padding: 12px 40px 12px 16px;
  background-color: #004387;
  cursor: pointer;
}
@media screen and (max-width: 575px) {
  .accordion__title {
    padding: 12px 40px 12px 8px;
    gap: 8px;
  }
}
.accordion__titleIcon {
  width: 56px;
  aspect-ratio: 1/1;
  flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
  .accordion__titleIcon {
    width: 48px;
  }
}
@media screen and (max-width: 575px) {
  .accordion__titleIcon {
    width: 32px;
  }
}
.accordion__titleText {
  color: #fff;
}
@media screen and (max-width: 575px) {
  .accordion__titleText {
    font-size: 14px;
  }
}
.accordion__content {
  display: none;
  padding: 12px 40px 12px 16px;
  border-right: 1px solid #004387;
  border-left: 1px solid #004387;
  border-bottom: 1px solid #004387;
}
@media screen and (max-width: 575px) {
  .accordion__content {
    padding: 12px 24px 12px 8px;
  }
}
.accordion__contentInner {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .accordion__contentInner {
    gap: 8px;
  }
}
.accordion__contentIcon {
  width: 56px;
  aspect-ratio: 1/1;
  flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
  .accordion__contentIcon {
    width: 48px;
  }
}
@media screen and (max-width: 575px) {
  .accordion__contentIcon {
    width: 32px;
  }
}
@media screen and (max-width: 575px) {
  .accordion__contentText {
    font-size: 14px;
  }
}

.accordion__title::before,
.accordion__title::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s, opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .accordion__title::before,
.accordion__title::after {
    right: 12px;
    width: 16px;
  }
}

.accordion__title::before {
  transform: rotate(90deg);
}

.accordion__title.is-open::before {
  transform: rotate(180deg);
}

.accordion__title.is-open::after {
  opacity: 0;
}

/* --------------------------------------------
 *  スタッフ
 * -------------------------------------------- */
.staff {
  width: 100%;
  padding: 120px 0;
  background-color: #004387;
}
@media screen and (max-width: 1024px) {
  .staff {
    padding: 104px 0;
  }
}
@media screen and (max-width: 767px) {
  .staff {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .staff {
    padding: 64px 0;
  }
}
.staff__container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 64px;
  background-color: #fff;
  border-radius: 16px;
}
@media screen and (max-width: 1024px) {
  .staff__container {
    padding: 40px 48px;
  }
}
@media screen and (max-width: 767px) {
  .staff__container {
    padding: 40px 32px;
  }
}
@media screen and (max-width: 575px) {
  .staff__container {
    padding: 32px 16px;
  }
}
.staff__heading {
  width: 100%;
  max-width: 709px;
  margin: 0 auto;
}
@media screen and (max-width: 575px) {
  .staff__heading {
    width: 80%;
    max-width: 400px;
  }
}
.staff__contentArea {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.staff__content {
  display: flex;
  gap: 24px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .staff__content {
    flex-direction: column;
  }
}
.staff__imgArea {
  width: 100%;
  max-width: 264px;
  aspect-ratio: 264/314;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 767px) {
  .staff__imgArea {
    margin: 0 auto;
  }
}
.staff__img {
  border-radius: 16px;
}
.staff__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.staff__name {
  font-size: 24px;
  font-weight: bold;
  border-bottom: 2px dotted #004387;
  padding: 0 8px;
}
@media screen and (max-width: 767px) {
  .staff__name {
    font-size: 22px;
  }
}
@media screen and (max-width: 575px) {
  .staff__name {
    font-size: 20px;
  }
}
.staff__textArea {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.staff__textAreaItem {
  border-left: 4px solid #004387;
  padding-left: 8px;
}
.staff__textTitle {
  font-size: 18px;
  font-weight: 500;
}
.staff__text {
  font-family: "Noto Sans JP";
}
.staff__message {
  position: relative;
  border: 1px solid #004387;
  border-radius: 16px;
  padding: 24px 32px;
}
@media screen and (max-width: 767px) {
  .staff__message {
    padding: 24px 24px;
  }
}
@media screen and (max-width: 575px) {
  .staff__message {
    padding: 24px 16px;
  }
}
.staff__messageImg {
  position: absolute;
  top: -20px;
  left: 24px;
  width: 167px;
}
.staff__messageTextArea {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 575px) {
  .staff__messageText {
    font-size: 15px;
  }
}

/* --------------------------------------------
 * 無料査定フォーム
 * -------------------------------------------- */
.contact {
  padding: 120px 0;
}
@media screen and (max-width: 1024px) {
  .contact {
    padding: 104px 0;
  }
}
@media screen and (max-width: 767px) {
  .contact {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .contact {
    padding: 64px 0;
  }
}
.contact__inner {
  width: 92%;
  max-width: 600px;
  margin: 0 auto;
}
.contact__heading--sub {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: #fa6908;
}
@media screen and (max-width: 575px) {
  .contact__heading--sub {
    font-size: 20px;
  }
}
.contact__form {
  margin-top: 40px;
}

.form__title {
  font-size: 22px;
  font-weight: 700;
  border-left: 4px solid #004387;
  padding-left: 16px;
}
@media screen and (max-width: 575px) {
  .form__title {
    font-size: 22px;
  }
}
.form__list {
  margin: 20px 0 40px;
}
@media screen and (max-width: 575px) {
  .form__list {
    margin: 30px 0 50px;
  }
}
.form__item:not(:first-child) {
  margin-top: 20px;
}
@media screen and (max-width: 575px) {
  .form__item:not(:first-child) {
    margin-top: 30px;
  }
}
.form__item:first-child {
  margin: 30px 0;
}
.form__item dl {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
}
@media screen and (max-width: 575px) {
  .form__item dl {
    flex-direction: column;
    gap: 4px;
  }
}
.form__input label {
  margin-right: 20px;
}
@media screen and (max-width: 575px) {
  .form__input label {
    display: block;
    margin-top: 20px;
    font-size: 18px;
  }
}
.form__inputRadio {
  position: relative;
  padding-left: 24px;
}
.form__inputRadio:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 3px solid #bbbbbb;
  border-radius: 50%;
  cursor: pointer;
}
.form__inputRadio:checked:before {
  border: 3px solid #004387;
}
.form__inputRadio:checked:after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #004387;
  border-radius: 50%;
}
.form__label {
  position: relative;
  width: 200px;
  padding-left: 36px;
}
@media screen and (max-width: 575px) {
  .form__label {
    width: 100%;
  }
}
.form__label::before {
  content: "必須";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 10px;
  padding: 2px 4px;
  color: #fff;
  background-color: #dd0000;
}
.form__labelText {
  font-size: 16px;
  font-weight: 700;
}
@media screen and (max-width: 575px) {
  .form__labelText {
    font-size: 18px;
  }
}
.form__input {
  width: 100%;
}
.form__inputText {
  font-family: "Noto Sans JP", sans-serif;
  width: 100%;
  padding: 15px 10px;
  background-color: #edf2f7;
  border-radius: 4px;
}
@media screen and (max-width: 575px) {
  .form__inputText {
    padding: 20px 10px;
  }
}
.form__inputText::-moz-placeholder {
  opacity: 0.5;
}
.form__inputText:-ms-input-placeholder {
  opacity: 0.5;
}
.form__inputText::placeholder {
  opacity: 0.5;
}
.form__button {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.formButtonWrapper {
  position: relative;
  display: inline-block;
}
.formButtonWrapper::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 24px;
  height: 24px;
  background-image: url(../images/button-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.formButton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 50px 20px 40px;
  background-color: #fa6908;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.formButton:hover {
  background-color: #e96005;
  box-shadow: none;
}

/* --------------------------------------------
 *  会社概要
 * -------------------------------------------- */
.company {
  padding: 120px 0;
  background-color: #edf2f7;
}
@media screen and (max-width: 1024px) {
  .company {
    padding: 104px 0;
  }
}
@media screen and (max-width: 767px) {
  .company {
    padding: 80px 0;
  }
}
@media screen and (max-width: 575px) {
  .company {
    padding: 64px 0;
  }
}
.company__container {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 40px;
  padding: 40px 64px;
}
@media screen and (max-width: 1024px) {
  .company__container {
    padding: 40px 24px;
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .company__container {
    flex-direction: column;
  }
}
@media screen and (max-width: 575px) {
  .company__container {
    padding-right: 0;
    padding-left: 0;
  }
}
.company__table {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.company__tableItem {
  width: 100%;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: start;
  border-top: 1px solid #d3e8f7;
  padding: 24px 16px;
}
@media screen and (max-width: 1024px) {
  .company__tableItem {
    padding: 16px 16px;
  }
}
@media screen and (max-width: 575px) {
  .company__tableItem {
    flex-direction: column;
    gap: 8px;
  }
}
.company__tableItem:last-child {
  border-bottom: 1px solid #d3e8f7;
}
.company__tableHeader {
  width: 192px;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .company__tableHeader {
    width: 120px;
    font-size: 17px;
  }
}
@media screen and (max-width: 767px) {
  .company__tableHeader {
    width: 140px;
  }
}
@media screen and (max-width: 575px) {
  .company__tableHeader {
    width: 100%;
  }
}
.company__tableData {
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  white-space: nowrap;
  width: 100%;
  max-width: 448px;
}
@media screen and (max-width: 1024px) {
  .company__tableData {
    font-size: 15px;
    max-width: 240px;
  }
}
@media screen and (max-width: 767px) {
  .company__tableData {
    width: 100%;
    max-width: 100%;
  }
}
.company__mapArea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 384px;
}
@media screen and (max-width: 1024px) {
  .company__mapArea {
    max-width: 320px;
  }
}
@media screen and (max-width: 767px) {
  .company__mapArea {
    max-width: 100%;
  }
}
.company__mapIframe {
  width: 384px;
  height: 288px;
}
@media screen and (max-width: 1024px) {
  .company__mapIframe {
    width: 320px;
    height: 240px;
  }
}
@media screen and (max-width: 767px) {
  .company__mapIframe {
    width: 100%;
    height: 400px;
  }
}

/* --------------------------------------------
 *  フッター
 * -------------------------------------------- */
.footer {
  background-color: #004387;
}

.footer__copyright {
  font-size: 15px;
  color: #fff;
  text-align: center;
  padding: 48px 24px;
}

/* --------------------------------------------
 *  サンクスページ
 * -------------------------------------------- */
.thanks {
  padding: 30px 0;
}
@media screen and (max-width: 767px) {
  .thanks {
    padding: 30px 0;
  }
}

.thanks__inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 25px;
}
@media screen and (max-width: 575px) {
  .thanks__inner {
    padding: 0 15px;
  }
}

.thanks__title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 575px) {
  .thanks__title {
    margin-bottom: 20px;
  }
}

.thanks__text {
  font-size: 16px;
  line-height: 1.4;
}
@media screen and (max-width: 575px) {
  .thanks__text {
    font-size: 14px;
  }
}

.thanks__text--large {
  font-size: 20px;
  font-weight: 700;
}
@media screen and (max-width: 575px) {
  .thanks__text--large {
    font-size: 18px;
  }
}

.thanks__free {
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #fa6908;
  text-align: center;
}

.thanks__free-tel {
  text-align: center;
  margin-top: 10px;
}

.thanks__link {
  color: #fa6908;
}

.thanks__button {
  margin-top: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanksButton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #fa6908;
  color: #fff;
}

/* --------------------------------------------
 *  共通パーツ
 * -------------------------------------------- */
.inner {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding-right: 24px;
  padding-left: 24px;
}
@media screen and (max-width: 575px) {
  .inner {
    padding-right: 16px;
    padding-left: 16px;
  }
}

.inner--s {
  width: 100%;
  max-width: 928px;
  margin: 0 auto;
}

.inner--l {
  width: 100%;
  max-width: 1120px;
}

.heading {
  position: relative;
  font-size: 48px;
  font-weight: bold;
  padding-bottom: 32px;
  letter-spacing: 0.05em;
  color: #333333;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .heading {
    font-size: 36px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 575px) {
  .heading {
    font-size: 28px;
  }
}
.heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 8px;
  border-radius: 4px;
  background-color: #004387;
}
@media screen and (max-width: 767px) {
  .heading::after {
    width: 48px;
    height: 6px;
  }
}

.heading--w {
  color: #fff;
}
.heading--w::after {
  background-color: #fff;
}

.heading--small {
  font-size: 40px;
}
@media screen and (max-width: 767px) {
  .heading--small {
    font-size: 24px;
  }
}

.heading--reason {
  font-size: 44px;
}
@media screen and (max-width: 1024px) {
  .heading--reason {
    font-size: 36px;
  }
}
@media screen and (max-width: 767px) {
  .heading--reason {
    font-size: 30px;
  }
}

.cta__inner {
  position: relative;
  width: 92%;
  max-width: 1120px;
  background-color: #fff;
  border-radius: 16px;
  border: 4px solid #004387;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}
.cta__bg-pc {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24%;
  aspect-ratio: 504/573;
}
@media screen and (max-width: 767px) {
  .cta__bg-pc {
    width: 22%;
    aspect-ratio: 252/286;
  }
}
.cta__heading {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #004387;
  padding: 8px 24px;
}
@media screen and (max-width: 767px) {
  .cta__heading {
    padding: 8px 16px;
  }
}
@media screen and (max-width: 575px) {
  .cta__heading {
    justify-content: start;
  }
}
.cta__bg-sp {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26%;
  aspect-ratio: 252/286;
}
.cta__headingText {
  position: relative;
  display: inline-block;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .cta__headingText {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .cta__headingText {
    font-size: 18px;
  }
}
@media screen and (max-width: 575px) {
  .cta__headingText {
    font-size: 4vw;
    display: inline-block;
  }
}
.cta__headingText::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -120px;
  width: 100px;
  aspect-ratio: 104/86;
  background-image: url(../images/cta-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .cta__headingText::before {
    width: 90px;
  }
}
@media screen and (max-width: 767px) {
  .cta__headingText::before {
    width: 60px;
    left: -60px;
  }
}
@media screen and (max-width: 575px) {
  .cta__headingText::before {
    display: none;
  }
}
.cta__content {
  display: flex;
  align-items: baseline;
  padding: 16px 20% 24px 24px;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .cta__content {
    padding-left: 16px;
  }
}
@media screen and (max-width: 575px) {
  .cta__content {
    flex-direction: column;
    padding: 24px;
  }
}

.ctaMail {
  display: inline-block;
  position: relative;
}
.ctaMail__icon {
  position: absolute;
  top: -8px;
  left: -12px;
  width: 16%;
}

.ctaTel {
  display: inline-block;
  padding-bottom: 4px;
}

.caseCard {
  position: relative;
  white-space: nowrap;
  width: 100%;
  min-width: 206px;
}
.caseCard__img {
  aspect-ratio: 620/465;
}
.caseCard__area {
  color: #fff;
  background-color: #004387;
  padding: 4px 16px;
  text-align: center;
}
.caseCard__date {
  font-size: 14px;
  background-color: #fff;
  padding: 4px 16px;
  border-right: 1px solid #004387;
  border-left: 1px solid #004387;
  border-bottom: 1px solid #004387;
  text-align: center;
}
.caseCard__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background-color: #004387;
  padding: 2px 4px;
  width: 56px;
}
.caseCard__tagText {
  font-size: 12px;
  color: #fff;
}
.caseCard__tagNumber {
  font-size: 18px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .md-none {
    display: none;
  }
}

.md-show {
  display: none;
}
@media screen and (max-width: 767px) {
  .md-show {
    display: block;
  }
}

@media screen and (max-width: 575px) {
  .sm-none {
    display: none;
  }
}

.sm-show {
  display: none;
}
@media screen and (max-width: 575px) {
  .sm-show {
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .lg-none {
    display: none;
  }
}

.lg-show {
  display: none;
}
@media screen and (max-width: 1024px) {
  .lg-show {
    display: block;
  }
}