/* リセット & ベース */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-padding-top: 60px;
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  padding-bottom: 4rem;
}
ul { list-style: none; }
a  { text-decoration: none; color: inherit; }

/* PC ヘッダー */
.site-header {
  position: fixed; top: -60px; left: 0; right: 0;
  background: #ffe4e1; transition: top .3s; z-index: 100;
}
.site-header.visible { top: 0; }
.site-header nav ul {
  display: flex; justify-content: center; gap: 1rem; padding: .4rem 0;
}
.nav-link {
  display: inline-block;
  padding: .35rem .7rem;
  background: #fff;
  border: 1px solid #f2d7d7;
  border-radius: 999px;               /* pill */
  font-size: .86rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.nav-link:hover, .nav-link:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  background: #fff8f8;
  outline: none;
}
.site-header { box-shadow: 0 2px 12px rgba(0,0,0,.08); }


/* ハンバーガー */
.hamburger {
  display: none; position: absolute; top: .6rem; right: .6rem;
  font-size: 1.5rem; cursor: pointer;
}

/* モバイル全画面Nav */
.mobile-nav {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.95);
  opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 200;
}
.mobile-nav.visible { opacity: 1; visibility: visible; }
.mobile-nav .close-btn {
  position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; cursor: pointer;
}
.mobile-nav ul {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; margin-top: 4rem; font-size: 1.1rem;
}
/* Hero */
.hero {
  position: relative;
  height: 100vh;
  background: linear-gradient(to bottom, #87ceeb, #fff);
  overflow-x: hidden; /* 横スクロールを隠す */
}
.hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative; /* z-index を効かせるため */
  z-index: 4;         /* ロゴは必ず前面 */
}
.hero-logo img {
  max-width: 60%;
  height: auto;
}

/* 矢印(円＋影) */
.scroll-down {
  position: absolute;
  bottom: 8rem;         /* 矢印をさらに上に */
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 5;           /* 雲やマルキーより前 */
}
.scroll-down::after {
  content: "↓";
  display: block;
  text-align: center;
  line-height: 3rem;
  font-size: 1.2rem;
  color: #333;
}
@keyframes bounce {
  0%,100% { transform: translate(-50%,0); }
  50%    { transform: translate(-50%,10px); }
}

/* 雲を後ろに、安全に流す */
.clouds {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* ロゴより下 */
}
.clouds .cloud {
  position: absolute;
  background-image: url('../img/cloud.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 80px;
  opacity: 0.8;
  pointer-events: none;
  animation: float-loop 60s linear infinite;
}
/* ６つそれぞれの初期位置と速度 */
.cloud--one   { top: 10%; left: -200px; animation-duration: 55s; }
.cloud--two   { top: 25%; left: -250px; animation-duration: 70s; }
.cloud--three { top: 40%; left: -220px; animation-duration: 65s; }
.cloud--four  { top: 15%; left: 30vw;  animation-duration: 80s; }
.cloud--five  { top: 35%; left: 50vw;  animation-duration: 75s; }
.cloud--six   { top: 55%; left: 60vw;  animation-duration: 85s; }
@keyframes float-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 200px)); }
}

/* マルキー(滑らかにループ) */
.image-marquee {
  overflow: hidden;   /* 外にはみ出さない */
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-loop 20s linear infinite;
}
.marquee-group { display: flex; }
.marquee-group img {
  height: 150px;
  object-fit: cover;
}
@keyframes marquee-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* （以下、その他のスタイルは変更不要）... */


/* 最新情報 */
.news { padding: 2rem 1rem; }
.news h2 { margin-bottom: .5rem; }
.news-list {
  list-style: none; margin: 0; padding: 0;
}
.news-list li {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .5rem; font-size: .9rem;
}
.news-date { color: #666;  flex-shrink: 0; }
.news-tag {
  padding: .2rem .4rem; border-radius: 4px; font-weight: bold; color: #fff;
}
.news-tag.explore  { background: #3cb371; }
.news-tag.media    { background: #1e90ff; }
.news-tag.riceball { background: #ff8c00; }



/* 左の日付ブロック：年(小さめ) → 月日（太め）を縦積み */
.news-date{ 
  display: flex;
  flex-direction: column;
  min-width: 7em; /* 右文が折り返しても下へ潜らない */
  color: #666;
}
.news-year{ 
  display: block;
  font-size: .85em;
  opacity: .8;
  line-height: 1.05;
}
.news-rest{
  display: block;
  font-weight: 700;
  line-height: 1.1;
}




/* 概要 */
.overview { padding: 2rem 1rem; }
.category-buttons {
  display: flex; gap: 1rem; margin-top: 1rem;
}
.btn-category {
  flex: 1; padding: .6rem; border: none; border-radius: 6px;
  background: #ccc; cursor: pointer; font-size: .9rem;
}
.btn-category.active[data-category="explore"]  { background: #3cb371; color: #fff; }
.btn-category.active[data-category="riceball"] { background: #ff8c00; color: #fff; }
.btn-category.active[data-category="media"]    { background: #1e90ff; color: #fff; }

/* 日程 */
.timeline { padding: 2rem 1rem; }
.timeline-grid {
  display: grid;
  grid-template-columns: 100px repeat(3,1fr);
  gap: 1rem; align-items: center;
}
.grid-header {
  padding: .3rem 0; font-weight: bold;
  color: #fff; text-align: center; font-size: .85rem;
}
.grid-header[data-category="explore"] { background: #3cb371; }
.grid-header[data-category="riceball"]{ background: #ff8c00; }
.grid-header[data-category="media"]   { background: #1e90ff; }
.grid-item {
  padding: .4rem 0; font-size: .9rem; color: #333;
}
.grid-item.label { font-weight: bold; }
/* PC: 改行なし */
@media(min-width:769px) {
  .grid-item.label { white-space: nowrap; }
}
/* mobile: 改行可 */
@media(max-width:768px) {
  .grid-item.label { white-space: normal; }
}
/* 年号改行常時 */
.date-year::after { content: "\A"; white-space: pre; }
.date-year { display: block; font-size: .7em; }
.date-day  { display: block; font-size: .9em; }

/* 過去のコンテスト */
.archives { padding: 2rem 1rem; }
.archive-buttons { display: flex; gap: 1rem; }
.btn-archive {
  flex: 1; padding: .6rem; text-align: center;
  border: 1px solid #333; border-radius: 6px; background: #f5f5f5;
  font-size: .9rem;
}

/* 各部門の詳細 */
.requirements { padding: 2rem 1rem; }
.requirements-list {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.req-item {
  flex: 1 1 calc(33% - 1rem);
  padding: 1rem; background: #f9f9f9;
  border-radius: 6px; border-top: 4px solid; font-size: .9rem;
}
.req-item[data-category="explore"]  { border-color: #3cb371; }
.req-item[data-category="riceball"] { border-color: #ff8c00; }
.req-item[data-category="media"]    { border-color: #1e90ff; }
.req-actions {
  margin-top: .8rem; display: flex; gap: .5rem;
}
.btn-apply, .btn-detail {
  flex: 1; padding: .5rem; border: none; border-radius: 4px;
}
.btn-apply { background: #1e90ff; color: #fff; text-align: center; }
.btn-detail{ background: #ccc; }

/* 下部固定ナビ */
.mobile-btm-nav {
  position: fixed; bottom: 0; left: 0;
  width: 100%; background: #ffe4e1;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.2);
  display: flex; justify-content: space-around; padding: .5rem 0;
  transition: transform .3s ease;
}
.mobile-btm-nav.hidden { transform: translateY(100%); }
.mobile-btm-nav button {
  background: none; border: none; font-size: 1rem;
}

/* 再表示ボタン */
.show-footer { /* JS 生成 */
  display: none; position: fixed;
  bottom: 1rem; left: 1rem;
  padding: .5rem 1rem; background: #fff;
  border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-size: .9rem; z-index: 300;
}

/* フッター */
.site-footer {
  padding: 1rem; text-align: center;
  font-size: .8rem; background: #f0f0f0;
  margin-top: 2rem;
}

/* レスポンシブ */
@media(max-width:768px) {
  .hamburger { display: block; }
  .site-header nav { display: none; }
  .mobile-nav { display: block; }
  .btn-archive { flex: 1 1 calc(50% - .5rem); }
  .req-item { flex: 1 1 100%; }
}


.logo {
}


.news-list {
  background:#fff; padding:1rem; border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}


@media (max-width:768px){
  .news-list{
    background:#fff; padding:1rem; border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
}


/* 最新情報のリンクを視認性アップ */
.news a {
  color: #137cd0;               /* 大学サイトと近いブルー */
  text-decoration: underline;
  font-weight: 600;
}
.news a:hover, .news a:focus {
  opacity: .85;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}


/* 最新情報の箱に影＆余白（PCでも有効に） */
.news .shadow-box {
  padding: .75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  background: #fff;
}

/* 「省略表記に関して」の前後に間隔と区切り */
.news h3 {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px dashed #ddd;
}
.news h3 + p { margin-top: .5rem; }


/* セクション見出しの装飾 */
h2 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
  padding-left: .75rem;
  border-left: 6px solid #ffb6c1;   /* 薄ピンク基調 */
  line-height: 1.2;
}
h3 {
  font-size: 1.05rem;
  margin: .75rem 0 .5rem;
  color: #444;
}


/* 下部固定ナビのボタンを「ボタンらしく」 */
.mobile-btm-nav .btn-site {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2c6c6;
  border-radius: 6px;
  padding: .4rem .8rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.mobile-btm-nav .btn-site:hover { transform: translateY(-1px); }
.mobile-btm-nav .toggle-footer { cursor: pointer; }

.mobile-btm-nav button:focus-visible {
  outline: 2px solid #ffb6c1;
  outline-offset: 2px;
  border-radius: 8px;
}


/* リンク見やすく（グローバルの a{color:inherit} を上書き） */
.news-list a {
  color: #137cd0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.news-list a:hover { text-decoration-thickness: 2px; }

/* 影付きのボックス（ul に既に付けた .shadow-box を活かす）*/
.shadow-box {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin-bottom: 1.25rem; /* 下の見出しと離す */
}

/* 見出しを“見出しっぽく” */
.news h2,
.overview h2,
.timeline h2,
.archives h2,
.requirements h2 {
  margin: 2rem 0 .8rem;
  padding-left: .65rem;
  border-left: 6px solid #ffb6c1;  /* 淡いピンクに合わせる */
  font-size: clamp(1.25rem, 1.5vw + 1rem, 2rem);
  line-height: 1.2;
  font-weight: 800;
}

/* 「省略表記に関して」の見出しをニュース本体と分離 */
.news h3 {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px dashed #e6e6e6;
  font-size: 1.05rem;
}

/* 既存 .nav-link を強化 */
.nav-link {
  padding: .35rem .7rem;
  background: #fff;
  border-radius: 999px;
  font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;            /* ← 重要：ポインターに */
  border: 1px solid rgba(0,0,0,.06);
}
.nav-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.nav-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.12) inset;
}
.site-header { box-shadow: 0 2px 10px rgba(0,0,0,.06); }


.btn-site {
  cursor: pointer;                 /* ← これが無いと矢印のまま */
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  padding: .45rem .9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  font-weight: 600;
}
.btn-site:hover { box-shadow: 0 6px 16px rgba(0,0,0,.14); }



.timeline-grid { align-items: start; } /* 中央揃え→上揃えに */

.grid-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;  /* ここを同じにすることで行の高さを統一 */
  padding: .4rem .5rem;
  text-align: center;
  line-height: 1.2;
}


/* 見た目はボタンのまま・クリック不可 */
a[aria-disabled="true"] {
  pointer-events: none;
  opacity: .55;
  cursor: not-allowed;
  text-decoration: none;
}

.toggle-help {
  font-size: .92rem;
  color: #444;
  background: #fff7f7;
  border-left: 4px solid #ffb6c1;
  padding: .55rem .75rem;
  border-radius: 4px;
  margin: .6rem 0 1rem;
}

.btn-category {
  flex: 1;
  padding: .7rem .8rem;
  border: none;
  border-radius: 10px;
  background: #f1f1f1;
  cursor: pointer;
  font-size: .95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-category:hover { transform: translateY(-1px); }
.btn-category.active[data-category="explore"]  { background: #3cb371; color: #fff; box-shadow: 0 6px 14px rgba(60,179,113,.35); }
.btn-category.active[data-category="riceball"] { background: #ff8c00; color: #fff; box-shadow: 0 6px 14px rgba(255,140,0,.35); }
.btn-category.active[data-category="media"]    { background: #1e90ff; color: #fff; box-shadow: 0 6px 14px rgba(30,144,255,.35); }


/* 各部門詳細のミニカード化 */
.req-item ul { margin: .6rem 0 0 0; padding: 0; }
.req-item li {
  list-style: none;
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #ddd;
  border-radius: 6px;
  padding: .45rem .6rem;
  margin: .35rem 0;
}

/* 部門カラーを左ラインに反映 */
.req-item[data-category="explore"]  li { border-left-color: #3cb371; }
.req-item[data-category="riceball"] li { border-left-color: #ff8c00; }
.req-item[data-category="media"]    li { border-left-color: #1e90ff; }




@media(max-width:768px){
  .news-list li {
    display: grid;
    grid-template-columns: 1fr auto; /* 左：日付（折返し可）、右：分野 */
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
  }
  .news-date { width: auto; }   /* 固定幅を解除 */
  .news-tag { justify-self: end; }
  /* 年のあとで改行（すでに入れている .news-year::after を活かす）*/
}

/* 影付きボックス（PCでも綺麗に見えるよう上書き） */
.news-list.shadow-box{
  padding: .75rem;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: #fff;
}

/* 既存のスマホ限定の高さ制限は活かす */
@media (max-width:768px){
  .news-list{
    max-height: 150px;
    overflow-y: auto;
  }
}


/* 最新情報内のリンクを見やすく */
.news-list a{
  color: #137cd0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.news-list a:hover{ color: #0f63aa; }

/* 見出しの直前に余白＋薄い区切り線 */
.news h3{
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid #eee;
}


/* セクション見出し */
h2{
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  position: relative;
}
h2::after{
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: .35rem;
  background: linear-gradient(90deg,#ff9aa2,#ffd3b6);
  border-radius: 3px;
}

/* 小見出し */
h3{
  font-size: 1.1rem;
  font-weight: 700;
  margin: .75rem 0 .5rem;
}


/* 上部ナビの各リンクを“ボタン化” */
.nav-link{
  padding: .35rem .7rem;
  background: #fff;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: .85rem;
  transition: transform .08s, box-shadow .2s;
}
.nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.nav-link:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}



/* タイムライン見出しの高さ統一 */
.grid-header{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;   /* ← 好みで調整 */
  line-height: 1.2;
  padding: .3rem .5rem; /* 既存に追加/置換 */
}


/* 下部ナビのボタンは常にクリックカーソル */
.mobile-btm-nav button,
.btn-site,
.btn-apply,
.btn-detail{
  cursor: pointer;
}

/* 名古屋文理大学サイトボタンを少しボタンらしく */
.btn-site{
  padding: .4rem .8rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.btn-site:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.12); }


/* 各部門詳細の項目ラベルを強調 */
.req-item ul{
  margin-top: .5rem;
  padding: .6rem .75rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.req-item ul li + li{ margin-top: .25rem; }



/* 最新情報の2カラム化（左：日付 右：本文） */
.news-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

/* 左カラム：日付（幅はお好みで 25〜30%） */
.news-date {
  flex: 0 0 28%;
  max-width: 12rem;   /* 広すぎ防止。*/
  color: #666;
}

/* 年は常に上段、小さめ。月日を下段で強調 */
.news-year { display: block; font-size: .8em; line-height: 1; }
.news-rest { display: block; font-weight: 600; }

/* 右カラム：本文 */
.news-body {
  flex: 1 1 auto;
  min-width: 0;             
  overflow-wrap: anywhere;  /* 長いリンク名などでのはみ出し対策 */
}


@media (max-width: 768px) {
  /* 比率は 30% : 70% に少し寄せる */
  .news-date { flex-basis: 30%; }
  .news-list.shadow-box {
    max-height: 150px;
    overflow-y: auto;
    padding: .75rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }
}



/* 最新情報 内のリンクだけ、色・下線を戻す */
.news .news-body a {
  color: #137cd0;
  text-decoration: underline;
  font-weight: 600;
}
.news .news-body a:hover {
  text-decoration: none;
}
section > h2 {
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 2rem);
  margin: 1.2rem 0 .8rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid #ffe4e1; /* 薄ピンクに合わせる */
}