@charset "UTF-8";
/* CSS Document */

/* メディアクエリ */
@media screen and (min-width:768px) { 
	
}
@media screen and (min-width:1024px) { 
	
}

/* :root {
	--text-color: #333333;
	--primary-color: #866D4B;
  --sub-color:#CCCCCC;
  --bg-color:#F4F2EF;
  --font-mincho:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "ＭＳ 明朝", serif;
} */

 @media screen and (min-width:1024px) { 

 }


 /* =========================
Swiper
========================= */
 /* .swiper {
   overflow: visible;
 } */

 .swiper-slide {width: auto;}

 /* =========================
Scrollbar + Arrows layout
========================= */
 /* scrollbar */
 .swiper-scrollbar {
   height: 3px;
   background: rgba(0, 0, 0, 0.1);
 }

 .swiper-scrollbar-drag {
   background: var(--primary-color);
 }

.Swiper01 {
  position: relative;
}

/* 操作エリア全体のレイアウト */
.swiper-controls {
 display: flex;
 align-items: center;
 gap: 24px;
 margin-top: 16px;
}

/* スクロールバーを伸縮させる */
.swiper-scrollbar {
 position: static !important; /* absoluteを解除 */
 flex-grow: 1;                /* 残りの幅をすべて埋める */
 height: 3px;
 background: rgba(0, 0, 0, 0.1);
}

/* 矢印ボタンを囲むエリア */
.swiper-navigation {
 display: flex;
 gap: 32px;
 flex-shrink: 0;
}

/* 矢印ボタンの基本スタイル（円を消去） */
.swiper-button-prev,
.swiper-button-next {
 position: static !important;
 width: auto !important; /* 幅を自動に */
 height: auto !important; /* 高さを自動に */
 margin: 0;
 color: var(--primary-color); /* 指定の色を適用 */
 background: none; /* 背景を消去 */
}

/* アイコンサイズ調整 */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 16px;
  font-weight: bold;
}

/* hover */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.6;
}



 /* =========================
swiper01のCard
========================= */
 .slide__card {
  background: #fff;
  /* card をスライドいっぱいに */
  display: flex;
  flex-direction: column;
  height: 100%;
}
 .slide__card--img {overflow: hidden;}

 .slide__card--img img {
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   transition: transform 0.6s ease;
 }

 /* hover zoom */
 /* .slide__card:hover img {
   transform: scale(1.05);
 } */

 .slide__card--info {
   padding: 16px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 .slide__card--title {
   font-size: 1.8rem;
   font-weight: bold;
   line-height: 1.1;
   margin: 0 0 8px;
   font-family: var(--font-mincho);
 }
 .slide__card--sub-title{
  display: block;
  font-family:initial;
  font-weight: normal;
  font-size: 1.2rem;
  padding-top: 6px;
 }

 .slide__card--desc {
   font-size: 14px;
   color: var(--text-color);
   margin: 0 0 12px;
   line-height: 1.6;
 }

 @media screen and (min-width:768px) { 
	.slide__card--title {
    font-size: 2.0rem;
  }
 }
 @media screen and (min-width:1024px) { 
   
 }


 /* ----画像部分のスライド SwiperChild---- */
/* カード内スライダーのサイズ設定 */
.SwiperChild {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* インジケーターのカスタマイズ（画像の上に重ねる） */
.SwiperChild .swiper-pagination {
  bottom: 4px !important; /* 位置調整 */
}

/* 丸ポチの色など */
.SwiperChild .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.8;
}

.SwiperChild .swiper-pagination-bullet-active {
  background: var(--primary-color);
}


 /* =========================
Card height equalize
========================= */
/* slide を高さ揃えの基準に */
.swiper-wrapper {
align-items: stretch;
}

.swiper-slide{
display: flex;
flex-direction: column;
height: auto;
}



/* 画像は上・固定比率 */
/* .slide__card--img {
flex-shrink: 0;
overflow: hidden;
} */



/* =========================
swiper02のCard
========================= */
.appeal__card{
  background-color: #E7E1DA;
}
.appeal__card--info{
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.appeal__card--title{
  /* text-align: center; */
  font-family: var(--font-mincho);
  font-size: 2.0rem;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sub-color);
}
.appeal__card--sub-title{
  display: block;
  font-size: 0.7em;
}
.appeal__card .slide__card--img img{
  height: 100%;
}
@media screen and (min-width:768px) { 
  .appeal__card--info{ padding: 32px;}
}
@media screen and (min-width:1024px) { 
	.appeal__card{
    flex-direction: row;
  }
  .appeal__card--info{
    padding: 32px 48px;
    gap: 32px;
  }
  .appeal__card--title{
    font-size: 2.4rem;
    padding-bottom: 32px;
  }
  .appeal__card .slide__card--img{
    width: 50%;
    flex-shrink: 0;
  }
}