@charset "utf-8";
.u-pb10 {
  padding-bottom: 10px;
}
.u-pb15 {
  padding-bottom: 15px;
}
.u-pb20 {
  padding-bottom: clamp(10px, var(--px-20), 20px);
}
.u-pb30 {
  padding-bottom: clamp(15px, var(--px-30), 30px);
}
.u-pb40 {
  padding-bottom: clamp(20px, var(--px-40), 40px);
}
.u-pb50 {
  padding-bottom: clamp(25px, var(--px-50), 50px);
}
.u-pb60 {
  padding-bottom: clamp(30px, var(--px-60), 60px);
}
.u-pb70 {
  padding-bottom: clamp(30px, var(--px-70), 70px);
}
.u-pb80 {
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.u-pb90 {
  padding-bottom: clamp(40px, var(--px-90), 90px);
}
.u-pb100 {
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.u-pb120 {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: clamp(10px, var(--px-20), 20px);
}
.u-mb30 {
  margin-bottom: clamp(15px, var(--px-30), 30px);
}
.u-mb40 {
  margin-bottom: clamp(20px, var(--px-40), 40px);
}
.u-mb50 {
  margin-bottom: clamp(25px, var(--px-50), 50px);
}
.u-mb60 {
  margin-bottom: clamp(30px, var(--px-60), 60px);
}
.u-mb70 {
  margin-bottom: clamp(30px, var(--px-70), 70px);
}
.u-mb80 {
  margin-bottom: clamp(40px, var(--px-80), 80px);
}
.u-mb90 {
  margin-bottom: clamp(40px, var(--px-90), 90px);
}
.u-mb100 {
  margin-bottom: clamp(50px, var(--px-100), 100px);
}
.u-mb120 {
  margin-bottom: clamp(50px, var(--px-120), 120px);
}

/* =====================================================
  c-sec-head : ページタイトル / セクション見出し（上下罫線の帯）
  例) 会社案内 + COMPANY / PROFILE / ACCESS
===================================================== */
.c-page-head {
  padding-top: clamp(60px, var(--px-100), 100px);
}
.c-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, var(--px-14), 14px);
  padding-block: clamp(32px, 4.5833vw, 66px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.c-sec-head__ja {
  font-family: var(--b-font-new);
  font-size: clamp(18px, var(--px-24), 24px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.c-sec-head__en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--b-font-new);
  font-size: clamp(13px, var(--px-16), 16px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.08em;
  color: var(--c-line);
}
.c-sec-head__en::before,
.c-sec-head__en::after {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--c-line);
}

/* =====================================================
  c-breadcrumb : パンくずリスト
===================================================== */
.c-breadcrumb {
  margin-top: clamp(16px, var(--px-27), 27px);
}
.c-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, var(--px-14), 14px);
  font-family: var(--b-font-new);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 6.11px;
  height: 8.78px;
  margin-right: clamp(8px, var(--px-14), 14px);
  background: url("../img/arrow-right.svg") no-repeat center center / contain;
  vertical-align: middle;
}
.c-breadcrumb__item--home a {
  color: var(--c-main);
}

/* =====================================================
  c-table : 定義表（ストライプ）
===================================================== */
.c-table {
  max-width: 1260px;
  width: 87.5%;
  margin-inline: auto;
  font-family: var(--b-font-new);
  font-size: clamp(15px, var(--px-20), 20px);
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.c-table tr:nth-child(odd) {
  background: var(--c-bg);
}
.c-table th,
.c-table td {
  padding-block: clamp(14px, var(--px-26), 26px);
  text-align: left;
  vertical-align: middle;
}
.c-table th {
  width: 27.4%;
  padding-left: 3.17%;
  font-weight: 500;
}
.c-table td {
  font-weight: 400;
}

/* =====================================================
  p-company : 会社案内（下層）
===================================================== */
/* --- ご挨拶 --- */
.p-company-greeting {
  padding-top: clamp(50px, var(--px-93), 93px);
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.p-company-greeting__inner {
  display: grid;
  grid-template-columns: 51.72% 43.59%;
  justify-content: space-between;
}
.p-company-greeting__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, var(--px-15), 15px);
}
.p-company-greeting__en {
  font-family: var(--b-font-en);
  font-size: clamp(32px, var(--px-64), 64px);
  font-weight: 600;
  line-height: 0.65;
  letter-spacing: 0.05em;
  color: var(--c-main);
}
.p-company-greeting__ja {
  font-size: clamp(18px, var(--px-24), 24px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: 0.09em;
}
.p-company-greeting__img {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.p-company-greeting__img img {
  display: block;
  width: 100%;
  aspect-ratio: 558 / 762;
  object-fit: cover;
}
.p-company-greeting__text {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(30px, var(--px-70), 70px);
  padding-left: 9.06%;
  line-height: 2.19;
}
.p-company-greeting__text p + p {
  margin-top: 2.19em;
}

/* --- 会社概要 --- */
.p-company-profile__body {
  padding-top: clamp(28px, var(--px-55), 55px);
  padding-bottom: clamp(36px, var(--px-75), 75px);
}

/* --- アクセスマップ --- */
.p-company-access__map {
  padding-top: clamp(28px, var(--px-55), 55px);
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
.c-map--access {
  aspect-ratio: 1280 / 588;
}

/* =====================================================
  c-merit-card : アイコン＋見出しの白カード
===================================================== */
.c-merit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.153vw, 31px);
  min-height: clamp(180px, 17.57vw, 253px);
  padding: clamp(20px, var(--px-40), 40px) clamp(12px, var(--px-24), 24px);
  background: #fff;
  border-radius: 4px;
}
.c-merit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-merit-card__img {
  display: block;
}
.c-merit-card__img--1 {
  width: clamp(70px, 6.944vw, 100px);
  height: clamp(60px, 5.972vw, 86px);
}
.c-merit-card__img--2 {
  width: clamp(57px, 5.625vw, 81px);
  height: clamp(69px, 6.806vw, 98px);
}
.c-merit-card__img--3 {
  width: clamp(64px, 6.319vw, 91px);
  height: clamp(55px, 5.486vw, 79px);
}
.c-merit-card__img--4 {
  width: clamp(72px, 7.153vw, 103px);
  height: clamp(60px, 5.972vw, 86px);
}
.c-merit-card__text {
  font-weight: 700;
  font-size: clamp(15px, var(--px-20), 20px);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-align: center;
}

/* =====================================================
  c-balloon : 下向きしっぽ付きの吹き出し
===================================================== */
.c-balloon {
  position: relative;
  width: 100%;
  padding: clamp(10px, var(--px-13), 13px) clamp(10px, var(--px-16), 16px);
  background: #187fc4;
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, var(--px-20), 20px);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-align: center;
}
.c-balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  border-style: solid;
  border-width: 11px 4px 0 4px;
  border-color: #187fc4 transparent transparent transparent;
}
.c-balloon--left::after {
  left: 81%;
}
.c-balloon--right::after {
  left: 18%;
}

/* =====================================================
  p-service : 事業内容（下層）
===================================================== */
/* --- リード文 --- */
.p-service-lead {
  padding-top: clamp(36px, var(--px-70), 70px);
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.p-service-lead__text {
  line-height: 2.19;
  text-align: center;
}

/* --- 買取のメリット --- */
.p-service-merit {
  padding-bottom: clamp(50px, 6.875vw, 99px);
}
.p-service-merit__band {
  position: relative;
  margin-top: clamp(28px, var(--px-55), 55px);
  padding-block: clamp(28px, 4.028vw, 58px);
  overflow: hidden;
}
.p-service-merit__band::before,
.p-service-merit__band::after {
  content: "";
  position: absolute;
  inset: 0;
}
.p-service-merit__band::before {
  background: url("../img/service-merit-bg.webp") no-repeat center center /
    cover;
}
.p-service-merit__band::after {
  background: rgba(23, 103, 164, 0.51);
}
.p-service-merit__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 0.764vw, 11px);
  width: 88.96%;
  max-width: 1281px;
  margin-inline: auto;
}

/* --- こんな方にオススメ --- */
.p-service-rec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(8px, var(--px-20), 20px);
  padding-top: clamp(24px, var(--px-45), 46px);
  padding-inline: clamp(12px, 2vw, 28px);
}
/* イラストを左右にはみ出させて、吹き出しに幅を渡す（吹き出しが手前） */
.p-service-rec__img {
  grid-column: 2;
  width: clamp(220px, 39.5vw, 569px);
  margin-inline: -5.5vw;
}
.p-service-rec__img img {
  display: block;
  width: 100%;
  aspect-ratio: 569 / 360;
  object-fit: contain;
}
.p-service-rec__list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, var(--px-45), 45px);
}
.p-service-rec__list--left {
  grid-column: 1;
  grid-row: 1;
}
.p-service-rec__list--right {
  grid-column: 3;
  grid-row: 1;
}
.p-service-rec__note {
  padding-top: clamp(24px, var(--px-48), 48px);
  padding-bottom: clamp(60px, var(--px-120), 120px);
  line-height: 2.19;
  text-align: center;
}
.p-service-rec__note p + p {
  margin-top: 2.19em;
}

/* =====================================================
  c-work : 事例の1行（見出し＋写真）
===================================================== */
.c-work {
  display: flex;
  align-items: flex-start;
  gap: 6.33%;
}
.c-work__body {
  width: 50.08%;
}
.c-work__title {
  font-size: clamp(17px, var(--px-24), 24px);
  font-weight: 700;
  line-height: 1.42;
}
.c-work__title::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: clamp(14px, var(--px-27), 27px);
  background: linear-gradient(90deg, #1767a4 0 55px, #c9d9e4 55px);
}
.c-work__img {
  width: 43.59%;
}
.c-work__img img {
  display: block;
  width: 100%;
  aspect-ratio: 558 / 284;
  object-fit: cover;
}

/* =====================================================
  p-works : 事業事例（下層）
===================================================== */
.p-works-list {
  padding-top: clamp(32px, 4.653vw, 67px);
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
.p-works-list__items {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, var(--px-27), 27px);
}

/* =====================================================
  c-checklist : チェックボックス付きの箇条書き
===================================================== */
.c-checklist__item {
  display: flex;
  align-items: center;
  gap: clamp(8px, var(--px-13), 13px);
  min-height: clamp(44px, 3.681vw, 53px);
  padding-block: clamp(6px, 0.7vw, 10px);
  border-bottom: 1px solid #ccc;
}
.c-checklist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 1.667vw, 24px);
  height: clamp(20px, 1.667vw, 24px);
  flex-shrink: 0;
}
.c-checklist__icon img {
  display: block;
  width: clamp(15px, 1.25vw, 18px);
  height: clamp(15px, 1.25vw, 18px);
}
.c-checklist__text {
  font-weight: 700;
  font-size: clamp(14px, var(--px-20), 20px);
  line-height: 1.7;
}

/* =====================================================
  p-trouble : よくある質問（下層）
===================================================== */
/* --- 導入 --- */
.p-trouble-intro {
  padding-top: clamp(30px, 4.375vw, 63px);
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.p-trouble-intro__inner {
  display: flex;
  align-items: flex-start;
  gap: 6.33%;
}
.p-trouble-intro__img {
  width: 43.59%;
  flex-shrink: 0;
}
.p-trouble-intro__img img {
  display: block;
  width: 100%;
  aspect-ratio: 558 / 433;
  object-fit: cover;
}
.p-trouble-intro__text {
  flex: 1;
  line-height: 2.125;
}

/* --- チェックリスト --- */
.p-trouble-check__inner {
  display: flex;
  align-items: flex-end;
  gap: 13.9%;
  padding-top: clamp(28px, var(--px-55), 56px);
  padding-bottom: clamp(60px, var(--px-120), 120px);
}
.p-trouble-check__inner .c-checklist {
  flex: 1;
}
.p-trouble-check__img {
  width: 43.59%;
  flex-shrink: 0;
}
.p-trouble-check__img img {
  display: block;
  width: 100%;
  aspect-ratio: 558 / 433;
  object-fit: cover;
}

/* =====================================================
  c-form : Contact Form 7 のフォーム
  （CF7側のマークアップは cf7-contact-form.txt をコピペ）
===================================================== */
.c-form {
  max-width: 790px;
  width: 100%;
  margin-inline: auto;
}
.c-form .row {
  display: flex;
  align-items: stretch;
  gap: 3.67%;
  margin-bottom: clamp(8px, var(--px-14), 14px);
}
.c-form .row:last-child {
  margin-bottom: 0;
}
/* ラベルは上寄せ。1行の行は結果的に上下中央、テキストエリアの行は上寄せになる */
.c-form dt {
  display: flex;
  align-items: flex-start;
  width: 30.76%;
  flex-shrink: 0;
  padding: clamp(12px, var(--px-26), 26px) clamp(10px, 1.111vw, 16px);
  background: var(--c-bg);
  /* 必須マークが入るぶん、カンプの20pxから少し詰めて1行に収める */
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
.c-form dd {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-block: clamp(8px, var(--px-18), 18px);
}
/* CF7は input/textarea を span.wpcf7-form-control-wrap で包むので、幅を通す */
.c-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.c-form__req {
  margin-right: 0.5em;
  flex-shrink: 0;
  padding: 0.1em 0.5em;
  background: #c0392b;
  border-radius: 2px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea {
  width: 100%;
  padding: 0.5em 0.8em;
  background: #f2faff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  font-family: inherit;
  font-size: max(1.111vw, 16px);
  line-height: 1.6;
  color: var(--b-color);
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"] {
  min-height: clamp(40px, 3.194vw, 46px);
}
.c-form textarea {
  min-height: clamp(140px, 14.097vw, 203px);
  resize: vertical;
}
.c-form input:focus-visible,
.c-form textarea:focus-visible {
  outline: 2px solid #5068a9;
  outline-offset: 1px;
}
/* 送信ボタン。CF7のsubmitは中に要素を置けないので、丸と矢印は擬似要素で重ねる */
.c-form__btn {
  position: relative;
  width: fit-content;
  margin-block: clamp(32px, var(--px-64), 64px) 0;
  margin-inline: auto;
}
/* common.css の input[type="submit"]（border:none / serif）に勝たせるため詳細度を上げる */
.c-form__btn .c-form__submit {
  width: clamp(240px, 23.125vw, 333px);
  min-height: clamp(56px, 5.208vw, 75px);
  padding-inline: clamp(20px, 2.569vw, 37px) clamp(48px, 5.5vw, 79px);
  background: #fff;
  border: 2px solid #5068a9;
  color: #5068a9;
  font-family: var(--b-font-new);
  font-size: clamp(16px, var(--px-20), 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  transition: 0.25s ease-in-out;
}
.c-form__btn .c-form__submit:hover {
  background: #5068a9;
  color: #fff;
}
.c-form__btn::before,
.c-form__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.c-form__btn::before {
  right: clamp(14px, 1.458vw, 21px);
  width: clamp(26px, 2.512vw, 36.17px);
  height: clamp(24px, 2.361vw, 34px);
  background: url("../img/btn-circle.svg") no-repeat center center / contain;
}
.c-form__btn::after {
  right: clamp(24px, 2.257vw, 32.5px);
  width: clamp(6px, 0.527vw, 7.59px);
  height: clamp(10px, 0.901vw, 12.97px);
  background: url("../img/btn-arrow.svg") no-repeat center center / contain;
  rotate: 180deg;
}

/* =====================================================
  c-privacy : 個人情報保護方針（高さ固定・中でスクロール）
===================================================== */
.c-privacy {
  max-width: 1087px;
  width: 100%;
  margin-inline: auto;
}
.c-privacy__head {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.c-privacy__title {
  font-size: clamp(14px, var(--px-16), 16px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.c-privacy__body {
  height: 350px;
  margin-top: clamp(20px, var(--px-40), 40px);
  padding-right: clamp(20px, var(--px-40), 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: clamp(14px, var(--px-15), 15px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
/* カンプ通りの2px幅スクロールバー。
   scrollbar-width / scrollbar-color を併記すると Chrome が ::-webkit-scrollbar を
   無視して既定幅になるため、標準プロパティは Firefox 側にだけ当てる */
.c-privacy__body::-webkit-scrollbar {
  width: 2px;
}
.c-privacy__body::-webkit-scrollbar-track {
  background: transparent;
}
.c-privacy__body::-webkit-scrollbar-thumb {
  background: var(--c-main);
}
@supports not selector(::-webkit-scrollbar) {
  .c-privacy__body {
    scrollbar-width: thin;
    scrollbar-color: var(--c-main) transparent;
  }
}
.c-privacy__body h3 {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.8;
}
.c-privacy__list {
  list-style: disc;
  padding-left: 1.5em;
}
.c-privacy__list li {
  list-style: disc;
}

/* =====================================================
  p-contact-page : お問い合わせ（下層）
  ※ フッターのCONTACT帯は main.css の .p-contact なので別物
===================================================== */
.p-contact-page__form {
  padding-top: clamp(32px, 4.444vw, 64px);
}
.p-contact-page__privacy {
  padding-top: clamp(24px, var(--px-45), 46px);
  padding-bottom: clamp(55px, 7.639vw, 110px);
}

/*-------ipad-air----*/
@media screen and (max-width: 820px) {
  .p-trouble-intro__inner,
  .p-trouble-check__inner {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(20px, 4vw, 32px);
  }
  .p-trouble-intro__img,
  .p-trouble-check__img {
    width: 100%;
  }
  .c-work {
    flex-direction: column;
    gap: clamp(12px, 2.5vw, 20px);
  }
  .c-work__body,
  .c-work__img {
    width: 100%;
  }
  .p-works-list__items {
    gap: clamp(28px, 5vw, 40px);
  }
  .p-service-merit__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-service-rec__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 4vw, 32px);
  }
  .p-service-rec__img {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 420px);
    margin-inline: auto;
  }
  .p-service-rec__list--left {
    grid-column: 1;
    grid-row: 2;
  }
  .p-service-rec__list--right {
    grid-column: 1;
    grid-row: 3;
  }
  .c-balloon--left::after,
  .c-balloon--right::after {
    left: 50%;
    translate: -50% 0;
  }
}
/*-------iphone----*/
@media screen and (max-width: 680px) {
  .p-service-merit__list {
    width: 92%;
  }
  .c-merit-card {
    min-height: 0;
    gap: 14px;
    padding: 20px 8px;
  }
  .c-merit-card__text {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .c-form .row {
    flex-direction: column;
    gap: 6px;
  }
  .c-form dt,
  .c-form dd {
    width: 100%;
  }
  .c-form dt {
    padding: 10px 14px;
  }
  .c-privacy__body {
    height: 400px;
    padding-right: 16px;
  }
  .c-sec-head {
    padding-block: 8vw;
  }
  .c-breadcrumb__list {
    font-size: 12px;
  }
  .c-table {
    width: 100%;
  }
  .c-table tr {
    display: block;
  }
  .c-table th,
  .c-table td {
    display: block;
    width: 100%;
    padding-inline: 5.55%;
  }
  .c-table th {
    padding-bottom: 0;
  }
  .c-table td {
    padding-top: 0.2em;
  }
  .p-company-greeting__inner {
    grid-template-columns: 1fr;
    row-gap: 6vw;
  }
  .p-company-greeting__head,
  .p-company-greeting__img,
  .p-company-greeting__text {
    grid-column: 1;
    grid-row: auto;
  }
  .p-company-greeting__text {
    margin-top: 0;
    padding-left: 0;
  }
  .p-company-greeting__img img {
    aspect-ratio: 4 / 3;
  }
  .c-map--access {
    aspect-ratio: 4 / 3;
  }
}