@charset "utf-8";
/*
 * ホームのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする。
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する。
 *
 * できるだけシンプルに分かりやすくする。
 * => 複雑にしない。
 */
/*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
.content {
  padding-left: 0 !important;  /* 画像をいっぱいに表示するために、一旦、右を「0」にしてしまう */
  padding-right: 0 !important;  /* 画像をいっぱいに表示するために、一旦、左を「0」にしてしまう */
}
.content a:link, a:visited {
  text-decoration: none;
}
.content p {
  margin: 0;
  padding: 0;
}
.content ul {
  margin: 0;
  padding: 0 0 0 1em;
  list-style: none;
}
/*--------------------------------------------------
>>> スライドショー
--------------------------------------------------*/
.slideshow {
  position: relative;
  width: 100%;  /* コンテンツに合わせて調整 */
  height: 400px;  /* 画像の高さに合わせて調整 */
  /*height: 100vh;*/
  overflow: hidden;
}
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;  /* 最初は消しておく */
  animation: fade-animation 24s infinite cubic-bezier(0.25, 0.1, 0.25, 1);  /* 無限にフェードを繰り返す (一周の秒数 = 枚数 × 秒数 を指定) */
}
.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 画像を枠に合わせて綺麗に収める */
}
/* 右下に固定するボタン */
.slide-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.1em;  /* 文字の間隔を広げて、雰囲気を出す */
  padding: 10px 0 5px 0;  /* 上下だけパディング */
  border-bottom: 1px solid #fff;  /* 下線だけ引く */
  transition: all 0.4s ease;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
/* 矢印の動き */
.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.4s ease;
  font-weight: 600;
  font-size: 20px;
}
/* ホバー時 */
.slide-btn:hover {
  letter-spacing: 0.15em;  /* わずかに字間を広げる */
}
.slide-btn:hover .arrow {
  transform: translateX(8px);  /* 矢印を右に動かす */
}
/* アニメーションの開始タイミングをずらす（開始の秒数を指定） */
/* 画像の枚数 -1 の img:nth-child(n) を作る (n は2から画像の枚数までの整数を指定) */
.slide-item:nth-child(1) { animation-delay: 0s; }
.slide-item:nth-child(2) { animation-delay: 8s; }
.slide-item:nth-child(3) { animation-delay: 16s; }
/* アニメーションの定義 */
@keyframes fade-animation {
  /* 「0」は透明、「1」は不透明 */
  0%   {
    opacity: 0;
    z-index: 1; 
    pointer-events: none;  /* 消えている時はクリックできない */
    /*transform: scale(1.0);*/  /* 表示中、ゆっくり拡大する */
  }
  33%  {
    opacity: 1;
    z-index: 2; /* 表示されたら前面へ */
    pointer-events: auto; /* クリック可能にする */
  }  /* じわーっと表示 */
  40%  {
    opacity: 1;
    z-index: 2; 
    pointer-events: auto; 
  }  /* 表示維持 */
  45% {
    z-index: 1;
    pointer-events: none;
  }
  73%  {
    opacity: 0;
    z-index: 1; 
    pointer-events: none;
    /*transform: scale(1.1);*/  /* 表示中、ゆっくり拡大する */
  }  /* じわーっと消える */
  100% {
    opacity: 0;
    z-index: 1; 
    pointer-events: none;
  }
}
/*--------------------------------------------------
>>> ホーム用のコンテンツ
--------------------------------------------------*/
.home-content {
  padding: 0 6px;
}
/*--------------------------------------------------
>>> スライドショー下のカテゴリーへのリンク
--------------------------------------------------*/
.home-category-link-container {
  width: 100%;
  margin: 30px 0;
}
.home-category-link {
  width: 80%;
  margin: 10px auto;
  border: 1px solid #333;
  text-align: center;
}
.home-category-link a {
  display: block;  /* リンクを親のdivまで広げる */
  width: 100%;
  height: 100%;
  padding: 5px;
  color: #333;
}
/*--------------------------------------------------
>>> 見出し
--------------------------------------------------*/
.home-content h2 {
  margin: 2rem 0 0 0;
  padding: 2px 0.5rem 0.3rem 0.5rem;
  font-size: 105%;
  font-weight: normal;
  color: #000;
  /*color: #333;*/
  border-bottom: #cccccc solid 1.5px;
}
/*--------------------------------------------------
>>> カテゴリーのリスト
--------------------------------------------------*/
.home-category-container {
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);*/  /* 3列に並べる */
  grid-template-columns: repeat(2, 1fr);  /* 2列に並べる */
  grid-auto-flow: dense;  /* アイテムをすき間なく詰める */
  gap: 0.5em;  /* アイテム間のすき間 */
}
.home-category-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/*--------------------------------------------------
>>> 「もっと見る」のリンク
--------------------------------------------------*/
.home-read-more {
  margin: 1em 0 1em 0;
  /*color: #333;*/
  color: #000;
  font-size: 90%;
  text-align: center;
}
.home-read-more a {
  padding: 0.1em 0.5em;
  /*color: #333;*/
  color: #000;
  border: #333 solid 1px;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
  /*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
.content {
  padding: 0 100px !important;  /* PCの場合は、本来のpaddingを維持する */
}
/*--------------------------------------------------
>>> カテゴリーのリスト
--------------------------------------------------*/
.home-category-container {
  grid-template-columns: repeat(3, 1fr);  /* 3列に並べる */
}
}  /* @media screen and (max-device-width: 768px) */