@charset "UTF-8";

/* =========================================================
   共通変数（カラー設定）
   =========================================================
   ここの色（#から始まるカラーコード）を変更すると、
   サイト全体の対応する色が一括で変わります。
========================================================= */
:root {
  --bg-color: #ffffff;
  /* 背景色（白） */
  --text-main: #333333;
  /* メインの文字色（濃いグレー） */
  --text-muted: #666666;
  /* サブの文字色（少し薄いグレー） */

  /* アクセントカラー（メニューなどに使う色） */
  --accent-pink: #FF8095;
  /* ピンク */
  --accent-blue: #6FD3F0;
  /* 水色 */
  --accent-orange: #FFA733;
  /* オレンジ */
  --accent-teal: #009096;
  /* 青緑 */
  --accent-gray: #808080;
  /* グレー */

  --footer-bg: #2D3D54;
  /* フッターの背景色（濃紺） */
  --border-color: #e6e6e6;
  /* 枠線の色 */

  /* サイト全体で使うフォント（字体） */
  --font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* コンテンツ部分の最大横幅 */
  --container-width: 970px;
}

/* =========================================================
   サイト全体のリセット設定
========================================================= */
* {
  margin: 0;
  /* ブラウザが最初から持っている余白を消す */
  padding: 0;
  /* ブラウザが最初から持っている内側の余白を消す */
  box-sizing: border-box;
  /* paddingを含めたサイズで横幅を計算させる設定 */
}

body {
  font-family: var(--font-family);
  /* さきほど一番上で決めたフォントを使う */
  color: var(--text-main);
  /* 基本の文字色 */
  background-color: var(--bg-color);
  /* 基本の背景色 */
  line-height: 1.8;
  /* 行間を広めにとり読みやすくする */
  letter-spacing: 0.05em;
  /* 文字同士の隙間を少し空ける */
}

/* リンク（<a>タグ）の基本設定 */
a {
  text-decoration: none;
  /* リンクの下線を消す */
  color: inherit;
  /* 文字色は親要素から引き継ぐ */
  transition: all 0.3s ease;
  /* マウスを乗せた時に0.3秒かけてフワッと変化させる */
}

/* リスト（<ul>タグ）の・マークを消す */
ul {
  list-style: none;
}

/* =========================================================
   ヘッダー部分のデザイン
========================================================= */
.header {
  background-color: var(--bg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* ヘッダーの下にうっすら影をつける */
  /*position: sticky;*/
  /* スクロールしてもヘッダーが画面上部についてくる設定 */
  top: 0;
  z-index: 1000;
  /* ヘッダーが上に表示されるよう重なり順を一番上に */
}

.header-container {
  max-width: var(--container-width);
  margin: 0 auto;
  /* 左右の余白を自動にして中央揃えにする */
  display: flex;
  /* 中身を横並びにする */
  justify-content: space-between;
  /* ロゴとメニューを左右に離す */
  align-items: center;
  /* 縦方向の中央に揃える */
  height: 90px;
  padding: 0 20px;
}

.logo img {
  height: 60px;
  /* ロゴの高さを設定（横幅は自動） */
  width: auto;
  transition: transform 0.3s;
}

/* ロゴにマウスを乗せた時に少し大きくする */
.logo img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  /* メニュー項目を横並びにする */
  height: 100%;
}

.nav-links li {
  height: 100%;
}

.nav-links a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
  font-weight: bold;
  /* 太字にする */
  font-size: 0.95rem;
  color: var(--text-main);
  border-top: 3px solid transparent;
  /* 初期状態は透明な上の線を引いておく */
  position: relative;
}

/* 
   メニューのホバーエフェクト（マウスを乗せた時の動き）
   おにラビ公式ページにあるカラフルなラインを再現
*/
.nav-links li:nth-child(1) a:hover {
  color: var(--accent-pink);
  border-top-color: var(--accent-pink);
  background: rgba(255, 128, 149, 0.05);
}

.nav-links li:nth-child(2) a:hover {
  color: var(--accent-blue);
  border-top-color: var(--accent-blue);
  background: rgba(111, 211, 240, 0.05);
}

.nav-links li:nth-child(3) a:hover {
  color: var(--accent-orange);
  border-top-color: var(--accent-orange);
  background: rgba(255, 167, 51, 0.05);
}

.nav-links li:nth-child(4) a:hover {
  color: var(--accent-teal);
  border-top-color: var(--accent-teal);
  background: rgba(0, 144, 150, 0.05);
}

.nav-links li:nth-child(5) a:hover {
  color: var(--accent-gray);
  border-top-color: var(--accent-gray);
  background: rgba(128, 128, 128, 0.05);
}

/* =========================================================
   メインコンテンツの大枠
========================================================= */
.container {
  max-width: var(--container-width);
  /* ここで指定した横幅以上には広がらない */
  margin: 40px auto;
  /* 上下は40px余白、左右は自動（中央寄せ） */
  padding: 0 20px;
}

/* =========================================================
   トップ画像のエリア（Heroセクション）
========================================================= */
.hero {
  position: relative;
  /* 文字を画像の上に重ねるための基準にする */
  width: 100%;
  /* 画面横幅いっぱいに広げる */
  /* border-radius: 12px; 横幅いっぱいのときは角を丸くしない方が自然なので削除 */
  overflow: hidden;
  /* はみ出た画像を隠す */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

/* 画像サイズと高さの設定 */
.hero img {
  width: 100%;
  height: auto;
  /* 縦横比を保ち、不要な切り取りを防いで写真全体が常に表示されるようにする */
  display: block;
  filter: brightness(0.98);
  /* トーンを明るくする（暗さを軽減） */
  transition: filter 0.5s ease;
}

/* マウスを乗せると画像の明るさを元に戻す */
.hero:hover img {
  filter: brightness(1.0);
  /* ホバー時はフィルターなし（100%の明るさ） */
}

/* 画像の上に重なる文字の設定 */
.hero-text {
  position: absolute;
  /* 親要素(.hero)に対して絶対的な位置に配置する */
  top: 15%;
  /* 上から15%の位置に移動 */
  left: 5%;
  /* 左から5%の位置に移動 */
  color: #fff;
  /* ウィンドウ幅に応じて文字サイズを自動調整（最小設定, 基本設定=画面幅の4.5vw, 最大設定） */
  font-size: clamp(1.5rem, 4.5vw, 3.5rem);
  font-weight: 900;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  /* 文字が目立つように黒い影を濃くつける */
  line-height: 1.4;
  /* 改行の幅を調整するため追加 */
  letter-spacing: 0.1em;
  pointer-events: none;
  /* 文字の上でもクリック判定をブロックしないようにする */
}

/* 追加した小さいキャッチコピー（サークル名）の設定 */
.hero-subtext {
  display: block;
  /* 文字を新しい行に配置 */
  font-size: 0.45em;
  /* メインテキストの45%の大きさ（自動で縮尺調整されます） */
  font-weight: normal;
  /* メインテキストより細く（通常の太さ）する */
  margin-top: 8px;
  /* 上の文字とのすき間 */
  padding-left: 20em;
  /* 上の「思い出がある」の開始位置に合わせるため、全角1文字分（6em）右にずらす */
  letter-spacing: 10.em;
  /* 文字同士の間隔を少し空ける */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  /* 小さくても見やすいように別で濃い影を置く */
}

/* =========================================================
   レイアウト（左メイン・右サイドバー）
========================================================= */
.layout {
  display: flex;
  /* 横並びにする */
  gap: 40px;
  /* 左側と右側の間のすき間 */
  align-items: flex-start;
  /* 右側のウィジェットが下に伸びないようにする */
}

.main-content {
  flex: 1;
  /* 残りの幅をすべて左側にする */
}

.sidebar {
  width: 300px;
  /* 個々の幅を300pxにする */
  flex-shrink: 0;
  /* 画面が狭くなってもサイドバーは縮小しないようにする */
}

/* =========================================================
   見出し（H1, H2など）のデザイン
========================================================= */
h1.page-title {
  font-size: 2.2rem;
  color: var(--accent-teal);
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 2px solid var(--border-color);
  /* 下線を引く */
  padding-bottom: 15px;
}

h2.section-title {
  font-size: 1.6rem;
  color: var(--text-main);
  border-left: 5px solid var(--accent-pink);
  /* 左側にピンクの縦線を引く */
  padding-left: 15px;
  margin: 40px 0 20px;
  background: linear-gradient(90deg, rgba(255, 128, 149, 0.1) 0%, transparent 100%);
  /* うっすら右に消える背景色を引く */
}

/* =========================================================
   目次エリア
========================================================= */
.toc {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
}

.toc h3 {
  margin-bottom: 15px;
  color: var(--footer-bg);
  font-size: 1.2rem;
}

.toc ul li {
  margin-bottom: 8px;
  font-weight: bold;
}

/* 目次の各項目の先頭に「ー」をつける */
.toc ul li::before {
  content: "ー ";
  color: var(--accent-blue);
}

.toc a:hover {
  text-decoration: underline;
  /* マウスを乗せたら下線を出す */
  color: var(--accent-teal);
}

/* =========================================================
   文章エリア
========================================================= */
.content-block {
  margin-bottom: 40px;
}

.content-block p {
  margin-bottom: 15px;
  /* 段落ごとに下側に15pxの余白を空ける */
  color: var(--text-muted);
}

/* =========================================================
   目立つボタン（リンクカード）のデザイン
========================================================= */
.link-card {
  display: inline-block;
  background-color: var(--accent-pink);
  color: #fff;
  padding: 12px 30px;
  border-radius: 30px;
  /* 角を丸くしてカプセル型にする */
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255, 128, 149, 0.4);
  margin-top: 15px;
}

/* ボタンにマウスを乗せた時 */
.link-card:hover {
  background-color: #ff6680;
  transform: translateY(-2px);
  /* 少し上に浮く */
  box-shadow: 0 6px 20px rgba(255, 128, 149, 0.6);
  /* 影を大きくする */
  color: #fff;
}

/* =========================================================
   サイドバーの小枠（ウィジェット）
========================================================= */
.widget {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  /* 四方にうっすら影をつける */
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
}

.widget h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-blue);
  color: var(--text-main);
  text-align: center;
}

/* =========================================================
   FAQ（よくある質問）ページの専用スタイル
========================================================= */
.faq-category {
  font-size: 1.4rem;
  margin: 40px 0 20px;
  color: var(--accent-teal);
  border-bottom: 1px dashed var(--accent-teal);
  /* 下線を点線にする */
  padding-bottom: 5px;
}

.faq-item {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: box-shadow 0.3s;
}

.faq-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.faq-q {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--footer-bg);
  margin-bottom: 10px;
  display: flex;
  /* Qマークと文章を横に並べる */
  gap: 10px;
  /* Qマークと文章の間隔を10px空ける */
}

.faq-q::before {
  content: "Q.";
  color: #dc2743;
  font-size: 1.4rem;
}

.faq-a {
  color: var(--text-muted);
  display: flex;
  /* Aマークと文章を横に並べる */
  gap: 10px;
  /* Aマークと文章の間隔を10px空ける */
}

.faq-a::before {
  content: "A.";
  color: var(--accent-blue);
  font-size: 1.4rem;
  font-weight: bold;
}

/* =========================================================
   新歓特設ページの専用スタイル（ポスター画像）
========================================================= */
.event-poster {
  text-align: center;
  margin: 30px 0;
}

.event-poster img {
  max-width: 100%;
  /* スマホなどの小さい画面でもはみ出さないようにする */
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  /* サムネイルに綺麗に影をつける */
}

/* =========================================================
   フッター部分
========================================================= */
.footer {
  background-color: var(--footer-bg);
  color: #fff;
  padding: 40px 0 20px;
  margin-top: 60px;
  /* メインコンテンツから距離を空ける */
  text-align: center;
}

.footer p {
  color: rgba(255, 255, 255, 0.7);
  /* コピーライト（著作権表示）の色を少し薄くする */
  font-size: 0.9rem;
  margin-top: 20px;
}

/* =========================================================
   レスポンシブデザイン（スマートフォン対応）
   横幅が768px以下の画面になった時にだけ適用されるCSSです。
========================================================= */
@media (max-width: 768px) {

  /* 左と右の横並びを解除して縦並びにする */
  .layout {
    flex-direction: column;
  }

  /* サイドバーの横幅を100%（画面いっぱい）にする */
  .sidebar {
    width: 100%;
  }

  /* スマホの小さな画面ではヘッダーメニューがいっぱいになるため一旦非表示 */
  /* ※本格的なスマホ対応をする場合はここにハンバーガーメニュー等を作ります */
  .nav-links {
    display: none;
  }

  /* トップ画像の上の文字が大きすぎないように少し小さくする */
  .hero-text {
    font-size: 1.5rem;
  }
}