@charset "utf-8";

/* 共通事項 */

:root {
  --padding-inline-sp: 20px;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  background-color: #072f50;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #ffffff;
}

dialog {
  overflow: visible;
  padding: 0;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &::backdrop {
    background-color: rgba(33, 33, 33, 0.3);
  }
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

a:hover {
  opacity: 0.9;
  transition: 0.9s;
}

.no-scroll {
  overflow: hidden;
}

@media screen and (max-width: 1200px) {
  [id] {
    scroll-margin-top: 82px;
  }
}

@media screen and (max-width: 1200px) {
  .pc-only {
    display: none;
  }
}

.u-pc-only {
  display: block;

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

.u-sp-only {
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
  }
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.wrapper-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;

  @media screen and (max-width: 768px) {
    max-width: 100%;
    width: 100%;
  }
}

.l-main {
  @media screen and (max-width: 768px) {
    min-width: 0;
  }
}

.c-section-title {
  max-width: 427px;
  width: 100%;
  margin-block-end: 0.563rem;
  padding-block: 0.188rem;
  margin-inline: auto;

  border-radius: 5px;

  font-size: 1.563rem;
  line-height: 1.44;
  font-weight: 700;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  text-align: center;

  &.c-section-title--yellow {
    background-color: #dfb64a;
  }

  &.c-section-title--blue {
    background-color: #100169;
  }

  @media screen and (max-width: 768px) {
    margin-block-end: 0.75rem;

    font-size: 1.375rem;
    line-height: 1.409;
  }
}

.head-title {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 16px;
}

.sub-title {
  text-align: center;
  font-size: 2.1875rem;
  line-height: 1.4;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .sub-title {
    font-size: 1.875rem;
  }
}

/* ============================
*  お問い合わせ コンポーネント
* ========================== */
.c-tel-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;

  padding-block: 0.625rem 1rem;
  padding-inline: 0.625rem;

  @media screen and (max-width: 768px) {
    justify-content: center;
    gap: clamp(0.25rem, 2vw, 0.5rem);
    width: 100%;
  }
}

.c-tel-cta__phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-tel-cta__number {
  display: flex;
  align-items: center;
  gap: 0.375rem;

  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;

  @media screen and (max-width: 768px) {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  &::before {
    content: '';

    width: 0.771rem;
    height: 1.009rem;
    background-image: url(../img/icon-tel-yellow.svg);
    background-size: cover;

    @media screen and (max-width: 768px) {
      width: 0.647rem;
      height: 0.847rem;
    }
  }
}

.c-tel-cta__hours {
  font-size: 0.563rem;
  line-height: 1.444;
  font-weight: 700;
  color: #fff;

  @media screen and (max-width: 768px) {
    margin-block-start: -0.25rem;

    font-size: 0.5rem;
    line-height: 1.5;
  }
}

.c-cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  max-width: 221px;
  width: 100%;
  height: 2.5rem;
  padding-block: 0.5rem;
  background-image: url(../img/bg-cta-button.png);
  background-size: cover;

  font-size: 0.938rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;

  &::before {
    content: '';

    width: 1.125rem;
    height: 1.188rem;
    background-image: url(../img/icon-tel-circle-red.svg);
    background-size: cover;
  }

  /* PC用：ダイアログボタン */
  &.dialog-button {
    display: flex;
    transition: filter 0.2s;

    &:hover {
      filter: brightness(1.15);
    }

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

  .fv &.dialog-button {
    max-width: 256px;
    margin-inline: auto;
    background-image: url(../img/bg-fv-cta-button.png);
    background-size: contain;
  }

  /* SP用：電話リンク */
  &.tel-button {
    display: none;
    align-items: center;
    max-width: 185px;
    height: 2.125rem;
    padding-inline: 1.375rem;

    font-size: 0.813rem;
    line-height: 1.462;
    white-space: nowrap;

    background-size: contain;

    &::before {
      width: 1rem;
      height: 1rem;
      background-size: contain;
    }

    @media screen and (max-width: 768px) {
      display: flex;

      .fv &.tel-button {
        max-width: 226px;
        margin-inline: auto;
        background-image: url(../img/bg-fv-cta-button.png);
        background-size: contain;
      }
    }
  }
}

/* ============================
*  電話問い合わせ ダイアログ
* ========================== */
.c-dialog {
  max-width: 527px;
  width: 100%;
  height: fit-content;

  border: none;
  border-radius: 6px;

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

.c-dialog__inner {
  position: relative;

  background-color: #fff;
}

/* 導入 */
.c-dialog__desc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  padding-block: 1rem;
  background-color: #dfb64a;
  border-radius: 6px 6px 0 0;

  font-size: 1.563rem;
  line-height: 1.48;
  font-weight: 700;
  color: #fff;
  text-align: center;

  &::before {
    content: '';

    background: url(../img/icon-tel-white.svg) no-repeat center;
    width: 1.125em;
    height: auto;
    aspect-ratio: 18 / 23;
  }
}

.c-dialog__contet {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0.625rem 1rem;
  background-color: #fff;

  font-weight: 700;

  /* 店名 */
  & .c-dialog__label {
    font-size: 1.188rem;
    line-height: 1.474;
    color: #072f50;
    text-align: center;
  }

  /* 電話番号 */
  & .c-dialog__tel-number {
    margin-block: -0.5rem 0.25rem;

    font-size: 4.375rem;
    line-height: 1.471;
    color: #ff4500;
  }

  & .c-dialog__tel-number--small {
    font-size: 3.75rem;
  }

  /* 受付時間 */
  & .c-dialog__tel-hours-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 1.188rem;
    line-height: 1.474;
    color: #072f50;
  }

  & .c-dialog__tel-hours {
    margin-inline-start: -0.375rem;
  }
}

/* 注意 */
.c-dialog__note {
  padding-block: 1rem;
  background-color: #dfb64a;
  border-radius: 0 0 6px 6px;

  font-size: 1.188rem;
  line-height: 1.474;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* 閉じるボタン */
.c-dialog__close {
  position: absolute;
  content: '';
  top: -17px;
  right: -17px;

  width: 34px;
  height: 34px;
  aspect-ratio: 1 / 1;
}

/* ============================
*  Header
* ========================== */
#header {
  position: sticky;
  top: 170px;
  width: 100%;
  height: fit-content;

  & .site-logo {
    position: absolute;
    content: '';
    top: 0;
    right: clamp(1rem, 7.22vw, 6.5rem);

    max-width: 278px;
    width: 55.94%;
    height: auto;

    margin-inline: auto;
    aspect-ratio: 278 / 235;
  }

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

/* ============================
*  左カラム  ヘッダー / 画像
* ========================== */
.site-left {
  position: sticky;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 497px;
  width: 100%;
  min-height: 100vh;
  padding-block-start: 170px;

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

/* 画像を表示する固定エリア */
.image-container {
  flex-shrink: 0;
  position: fixed;
  top: 464px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.image-box {
  flex-shrink: 0;
  width: min(258px, 17.916vw);
  min-height: 100px;
  background-size: contain;
  background-position: center;
  /* パッと切り替えるため transition は設定しない */
}

/* 各状態のスタイル（画像と倍率） */
.state-1 {
  background-image: url('../img/bg_items1.png');
  transform: scale(1.5);
}

.state-2 {
  background-image: url('../img/bg_items2.png');
  transform: scale(1.5);
}

.state-3 {
  background-image: url('../img/bg_items3.png');
  transform: scale(1.5);
}

.scale-up {
  animation: scaleUp 0.45s forwards;
}

@keyframes scaleUp {
  0% {
    transform: scale(1.5);
  }
  25% {
    transform: scale(2.2);
  }
  40% {
    transform: scale(2.2);
  }
  100% {
    transform: scale(1.5);
  }
}

.page-layout {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 447px) 1fr;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

.site-right {
  width: 100%;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  padding-block-start: 4.95dvh;
  padding-inline-start: clamp(1rem, 9.17vw, 8.25rem);

  & #nav {
    margin-block-end: 2.5rem;
  }

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

.bag {
  width: 100%;
  height: auto;
  max-width: 387px;
  margin: 0 auto;
}

/* header 右 */

.nav-menu li {
  position: relative;
  line-height: 1.5;
  color: #ffffff;
  border-left: 2px solid #ffffff;
  padding-left: 14px;
}

.nav-menu li + li {
  margin-top: 25px;
}

.nav-menu li::before {
  content: '';
  width: 2px;
  height: 44px;
  background-color: #ffffff;
}

.nav-menu a {
  font-size: 1rem;
  border-spacing: 14px;
  transition: color 0.2s;

  &:hover {
    color: #d9b13d;
  }
}

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

.menu h3 {
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.5;
  margin-top: 16px;
}

.nav-tel__label {
  color: #fff;
}

.nav-tel a {
  font-weight: bold;
  font-size: 1.875rem;
  color: #d9b13d;
}

/* 中央 */

.sp-content {
  /* container-type: inline-size;
  container-name: sp-content; */
  position: relative;
  /* z-index: 0; */
  max-width: 447px;
  margin: auto;

  @media screen and (max-width: 1200px) {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 768px) {
  .sp-content {
    max-width: 100%;
    margin-inline: auto;
    width: 100%;
  }
}

.sp-header {
  display: none;

  @media screen and (max-width: 768px) {
    position: sticky;
    bottom: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 58px;
    background-color: #072f50;
    padding-inline: 7.938rem 1.375rem;
  }

  @media screen and (max-width: 768px) {
    position: fixed;
    z-index: 10;
    height: 65px;
  }
}

.sp-logo{
  position: fixed;
  bottom: 5px;
  left: 1.5rem;
}

.sp-logo img{
  width: 51px;
  height: 95px;
}

.sp-tel {
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #ebd752;
  border-radius: 8px;
  /* height: 40px; */
  padding-inline: 0.8rem;

  color: #072f50;

  /* 電話番号 */
  & .sp-tel__number {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 700;
  }

  & .sp-tel__number::before {
    content: '';

    width: 10px;
    height: 14px;
    background-image: url(../img/icon-tel.svg);
    background-size: cover;
  }

  /* 営業時間 */
  & .sp-tel__hours {
    font-size: 0.5rem;
    line-height: 1.5;
    font-weight: 700;
  }
}

#sp-header.open .sp-tel {
  display: none;
}

.hamburger {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;

  width: 20px;
  height: 34px;
}

.hamburger__line {
  position: relative;

  flex-shrink: 0;

  width: 100%;
  height: 2px;

  background-color: #fff;
  border-radius: 10px;
  transition: all 0.3s ease;

  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;

    background-color: #fff;
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  &::before {
    top: -8px;
  }

  &::after {
    top: 8px;
  }
}

.open .hamburger__line {
  background-color: transparent;

  &::before {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }

  &::after {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
}

.hamburger__label {
  font-size: 0.5rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}

.open .c-hamburger__line {
  background-color: transparent;

  &::before,
  &::after {
    top: 0;
  }

  &::before {
    transform: rotate(315deg);
  }

  &::after {
    transform: rotate(-315deg);
  }
}

.icon-hamburger-active,
.icon-hamburger-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.25s opacity ease-in-out;
}
.hamburger.open .icon-hamburger-open {
  opacity: 0;
}
.hamburger.open .icon-hamburger-close {
  opacity: 1;
}
.icon-hamburger-close {
  opacity: 0;
}

.sp-drawer {
  display: none;
}
.sp-drawer.open {
  position: fixed;
  z-index: 100;
  top: 58px;
  left: 0;
  display: grid;
  width: 100vw;
  height: calc(100dvh - 60px);
  padding-block-start: 2.25rem;
  padding-inline-start: 20.27vw;
  overflow-y: auto;
}

.sp-drawer.open:before {
  content: '';
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  z-index: -1;
  align-self: start;
  display: block;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin-left: -1px;
  background-color: #072f50;
}

.nav-menu {
  overflow-y: auto;
  max-height: 100%;
}

.sp-drawer-tel {
  position: fixed;
  bottom: 0;
  display: grid;
  place-items: center;
  background-color: #dfb64a;
  color: #fff;
  font-weight: 500;
  font-size: 1.25rem;
  inline-size: 100cqi;
  block-size: 53px;
}

@media screen and (max-width: 768px) {
  .sp-drawer-tel {
    left: max(calc((100vw - 447px) / 2), 0px);
    left: 0;
    width: 100%;
  }
}

.site-top {
  position: relative;
  background-image: url(../img/bg_mv.png);
  background-repeat: repeat-y;
  background-size: 100%;
  overflow: hidden;
}

@media screen and (max-width: 447px) {
  .site-top {
    padding-top: 82px;
  }
}

.site-top-wrapper {
  position: relative;
}

@media screen and (max-width: 768px) {
  .site-top-wrapper:before {
    content: none;
  }
}

.site-top p {
  color: #ffffff;
  line-height: 1.5;
}

.site-top h2 {
  font-size: 1.625rem;
  line-height: 1.4;
  text-align: center;
  background-color: #ffffff;
  padding: 17px 40px;
  margin-bottom: 26px;
}

@media screen and (max-width: 768px) {
  .site-top h2 {
    font-size: 1.3125rem;
  }
}

.site-top-sub {
  font-weight: bold;
  font-size: 1.1875rem;
  line-height: 1.4;
  margin-bottom: 14px;
  text-align: center;
}

.logo-wrapper {
  margin-bottom: 17px;
  padding-inline: 8.27% 9.59%;
}

.t-text {
  display: block;
  border-radius: 7px;
  background-color: #d84f00;
  margin-bottom: 22px;
  margin-inline: auto;
  width: fit-content;
}

.t-text p {
  font-size: 1.0625rem;
  padding: 7px 18px 8px;
  line-height: 1.47;
  text-align: center;
}

.site-top-desc {
  padding: 0 6.4% 52px 7.8%;
}

.top-mg {
  margin: auto;
}

.name {
  position: absolute;
  z-index: 1;
  bottom: 16%;
  right: 33px;
  text-align: end;
}

.name p {
  font-size: 0.6875rem;
  line-height: 1.45;
}

.top-img {
  width: 77.8%;
  height: auto;
  max-width: 320px;
  padding-bottom: 28.3%;
}

.bottom-img {
  position: absolute;
  bottom: 0;
  right: -2.68%;
  width: 56.2%;
}

.bottom-img img {
  width: 100%;
  height: auto;
  max-width: 246px;
}

.pass {
  position: absolute;
  bottom: -1px;
  max-width: 100%;
}

/* ============================
* FV #fv
* ========================== */
.fv {
  position: relative;
  width: 100%;
  background-color: #fff;

  @media screen and (max-width: 768px) {
    margin-block-start: 0px;
  }

  &::after {
    z-index: 6;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    max-width: 447px;
    width: 100%;
    height: auto;
    background-image: url(../img/hero-hiromi.png);
    background-size: cover;
    aspect-ratio: 447 / 306;

    @media screen and (max-width: 768px) {
      max-width: 100%;
      bottom: 104px;
      top: auto;
    }
  }
}

.fv__inner {
  position: relative;
  z-index: 5;

  padding-block-start: 0.938rem;
  padding-inline: 0.938rem 1.25rem;

  @media screen and (max-width: 768px) {
    padding-block-start: 0.875rem;
    padding-inline: 0.625rem;
  }
}

.fv__catch {
  display: flex;
  flex-direction: column;
  text-align: center;

  width: fit-content;
  margin-block-end: 0.5rem;

  font-weight: 700;
  color: #072f50;
  font-family: 'Noto Serif JP', serif;
  text-align: center;

  & .fv__catch-sub {
    font-size: 1.75rem;
    line-height: 1.429;

    @media screen and (max-width: 768px) {
      font-size: 1.5rem;
      line-height: 1.458;
    }
  }

  & .fv__catch-sub--small {
    font-size: 1.188rem;

    @media screen and (max-width: 768px) {
      font-size: 1.063rem;
      line-height: 1.471;
    }
  }

  & .fv__catch-title {
    margin-block-start: -0.625rem;

    font-size: 2.75rem;
    line-height: 1.455;
    color: #cb8e22;

    @media screen and (max-width: 768px) {
      font-size: 2.313rem;
      line-height: 1.4591;
    }
  }

  & .fv__catch-desc {
    position: relative;

    font-size: 1.125rem;
    line-height: 1.444;

    @media screen and (max-width: 768px) {
      font-size: 1rem;
      line-height: 1.438;
    }
  }

  & .fv__catch-desc::before,
  & .fv__catch-desc::after {
    position: absolute;
    content: '';
    left: 50%;
    transform: translateX(-50%);

    max-width: 241px;
    width: 100%;
    height: 1px;
    background-color: #707070;
  }

  & .fv__catch-desc::before {
    top: 0;
  }

  & .fv__catch-desc::after {
    bottom: 0;
  }

  & .fv__catch-desc--num {
    font-size: 1.813rem;
    color: #bf0c0c;

    @media screen and (max-width: 768px) {
      font-size: 1.563rem;
    }
  }

  & .fv__catch-desc--red {
    color: #bf0c0c;
  }
}

/*-------------------------
  バッジ
-------------------------*/
.fv__badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 71px));
  justify-items: center;
  gap: 0.5rem;

  margin-block-end: 4.75rem;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(3, minmax(auto, 59px));
    margin-block-end: 6.1rem;
  }
}

.fv__badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;

  box-shadow: inset 0 0 0 1px #707070;
  border-radius: 50%;

  aspect-ratio: 1 / 1;

  @media screen and (max-width: 768px) {
    padding-block-start: 0;
  }
}

.fv__badge-image {
  flex-shrink: 0;
  block-size: 28px;
  align-content: end;

  & .fv__badge-img {
    width: 100%;
    height: auto;
  }
}

.fv__badge-label {
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: 500;
  color: #072f50;
  text-align: center;
}

/* 即日対応 */
.fv__badge--sameday {
  .fv__badge-img {
    max-width: 33px;
    aspect-ratio: 32.3 / 25.05;

    @media screen and (max-width: 768px) {
      max-width: 27px;
      aspect-ratio: 27.1 / 21.02;
    }
  }
}

/* 出張費0円 */
.fv__badge--free {
  padding-block-start: 0.5rem;

  & .fv__badge-fee {
    margin-block-start: -0.5rem;

    font-size: 2rem;
    line-height: 26px;
    font-weight: 700;
    color: #072f50;
    text-align: center;

    @media screen and (max-width: 768px) {
      font-size: 1.75rem;
      /* line-height: 41px; */
    }
  }

  & .fv__badge-label {
    @media screen and (max-width: 768px) {
      margin-block-start: -3px;
    }
  }

  & .fv__badge-fee span {
    font-size: 1.688rem;
    letter-spacing: -0.09em;

    @media screen and (max-width: 768px) {
      font-size: 1.438rem;
    }
  }
}

/* 高価買取 */
.fv__badge--high-price {
  .fv__badge-img {
    max-width: 29px;
    aspect-ratio: 28.61 / 23.84;

    @media screen and (max-width: 768px) {
      max-width: 24px;
      aspect-ratio: 6 / 5;
    }
  }
}

/*-------------------------
  CTA
-------------------------*/
.fv__cta {
  width: 100%;
  margin-inline: 0.313rem 0;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  background-image: url(../img/bg-fv-cta.png);
  background-size: 100% 100%;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.43);

  @media screen and (max-width: 768px) {
    max-width: 380px;
    width: 100%;
    margin-inline: auto;
  }
}

.fv__cta-inner {
  width: 100%;

  background-size: 100% 100%;
}

.fv__cta-top {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;

  @media screen and (max-width: 768px) {
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.fv__cta-tel {
  color: #072f50;
  white-space: nowrap;

  & .fv__cta-tel-label {
    font-size: 0.875rem;
    line-height: 1.429;
    font-weight: 500;
    text-align: center;

    @media screen and (max-width: 768px) {
      font-size: 0.75rem;
      line-height: 1.5;
    }
  }

  & .fv__cta-tel-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    font-size: 1.813rem;
    line-height: 1.414;
    font-weight: 900;
    font-family: 'Noto Serif JP', serif;
    color: #072f50;

    @media screen and (max-width: 768px) {
      font-size: 1.563rem;
      line-height: 1.44;
    }
  }

  & .fv__cta-tel-icon {
    width: 18px;
    height: auto;
    aspect-ratio: 17.88 / 23.4;

    @media screen and (max-width: 768px) {
      width: 15px;
      aspect-ratio: 15 / 19.63;
    }
  }
}

.fv__cta-badge {
  flex-shrink: 0;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 60px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1 / 1;

  @media screen and (max-width: 768px) {
    max-width: 48px;
  }

  &::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 54px;
    width: 100%;
    height: auto;
    border-radius: 50%;
    aspect-ratio: 1 / 1;

    @media screen and (max-width: 768px) {
      max-width: 44px;
    }
  }

  .fv__cta-badge-label {
    font-size: 0.875rem;
    line-height: 1.143;
    font-weight: 700;

    @media screen and (max-width: 768px) {
      font-size: 0.75rem;
      line-height: 1.167;
    }
  }
}

/* 完全無料 */
.fv__cta-badge--free {
  background-color: #fff;

  &::after {
    border: 1px solid #a60a0a;
  }

  & .fv__cta-free {
    color: #a60a0a;
  }
}

/* 即日対応 */
.fv__cta-badge--sameday {
  background-color: #9d1110;

  &::after {
    border: 1px solid #ab6e06;
  }

  & .fv__cta-sameday {
    color: #fff;
  }
}

.fv__cta-button {
  margin-inline: auto;
}

/* ============================
* サービス #service
* ========================== */
.service__inner {
  width: 100%;
}

/*-------------------------
  導入 .service__intro
-------------------------*/
.service__intro {
  position: relative;

  padding-block: 0.625rem 0.75rem;
  padding-inline: 0.625rem;

  background-color: #fff;

  @media screen and (max-width: 768px) {
    margin-block-start: -0.625rem;
    padding-block: 1.25rem 0.5rem;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    top: 1.5rem;

    max-width: 77px;
    width: 100%;
    height: auto;
    aspect-ratio: 77.35 / 135.79;

    background-size: contain;

    @media screen and (max-width: 768px) {
      top: 1.25rem;

      max-width: 65px;
      aspect-ratio: 64.65 /113.5;
    }
  }

  &::before {
    left: 0.625rem;
    background-image: url(../img/deco-service-intro-left.svg);
  }

  &::after {
    right: 0.625rem;
    background-image: url(../img/deco-service-intro-right.svg);
  }
}

.service__intro-title {
  font-weight: 700;
  color: #072f50;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
}

.service__intro-title--top {
  margin-block-end: 0.5rem;

  font-size: 1.063rem;
  line-height: 1.471;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.25rem;

    font-size: 0.938rem;
    line-height: 1.4;
  }

  & span {
    font-size: 1.125rem;
    color: #b9050d;

    @media screen and (max-width: 768px) {
      font-size: 1rem;
    }
  }
}

.service__intro-title--bottom {
  font-size: 1rem;
  line-height: 1.438;

  @media screen and (max-width: 768px) {
    font-size: 0.875rem;
    line-height: 1.429;
  }

  & span {
    font-size: 1.125rem;
    color: #d39c2d;

    @media screen and (max-width: 768px) {
      font-size: 1rem;
    }
  }
}

.service__intro-list {
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.625rem;

  padding-block-end: 1.5rem;
  padding-inline: 1.125rem;

  @media screen and (max-width: 768px) {
    gap: 0.25rem;

    padding-block-end: 1.125rem;
    padding-inline: 0.625rem;
  }

  &::after {
    position: absolute;
    content: '';
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);

    width: 38px;
    height: 12px;
    background-image: url(../img/arrow-down-yellow.svg);
    background-size: contain;

    @media screen and (max-width: 768px) {
      bottom: 0;

      width: 32px;
      height: 10px;
    }
  }
}

.service__intro-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 77px;

  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px #d0972a;

  @media screen and (max-width: 768px) {
    height: 67px;
  }
}

.service__intro-item-desc {
  font-size: 0.5rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}

/*-------------------------
  アピール .service__appeal
-------------------------*/
.service__appeal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-inline-size: 402px;
  margin-inline: auto;

  padding-block: 0.875rem 0.75rem;
  padding-inline: 0.625rem 1.25rem;

  @media screen and (max-width: 768px) {
    padding-block: 0.75rem 0.5rem;
    padding-inline: 1.25rem;
  }
}

/* 左サイド */
.service__appeal-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  padding-inline-end: 1.875rem;

  @media screen and (max-width: 768px) {
    gap: 0.188rem;

    padding-inline-end: 1.5rem;
  }

  &::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    right: 8px;

    width: 1px;
    height: 111px;
    background-color: #625d77;

    @media screen and (max-width: 768px) {
      height: 99px;
    }
  }

  & .service__appeal-sub {
    font-size: 0.9rem;
    line-height: 1.438;
    font-weight: 700;
    color: #d29b24;
    font-family: 'Noto Serif JP', serif;

    @media screen and (max-width: 768px) {
      font-size: 0.875rem;
      line-height: 1.429;
    }
  }

  & .service__appeal-title {
    padding-inline-start: 0.313rem;

    font-size: 1.4rem;
    line-height: 1.192;
    font-weight: 600;
    color: #fff;
    font-family: 'Noto Serif JP', serif;

    @media screen and (max-width: 768px) {
      padding-inline-start: 0.188rem;

      font-size: 1.4rem;
      line-height: 1.227;
    }
  }

  & .service__appeal-desc {
    padding-inline-start: 0.375rem;

    font-size: 0.688rem;
    line-height: 1.455;
    color: #fff;

    @media screen and (max-width: 768px) {
      padding-inline-start: 0.25rem;

      font-size: 0.625rem;
      line-height: 1.5;
    }
  }
}

/* 右サイド */
.service__appeal-count {
  flex-shrink: 0;

  width: fit-content;
  text-align: center;

  & .service__appeal-count-content {
    position: relative;
    margin-block-end: 0.25rem;
    padding-inline: 1.375rem;

    width: 100%;

    @media screen and (max-width: 768px) {
      padding-inline: 0.938rem;
    }
  }

  & .service__appeal-count-content::after {
    position: absolute;
    content: '';
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);

    max-width: 142px;
    width: 100%;
    height: auto;

    background-image: url(../img/kazarikei.png);
    background-size: contain;
    aspect-ratio: 142 / 70;

    @media screen and (max-width: 768px) {
      max-width: 115px;
      aspect-ratio: 115 / 56;
    }
  }

  & .service__appeal-count-label {
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
    color: #f7dc7a;
    font-family: 'Noto Serif JP', serif;

    @media screen and (max-width: 768px) {
      font-size: 0.625rem;
    }
  }

  & .service__appeal-count-num {
    font-size: 1rem;
    font-weight: 700;
    color: #d29b24;
    font-family: 'Noto Serif JP', serif;

    @media screen and (max-width: 768px) {
      font-size: 0.75rem;
    }
  }

  & .service__appeal-count-num--large {
    font-size: 1.625rem;
    line-height: 1.423;
    font-weight: 900;

    @media screen and (max-width: 768px) {
      font-size: 1.438rem;
      line-height: 1.435;
    }
  }

  & .service__appeal-count-num--small {
    font-weight: 900;
    font-size: 0.875rem;

    @media screen and (max-width: 768px) {
      font-size: 0.75rem;
    }
  }

  & .service__appeal-count-note {
    font-size: 0.438rem;
    line-height: 1.429;
    font-weight: 300;
    color: #fff;
  }
}

/*-------------------------
  運営体制 .service__trust
-------------------------*/
.service__trust {
  width: 100%;
  padding-inline: 0.625rem;
}

.service__trust-inner {
  width: 100%;

  padding-block: 0.5rem;
  padding-inline: 0.75rem;

  background-color: #fff;
  border-radius: 7px;

  @media screen and (max-width: 768px) {
    max-width: 100%;
    margin-inline: auto;
    padding-block: 0.25rem;
    padding-inline: 0.625rem;
  }
}

.service__trust-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.875rem;

  font-size: 0.938rem;
  line-height: 1.4;
  font-weight: 700;
  color: #072f50;
  font-family: 'Noto Serif JP', serif;
  text-align: center;

  @media screen and (max-width: 768px) {
    gap: 0.5rem;

    font-size: 0.813rem;
    line-height: 1.462;
  }

  &::before,
  &::after {
    content: '';
    max-width: 7.625rem;
    width: 100%;
    height: 1px;
    background-color: #072f50;

    @media screen and (max-width: 768px) {
      max-width: 6.5rem;
    }
  }
}

.service__trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;

  width: 100%;
  margin-block-start: -0.25rem;
}

.service__trust-item {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: flex-end;

  height: 100%;

  color: #072f50;
  text-align: center;
}

.service__trust-item-title {
  font-size: 0.813rem;
  line-height: 1.462;
  font-weight: 700;

  @media screen and (max-width: 768px) {
    font-size: 0.625rem;
    line-height: 1.5;
  }
}

.service__trust-item-desc {
  font-size: 0.563rem;
  line-height: 1.333;
  font-weight: 500;
  color: #072f50;

  @media screen and (max-width: 768px) {
    font-size: 0.5rem;
    line-height: 1.5;
  }
}

/* 遺品整理士在籍 */
.service__trust-item--ihin {
  position: relative;
  padding-inline-end: 0.625em;

  @media screen and (max-width: 768px) {
    padding-inline-end: 0.25rem;
  }

  &::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    right: 0;

    width: 1px;
    height: 5.364rem;
    background-color: #d9d4bf;

    @media screen and (max-width: 768px) {
      height: 4.5rem;
    }
  }

  & .service__trust-item-img {
    max-width: 29.34px;
    width: 100%;
    height: auto;
    aspect-ratio: 29.34 / 31.8;
  }
}

/* 特別国際種事業者登録済 */
.service__trust-item--tokubetsu {
  padding-block-start: 6px;

  & .service__trust-item-title {
    padding-block-start: -0.25rem;
  }
}

/* 酒類販売管理者設置 */
.service__trust-item--sakerui {
  position: relative;
  padding-inline-start: 0.375em;

  @media screen and (max-width: 768px) {
    padding-inline-start: 0.25rem;
  }

  &::before {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    width: 1px;
    height: 5.364rem;
    background-color: #d9d4bf;

    @media screen and (max-width: 768px) {
      height: 4.5rem;
    }
  }

  & .service__trust-item-img {
    max-width: 13.43px;
    width: 100%;
    height: auto;
    aspect-ratio: 13.43 / 33.98;
  }
}

/* ============================
* 買取品目・実績 #achievements
* ========================== */
.achievements__inner {
  width: 100%;
  padding-block: 0.75rem;
  padding-inline: 0.625rem;
  background-color: #fff;
}

.achievements__content {
  padding-inline: 0.625rem;
}

.achievements__desc {
  display: none;
  @media screen and (max-width: 768px) {
    display: block;
    margin-block-end: 0.5rem;

    font-size: 0.813rem;
    line-height: 1.462;
    font-weight: 500;
    color: #072f50;
    text-align: center;
    white-space: nowrap;
  }
}

.achievements__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  margin-block-end: 0.5rem;

  font-size: 1.188rem;
  line-height: 1.474;
  font-weight: 500;
  color: #d09821;

  &::before,
  &::after {
    content: '';

    width: 4.313rem;
    height: 1px;
    background-color: #707070;
  }

  @media screen and (max-width: 768px) {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/*-------------------------
  買取実績リスト
-------------------------*/
.achievements__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.25rem;

  margin-block-end: 0.75rem;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.5rem;
  }
}

.achievements__item {
  width: 100%;
}

.achievements__item-img {
  width: 100%;
  margin-block-end: 0.25rem;

  aspect-ratio: 1 / 1;
  object-fit: cover;

  @media screen and (max-width: 768px) {
    margin-block-end: 1px;
  }
}

.achievements__item-name {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 2.875rem;
  margin-block-end: 2px;

  background-color: #dfb64a;
  border-radius: 4px;

  font-size: 0.875rem;
  line-height: 1.286;
  font-weight: 700;
  text-align: center;
  color: #fff;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.25rem;

    font-size: 0.75rem;
    line-height: 1.25;
  }

  &.achievements__item-name--long {
    font-size: 0.688rem;
    line-height: 1.545;

    @media screen and (max-width: 768px) {
      font-size: 0.563rem;
      line-height: 1.444;
    }
  }
}

.achievements__item-label {
  display: block;
  font-size: 0.625rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;

  @media screen and (max-width: 768px) {
    font-size: 0.5rem;
  }
}

.achievements__item-price {
  position: relative;
  z-index: 5;
  display: block;

  width: fit-content;
  margin-block-start: -0.25rem;
  margin-inline: auto;

  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 700;
  color: #e20000;

  @media screen and (max-width: 768px) {
    font-size: 1.063rem;
    line-height: 1.471;
  }

  &::before {
    position: absolute;
    z-index: -1;
    content: '';
    bottom: 5px;
    left: 0;

    width: 100%;
    height: 5px;
    background-color: #fff700;

    @media screen and (max-width: 768px) {
      bottom: 3px;
      height: 0.25rem;
    }
  }

  & .achievements__item-unit {
    font-size: 0.688rem;

    @media screen and (max-width: 768px) {
      font-size: 0.563rem;
    }
  }
}

/*-------------------------
  注意書き
-------------------------*/
.achievements__note {
  font-size: 0.813rem;
  line-height: 1.462;
  font-weight: 500;
  color: #072f50;
}

/* ============================
*  お客様の声 #voice
* ========================== */
.voice__inner {
  width: 100%;
  padding-block: 0.75rem;
  padding-inline: 0.625rem;
  background-color: #fff;
}

.voice__content {
  padding-inline: 0.625rem;
}

.voice__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;

  @media screen and (max-width: 768px) {
    gap: 0.75rem;
  }
}

.voice__item {
  padding-block: 0.625rem 0.875rem;
  padding-inline: 1.25rem 0.625rem;

  background-color: #dfb64a;
  border-radius: 4px;

  @media screen and (max-width: 768px) {
    gap: 0.5rem 1rem;

    padding-block: 0.5rem;
    padding-inline: 1rem 0.5rem;
  }
}

/*-------------------------
  上部
-------------------------*/
.voice__item--top {
  display: grid;
  grid-template-columns: minmax(auto, 65px) 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 1.125rem;

  width: 100%;
  margin-block-end: 0.5rem;

  @media screen and (max-width: 768px) {
    grid-template-columns: minmax(auto, 54px) 1fr;
    gap: 0.938rem;
  }
}

/* 人物 */
.voice__person {
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;

  width: fit-content;

  & .voice__person-img {
    max-width: 65px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;

    @media screen and (max-width: 768px) {
      max-width: 54px;
    }
  }

  & .voice__person-name {
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 500;
    color: #fff;
    text-align: center;
  }
}

/* メッセージ */
.voice__message {
  flex-shrink: 0;
  width: fit-content;
  padding: 0.25rem;
  background-color: #fff;
  border-radius: 8px;

  box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.16);

  & .voice__message {
    max-width: 283px;
    width: 100%;
    aspect-ratio: 283 / 153;

    @media screen and (max-width: 768px) {
      max-width: 234px;
      aspect-ratio: 234 / 127;
    }
  }
}

.voice__products {
  display: flex;
  gap: 1.25rem;

  @media screen and (max-width: 768px) {
    gap: 0.875rem;
  }

  & .voice__products-label {
    flex-shrink: 0;

    width: 4rem;
    height: 1.25rem;

    background-color: #fff;

    font-size: 0.813rem;
    line-height: 1.462;
    font-weight: 500;
    color: #d9b13d;
    text-align: center;

    @media screen and (max-width: 768px) {
      width: 3.375rem;
      height: 1.063rem;
      padding-inline: 0.25rem;

      font-size: 0.688rem;
      line-height: 1.545;
    }
  }

  & .voice__products-text {
    font-size: 0.688rem;
    line-height: 1.545;
    font-weight: 700;
    color: #fff;
  }
}

/* ============================
*  買取エリア #service-area
* ========================== */
.service-area__inner {
  position: relative;

  width: 100%;
  padding-block: 0.75rem 0.625rem;
  padding-inline: 1.25rem;

  background-color: transparent;

  color: #fff;

  &::after {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 138px;
    height: 130px;
    background-image: url(../img/image-area-hiromi.png);
    background-size: cover;

    @media screen and (max-width: 768px) {
      right: 5px;
      width: 138px;
      height: 125px;
      background-size: contain;
    }
  }

  @media screen and (max-width: 768px) {
    padding-block: 0.625rem 0.5rem;
    padding-inline: 0.625rem;
  }
}

.service-area__content {
  position: relative;

  width: 100%;
  padding-inline: 0.875rem;

  &::after {
    position: absolute;
    content: '';
    bottom: 0.5rem;
    right: 1.175rem;

    width: 186px;
    height: 174px;
    background-image: url(../img/map.svg);
    background-size: cover;

    @media screen and (max-width: 768px) {
      bottom: 0.625rem;
      right: 3.5rem;

      max-width: 129px;
      width: 100%;
      max-height: 138px;
      height: 100%;
      background-size: contain;
    }
  }

  @media screen and (max-width: 768px) {
    padding-inline: 0.625rem;
  }
}

.service-area__title {
  position: relative;
  z-index: 2;
  margin-block-end: 0.5rem;

  font-size: 1.75rem;
  line-height: 1.464;
  font-weight: 700;

  @media screen and (max-width: 768px) {
    font-size: 1.563rem;
    line-height: 1.48;
    color: #e4e4e4;
  }
}

.service-area__desc {
  margin-block-end: 0.5rem;

  font-size: 0.813rem;
  line-height: 1.846;

  @media screen and (max-width: 768px) {
    margin-block-end: 1.125rem;

    font-size: 0.688rem;
    line-height: 1.48;
    line-height: 1.727;
  }
}

.service-area__note {
  font-size: 0.5rem;
  line-height: 1.375;
}

/* ============================
*  買取の流れ #service-flow
* ========================== */
.service-flow-inner {
  padding-block: 0.75rem 2.5rem;
  padding-inline: 0.625rem;
  background-color: #fff;

  @media screen and (max-width: 768px) {
    padding-block-end: 1.75rem;
  }
}

.service-flow__title {
  margin-block-end: 1.25rem;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.75rem;
  }
}

.service-flow__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  padding-inline: 0.625rem;

  @media screen and (max-width: 768px) {
    gap: 1.875rem;
  }
}

/*-------------------------
  買取の流れ
-------------------------*/
.sf-list {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;

  @media screen and (max-width: 768px) {
    gap: 2.188rem;
  }
}

.sf-item {
  position: relative;

  display: flex;

  width: 100%;

  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

  &:not(:last-of-type)::after {
    position: absolute;
    content: '';
    bottom: -1.875rem;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;

    width: 44px;
    height: 15px;
    background-image: url(../img/arrow-down-yellow.svg);
    background-size: cover;

    @media screen and (max-width: 768px) {
      bottom: -1.5rem;

      width: 34px;
      height: 11px;
      background-size: contain;
    }
  }
}

.sf-item__img {
  flex-shrink: 0;
  max-width: 172px;
  width: 100%;
  flex-shrink: 0;

  aspect-ratio: 172 / 110;

  @media screen and (max-width: 768px) {
    max-width: 142px;

    aspect-ratio: 142 / 91;
  }
}

.sf-item__body {
  padding-block: 0.75rem 1.25rem;
  padding-inline: 1.063rem;

  @media screen and (max-width: 768px) {
    padding-block-end: 0.938rem;
    padding-inline: 0.875rem;
  }
}

.sf-item__title {
  margin-block-end: 0.5rem;

  font-size: 0.938rem;
  line-height: 1.4;
  font-weight: 700;
  color: #100169;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.25rem;

    font-size: 0.813rem;
    line-height: 1.462;
  }
}

.sf-item__desc {
  font-size: 0.688rem;
  line-height: 1.455;
  font-weight: 700;
  color: #707070;

  @media screen and (max-width: 768px) {
    font-size: 0.625rem;
    line-height: 1.3;
  }
}

/*-------------------------
  公安委員会認定
-------------------------*/
.sf-kouan {
  display: flex;
  align-items: center;
  gap: 1.188rem;

  @media screen and (max-width: 768px) {
    gap: 1.625rem;
  }
}

.sf-kouan__label {
  display: block;

  margin-block-end: 0.625rem;
  padding-block: 0.375rem;
  padding-inline: 2rem;

  border-radius: 6px;
  background-color: #100169;

  font-size: 0.938rem;
  line-height: 1.467;
  font-weight: 500;
  color: #fff;
  text-align: center;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.5rem;
    padding-block: 0.156rem;
    padding-inline: 0.875rem;

    font-size: 0.875rem;
    line-height: 1.429;
  }
}

.sf-kouan__image {
  max-width: 191px;
  width: 100%;

  & .sf-kouan__img {
    width: 100%;
    height: auto;
    aspect-ratio: 191.4 / 163.77;
  }
}

.sf-kouan__desc {
  & .sf-kouan__desc-img {
    width: 100%;
    height: auto;
    aspect-ratio: 190.42 / 107.75;

    @media screen and (max-width: 768px) {
      aspect-ratio: 143.68 / 81.3;
    }
  }
}
/* ============================
 * 信頼と社会貢献
 * ========================== */
.trust__inner,
.trust__content {
  width: 100%;
  padding-inline: 0.625rem;
}

.trust__inner {
  padding-block-start: 0.75rem;
}

.trust__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;

  max-width: 407px;
  width: 100%;
  /* margin-inline: 0.625rem; */

  @media screen and (max-width: 768px) {
    gap: 0.75rem;

    max-width: 100%;
  }
}

.trust__item {
  position: relative;
  padding-block: 0.875rem 1.75rem;
  padding-inline: 1.75rem;

  background-color: #fff;
  border-radius: 8px;

  &::after {
    position: absolute;
    content: '';
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);

    width: 325px;
    height: auto;
    background-image: url(../img/mark-achivement.svg);
    background-size: cover;
    aspect-ratio: 324.73 / 320.63;
  }

  @media screen and (max-width: 768px) {
    padding-block: 0.75rem 1.5rem;
    padding-inline: 1.25rem;
  }
}

.trust__item-title {
  position: relative;
  z-index: 1;

  margin-block-end: 0.25rem;

  font-size: 2.375rem;
  text-align: center;
  color: #d9b13d;
  line-height: 1.474;
  white-space: nowrap;

  @media screen and (max-width: 768px) {
    font-size: 2rem;
    line-height: 1.469;
  }

  &.trust__item-title--multi-line {
    font-size: 1.563rem;
    line-height: 1.24;

    @media screen and (max-width: 768px) {
      font-size: 1.313rem;
      line-height: 1.238;
    }
  }
}

.trust__item-text {
  margin-block-end: 1.375rem;

  font-size: 0.938rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;

  @media screen and (max-width: 768px) {
    margin-block-end: 0.75rem;
  }
}

.trust__item-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;

  & .trust__item-img--shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
}

.trust__item-images {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;

  @media screen and (max-width: 768px) {
    gap: 0.75rem;
  }
}

/* ============================
*  おすすめの買取品 #suggest
* ========================== */
.suggest {
  background-color: #dfb64a;
}

.suggest__inner {
  width: 100%;
  margin: 0 auto;
  height: auto;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
}

.suggest__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  width: 100%;
}

.suggest__img {
  width: 100%;
  height: auto;

  aspect-ratio: 406.65 / 242.77;

  @media screen and (max-width: 768px) {
    aspect-ratio: 335 / 200;
  }
}

/* ============================
*  よくある質問 #faq
* ========================== */
.faq-inner {
  position: relative;
  z-index: 1;
  background-color: #75051f;
  padding-block-end: 1.875rem;
  padding-inline: 1.5rem;

  @media screen and (max-width: 768px) {
    padding-block-end: 0.938rem;
    padding-inline: 1.25rem;
  }
}

.faq__title {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-block-end: 1rem;

  color: #fff;

  @media screen and (max-width: 768px) {
    margin-block-end: 1.5rem;
  }

  /* 英語タイトル */
  & .faq__title--en {
    font-size: 3.688rem;
    line-height: 1.441;
    font-weight: 900;

    @media screen and (max-width: 768px) {
      font-size: 3.125rem;
      line-height: 1.44;
    }
  }

  & .faq__title--en span {
    font-size: 2.188rem;

    @media screen and (max-width: 768px) {
      font-size: 1.875rem;
      line-height: 1.467;
    }
  }

  /* 日本語タイトル */
  & .faq__title--ja {
    font-size: 2rem;
    line-height: 1.469;
    font-weight: 700;

    @media screen and (max-width: 768px) {
      font-size: 1.688rem;
      line-height: 1.481;
    }
  }
}

.question {
  display: grid;
  gap: 1.875rem;
  width: 100%;
  margin: 0 auto;
  padding-inline: 0.875rem;

  @media screen and (max-width: 768px) {
    gap: 1.625rem;
    max-width: none;
    padding-inline: 0;
  }
}

.q-bg {
  position: relative;
  background-color: #ffffff;
  border-radius: 1000px;
}

.q-flex {
  max-width: calc(100% - 32px);
  padding-block: 0.75rem;
  padding-inline: 0.875rem 4rem;
  gap: 1.125rem;
  display: flex;
  align-items: center;
  margin: 0 auto;

  & p {
    font-size: 1.125rem;
    line-height: 1.45;
    font-weight: 700;
    color: #183758;

    @media screen and (max-width: 768px) {
      font-size: 1.063rem;
      line-height: 1.471;
    }
  }

  @media screen and (max-width: 768px) {
    max-width: 100%;
    padding-block: 0.563rem;
    padding-inline: 0.75rem 3.5rem;
  }
}

.q-img {
  flex-shrink: 0;

  width: 52px;
  height: auto;
  aspect-ratio: 52 / 54;

  @media screen and (max-width: 768px) {
    width: 44px;

    aspect-ratio: 44 / 45;
  }
}

.q-img1 {
  position: absolute;
  right: 1.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: auto;
  rotate: 0deg;
  transition: rotate 0.3s;
  transform-origin: top;

  @media screen and (max-width: 768px) {
    width: 16px;
  }
}

details:open .q-img1 {
  rotate: -180deg;
}

.answer {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .answer {
    max-width: none;
  }
}

.a-flex {
  display: flex;
  gap: 1.125rem;
  padding-block-start: 1rem;
  padding-inline: 0.938rem 2.2rem;

  @media screen and (max-width: 768px) {
    padding-inline: 0.813rem 1.5rem;
  }
}

.a-img {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

.a-text p {
  padding-block-start: 0.5rem;

  color: #fff;
  font-size: 1rem;
  line-height: 1.75;
}

/* accel-japan-banner */

.accel-japan-banner{
  margin-block: 45px;
  margin-inline: auto;
  width: 250px;
  max-width: 250px;
}

.accel-japan-banner__img{
  max-width: 100%;
}

/* footer */

.footer {
  background-color: #072f50;
  padding-block: 41px 33px;

  @media screen and (max-width: 768px) {
    padding-block: 34px 89px;
  }
}

.f-logo {
  max-width: 211px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 0.375rem;

  & img {
    aspect-ratio: 211 / 120;
  }

  @media screen and (max-width: 768px) {
    max-width: 177px;

    & img {
      aspect-ratio: 177 / 101;
    }
  }
}

.tel {
  font-weight: 700;
  font-size: 2.563rem;
  line-height: 1.488;
  text-align: center;

  @media screen and (max-width: 768px) {
    font-size: 2.5rem;
    line-height: 1.5;
  }
}

.information {
  margin-block-end: 1.75rem;
  text-align: center;
  color: #ffffff;

  & p:nth-of-type(1) {
    font-size: 1.438rem;
    line-height: 1.478;
  }

  & p:nth-of-type(2) {
    font-size: 0.938rem;
    line-height: 1.4;
  }

  @media screen and (max-width: 768px) {
    margin-block-end: 1.25rem;

    & p:nth-of-type(1) {
      font-size: 1.25rem;
      line-height: 1.45;
    }

    & p:nth-of-type(2) {
      font-size: 0.875rem;
      line-height: 1.429;
    }
  }
}

.copyright {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  text-align: center;
  color: #ffffff;

  font-size: 0.875rem;
  line-height: 1.429;

  @media screen and (max-width: 768px) {
    font-size: 0.75rem;
    line-height: 1.417;
  }
}

.cr {
  font-size: 0.875rem;
  line-height: 1.429;
  color: #ffffff;

  @media screen and (max-width: 768px) {
    font-size: 0.75rem;
    line-height: 1.417;
  }
}

.scroll-wrapper {
  position: relative;
}