/* assets/css/campuses.css */

/* まず about.css のデザインを継承 */
@import url("about.css");

/* ===============================
   全体レイアウト
================================= */

.campus-section {
  padding: 80px 16px;
  position: relative;
  overflow: hidden;
}

.campus-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* 背景：淡いグラデ＋ストライプ */
.campus-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,205,151,0.32), transparent 55%),
    radial-gradient(circle at 88% 100%, rgba(180,234,255,0.32), transparent 55%),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.5),
      rgba(255,255,255,0.5) 14px,
      rgba(255,245,225,0.7) 14px,
      rgba(255,245,225,0.7) 28px
    );
  opacity: 0.7;
  pointer-events: none;
}
.campus-section > * {
  position: relative;
}

/* ===============================
   エリアナビ（ピル）
================================= */

.campus-section--nav {
  padding-top: 60px;
  padding-bottom: 40px;
}

.campus-area-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.campus-area-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff7e0;
  border: 1px solid #ffd28a;
  font-size: 15px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}
.campus-area-pill::before {
  content: "📍";
}
.campus-area-pill:hover {
  background: #ffebbc;
  border-color: #ffb257;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* ===============================
   エリア見出し
================================= */

.campus-area-heading {
  font-size: 26px;
  font-weight: 700;
  margin: 60px 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.campus-area-heading::before {
  content: "★";
  font-size: 16px;
  color: #ff9a3c;
}

/* ===============================
   キャンパス一覧グリッド
================================= */

.campus-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
  margin-bottom: 56px;
  position: relative;
}

/* 背景：線路みたいな線（遊び） */
.campus-list::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 20px;
  height: 2px;
  background-image: linear-gradient(
    to right,
    rgba(255,154,60,0.5) 0,
    rgba(255,154,60,0.5) 40px,
    transparent 40px,
    transparent 60px
  );
  background-size: 60px 2px;
  opacity: 0.35;
  pointer-events: none;
}

/* ===============================
   キャンパスカード本体
================================= */

.campus-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding-bottom: 28px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* 色味グラデーション（共通ベース） */
.campus-card::before {
  content: "";
  position: absolute;
  inset: -40% -40%;
  opacity: .8;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(255,179,71,0.25), transparent 60%);
}
.campus-card > * {
  position: relative;
}

/* -------------------------------
   写真２枚レイアウト
-------------------------------- */

/* 写真２枚レイアウト（PC） */
.campus-card-photo-row {
  display: flex;
  gap: 8px;
  padding: 14px 16px 0;
}

.campus-card-photo {
  border-radius: 18px;
  overflow: hidden;
  background: #f5f5f5;
}

/* メイン：校舎写真 → 幅広・高さ自動で全体を見せる */
.campus-card-photo--main {
  flex: 1.5;
}
.campus-card-photo--main img {
  width: 100%;
  height: auto;
  max-height: 180px; /* ★ 追加：PCで大きくなりすぎない */
  display: block;
  object-fit: contain; /* 建物全体が見えるように */
}

/* サブ：活動写真 → 少し小さめ・カバーで動き */
.campus-card-photo--sub {
  flex: 1;
}
.campus-card-photo--sub img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ホバー時：少しだけズーム */
.campus-card:hover .campus-card-photo--main img,
.campus-card:hover .campus-card-photo--sub img {
  transform: scale(1.03);
  transition: transform .35s ease;
}

/* ===============================
   タグ・アイコン・テキスト
================================= */

/* エリアタグ */
.campus-card-tag {
  position: absolute;
  top: 10px;
  left: 18px;
  background: rgba(255,255,255,0.95);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.08);
}

/* アイコン */
.campus-card-icon {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.22));
  transition: transform .2s ease;
}
.campus-card:hover .campus-card-icon {
  transform: translateY(-4px) rotate(6deg);
}

/* 校名・サブテキスト・本文 */
.campus-card-name {
  font-size: 22px;
  margin: 18px 20px 6px;
  font-weight: 700;
}
.campus-card-sub {
  margin: 0 20px 12px;
  font-size: 15px;
  color: #666;
}
.campus-card-text {
  margin: 0 20px 16px;
  font-size: 17px;
  line-height: 1.9;
  color: #444;
}

/* 追加情報 + ラベル */
.campus-info-list {
  list-style: none;
  padding: 0;
  margin: 0 20px 18px;
  font-size: 16px;
  line-height: 1.8;
}
.campus-info-label {
  font-weight: 700;
  color: #333;
}

/* メタ情報（設置形態など） */
.campus-card-meta {
  margin: 0 20px 16px;
  font-size: 15px;
  color: #555;
}
.campus-meta-label {
  font-weight: 600;
}

/* ボタン */
.campus-card-btn {
  display: inline-flex;
  margin-left: 20px;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: #ff9a3c;
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(255,154,60,0.45);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.campus-card-btn::after {
  content: "➜";
}
.campus-card-btn:hover {
  background: #ffb257;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(255,154,60,0.6);
}

/* ===============================
   カードごとの色味
================================= */

.campus-card--ibaraki::before  { background: radial-gradient(circle at top right, rgba(255,187,92,0.35),transparent 60%); }
.campus-card--nagano::before   { background: radial-gradient(circle at top right, rgba(132,204,255,0.35),transparent 60%); }
.campus-card--shizuoka::before { background: radial-gradient(circle at top right, rgba(255,196,214,0.35),transparent 60%); }
.campus-card--kyoto::before    { background: radial-gradient(circle at top right, rgba(193,151,255,0.35),transparent 60%); }
.campus-card--osaka::before    { background: radial-gradient(circle at top right, rgba(255,214,102,0.35),transparent 60%); }
.campus-card--fukuoka::before  { background: radial-gradient(circle at top right, rgba(126,220,207,0.35),transparent 60%); }
.campus-card--okinawa::before  { background: radial-gradient(circle at top right, rgba(255,182,193,0.35),transparent 60%); }

/* ===============================
   レスポンシブ
================================= */

@media (max-width: 768px) {
  .campus-section {
    padding: 56px 16px;
  }

  .campus-area-heading {
    font-size: 20px;
    margin-top: 40px;
  }

  /* 写真は縦積み寄りに */
  .campus-card-photo-row {
    flex-direction: row;
    gap: 6px;
    padding: 10px 12px 0;
  }

  .campus-card-name {
    font-size: 20px;
  }

  .campus-card-text {
    font-size: 16px;
  }

  .campus-info-list {
    font-size: 15px;
  }

  .campus-list::before {
    display: none;
  }
}