/* バナー下のリンクの色 */
.text-blue-700 {
  color: #1d4ed8; 
}

.records {
  margin-top: 11.5rem;
  background-color: rgb(255 255 255);

}


/* ===== レスポンシブ共通 ===== */
@media (min-width: 640px) {
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}


/* ===== ヘッダー関連 ===== */
.member-page-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  background-color: rgba(107, 114, 128, 0.7);
  z-index: 50;
}

.icon-container {
  color: white;
  width: 3rem;
  height: 3rem;
}

.copy-text {
  position: absolute;
  width: 91.666667%;
  left: 50%;
  top: 33.333333%;
  transform: translate(-50%, -33.333333%);
  z-index: 50;
}

.logo-container {
  position: absolute;
  width: 91.666667%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  height: 80px;
}

.logo-img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.main-img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

/* ===== スライダー部分 ===== */
.slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.slides {
  display: flex;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;      /* ← これが「短い方に合わせて拡大」の指定 */
  object-position: center; /* ← 中央を基準にトリミング */
  background-color: #000;  /* 念のため（読み込み時のチラつき対策） */
}


/* ドットナビ */
.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 20px;
  display: flex;
  gap: 8px;
  z-index: 60;
}

.dot {
  color: rgba(255,255,255,0.6);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s;
}

.dot.active,
.dot:hover {
  color: white;
}


/* ===== メニュー関連 ===== */
.menu-item {
  width: 33.333333%;
  padding: 0.5rem 0;
  margin:0 auto;
  border-bottom: 1px solid var(--color-mitsumine);

}

.menu-item:hover {
  background-color: rgb(243 244 246);
  cursor: pointer;
  margin:0 auto;
}

.menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;      /*==アイコンセンター揃え==*/
  margin-bottom: 20px;      /*==アイコン下マージン==*/
}

.menu-label {
  text-align: center;
  font-size: 1rem;
  font-weight:600;
  color: var(--color-mitsumine);
  margin-bottom: 10px;
}

.menu-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-mitsumine);
}



/* ===== 山行記録セクション ===== */
.records-badge {
  position: absolute;
  width: 250px;
  height: 250px;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -10;
}

img.backmountain{
  position: relative;
  z-index:-30;
}

.mt-\[160px\] {
  margin-top: 160px;
}

/* ===== レスポンシブ ===== */
@media (min-width: 640px) {
  .sm\:aspect-\[14\/5\] { aspect-ratio: 14/5; }
  .sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .member-page-btn {
    width: 6rem;
    height: 6rem;
  }
  .copy-text {
    width: 60%;
  }
  .menu-item {
    width: 132px;
    padding: 0.5rem 0;
  }
}

@media (min-width: 768px) {
  .copy-text {
    width: 50%;
    top: 25%;
    transform: translate(-50%, -25%);
  }
  .logo-container {
    width: 66.666667%;
    height: 120px;
  }
}

/* ===== Material Ripple Effect ===== */
.mat-ripple {
  overflow: hidden;
  position: relative;
}

.mat-ripple:not(:empty) {
  transform: translateZ(0);
}


/* 山行記録/

/* --- セクション全体 --- */
.record-content {
  background-color: #F7F6F2;
  padding: 60px 0;
  margin: 0 auto;
}


/* --- 各カード --- */
.record-card {
  background: #fff;
  max-width: 960px;
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto 16px;  /* ← これで中央寄せになる */
}

/* --- 横並び配置 --- */
.record-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* --- 左側（画像） --- */
.record-images {
  flex: 0 0 45%; /* 通常は画像45% */
}

/* 画像2枚のときは画像側をより広く（約2:1の比率） */
.record-inner:has(.record-images ul li:nth-child(2)) .record-images {
  flex: 0 0 60%;
}

/* テキスト側は自動で残り幅 */
.record-info {
  flex: 1;
}

/* --- 画像リスト --- */
.record-images ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.record-images li {
  flex: 1 1 100%;
}

/* 画像2枚のときは横並び */
.record-images ul:has(li:nth-child(2)) li {
  flex: 1 1 calc(50% - 6px);
}

.record-images li img {
  width: 100%;
  height: 100%;           /* ← アスペクト比を保つ 元はauto */
  border-radius: 4px;
  /*box-shadow: 0 1px 6px rgba(0,0,0,0.1);*/
  max-height: 250px;      /* ← 高さの上限 */
  object-fit: contain;    /* ← 画像を縮小して収める（切らない） */
  background-color:#F0F2F5;
}

.record-images li .caption {
  display: block;
  font-size: 0.8rem;
  color: #475569;
  margin-top: 4px;
  text-align: center;
}

/* --- 右側（テキスト） --- */
.record-info {
  flex: 1;
}

.record-info dl {
  margin: 0;
  padding: 0;
}

.record-info dd {

  padding: 0;
  display: block;
}

/* 山行日（上段） */
.record-date {
  color: #64748b; /* グレー寄り */
  font-size: 0.9rem;
  margin-bottom: 5px;
}

/* 目的の山・沢（タイトル） */
.record-mountain {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 12px;
}

/* 本文 */

.record-text {
  margin-top: 8px;
  line-height: 1.6;
  color: #374151;
  font-size: 0.88rem;
  white-space: normal; /* ← これに戻す */
}

/* デフォルトは横並び */
.record-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* テキストが長い場合は縦並びに */
.record-card.long-text .record-inner {
  flex-direction: column;
}
/* long-text のときは順番を逆転（テキスト→画像） */
.record-card.long-text .record-info {
  order: -1;
}

/* --- スマホでは縦並び --- */
@media (max-width: 768px) {
  .record-inner {
    flex-direction: column;
  }

  .record-images,
  .record-info {
    flex: 1 1 100%;
  }

  .record-images ul {
    flex-direction: column;
  }

  .record-images li {
    flex: 1 1 100%;
  }
  .record-info {
    order: -1; /* テキストを上に */
  }
}
/*アイコン*/
.fixed-icons {
  position: fixed;
  top: 0px;
  right: 0px;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: flex-end;
  gap: 14px; /* アイコン同士の間隔 */
  z-index: 9999;
}

/* Instagramアイコン */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-container-instagram {
  width: 84px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.icon-container-instagram img {
  width: 32px;
  height: 32px;
}



/* 会員ページボタン */
.member-page-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 70px;
  background-color: #333;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.login-icon:hover {
  background-color: #555;
}

.icon-container {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  white-space: nowrap;
}

  .kaigyo{
    display:none;
  }

  li img{margin:0 auto;}

.slide-sp{
  display:none;
}
.slide-pc{
  display:block;
}


/* ===== 📱 モバイル用（幅640px未満） ===== */
@media (max-width: 639px) {
  .menu-item {/*padding調整*/
    width: auto;
    padding: 0.5rem 0;
    /*margin:0 auto;
    border-bottom: 1px solid var(--color-mitsumine);*/
  }

  .login-icon {
    width: 50px;
    height: 50px;
  }

  .icon-container {
    width: 24px;
    height: 24px;
  }

  .login-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .label {
    font-size: 8px;
    /* display: none;  */
  }

  .icon-container-instagram {
    width: 50px;
    height: 25px;
  }

  .icon-container-instagram img {
    width: 20px;
    height: 20px;
  }
  .kaigyo{
    display:inline;
  }
  .text-mitsumine { line-height:1.5em; }

  .record-content {
  background-color: #F7F6F2;
  padding: 60px 16px;
  margin: 0 auto;
}
img.slide-sp{
  display:block;
}
img.slide-pc{
  display:none;
}

}



/* ===== トップメニュー サブメニュー ===== */

.menu-item {
  position: relative;
}

/* button を a と同じ見た目に */
.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: inherit;
  cursor: pointer;
}

/* サブメニュー本体 */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 8px 0;
  z-index: 100;
}

.submenu li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #1e293b;
  white-space: nowrap;
}

.submenu li a:hover {
  background-color: #f3f4f6;
}

/* 開いた状態 */
.menu-item.open .submenu {
  display: block;
}