@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);

/* カードを囲むコンテナのスタイリング */
.card-container {
  display: flex; /* 横並びに配置 */
  flex-wrap: wrap; /* カードが溢れると次の行に折り返し */
  justify-content: space-between; /* カード間にスペースを均等配置 */
  gap: 5px; /* カード間の間隔を狭める */
  padding: 0 120px; /* 左右に空白を追加 */
}

/* メインのカードコンテナのスタイリング */
.snip1336 {
  font-family: 'Roboto', Arial, sans-serif; /* 使用フォントを指定 */
  position: relative; /* 子要素の絶対配置用 */
  overflow: hidden; /* コンテンツがはみ出さないようにする */
  margin: 5px; /* 周りにマージンを追加 */
  min-width: 180px; /* 最小幅を小さく設定 */
  max-width: 240px; /* 最大幅を小さく設定 */
  width: 100%; /* 幅は親要素に応じて調整 */
  color: #ffffff; /* 文字色を白に設定 */
  text-align: left; /* 左揃え */
  line-height: 1.2em; /* 行間を調整 */
  background-color: #141414; /* 背景色を濃いグレーに */
}

/* カード内の全要素のボックスサイズとトランジションを設定 */
.snip1336 * {
  box-sizing: border-box; /* ボックスサイズ設定 */
  transition: all 0.25s ease; /* トランジション効果 */
}

/* カード内の画像のスタイリング */
.snip1336 img {
  max-width: 100%; /* 最大幅を100%に */
  vertical-align: top; /* 縦揃えを上に */
  opacity: 0.85; /* 透明度を調整 */
}

/* キャプションのスタイリング */
.snip1336 figcaption {
  width: 100%; /* 幅を100%に */
  background-color: #141414; /* 背景色をカード全体と同じ色に */
  padding: 15px; /* パディングを調整 */
  position: relative; /* 子要素の絶対配置用 */
}

/* キャプションの斜めの装飾 */
.snip1336 figcaption:before {
  position: absolute; /* 絶対配置 */
  content: ''; /* コンテンツなし */
  bottom: 100%; /* 下側の位置を100%に */
  left: 0; /* 左端に配置 */
  width: 0; /* 幅は0に */
  height: 0; /* 高さは0に */
  border-style: solid; /* ボーダーのスタイルを設定 */
  border-width: 40px 0 0 250px; /* 斜めの三角形を作るためのボーダー幅 */
  border-color: transparent transparent transparent #141414; /* 左側だけに色を設定 */
}

/* キャプション内のリンクのスタイリング */
.snip1336 figcaption a {
  padding: 3px; /* パディングを調整 */
  border: 1px solid #ffffff; /* 白いボーダー */
  color: #ffffff; /* 文字色を白に */
  font-size: 0.6em; /* フォントサイズを小さめに */
  text-transform: uppercase; /* テキストを大文字に変換 */
  margin: 5px 0; /* 上下にマージン */
  display: inline-block; /* インラインブロック表示 */
  opacity: 0.65; /* 初期状態の透明度 */
  width: 45%; /* 幅を指定 */
  text-align: center; /* 中央揃え */
  text-decoration: none; /* 下線を削除 */
}

/* リンクホバー時の透明度変化 */
.snip1336 figcaption a:hover {
  opacity: 1; /* 不透明に */
}

/* プロフィール画像のスタイリング */
.snip1336 .profile {
  border-radius: 50%; /* 円形にする */
  position: absolute; /* 絶対配置 */
  bottom: 100%; /* 下端に配置 */
  left: 15px; /* 左から15px */
  z-index: 1; /* 重なり順を設定 */
  max-width: 60px; /* 最大幅を60pxに */
  opacity: 1; /* 不透明に */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* ぼかし影を追加 */
}

/* フォローボタンのスタイリング */
.snip1336 .follow {
  margin-right: 2%; /* 右にマージン */
  border-color: #2980b9; /* 青色のボーダー */
  color: #2980b9; /* 青色の文字色 */
}

/* タイトルのスタイリング */
.snip1336 h2 {
  margin: 0 0 3px; /* 下にマージン */
  font-weight: 300; /* 軽めのフォント */
}

/* タイトルのサブ要素 */
.snip1336 h2 span {
  display: block; /* ブロック表示 */
  font-size: 0.5em; /* 小さめのフォント */
  color: #2980b9; /* 青色 */
}

/* 段落のスタイリング */
.snip1336 p {
  margin: 0 0 5px; /* 下にマージン */
  font-size: 0.7em; /* フォントサイズを指定 */
  letter-spacing: 1px; /* 文字間隔を広げる */
  opacity: 0.8; /* 透明度を少し下げる */
}


/*スライドショー*/

.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* コンテナの内側の余白 */
  width: 100%; /* コンテナの幅 */
}

.scrollsnap-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 80%; /* カルーセルの幅を調整 */
  gap: 20px;
}

.slide {
  flex: 0 0 auto; /* 各スライドを固定幅に */
  scroll-snap-align: center;
  width: 300px; /* スライドの幅 */
  height: 200px; /* スライドの高さ */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.8);
}

.content img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をスライドにフィット */
}