.custom-archive-empty {
  text-align: center;
  margin: 2rem 0;
	padding-bottom:2rem;
}

.custom-archive-empty img {
  width: 60%;       
  max-width: 400px;  
  height: auto;
}
body{
   
   
  overflow-x: hidden;

}


.bonbon-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.bonbon-text {
  flex: 1 1 300px;
  font-size: 1.1rem;
  line-height: 2;
}

.bonbon-text .message-line {
  display: block;
  margin-bottom: 1em;
  text-align: left;
}

.bonbon-image {
  flex: 1 1 300px;
  text-align: center;
}

.bonbon-image img {
  max-width: 100%;
  height: auto;
}

.bonbon-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2em;
}
@media (min-width: 768px) {
  .bonbon-text {
    font-size: 1.25rem; /* ←ここを調整すればOK！ */
    line-height: 2;
  }

  .bonbon-title {
    font-size: 2.4rem;
  }
}
#singlepage figure {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
#singlepage .single_content p {
  display: block;
  width: 100%;
  clear: both;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xx{
   
    max-width: 100%;
    padding: 0;
}
section.page-wrapper{
    text-align: center;
}
.category-link-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 1000px;
}

.category-link-wrap a {
  position: relative;
  display: inline-block;
  width: calc(30% - 1rem); /* PC：5列 */
  text-align: center;
  padding: 0.8rem 0.8rem 0.8rem 1.5rem; /* 左に余白追加 */
  background-color: white;
  color: #274c77;
  text-decoration: none;
 
  font-size: 1.2rem;
  transition: background-color 0.3s, transform 0.3s;
  overflow: hidden;
  font-weight: bold;
}

/* 縦ラインの疑似要素 */
.category-link-wrap a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px; /* ちょっと右に寄せて中央寄り */
  width: 6px;
  height: 100%;
  background: linear-gradient(#456391 50%, #ffb347 50%);
  border-radius: 2px;
  transition: background 0.3s;
}

.category-link-wrap a:hover {
  background-color: #ffffff;
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #274c77;
}



/* スマホ：2列 × 自動改行 */
@media (max-width: 768px) {
  .category-link-wrap a {
    width: calc(50% - 1rem); /* 2列 */
  }
}

/* ----------------------
   買取実績：カードレイアウト
----------------------- */
.custom-archive-list {
  display: grid;
  gap: 12px;
  padding: 1rem;
  margin: 2rem auto 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px; /* 横幅に余裕を持たせる */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* ← ここ拡大！ */
}

.custom-archive-card {
  /*aspect-ratio: 1 / 1; /* 正方形に保つ */
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;  /* ← ここで縦横比を統一（横長） */
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.custom-title {
    display: flex;
  align-items: center; 
  font-size: 1rem; /* ← ちょい拡大 */
  font-weight: bold;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  text-align: center;
  margin: 0.2rem 0 0.1rem;
  padding: 1rem 2rem;
  position: relative;
}

.custom-date {
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  height: 1.2em;
}

.custom-archive-card a {
    display: flex
;
    transition: transform 0.3s 
ease, box-shadow 0.3s 
ease;
    flex-direction: column;
    justify-content: space-around;
}

.custom-archive-card a:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}



body.page-template-page-sign ul.footer-contact {
  display: none;
}
.bgpw{
  background-color: #ffffff9c;
}
.estimate-step p {
    margin: 0;
    text-shadow: 0px 1px 14px #816f3d;
}
   ページネーション
----------------------- */
.custom-archive-pagination {
  text-align: center;
  margin-top: 1.5rem;
}

.custom-archive-pagination ul {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.custom-archive-pagination li a,
.custom-archive-pagination li span {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
}

.custom-archive-pagination li .current {
  background: #007bff;
  color: #fff;
  font-weight: bold;
}

/* ----------------------
   スマホ調整
----------------------- */
@media screen and (max-width: 767px) {
  .custom-archive-list {
    grid-template-columns: repeat(2, 1fr);
    padding: 0.5rem;
    gap: 8px;
  }

  .custom-title {
    font-size: 0.85rem;
  }

  .custom-date {
    font-size: 0.75rem;
  }
}
.custom-archive-card a {
  display: block; /* 全体にホバー効果がかかるように */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-archive-card a:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* その他：調整用 */
h2 {
  font-weight: bold;
  width: 100%;
}

#car {
  background-image: none;
}

@media (max-width: 767px) {
  .custom-archive-card.only-last {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 160px;
  }
}
.custom-archive-list .custom-archive-card:only-child {
  max-width: 320px;
  margin: 0 auto;
}
.more-button {
  display: inline-block;
  background-color: #FFB347;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 1.5rem;
  transition: background-color 0.3s;
}

.more-button:hover {
      background-color: #FF9247;
    color: #fffbe7;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}


.related-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  margin: 2rem auto;
  list-style: none;
  max-width: 1000px;
  border-top: 1px solid #ccc;
  font-size: 0.95rem;
}

.related-keywords li {
  margin: 0;
}

.related-keywords li.label {
  width: 100%;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.related-keywords li a {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}

.related-keywords li a:hover {
  background-color: #d8e7ff;
}
#page-mainbody.ariabody{
  padding-bottom: 0px;
	padding-top:80px;
	margin-top:100px;
}
p.section-label {
    width: 100%;
    text-align: center;
    color: #6096ba;
}

/* --- スマホ用 --- */
  @media screen and (max-width: 767px) {
   
     .w-70-sp { width: 70%; margin: auto;}
    .w-80-sp { width: 80%; margin: auto;}
    .w-90-sp { width: 90%; margin: auto;}
    .w-100-sp { width: 100%; margin: auto;}
	  #page-mainbody.ariabody{
 margin-top:0;
}
  }
  
  /* --- PC用 --- */
  @media screen and (min-width: 768px) {
   
    .w-50-pc { width: 50%!important; margin: auto;}
     .w-60-pc { width: 60%; margin: auto;}
      .w-70-pc { width: 70%; margin: auto;}
    .w-80-pc { width: 80%; margin: auto;}
    .w-90-pc { width: 90%; margin: auto;}
    .w-100-pc { width: 100%; margin: auto;}
  }

  .pc-f-1 {
  font-size: 1rem;
}

.pc-f-1-5 {
  font-size: 1.5rem;
}

.pc-f-2 {
  font-size: 2rem;
}

.pc-f-2-5 {
  font-size: 2.5rem;
}

.pc-f-3 {
  font-size: 3rem;
}

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

  .pc-f-1-5 {
    font-size: 1.2rem;
  }

  .pc-f-2 {
    font-size: 1.4rem;
  }

  .pc-f-2-5 {
    font-size: 1.6rem;
  }

  .pc-f-3 {
    font-size: 1.8rem;
  }
  .ansin>figure>img{
  width: 100%;
}
}

.banner-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.banner-item {
  flex: 1 1 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 5 / 3; /* 高さを比率で制御 */
  background-size: cover;
  background-position: center;

  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 768px) {
  .banner-item {
    flex: 1 1 48%;
    max-width: 48%;
  }
}


.banner-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
   transition: color 0.4s ease;
  overflow: hidden;
  width: 100%;

  /* ↓ここを変更 */
  aspect-ratio: 10 / 3; /* 元画像1000x300用 */
}

@media screen and (min-width: 768px) {
  .banner-item {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

.banner-text {
  font-size: 1.8rem; /* ←ここで文字を大きく！ */
  padding: 0 12px;
  line-height: 1.4;
}
.banner-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0); /* 初期は透明 */
  transition: background-color 0.4s ease;
  z-index: 0;
}

.banner-item:hover {
  color: #ffe066; /* お好みの文字色に変更してね */
}

.banner-item:hover::before {
  background-color: rgba(0, 0, 0, 0.3); /* 画像が暗くなる（薄く見える） */
}

.banner-text {
  position: relative;
  z-index: 1; /* 背景のオーバーレイより上に配置 */
  transition: color 0.4s ease;
}
.splide.slider3 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 0;
}

.splide__slide {
  padding: 0 ;
  box-sizing: border-box;
}
/* スライダーの1枚（カード全体） */
.slider-archive-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: box-shadow 0.2s ease;
  padding: 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* サムネイル画像ラッパー */
.slider-thumb {
  width: 100%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

/* サムネイル画像自体 */
.slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* タイトル */
.slider-title {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.3;
  height: 2.6em; /* 2行まで */
  overflow: hidden;
  margin: 0.2rem 0;
  padding: 0 0.25rem;
}

/* 日付 */
.slider-date {
  font-size: 0.8rem;
  color: #666;
  margin: 0.2rem 0;
}

/* 「もっと見る」ボタンエリア */
.slider-archive-pagination {
  text-align: center;
  margin-top: 1.5rem;
}


.slider-thumb {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形に固定 */
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* スマホ向け微調整 */
@media screen and (max-width: 767px) {
  .slider-archive-card {
    aspect-ratio: 1 / 1.2;
  }

  .slider-title {
    font-size: 0.9rem;
  }

  .slider-date {
    font-size: 0.8rem;
  }
}
section#item h3 {
    font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  section#item h3 {
   font-size: 0.9rem;
  }
  h3.custom-alt-title::before{
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.3;
    height: 2.6em;
    overflow: hidden;
    text-align: center;
    margin: 0.2rem 0 0.1rem;
    content: "";
    position: absolute;
    /* top: 0; */
    width: 1.2rem;
    height: 1.2rem;
    background: linear-gradient(#456391 50%, #ffb347 50%);
    border-radius: 2px;
    left: 1px;
    
    top: 50%;
    transform: translateY(-50%);
}
}


section.openingslide>.splide__slid{
  padding: 0;
}
.point-heading,.point-heading50 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #274c77;
  line-height: 1.4;
  word-break: break-word;
  padding: 1rem 2rem;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-color: white;
}
.point-heading50 {

  width: 60%;
  
}

/* スマホ用サイズ調整 */
@media screen and (max-width: 767px) {
  .point-heading,.point-heading50 {
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
  }
}

/* 左側の縦ライン */
.point-heading::before,.point-heading50::before,
.point-heading::after,.point-heading50::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.2rem;
  height: 100%;
  background: linear-gradient(#456391 50%, #ffb347 50%);
  border-radius: 2px;
}

/* beforeは左に */
.point-heading::before,.point-heading50::before {
  left: 0;
}

/* afterは右に */
.point-heading::after,.point-heading50::after {
  right: 0;
}

/* スマホ用サイズ調整 */
@media screen and (max-width: 767px) {
  .point-heading::before,.point-heading50::before,
  .point-heading::after,.point-heading50::after {
    width: 0.8rem;
  }
}



.section-dark {
  background: linear-gradient(
    to bottom,
    rgba(96, 150, 186, 0.32) 0%,
    rgb(255 255 255) 100%
  );
  position: relative;
}

    
.section-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 60px;
  background-color: white; /* 次のセクションの背景色に合わせる */
  clip-path: ellipse(70% 100% at 50% 0%);
  z-index: 1;
}

 

.section-light-to-dark {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    rgba(96, 150, 186, 0.1) 0px,
    rgba(96, 150, 186, 0.2) 300px,
    rgba(96, 150, 186, 0.1) 600px
  );
  padding-bottom: 100px;
  margin-top: -1px;
}
.section-bgw{
  padding-bottom: 100px;
  margin-top: -1px;
  position: relative;
}
/*.section-light-to-dark::after,.section-bgw:after {
  content: "";
  position: absolute;
  bottom: 1px;
    left: 0;
  width: 100%;
  height: 100px;
  background-color: white; /* 下のセクションの背景色 */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: none;
  z-index: 1;
}
 
.section-bgw:after {
 background-color:rgba(96, 150, 186, 0.1) ;/* 下のセクションの背景色 */
 
}
.section-light-to-dark.lastcon::after{
  display: none;
}*/

section#top {
  position: relative;

  padding-bottom: 100px;
}

/* 波の疑似要素：section#top 用 
section#top::after {
  content: "";
  position: absolute;
  bottom:1px;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: rgb(238, 243, 247); /* 下のセクションの背景色 */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
  transform: none;
}*/


.pa-1{
  padding: 0 1rem;
}
.mini-point-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: #274c77;
    line-height: 1.4;
    word-break: break-word;
    padding: 0.6rem 3.2rem;
    /* border-radius: 6px; */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); */
    margin-left: auto;
    margin-right: auto;
    max-width: 90vw;
    /* background-color: white; */
    width: 100%;
    border-bottom: 2px solid #274c77;
  margin-bottom: 0;}

@media screen and (max-width: 768px) {
  section#top::after,.section-light-to-dark::after,.section-bgw:after{
    height: 20px;
  }
  section#top,.section-light-to-dark,.section-bgw{
    padding-bottom: 20px;
  }
}


/* PC：最大幅を狭めに制限 */
@media screen and (min-width: 768px) {
    .mini-point-heading {
        /* max-width: 320px; */
        width: 100%;
        justify-content: left;
    }}



/* 左のバー：細め青ライン */
.mini-point-heading::before {
  content: "";
  position: absolute;
  left: 0rem;
  top: 0;
  width: 1rem;
  height: 100%;
  background-color: #456391;
  
}
.bgw{
  background-color: white;
}

/*#primary{ background: repeating-linear-gradient(
  to bottom,
  rgba(96, 150, 186, 0.1) 0px,
  rgba(96, 150, 186, 0.2) 300px,
  rgba(96, 150, 186, 0.1) 600px
);
}*/
/* スマホ */
@media screen and (max-width: 767px) {
    .mini-point-heading

 {
        font-size: 1.5rem;
        padding: 0.4rem 2rem;
        width: 100%;
        justify-content: left;
    }
    .mini-point-heading::before {
 
  left: 0rem;
  
  
}
}
.br-sp,
.br-pc {
  display: none;
}

/* スマホ時だけ表示 */
@media screen and (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

/* PC時だけ表示 */
@media screen and (min-width: 768px) {
  .br-pc {
    display: inline;
  }
}
p.dispri{
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  p.dispri{
  font-size: 1.2rem;
  text-align: left;
}
}
.mb-100{
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .mb-100{
  margin-bottom: 0;
}
}

.responsive-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
}

.responsive-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.banner-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0 1rem;
  text-align: center;
}
.hover-card-link {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
 
  transition: background 0.4s ease, transform 0.3s, box-shadow 0.3s;
}

.hover-card-link:hover {
  background: linear-gradient(to bottom, #ffffff, #f4f4f4); /* ホバー時は白系に */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.hover-card-link .block-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hover-card-link,
.hover-card-link * {

  text-decoration: none !important;
}
.hover-card-link:hover .image-overlay-button {
  background-color: #FF9247;
  color: #fffbe7;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
ul.buying.justify-content-center.mt-5.mt-md-0 {
    position: relative;
    top: 53px;
}
.custom-archive-pagination {
  overflow-x: auto;
  white-space: nowrap;
  text-align: center;
  padding-bottom: 3rem;
}

.custom-archive-pagination .page-number-link {
  display: inline-block;
  margin: 0 4px;
  white-space: nowrap;
}

.page-number-link {
  display: inline-block;
  padding: 0.4em 0.8em;
  margin: 0 4px;
  border-radius: 4px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.page-number-link:hover {
  background-color: #ffd590;
}

.page-number-link.active {
  background-color: #ffb347;
  color: white;
}
.custom-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
  margin: 1rem 0;
}

.custom-pagination ul.page-numbers li {
  display: inline-block;
  border-radius: 4px;
  background-color: #f2f2f2;
  transition: background-color 0.2s ease;
  margin: 0 4px;
}

/* リンク自体は透明に（中身の文字だけ） */
.custom-pagination .page-numbers {
  display: inline-block;
  padding: 0.4em 0.8em;
  background: none;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* ホバー時：liに反応 */
.custom-pagination ul.page-numbers li:hover {
  background-color: #ffd590;
}

/* 現在のページ（liに .current クラスが付いてる前提） */
.custom-pagination ul.page-numbers li.current {
  background-color: #ffb347;
}

.custom-pagination ul.page-numbers li.current .page-numbers {
  color: white;
  cursor: default;
}
.min400{
  min-height: 400px;
}
.custom-archive-alt-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 50px;
  margin-top: 100px;
}

@media screen and (min-width: 768px) {
  .custom-archive-alt-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.custom-archive-alt-card {
  background: #f8f8f8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100px; /* ← 高さ固定 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.custom-archive-alt-card:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background: #ffffff;
}


.hove:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.hove a {
  color: inherit;
  text-decoration: none;
}

.hove a:hover {
  text-decoration: underline;
  color: #0056b3; /* 少しアクセントカラー */
}

.custom-alt-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #274c77;
    line-height: 1.2;
    padding: 0.25rem 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    background-color: white;
    TEXT-ALIGN: left;
}
.custom-alt-title::before,.custom-alt-title2::before,.custom-title::before  {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  background: linear-gradient(#456391 50%, #ffb347 50%);
  border-radius: 2px;
}

.custom-alt-meta {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  flex: 1;
  gap: 0.5rem;
  background: #fff;
}
.custom-alt-title2{
  justify-content: center;
}



.custom-alt-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-alt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-alt-excerpt {
  font-size: 0.8rem;
  line-height: 1.2;
  color: #010101;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .custom-archive-alt-card {
    width: 90%;
    margin: auto;

  }
  .custom-archive-alt-list{
    margin-top: 50PX;
  }
}


.custom-archive-alt-pagination.text-center.mt-3>.more-button {
   
    margin-bottom: 5rem;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
  .min400 {
    min-height: 200px;
  }
  .custom-alt-title, .custom-alt-title2{
    margin-bottom: 0;
  }
  .custom-archive-alt-card{
    margin: auto;
    width: 90%;
  }
}
p.copyright {
    position: absolute;
    bottom: 0;
    z-index: 0;
    font-size: 1rem;
    color: #040303;
    background-color: #456391;
    text-align: center;
    width: 100%;
}


.pickup-heading {
  text-align: center;
}

.pickup-heading-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 3rem;
  font-weight: bold;
}

.pickup-icon {
  width: 32px;
  height: auto;
  display: inline-block;
}

/* 必要があれば種類ごとに微調整もOK */
.icon-type-1 .pickup-icon {
  width: 32px;
}

.icon-type-2 .pickup-icon {
  width: 40px;
}
@media screen and (max-width: 768px) {
  .pickup-heading-inner {
    font-size: 2rem;}
  }
.area-heading {
    text-align: center;
}
  .area-section {
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #ffe2ba;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.area-heading h3 {
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #231d1d;
  border-bottom: 2px solid #231d1d;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.area-list {
  font-size: 1rem;
  line-height: 2;
  text-align: justify;
  column-count: 2;
  column-gap: 2rem;
  padding: 1rem;
}

@media screen and (max-width: 767px) {
  .area-list {
    column-count: 1;
    text-align: left;
  }
}
.custom-date {
  display: block;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 0.4em;
  font-weight: bold;
}
.pickup-block {
  margin-bottom: 2rem;
  
}

.pickup-img-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.pickup-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.pickup-lead {
  position: absolute;
  top: 20%;
  left: 5%;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  margin: 0;
  z-index: 2;
  width: 90%;
}

/* スマホ：画像の最下部にテキストを表示 */
@media screen and (max-width: 767px) {
  .pickup-lead {
    top: auto;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    text-align:left;
    padding: 0.2rem 1rem;
   
    border-radius: 4px;
  }
}@media screen and (min-width: 768px) {
  .pickup-text {
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 2;
    color: white;
    font-size: 1rem;
    line-height: 1.8;
    max-width: 90%;
   
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 6px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  }

  .pickup-img-wrap {
    position: relative;
    
  }

  .pickup-block {
    position: relative; /* relativeを追加して画像とテキストの位置基準に */
   
    margin: 0 auto 2rem;
  }
}

/* スマホ：画像下に通常表示 */
@media screen and (max-width: 767px) {
  .pickup-text {
    position: static;
    color: #333;
    background: none;
    padding: 1rem 1rem 0;
    font-size: 0.95rem;
    line-height: 1.7;
    text-shadow: none;
  }
}
.area-block-wrap {
  max-width: 1200px; 
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.area-block-wrap .pickup-heading,
.area-block-wrap .wp-block-image,
.area-block-wrap .area-section {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .area-block-wrap {
    max-width: 100%;
    padding: 0 1rem;
  }
}
.point-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #333;
    text-align: center;
    width: 100%;
}
.pickup-text {
  max-width: 1024px;
  margin: 1rem auto 2rem auto; 
  padding: 0 1rem;
  box-sizing: border-box;
}
.ariabody{
  background-color: white;
}
.firstview-block {
  position: relative;
  width: 90vw;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.firstview-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9; /* ブラウザ対応していれば */
  object-fit: cover;
}

.firstview-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
  text-align: center;
  padding: 1rem;
  z-index: 2;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .firstview-text {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
  }
  .firstview-block {
    width: 100%;
  }
}
.pickup-img-wrap img {
  opacity: 0.7;
}




.estimate-steps {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 1rem;
  align-items: stretch;
  margin: 2rem 0;
}

.estimate-step {
  display: flex;
  align-items: center;
  background-color: #f5b400; /* 黄色背景 */
  color: #ffffff;            /* 白文字 */
  padding: 2rem 1.2rem;
  border-radius: 6px;
  font-size: 2rem;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
   justify-content: center;
}

.estimate-step img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
}

.estimate-step p {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .estimate-steps {
    flex-direction: row;       /* PCは横並び */
   
  }

  .estimate-step {
    font-size: 3rem;           /* PCサイズで文字拡大 */
    flex: 1;                   /* 均等配置 */
    justify-content: center;
  }
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}
.apply-options {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.apply-box {
  flex: 1;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.apply-box:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.apply-box>figure>img{
  border-radius: 6px;
}
.bg-apply-section,.bg-apply-section2 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.bg-apply-section::before,.bg-apply-section2::before {
  content: "";
  position: absolute;
  inset: 0;
 
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3; /* ←透明度：0〜1で調整 */
  z-index: 0;
}
.bg-apply-section::before{
 /*background-image: url('https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/06/8cdd7f6e504a67bf496ab2c3ce956d03.png'); /* ←背景画像URL */
background-color: white;}

.wp-block-group.bg-apply-section > *,.wp-block-group.bg-apply-section2 > * {
  position: relative;
  z-index: 1; /* テキストなど前面に */
}

.bg-apply-section2::before{
  background-image: url('https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/06/d76d402d54e8d92fb643fc8aa3cf8b5b.png');
}
  
.cta-wrap {
    text-align: center;
    margin: 2rem 0;
    display: flex
;
    flex-direction: column;
}

.cta-caption {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  max-width: 300px;
  margin: auto;
}

.cta-button {
  display: inline-block;
  background-color: #fcb66f; /* オレンジ系 */
  color: white;
  font-weight: bold;
  padding: 0.8rem 2rem;
  border-radius: 9999px; /* 丸くする */
  text-decoration: none;
  font-size: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  max-width: 300px;
  margin: auto;
}

.cta-button:hover {
  background-color: #fca954; /* ホバーで濃く */
 
  color: #5c3b1e;
  background-color: #ffd49c;
}
@media screen and (max-width: 767px) {
.apply-box>figure>img{
 width: 90%;
 margin: auto;
}
.estimate-step{
   
        width: 60%;
        padding: 1rem;
        margin: auto;
        FONT-SIZE: 1.5rem;
    }
}

.equipment-group {
  background-color: #fff;

  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 4rem;
  margin: 2rem auto;
  max-width: 1200px;
  margin-bottom: 100px;
}

.equipment-group h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.5rem;
  text-align: center;
}

.equipment-group ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;


  max-width: 100%;
  padding-left: 1rem;
  list-style: none;
  margin: 0;
}

.equipment-group li {
  width: calc(30% - 1rem);
  font-size: 0.95rem;
  border-bottom: 1px dotted #ccc;
  padding: 0.3rem 0;
}

@media (max-width: 768px) {
  .equipment-group {
    background-image: none;
    padding: 2rem;
    margin-top:3rem;
    margin-bottom: 3rem;
  }

  .equipment-group ul {
    max-width: 100%;
  }


  .equipment-group li {
    width: calc(50% - 1rem);
  }
}
/**住宅設備*/
#systemkitchen,
#bath,
#washstand,
#toilet,
#boiler,
#aircon,
#faucet,
#interior {
   background-image:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),;
  background-repeat: no-repeat;
  background-position: right center;
   
 
}

/* 共通設定：背景画像用レイヤー */
.house-item {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.house-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.3; /* 背景画像の透明度だけ */
  z-index: -1;
  pointer-events: none;
}

#systemkitchen::before {
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/kitchen.webp);
}

#washstand::before
{
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/bathroom-vanity.webp);
}
#toilet::before
 {
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/toilet.webp);
}

#bath::before
 {
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/bathroom.webp);
 
}

#boiler::before {
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/boiler.webp);
 
}

#interior::before {
   background-image:
     url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/08/door.webp);
 
}
ul.makerlist>li {
    border-bottom: 1px solid #6c757d47;}
ul.makerlist>li:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50% 50%;

    left: -1rem;
    top: 0.25rem;
    /* bottom: 50%; */
    line-height: 0.75rem;
}    
.logo-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  grid-template-columns: 1fr; /* スマホ用：1列 */
  max-width: 1200px;
}

.logo-list li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-list img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* PCサイズで2列横並び */
@media screen and (min-width: 768px) {
  .logo-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
 
#systemkitchen,
#bath,
#washstand,
#toilet,
#boiler,
#aircon,
#faucet,
#interior{
        background-size: 200px;
        background-position: center;
    }

  }
  .no-posts-wrapper img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
}

@media screen and (min-width: 768px) {
  .no-posts-wrapper img {
    max-width: 600px; /* PCではちょっと大きく */
  }
}
.other-items-section {
  margin: 3rem auto;
 
  background-color: #f8f9fa;
  border-radius: 10px;
  max-width: 1200px;
  text-align: center;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.item-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.item-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #3f7fc2;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.item-button:hover {
  background-color:#1d4277;
  color: #fff !important;
}
.item-button a:hover
{
    color: #f4f5f7;}

.bgy{
  background-color: #ffe2ba;
}


/* =============================
   PC Footer 基本スタイル
============================= */
.pc-footer {
  background-color: #274c77;
  color: white;
  padding: 2rem 1rem;
  font-family: 'Sawarabi Gothic', sans-serif;
}

/* =============================
   フッターヘッダー（ロゴ＋タイトル）
============================= */
.footer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: 1rem;
  text-align: center;
}

.footer-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  color: #ffc107;
  white-space: nowrap;
  line-height: 1.2;
}

.footer-logo {
  width: 80px;
  height: 80px;
  background-image: url('https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/themes/reuse-bonbon/img/BonBonロゴ5.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* バナー画像（ロゴ＋文字一体型） */
.banner-header {
  width: 100%;
  max-width: 420px;
  height: 80px;
  margin: 0 auto 1.5rem auto;
  background-image: url('https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/06/bonbonbunner.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .footer-header {
    flex-direction: column;
  }

  .footer-logo {
    order: -1;
    margin-bottom: 0.5rem;
  }

  .footer-title {
    font-size: 1.5rem;
  }

  .banner-header {
    max-width: 90%;
    height: 60px;
    margin-bottom: 1rem;
  }
}

/* =============================
   本文（会社情報＋リンク）
============================= */
.footer-container {
  max-width: 1200px;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-info,
.footer-links {
  flex: 1 1 300px;
  padding: 1rem;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background-color: #ffffff08;
}

.footer-details {
  font-size: 0.95rem;
}

.company-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.company-info li {
  margin-bottom: 0.5rem;
}

.company-info span {
  font-weight: bold;
  color: #ffd700;
  display: inline-block;
  min-width: 5rem;
}

.license {
  margin-top: 1rem;
  font-size: 0.85rem;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 1.5rem;
}

.footer-nav a {
  color: #ffffffcc;
  text-decoration: none;
  display: block;
  margin-bottom: 0.3rem;
  transition: all 0.3s ease;
}

.footer-nav a:hover {
  color: #ffc107;
  text-decoration: underline;
}

.area-links,
.item-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.area-links a,
.item-links a {
  background-color: #3a5a7d;
  color: #fff;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  border: 1px solid #ffffff33;
  transition: background-color 0.2s ease;
}

.area-links a:hover,
.item-links a:hover {
  background-color: #ffc107;
  color: #274c77;
}

/* =============================
   コピーライト
============================= */
.copyright {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #ccc;
  border-top: 1px solid #ffffff33;
  padding-top: 1rem;
}

.mobile-copyright {
  text-align: center;
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100%;
  display: none;
}

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

  .mobile-copyright {
    display: block;
    background-color: #2d517b;
    color: white;
  }

  .footer-container {
    flex-direction: column-reverse;
  }

  .footer-info,
  .footer-links {
    width: 100%;
  }

  .area-links a,
  .item-links a {
    font-size: 0.85rem;
  }
}

/* =============================
   スマホ専用スペーサー
============================= */
.footer-spacer {
  height: 140px;
}

@media screen and (min-width: 768px) {
  .footer-spacer {
    display: none;
  }
}

/* =============================
   contactaria 固定ボタン（スマホ）
============================= */
.contactaria {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9999;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.contact-buttons {
  display: flex;
  justify-content: space-between;
}

.contact-btn {
  display: block;
}

.contact-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-btn.line,
.contact-btn.web {
  width: 50%;
}

.contact-btn.line {
  background-color: #1fd961;
}

.contact-btn.web {
  background-color: #6096ba;
}

.contact-btn.tel {
  width: 100%;
  text-align: center;
  margin-top: 0.1rem;
}

.contact-btn.tel img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}