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

a {
  text-decoration: none;
}

.movie{

transform: translate(30%); /* 中心に移動 */
}

.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移動 */
}

/* 画面上部の「人生を変えるフリマアプリ」帯部分 */
.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固定 */
}
/* Swiper-zoom */
/*@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}
@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  
}
*/



/* ニュース部分 */
.news-contents {
  text-align: center;
  height: 100vh;

  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  padding: 180px;


}



.news-contents h2 {
  color: #000000;
  margin-bottom: 20px;
  font-size: 24px;
}

.accordion {
  list-style: none;
  padding: 0;
}

.accordion li {
  margin-bottom: 10px;
}

.accordion input {
  display: none;
}

.accordion label {
  display: block;
  padding: 10px;
  background-color: #f8f8f889;
  cursor: pointer;
  border: 1px solid #5d5d5d;
}

.accordion .content {
  display: none;
  padding: 20px;
  border: 1px solid #cccccc9f;
  background-color: #ffffff55;
  border-top: none;
}

.accordion input:checked + label {
  background-color: #e0e0e0;
}

.accordion input:checked ~ .content {
  display: block;
}




/* アバウト部分 */
.about-contents {
  text-align: center;
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
}

.about-contents h2 {
  color: #000000;
  font-size: 24px;
}


.parallax-container {
  display: flex;
    justify-content: space-between;
    margin: 0 10px;
    overflow: hidden;
    padding: 0 150px 0 150px;
}

/* パララックス画像コンテナにズームエフェクトを適用 */
.parallax-bgl, .parallax-bgr {
  width: 100%;
    flex: 1 1 30%; /* 画像が画面の30%を占めるように調整 */
    overflow: hidden;
}

.parallax-bgl img, .parallax-bgr img{
  transition:1s all;
  width: 100%;

}


.parallax-bgl img:hover, .parallax-bgr img:hover {
  transform:scale(1.1,1.1);
  transition:1s all;
}

/* マウスホバー時のズームエフェクト 
.parallax-bgl:hover, .parallax-bgr:hover {
  transform: scale(1.02); 
}
*/

.parallax-infol, .parallax-infor {
  flex: 1 1 60%; /* テキストが60%を占めるように調整 */
    padding: 20px; /* パディングを調整して余白を設ける */
    display: flex;
    flex-direction: column;
}

.parallax-infol a, .parallax-infor a {
color: rgb(79, 79, 79); /* リンクの色 */
font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
font-size: 20px;
text-decoration: none; /* 下線を消す */
}

.parallax-infol p, .parallax-infor p {
  color: rgb(79, 79, 79); /* リンクの色 */
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  font-size: 16px;
  text-decoration: none; /* 下線を消す */
  }

/* 上段の設定 */
.parallax-bgl {
  order: 1; /* 左側に画像 */
}

.parallax-infol {
  order: 2; /* 右側にテキスト */
}

/* 下段の設定 */
.parallax-infor {
  order: 1; /* 左側にテキスト */
}

.parallax-bgr {
  order: 2; /* 右側に画像 */
}


.parallax-info h2, .parallax-info p {
  margin: 0; /* マージンリセット */
  
}

.parallax-section {
  height: 10vh;
  color: rgb(29, 29, 29);
  font-size: 22px;
  letter-spacing: 0.12em;
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
}

.background-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* 画面の高さ全体をカバー */
  background-image: url('./images/bb.jpg'); /* 背景画像を設定 */
  background-repeat: no-repeat;
  background-position: center center; /* 画像が中央に来るように調整 */
  background-attachment: fixed; /* スクロールしても背景画像は固定 */

  z-index: -1; /* コンテンツの背後に配置 */
  opacity: 0.8;
}


/* セクションがスクロールに合わせて移動するように調整 */
.parallax-container, .item-contents {
  position: relative;
  z-index: 10; /* 背景より前面に */
}


.subtitle h2 {
  transition: transform 1.0s ease, filter 1.0s ease; /* トランジションの時間とタイプを指定 */
  cursor: pointer; /* マウスカーソルを合わせたときにポインターに変更する */
}

.subtitle h2:hover {
  transform: scale(1.2); /* ホバー時に文字サイズを10%拡大 */
  filter: blur(4px); /* ホバー時にぼやけた効果を追加 */
}


.content-section {
  height: 120vh; /*アバウト項目の間隔を変更する場合はここ*/
  padding: 8px;
  font-family: 'Playfair Display', serif; 
}



.sp_nav {
  display: none; /* PCやタブレットではハンバーガーメニューは非表示 */
}

.item-contents h2 {
  letter-spacing: 0.15em;
}








/* メニュー部分 */

.background-section2{
  position: relative; /* 子要素の絶対位置の基準点として機能させる */
  margin-top: 150px;
  top: 0;
  left: 0;
  width: 80%;
  height: 100vh; /* 画面の高さ全体をカバー */
  background-repeat: no-repeat;
  background-position: center center; /* 画像が中央に来るように調整 */
  background-attachment: fixed; /* スクロールしても背景画像は固定 */
  background-size: auto 100vh; /* 画像の高さがビューポートの100%になるように調整 */
  z-index: -1; /* コンテンツの背後に配置 */
  opacity: 0.8;
}

.menu-contents {
margin-top: 800px;
  text-align: center;
  height: 130vh;
  padding: 8px;
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
}

.menu-contents2 {
    text-align: center;
    height: 130vh;
    padding: 8px;
    font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
  }

.menu-section1 {
  position: absolute; /* 親要素内での絶対位置指定 */
  top: 50%; /* 中央の上端から50% */
  left: 50%; /* 中央の左端から50% */
  transform: translate(-50%, -50%); /* 中心に移動 */
  color: white;
  text-align: left;
  z-index: 10; /* 背景より前に表示 */
  
}


  
.menu-section1 h2{
font-size: 22px;
color: #fff;
letter-spacing: 0.12em;
text-shadow: 1px 2px 3px #000000;
}

.menu-section1 h4{
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 1px 2px 2px #000000;
  }


  .menu-section2 {
    position: absolute; /* 親要素内での絶対位置指定 */
    top: 50%; /* 中央の上端から50% */
    left: 75%; /* 中央の左端から50% */
    transform: translate(-50%, -50%); /* 中心に移動 */
    color: white;
    text-align: left;
    z-index: 10; /* 背景より前に表示 */
    
  }
  
  
    
  .menu-section2 h2{
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.12em;
text-shadow: 1px 2px 3px #000000;
  }
  
  .menu-section2 h4{
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.1em;
    text-shadow: 1px 2px 2px #000000;
    }



/* //アクセス部分 */
.access-contents {
  text-align: center;
  height: 130vh;
  padding: 8px;
  font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
}


  .blur{
    animation-name:blurAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
  }
   
  .blurTrigger{
      opacity: 0;
  }

  
/* フッター部分 */

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;
}







/* タブレット表示 */
@media (max-width: 1024px) {
  .content-section {
    height: 50vh;

  }
  
  
  .parallax-container {
    width: 100%;
      margin: 0 5px; /* 余白を調整 */
      padding: 0;
  }

  .parallax-infol h3, .parallax-infor h3 {
      font-size: 18px; /* ヘッダのフォントサイズを小さくする */
  }

  .parallax-infol h4, .parallax-infor h4 {
      font-size: 14px; /* 本文のフォントサイズを小さくする */
  }

  .parallax-bgl, .parallax-bgr {
    width: 100%;
      flex: 1 1 30%; /* 画像が画面の40%を占めるように調整 */
      overflow: hidden;
     padding: 0px 40px 0px 20px;
      position: relative; /* 追加: 子要素の位置決めの基準点 */
  }

  .parallax-infol, .parallax-infor {
  flex: 1 1 50%; /* テキストが60%を占めるように調整 */
    padding: 20px; /* パディングを調整して余白を設ける */
    display: flex;
    flex-direction: column;
    margin-top: 280px;
}
  
.parallax-bgl img, .parallax-bgr img{
  margin-top: 300px;
  margin-left: 10px;
  transition: transform 1s ease; /* 修正: トランジション効果の適用 */
  transform-origin: center; /* 追加: 拡大縮小の中心を指定 */
}


.parallax-bgl img:hover, .parallax-bgr img:hover {
  transform: scale(1.1); /* 修正: ホバー時に画像を1.1倍に拡大 */

}

.swiper-top-nav {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1000; /* Swiperよりも前面に表示 */
  display: flex;
  gap: 10px; /* リンク間の隙間 */
  text-shadow: 1px 1px 2px rgb(32, 32, 32);
}

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

.logo {
  top: 10px;
  left: 30px
}

.logo img {
  width: 100px; /* タブレット表示でのロゴのサイズ調整 */
  height: auto;
  object-fit: cover; /* 画像がコンテナにフィットするように調整 */
  clip-path: inset(70px 0 0 0); /* 上から30pxを切り取る */
  position: relative; /* 相対位置指定 */
  top: -70px; /* 上に30px移動 */
}

.item-contents {
  margin-top: 2500px;
}
}









/* スマートフォン表示 */
@media (max-width: 600px) {

  .content-section {
    height: 50vh;
  }

  .header-gradient {
    height: 70px; /* グラデーションの高さを調整 */
  }
  
  .parallax-container {
    width: 100%;
      margin: 0 5px; /* 余白を調整 */
      padding: 0;
  }

  .parallax-infol h3, .parallax-infor h3 {
      font-size: 18px; /* ヘッダのフォントサイズを小さくする */
  }

  .parallax-infol h4, .parallax-infor h4 {
      font-size: 14px; /* 本文のフォントサイズを小さくする */
  }

  .parallax-bgl, .parallax-bgr {
    width: 100%;
      flex: 1 1 40%; /* 画像が画面の40%を占めるように調整 */
      overflow: hidden;
      position: fixed;
      padding: 0;
  }

  .parallax-infol, .parallax-infor {
  flex: 1 1 50%; /* テキストが60%を占めるように調整 */
    padding: 20px; /* パディングを調整して余白を設ける */
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-left: 40%;
    margin-top: 260px;
}
  
.parallax-bgl img, .parallax-bgr img{
  transition:1s all;
  width: 38%;
  margin-top: 300px;

}


.parallax-bgl img:hover, .parallax-bgr img:hover {
  transform: none;
  transition: none;
}

.swiper-top-nav {
  display: none; /* 通常のナビゲーションを非表示に */
}

.hamburger-menu {
  display: flex; /* ハンバーガーメニューを表示 */
  flex-direction: column;
  align-items: center;
  position: absolute; /* 必要に応じて調整 */
  top: 20px;
  right: 30px;
}

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

.logo {
  top: 0;
  left: 10px
}

.logo img {
  width: 110px; /* スマートフォン表示でのロゴのサイズ調整 */
  height: auto;
  object-fit: cover; /* 画像がコンテナにフィットするように調整 */
  clip-path: inset(20px 0 0 0); /* 上から30pxを切り取る */
  position: relative; /* 相対位置指定 */
  top: -20px; /* 上に30px移動 */
}

.item-contents {
  margin-top: 1800px;
}

/*------------------------------------
ヘッダー a hover:下線アンダーライン ↓
------------------------------------*/
header ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
header ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #4D1A06;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
header ul li a:hover {
  color: #4D1A06;
}
header ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*------------------------------------
ヘッダー pcハンバーガーメニュー ↓
------------------------------------*/

/*------------------------------------
ヘッダー spハンバーガーメニュー ↓
------------------------------------*/
header .sp_nav {
  text-align: center;
  
}
.sidemenu {
  height: 100vh;
  padding-top: 100px;
  position: fixed;
  right: -35%; /*メニュー幅*/
  transition: all 0.6s;
  top: 0;
  width: 35%; /*メニュー幅*/
  z-index: 1001;
  background-color: #000a21;
  opacity: 0.8
}
.sidemenu nav ul li {
  padding: 20px;
}
.hamburger {
  
  cursor: pointer;
  height: 60px;
  position: absolute;
  right: 30px;
  top: 1px;
  width: 60px;
  z-index: 1002;
}
.hamburger span {
  background-color: #fff;
  height: 4px;
  left: 15px;
  position: absolute;
  transition: all 0.6s;
  width: 30px;
}
.hamburger_linetop {
  top: 20px;
}
.hamburger_linecenter {
  top: 29px;
}
.hamburger_linebottom {
  top: 38px;
}

/*------------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open .sidemenu {
  right: 0;
}
.nav_open .hamburger_linetop {
  top: 26px;
  transform: rotate(45deg);
}
.nav_open .hamburger_linecenter {
  left: 50%;
  width: 0;
}
.nav_open .hamburger_linebottom {
  top: 26px;
  transform: rotate(-45deg);
}
.nav_open .overlay {
  opacity: 0.8;
  visibility: visible;
}
/*------------------------------------
メニュークリック後メニュー外の背景 ↓
------------------------------------*/
.overlay {
  background-color: #000;
  cursor: pointer;
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all 0.6s;
  visibility: hidden;
  width: 100vw;
  z-index: 1000;
}


.hamburger-menu {
  display: none; /* Initially hidden */
  flex-direction: column;
  align-items: center;
  z-index: 1100;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
}

.hamburger-icon span {
  height: 2px;
  background: white;
  margin: 5px 0;
  width: 30px;
}


.hamburger-links a {
  color: white;
  padding: 0px;
  display: block;
  text-align: center;
}

.swiper-top-nav {
  display: none; /* 通常のナビゲーションを非表示にする場合 */
}

.hamburger-menu, .logo {
  display: block; /* 必ず表示する */
  z-index: 1101; /* 他の要素よりも前に表示 */
}


.background-section {
    background-image: none;
    background-color: black;
}

.sp_nav {
  display: block; /* スマートフォン時のメニューを常に表示する */
  z-index: 1102; /* 最前面に */
}


}