html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを防ぐ */
}

a {
  text-decoration: none;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001; /* 他の要素よりも前面に表示 */
  
  display: flex;
  justify-content: space-between;

}

.logo {
  position: absolute;
  top: 0;
  left: 30px; /* 適宜調整 */
  z-index: 1001; /* swiper-top-navよりも前面に */
}

.logo img {
  height: 220px; /* ロゴの高さを調整 */
  width: 220px;
  object-fit: cover; /* 画像がコンテナにフィットするように調整 */
  clip-path: inset(60px 0 0 0); /* 上から30pxを切り取る */
  position: relative; /* 相対位置指定 */
  top: -60px; /* 上に30px移動 */
}


.main-items img {
  width: 100%;
  height: auto;
}



.items-top {
  color: rgb(30, 30, 30); /* リンクの色 */
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 24px;
  letter-spacing: 5px;
  margin: 50px;
}

.items-top h6 {
 font-size: 11px;
 letter-spacing: 1.5px;
}



/* 画面上部の「人生を変えるフリマアプリ」帯部分 */
.title-contents {
  width: 100%;
  height: 100vh;/* 画像サイズに合わせて変更 */
  /* background-image: image-url('0000.jpg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.919);
}

.service-title {
  font-size: 4vh;
}

 /*黒いグラデーションの背景を追加 */
.header-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* グラデーションの高さを調整 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.858), transparent);
  z-index:5; /* ロゴやナビゲーションよりも背面にするためにはz-indexを低くしますが、背景よりは前にします。 */
}

.swiper-top-nav {
  position: absolute;
  top: 35px;
  right: 100px;
  z-index: 1001; /* Swiperよりも前面に表示 */
  display: flex;
  gap: 20px; /* リンク間の隙間 */
}

.swiper-top-nav a {
  color: white; /* リンクの色 */
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 16px;
  text-decoration: none; /* 下線を消す */
}

/* リンクにマウスオーバー時の効果 */
.swiper-top-nav a:hover {
  text-decoration: underline; /* 下線を表示 */
  color: #434343; /* 色の変更 */
}


.swiper-slide {
  background-size: cover;
  background-position: center;
}

/* グラデーション */
.swiper {
  position: relative;
}
.mySwiper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(211, 211, 211));
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Swiper */
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 10s linear 0s;
  animation: zoomUp 10s linear 0s; /* 10秒かけて拡大 */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slide-img {
  background-size: cover; 
  background-position: center center;
  height: 100vh; /* 画像の高さは100vh固定 */
}




/* 画面上部の「人生を変えるフリマアプリ」帯部分 */
.title-contents {
  width: 100%;
  height: 100vh;/* 画像サイズに合わせて変更 */
  /* background-image: image-url('0000.jpg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

.service-title {
  font-size: 4vh;
}

.service-explain {
  font-size: 2.5vh;
  line-height: 40px;
}

.store-btn {
  display: flex;
  margin-top: 24px;
}

.apple-btn {
  margin-right: 1vw;
  height: 9vh;
}

.google-btn {
  height: 9vh;
}




.swiper-top-nav {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1000; /* Swiperよりも前面に表示 */
  display: flex;
  gap: 20px; /* リンク間の隙間 */
}

.swiper-top-nav a {
  color: white; /* リンクの色 */
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 16px;
  text-decoration: none; /* 下線を消す */
  
}

/* リンクにマウスオーバー時の効果 */
.swiper-top-nav a:hover {
  text-decoration: underline; /* 下線を表示 */
  color: #434343; /* 色の変更 */
}




* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
}

header {
  color: white;
  text-align: center;
}

main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-items {
  background-color: #ffffff;
  margin:10px 10px 10px 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.news-item {
  display: flex;
  width: 100%;
}


.news-item img {
  width: 150px;
  height: 150px; /* 正方形に固定 */
  object-fit: cover;
}

.news-content {
  margin-top: 400px;
  padding: 10px;
  width: calc(100% - 100px);
}

.news-content2 {
  padding-left: 10px;
  width: calc(100% - 100px);
}

.main-news img {
  width: 100%;
  height: auto;
}

.main-news .news-content {
  position: absolute;
  top: 20%;
  left: 7%;
  color: rgb(230, 230, 230);
  background-color: rgba(0, 0, 0, 0.5);

}

.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列表示に変更 */
  gap: 10px;
  background-color: #f5f5f5;
}

.news-item h2, .news-item h3 {
  margin: 0 0 10px 0;
}

.news-item p {
  margin: 0;
}

.news-content h5, .news-content h4 {
  margin: 0;
}

.news-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out;
  padding: 0;
  margin: 0;
}

.news-details.open {
  max-height: 500px; /* 最大値は内容によって調整してください */
  padding-bottom: 10px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.news-details p {
  display: none;
  padding: 5px 0;
}

.news-content h5, .news-content h4 {
  margin: 0;
}

.toggle-details {
  background: #4230ff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.toggle-details:hover {
  background-color: #0056b3;
}




/* フッター部分 */

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 80px 0;
  font-family: 'Arial', sans-serif;
}

.footer-comment{
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 12px;
  letter-spacing: 0.10em;
}

footer .footer-logo {
  margin-bottom: 80px;
}

.footer-logo img {
  height: 160px;
  width: 160px;
}

footer a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 13px;
}

footer a:hover {
  text-decoration: underline;
}

footer .social-icons {
  margin-top: 30px;
}

footer .social-icons img {
  width: 25px;
  height: auto;
  margin: 0 5px;
}

footer .copyright {
  font-size: 12px;
  margin-top: 120px;
}

.footer-copy p {
 font-size: 12px;
}