/* ====== キービジュアル ====== */
.kv-section {
 overflow: hidden;
 padding-top: 90px;
 padding-bottom: 40px;
 position: relative;
}
@media screen and (min-width: 768px) {
 .kv-section {
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 40px;
  position: relative;
 }
}
.kv-swiper img {
 width: 100%;
 height: auto;
 object-fit: cover;
 display: block;
}
@media screen and (min-width: 768px) {
 .kv-swiper img {
  width: 100%;
  height: 867px;
  object-fit: cover;
  display: block;
 }
}
.kv-caption {
 position: absolute;
 bottom: 35%;
 left: 5%;
 right: 5%;
 color: #fff;
 max-width: 100%;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 768px) {
 .kv-caption {
  position: absolute;
  bottom: 45%;
  left: 20%;
  right: 20%;
  color: #fff;
  max-width: 100%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
}

.kv-caption .kv-meta {
 display: flex;
 align-items: flex-end;
 margin-bottom: 15px;
 flex-direction: row;
 justify-content: center;
}

.kv-caption .kv-icon {
 width: 28px;
 height: auto;
 margin-right: 8px;
}

.kv-caption .kv-label {
 font-weight: bold;
 font-size: 16px;
 margin-right: 20px;
}

.kv-caption .kv-cat {
 padding: 4px 20px;
 font-size: 14px;
 color: #fff;
 border-radius: 3px;
}
/* カテゴリ色ごとに変更 */
.btn-blue {
 background-color: #7a2c1f;
}
.btn-brown {
 background-color: #7a2c1f;
}
.btn-green {
 background-color: #a45b3a;
}
.btn-orange {
 background-color: #c78a47;
}
.btn-pink {
 background-color: #e3b06e;
}
.kv-caption .kv-title {
 font-size: 1.2em;
 font-weight: 700;
 margin-bottom: 10px;
 text-align: center;
}
@media screen and (min-width: 768px) {
 .kv-caption .kv-title {
  font-size: 2.5em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
 }
}

.kv-caption .kv-sub {
 text-align: center;
 font-size: 16px;
}

.swiper-button-prev,
.swiper-button-next {
 width: 40px;
 height: 40px;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
}

.swiper-button-prev {
 top: var(--swiper-navigation-top-offset, 72%) !important;
 left: var(--swiper-navigation-sides-offset, 6%) !important;
 background-image: url("https://reform-isis.com/wptest/wp-content/themes/theme-isis2025/assets/images/common/arrow-left02.png");
}
@media screen and (min-width: 768px) {
 .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 50%) !important;
  left: var(--swiper-navigation-sides-offset, 12%) !important;
  background-image: url("https://reform-isis.com/wptest/wp-content/themes/theme-isis2025/assets/images/common/arrow-left02.png");
 }
}
.swiper-button-next {
 top: var(--swiper-navigation-top-offset, 72%) !important;
 right: var(--swiper-navigation-sides-offset, 6%) !important;
 background-image: url("https://reform-isis.com/wptest/wp-content/themes/theme-isis2025/assets/images/common/arrow-right02.png");
}
@media screen and (min-width: 768px) {
 .swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%) !important;
  right: var(--swiper-navigation-sides-offset, 12%) !important;
  background-image: url("https://reform-isis.com/wptest/wp-content/themes/theme-isis2025/assets/images/common/arrow-right02.png");
 }
}
/* デフォルトの白矢印を非表示 */
.swiper-button-prev::after,
.swiper-button-next::after {
 display: none;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
 .swiper-pagination-bullet {
 margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px) !important;
}
.swiper-pagination-bullet-active {
 background: #ffffff !important;
}
.swiper-pagination-bullet {
 width: var(
  --swiper-pagination-bullet-width,
  var(--swiper-pagination-bullet-size, 15px)
 ) !important;
 height: var(
  --swiper-pagination-bullet-height,
  var(--swiper-pagination-bullet-size, 15px)
 ) !important;
 background: var(--swiper-pagination-bullet-inactive-color, #ffffff) !important;
}

/* === リフォームセクション全体 === */
.reform-section {
 padding: 50px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .reform-section {
  padding: 80px 0;
  background: #fff;
 }
}
.reform-section02 {
 padding: 80px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .reform-section02 {
  padding: 80px 0;
  background: #fff;
 }
}
/* === 上部：タイトル行 === */
.reform-header {
 display: flex;
 align-items: flex-end;
 flex-wrap: wrap;
 margin-bottom: 40px;
 justify-content: space-between;
}

.reform-logo-title {
 display: flex;
 align-items: center;
 flex-direction: row;
}
@media screen and (min-width: 768px) {
 .reform-logo-title {
  display: flex;
  align-items: center;
  flex-direction: row;
 }
}

.reform-icon {
 width: 50px;
 height: auto;
 margin-right: 16px;
}
@media screen and (min-width: 768px) {
 .reform-icon {
  width: 90px;
  height: auto;
  margin-right: 16px;
 }
}
.reform-title-group {
 display: flex;
 flex-direction: column;
}
.reform-title-group .en-title {
 font-size: 17px;
 font-weight: 600;
 margin: 0;
 color: #5c4534;
 letter-spacing: 0.05em;
}

.reform-title-group .jp-title {
 font-size: 2.2em;
 color: #3a2d27;
}
@media screen and (min-width: 768px) {
 .reform-title-group .jp-title {
  font-size: 3.2em;
  color: #3a2d27;
 }
}

.reform-lead {
 font-size: 16px;
 color: #3a2d27;
 line-height: 1.7;
}

/* === 下部：カード3列 === */
.reform-cards {
 display: flex;
 gap: 15px;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
}
.reform-cards02 {
 display: flex;
 gap: 20px;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
}
.reform-card {
 width: 32%;
 background: #f0ece8;
 padding: 0px;
 box-sizing: border-box;
 position: relative;
 display: flex;
 flex-direction: column;
}
.reform-card img {
 width: 100%;
 max-height: 320px;
 object-fit: cover;
 display: block;
 margin-bottom: 12px;
}

.reform-id {
 font-size: 15px;
 color: #3a2d27;
 font-weight: bold;
 margin-bottom: 4px;
}
@media screen and (min-width: 768px) {
 .reform-id {
  font-size: 20px;
  color: #3a2d27;
  font-weight: bold;
  margin-bottom: 4px;
 }
}
.reform-desc {
 padding: 5px 20px;
}
.reform-caption {
 font-size: 14px;
 color: #3a2d27;
 margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
 .reform-caption {
  font-size: 16px;
  color: #3a2d27;
  margin-bottom: 30px;
 }
}
.reform-caption02 {
 font-size: 14px;
 color: #3a2d27;
 margin-bottom: 10px;
 margin-top: 10px;
}
@media screen and (min-width: 768px) {
 .reform-caption02 {
  font-size: 16px;
  color: #3a2d27;
  margin-bottom: 10px;
  margin-top: 10px;
 }
}
.reform-summary {
 margin-bottom: 15px;
}
/* === ボタン：ズレ装飾付き === */
.reform-btn {
 position: relative;
 display: inline-block;
 padding: 6px 6px;
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 160px;
 border-radius: 2px;
}

@media screen and (min-width: 768px) {
 .reform-btn {
  position: relative;
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  width: 200px;
  border-radius: 2px;
 }
}

.reform-btn::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: 2px;
}
/* === ボタン：ズレ装飾付き === */
.reform-btn05 {
 position: relative;
 display: inline-block;
 padding: 10px 16px;
 font-size: 16px;
 font-weight: bold;
 color: #000;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 300px;
 border-radius: 2px;
}

@media screen and (min-width: 768px) {
 .reform-btn05 {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  width: 300px;
  border-radius: 2px;
 }
}

.reform-btn05::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: 2px;
}
/* === ボタン：ズレ装飾付き === */
.reform-btn04 {
 position: relative;
 display: inline-block;
 padding: 10px 16px;
 padding-bottom: 16px;
 font-size: 15px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 330px;
 border-radius: 2px;
}

@media screen and (min-width: 768px) {
 .reform-btn04 {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  width: 350px;
  border-radius: 2px;
 }
}

.reform-btn04::after {
 content: "";
 position: absolute;
 top: -4px;
 left: -4px;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: 2px;
}
/* === ボタン：ズレ装飾付き === */
.reform-btn02 {
 position: relative;
 display: inline-block;
 padding: 10px 10px;
 margin-bottom: 15px;
 font-size: 15px;
 font-weight: bold;
 color: #7b736f;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 200px;
 border-radius: 30px;
 background: #fff;
}

@media screen and (min-width: 768px) {
 .reform-btn02 {
  position: relative;
  display: inline-block;
  padding: 10px 10px;
  margin-bottom: 15px;
  font-size: 16px;
  margin-right: 10px;
  font-weight: bold;
  color: #7b736f;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  width: 200px;
  border-radius: 30px;
  background: #fff;
 }
}

.reform-btn03 {
 position: relative;
 display: inline-block;
 padding: 10px 10px;
 margin-bottom: 15px;
 font-size: 15px;
 color: #fff;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 300px;
 border-radius: 30px;
 background: #51443a;
}

@media screen and (min-width: 768px) {
 .reform-btn03 {
  position: relative;
  display: inline-block;
  padding: 10px 10px;
  margin-bottom: 18px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  z-index: 1;
  width: 400px;
  border-radius: 30px;
  background: #51443a;
 }
}
/* === カード別カラー背景 === */
.reform-card.green {
 background: repeating-linear-gradient(
  to bottom,
  #3b8d40cc,
  /* メイン緑（80%） */ #3b8d40cc 2px,
  #2f7332cc 2px,
  /* 補助ライン：やや濃い緑 */ #2f7332cc 4px
 );
}

.reform-card.brown {
 background: repeating-linear-gradient(
  to bottom,
  #51443b,
  #51443b 2px,
  #4a3a2e 2px,
  #4a3a2e 4px
 );
}
.reform-card.orange {
 background: repeating-linear-gradient(
  to bottom,
  #e0a067,
  #e0a067 2px,
  #d28c52 2px,
  #d28c52 4px
 );
}

.reform-card.pink {
 background: repeating-linear-gradient(
  to bottom,
  #d59c7f,
  #d59c7f 2px,
  #c88b71 2px,
  #c88b71 4px
 );
}
/* ボタン色別 */
/* ブルー 
.btn-blue {
 border: 2px solid #4b84c4;
}*/
.btn-blue::after {
 background-color: #7a2c1f;
}

/* グリーン
.btn-green {
 border: 2px solid #3b8d40;
} */
.btn-green::after {
 background-color: #a45b3a;
}

/* ピンク
.btn-pink {
 border: 2px solid #b95767;
} */
.btn-pink::after {
 background-color: #c78a47;
}
.btn {
 display: flex;
 justify-content: center;
}
.btn02 {
 display: flex;
 justify-content: flex-end;
}

.btn03 {
 margin-top: 20px;
 display: flex;
 justify-content: center;
}
@media screen and (min-width: 768px) {
 .btn03 {
  margin-top: 40px;
  display: flex;
  justify-content: center;
 }
}
/* === レスポンシブ対応 === */
@media screen and (max-width: 960px) {
 .reform-cards {
  flex-direction: column;
  gap: 30px;
 }
 .btn02 {
  display: flex;
  justify-content: center;
 }
 .reform-card {
  width: 100%;
 }

 .reform-header {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
 }

 .reform-lead {
  margin-top: 16px;
 }
}
.newbuilt-inner-articles {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 gap: 30px;
 flex-wrap: nowrap;
}

.newbuilt-article {
 width: calc(33.333% - 13.33px);
 display: flex;
 flex-direction: column;
 color: #fff;
}

.newbuilt-article img {
 width: 100%;
 height: auto;
 margin-bottom: 10px;
}

@media screen and (max-width: 960px) {
 .newbuilt-inner-articles {
  flex-direction: column;
 }

 .newbuilt-article {
  width: 100%;
 }
}
/* === 新築セクション専用カード背景色 === */
.newbuilt-card {
 width: 100%;
 background: #eee;
 padding: 30px;
 box-sizing: border-box;
 position: relative;
 display: flex;
 flex-direction: column;
}

.newbuilt-card.orange {
 background: repeating-linear-gradient(
  to bottom,
  #debba8,
  #debba8 2px,
  #cea98d 2px,
  #cea98d 4px
 );
}

/* === ボタン：オレンジバージョン === 
.btn-orange {
 border: 2px solid #cc6633;
}*/
.btn-orange::after {
 background-color: #e3b06e;
}

/* === 犬と暮らすセクション === */
.doglife-section {
 padding: 50px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .doglife-section {
  padding: 80px 0;
  background: #fff;
 }
}

.doglife-content {
 display: flex;
 flex-wrap: wrap;
 gap: 30px;
 align-items: flex-start;
 justify-content: space-between;
}

.doglife-image {
 flex: 1 1 45%;
}

.doglife-image img {
 width: 100%;
 height: auto;
 display: block;
}

.doglife-text {
 flex: 1 1 50%;
 font-size: 16px;
 color: #3a2d27;
 line-height: 1.8;
 display: flex;
 flex-direction: column;
 gap: 25px;
}

.doglife-text p {
 font-size: 17px;
}
@media screen and (min-width: 768px) {
 .doglife-text p {
  font-size: 18px;
 }
}
/* ボタン（ブラウン系） */
.btn-brown {
 border: 2px solid #51443b;
 margin-top: 40px;
}
.btn-brown::after {
 background-color: #51443b;
}

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

 .doglife-image,
 .doglife-text {
  flex: 1 1 100%;
 }

 .doglife-text {
  margin-top: 20px;
 }
}

/* === フィードバックセクション === */
.feedback-section {
 padding: 50px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .feedback-section {
  padding: 80px 0;
  background: #fff;
 }
}

.feedback-card {
 background: #f0ece8;
 padding: 30px;
 border-radius: 6px;
}

.feedback-inner-articles {
 display: flex;
 flex-direction: row;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-bottom: 0px;
}

.feedback-article {
 width: calc(33.333% - 13.33px);
 color: #fff;
}

.feedback-article img {
 width: 100%;
 height: auto;
 margin-bottom: 12px;
 border-radius: 6px;
}
/* ===  === 
.feedback-article .reform-id {
 font-weight: bold;
 font-size: 15px;
 margin-bottom: 6px;
 display: flex;
 align-items: center;
 gap: 10px;
}*/
/* カテゴリバッジ */
.category-badge {
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 padding: 2px 6px;
 border-radius: 3px;
}

.badge-blue {
 background-color: #4b84c4;
}

.badge-green {
 background-color: #3b8d40;
}

.badge-orange {
 background-color: #cc6633;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
 .feedback-inner-articles {
  flex-direction: column;
 }

 .feedback-article {
  width: 100%;
 }
}
.feedback-btn {
 position: relative;
 display: inline-block;
 padding: 10px 16px;
 padding-bottom: 16px;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-decoration: none;
 z-index: 1;
 width: 350px;
 border-radius: 2px;
}

.feedback-btn::after {
 border: 2px solid #ffffff;
 content: "";
 position: absolute;
 top: -4px;
 left: -4px;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: 2px;
}
.btn-brown02::after {
 background-color: #51443b;
}

.news-section {
 padding: 50px 0;
}
@media screen and (min-width: 768px) {
 .news-section {
  padding: 80px 0;
 }
}

.news-card-container {
 background: #f0ece8;
 padding: 10px;
 border-radius: 6px;
}
@media screen and (min-width: 768px) {
 .news-card-container {
  background: #f0ece8;
  padding: 30px;
  border-radius: 6px;
 }
}
.news-inner-articles {
 display: flex;
 flex-direction: row;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-bottom: 30px;
}

.news-article {
 width: calc(33.333% - 13.33px);
 color: #fff;
}
.news-article .news-article-link {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: 20px;
 align-items: center;
}
@media screen and (min-width: 768px) {
 .news-article .news-article-link {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
 }
}
.news-article img {
 width: 35%;
 max-height: 80px;
 margin-bottom: 12px;
 object-fit: cover;
 border-radius: 6px;
}
@media screen and (min-width: 768px) {
 .news-article img {
  width: 100%;
  max-height: 300px;
  margin-bottom: 12px;
  object-fit: cover;
  border-radius: 6px;
 }
}
.news-date {
 font-weight: bold;
 font-size: 14px;
 margin-bottom: 6px;
 color: #fff;
}

.news-title {
 font-size: 15px;
 line-height: 1.6;
 color: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
 .news-inner-articles {
  flex-direction: column;
 }

 .news-article {
  width: 100%;
 }
}

.blog-section {
 background: #fff;
 padding: 80px 0;
}

.blog-card {
 background: #f0ece8;
 padding: 30px;
 border-radius: 6px;
}

.blog-inner-articles {
 display: flex;
 flex-direction: row;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-bottom: 30px;
}

.blog-article {
 width: calc(33.333% - 13.33px);
 color: #fff;
}

.blog-article img {
 width: 100%;
 max-height: 250px;
 margin-bottom: 12px;
 object-fit: cover;
 border-radius: 6px;
}

.blog-article .news-date {
 font-weight: bold;
 font-size: 14px;
 margin-bottom: 6px;
}

.blog-article .news-title {
 font-size: 15px;
 line-height: 1.6;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
 .blog-inner-articles {
  flex-direction: column;
 }

 .blog-article {
  width: 100%;
  border-bottom: 2px solid #ccc;
 }
}

/* === お問い合わせセクション === */
.contact-section {
 padding: 50px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .contact-section {
  padding: 80px 0;
  background: #fff;
 }
}

.contact-card-container {
 background: repeating-linear-gradient(
  to bottom,
  #50433a,
  #50433a 2px,
  #463a32 2px,
  #463a32 4px
 );
 padding: 30px;
 border-radius: 6px;
}

.contact-inner-articles {
 display: flex;
 flex-wrap: wrap;
 gap: 40px;
 justify-content: space-between;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .contact-inner-articles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  color: #fff;
 }
}
.contact-method {
 width: calc(33.333% - 13.33px);
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
}
@media screen and (min-width: 768px) {
 .contact-method {
  width: calc(33.333% - 13.33px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
 }
}
.icon-label-row {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-bottom: 10px;
}

.contact-icon {
 width: auto;
 height: auto;
}

.contact-label {
 font-weight: bold;
 font-size: 16px;
 margin: 0;
}
@media screen and (min-width: 768px) {
 .contact-label {
  font-weight: bold;
  font-size: 18px;
  margin: 0;
 }
}

.contact-text,
.contact-note {
 margin: 10px 0;
}

.contact-text img,
.contact-note img {
 max-width: 100%;
 height: auto;
}

/* メールボタン（赤系） 
.btn-mail {
 border: 2px solid #ff6766;
}*/
.btn-mail::after {
 background-color: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
 .contact-inner-articles {
  flex-direction: column;
 }

 .contact-method {
  width: 100%;
 }

 .icon-label-row {
  justify-content: flex-start;
 }
}