body {
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #fafafa;
  margin:0 auto;
  padding-top: 86px;/* ヘッダーの高さ分の余白をいれ、うしろの要素が隠れないようにする */
  
  width: 980px;/*ページの幅 */
  
}
header {
  position: fixed; /* ヘッダーを固定する */
  top: 0;          /* 画面の上端に配置 */
  background-color: rgb(255, 252, 245); /* ヘッダ色 */
  padding: 4px 300px 0 300px; /*　隙間 上、右、下、左*/
  box-sizing: border-box;
    height: 90px; /* ヘッダーの高さを指定する */
 
}


/******* ヘッダーのスタイル ********/
.menu-container {
  margin: 0;
}

.menu-container .menu-A {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu-A .menu-item {
  flex: 1;
}

.menu-container .menu-A .menu-item a {
  background: #fff;
  border: 1px solid #ccc;
  border-right: none;
  color: #420818c9;
  display: block;
  padding:  9px 1em;/*メニュー枠大きさ*/
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  font-size: 14px; 
  white-space: nowrap;

}

/* フォトギャラリー設定 */
.menu-container .menu-A .menu-item:nth-child(4) a {
  font-size: 13px; 
  padding: 0em 1em;/*メニュー枠大きさ*/
}


.menu-container .menu-A .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu-A .menu-item:last-child a {
  border-right: 1px solid #ccc;
}

 /* pc ルーセント位置*/

  .lucent{
    position: absolute;
    top:7px;
    left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .lucent img {width:270px;}/*ルーセントロゴ縮小*/
  
 /* ログイン位置  設定　*/


input[type="password"] {
  
    position: absolute;
    top:50px;
    left:350px;
  
      align-items: center;
    justify-content: center;

} 

input[type="submit"] {
  
    position: absolute;
    top:48px;
    left:490px;
    display: flex;
      align-items: center;
    justify-content: center;
}

.new-img{
    position: absolute;
    top:42px;
    left:500px;
    display: flex;
      align-items: center;
    justify-content: center;
}

.login-pr{
    position: absolute;
    top:32px;
    left:400px;
    display: flex;
      align-items: center;
    justify-content: center;
}

.logout-pr{
    position: absolute;
    top:48px;
    left:600px;
    display: flex;
      align-items: center;
    justify-content: center;
}

.new-img{
    position: absolute;
    top:42px;
    left:700px;
    display: flex;
      align-items: center;
    justify-content: center;
}



/* PCデフォルト（4列） */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1.3;
  object-fit: cover;
  border-radius: 0px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  
  filter: brightness(.75); 
}




/* スマホ表示（3列グリッド） */
/* --- スマホ用 --- */
@media (max-width: 768px) {
body { width: 100%;}
   
  .gallery {
    grid-template-columns: repeat(3, 1fr);
   gap: 3px;

  }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1.3; /* 長方形で統一 */
  object-fit: cover;   /* トリミングして整える */
  display: block;
}
  .detail-container {
    flex-direction: column;
  
  font-size: 20px;
  border: 1px solid #ddd;
  border-radius: 0px;
  resize: vertical;

}


.detail-caption textarea {
 resize: vertical;
width: 360px; 
margin: 0 auto; 
display: block; 
 border: 2px solid #cccccc;
border-radius: 2px;

}


.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 /* パスワード位置  設定　*/

input[type="password"] {
    position: absolute;
    top:2px;
    left:240px;
    display: flex;
      align-items: center;
    justify-content: center;
}
/* ログイン位置*/

input[type="submit"] {
    position: absolute;
    top:28px;
    left:240px;
    display: flex;
      align-items: center;
    justify-content: center;
}
.new-img{
    position: absolute;
    top:5px;
    left:300px;
    display: flex;
      align-items: center;
    justify-content: center;
}

.login-pr{
    position: absolute;
    top:25px;
    left:240px;
    display: flex;
      align-items: center;
    justify-content: center;
}


.logout-pr{
    position: absolute;
    top:20px;
    left:210px;
    display: flex;
      align-items: center;
    justify-content: center;
}
}

/* スマホ設定ここまで*/

input, select, textarea {
font-size: 16px;
}

.updateButton {font-size: 16px;}

/*ヘッダー　  スマホ設定*/
@media screen and (max-width: 767px) {
  .menu-container .menu-A {
    flex-wrap: wrap;
    width: 100%;
  }

  .gallery { padding-top: 55px; }
  .menu-container .menu-A .menu-item {
    flex: auto;
    width:30%;
  }
  .menu-container .menu-A .menu-item:nth-child(3n) a {
    border-right: 1px solid #ccc;
  }
  .menu-container .menu-A .menu-item:nth-child(n + 4) a {
    border-top: none;
  }
  .menu-container .menu-A .menu-item a {
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    color: #420818c9;
    display: block;
    padding: 0.65em 0.5em;/*メニュー枠大きさ*/
    text-align: center;
    text-decoration: none;
  }
   
 
  
   /* フォトギャラリー スマホ設定 */
.menu-container .menu .menu-item:nth-child(4) a {
  display: block;
  line-height:14px;
  font-size: 14px; 
  padding:0em 0em;/*メニュー枠大きさ*/
}

 .menu_top1 .menu_top2 {font-size :12px;}
 .lucent{
    position: absolute;
    top:0px;
    left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .lucent img {width:200px;}/*ルーセントロゴ縮小*/
  
 

}           

@media screen and (max-width: 767px){
  .br-pc {display: none;} 
}

             /*ルーセント表示切替*/
 .mapsp { display: none; }

 @media not all and (min-width: 768px) {
     .mappc {
      display: none;
      }
     .mapsp {
      display: block;
      }
   header {    
     padding: 60px 0px 30px 0px; /*　ヘダー上からの距離、右、下、左 変えない*/          
      } 
   }


   /* 動画用 サムネイル*/


.video-thumb {
  position: relative;
  width: 240px;
  height: 312px;
  overflow: hidden;
}

/* 動画本体を後ろにする */
.video-thumb video {
  width: 100%;
  aspect-ratio: 1 / 1.3;
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
  position: relative;
  z-index: 0; /* ★ これが重要！動画を後ろにする */
}

.video-thumb .video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.gallery video  {
  width: 100%;
  aspect-ratio: 1 / 1.3; /* 横1：縦1.3の比率に固定 */
  object-fit: cover;     /* 中央をトリミングして埋める */
  border-radius: 0;
  display: block;
}

/*スマホ宇プサムネイル*/

@media screen and (max-width: 767px) {
  /* スマホ用：3列グリッドに */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }

  /* 各動画サムネイル枠（グリッドに合わせる） */
  .video-thumb {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.3; /* 縦長比率で固定 */
  }

  /* 動画の中身をフィットさせる */
  .gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 動画アイコンはスマホでは非表示 */
  .video-icon {
    display: none !important;
  }
}


/* ここから 再生アイコンの丸い背景 */
.video-thumb .play-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.7); /* 白っぽい半透明 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 80; /* ★ 動画より前に出す */
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-thumb .triangle {
  width: 0;
  height: 0;
  border-left: 20px solid rgba(0, 0, 0, 0.8);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}



/* ホバーで少し拡大して明るく */
.video-thumb:hover .play-circle {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 0.9);
}


@media screen and (max-width: 767px) {
  .video-thumb .play-circle {
    width: 48px;
    height: 48px;
  }

  .video-thumb .triangle {
    border-left: 12px solid rgba(0, 0, 0, 0.85);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
}

/* 並び替えモードボタン（右下固定） */
#sortToggleBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #777; /* OFFの色 */
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

/* ON時の色 */
#sortToggleBtn.active {
    background-color: #0080ff;
}

/* アイコン */
#sortToggleBtn img {
    width: 18px;
    height: 18px;
}