@charset "UTF-8";

.display-none { display: none !important; }

html {
font-size: 100%;
font-family: sans-serif;
background-color: white;
color: #3b3b3b;
scroll-behavior: smooth;
}

img {
    display: block;
}


.key1-background-color {
    background-color: #FDE631;
}

.key2-background-color {
    background-color: #f6d100;
}

.key3-background-color {
    background-color: #ffed63;
}

.key-black-background-color {
  background-color: black;
}

.key-white-background-color {
  background-color: rgb(248, 248, 248);
}


/* ブロックエディター反映 */
.has-white-color-color {
  color: #FFFFFF;
}

.has-white-color-background-color {
  background-color: #FFFFFF;
}

.has-kabupro-black-color {
  color: #3b3b3b;
}

.has-kabupro-black-background-color {
  background-color: #3b3b3b;
}

.has-key-color-color {
  color: #FDE631;
}

.has-key-color-background-color {
  background-color: #FDE631;
}

.has-accent-color-1-color {
  color: #FDE631;
}

.has-accent-color-1-background-color {
  color: #FDE631;
}

.has-accent-color-2-color {
  color: #FDE631;
}

.has-accent-color-2-background-color {
  color: #FDE631;
}


.has-red-color-color {
  color: #FF353A;
}

.has-red-color-background-color {
  background-color: #FF353A;
}





  
  .button {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    position: relative;
    display: inline-block;
  }

  .button p {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2em;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :100%;
    text-align:center;
  }


  .chair {
    display: grid;
    justify-items: center;
  }

  .chair-icon {
    width: 80px;
  }



/* === 　　　記事カルーセル　　　　 === */

.article-carousel {
  margin-block: 80px;
}

.swiper {
  height: 580px;/*スライダーの幅と高さを調整*/
}


.swiper-slide {
	 /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;
}

/* === カードデザイン === */
.card {
  width: 400px;
  height: 460px;
  background: #fff;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* サムネイル部分 */
.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 比率だけでコントロール */
}

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

.card-meta {
  padding: 16px 20px;
}

/* ✅ 上段：カテゴリ＋日付を横並びに */
.card-meta-top {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-bottom: 10px; /* ← ✅ ここに余白を追加！お好みで調整OK */
}

/* ✅ カテゴリと日付は共通スタイルでOK */
.card-category,
.card-date {
  font-size: 14px;
  font-weight: bold;
  color: #555;
}

/* ✅ タイトルはちゃんと段落として縦に */
.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  text-overflow: ellipsis;
  word-break: break-word;
}

/* === Swiperページネーション（ドット） === */
.swiper-pagination {
  text-align: center;
  margin-top: 0;
}

.swiper-pagination-bullet {
  background: #999;
  opacity: 1;
  margin: 0 6px;
}

.swiper-pagination-bullet-active {
  background: #333;
}