/* トップページ(index.html)専用。style.css の後に読み込む。他のページには影響しない。
方針: 最初の画面で「何をしている団体か・どう参加できるか」が写真つきで伝わるようにする。
文章量は減らさず、順序を並べ替えて写真・新着・活動カードを前に出している。 */
/* ===== ヒーロー: 全幅の写真に、見出し・ビジョン・ボタンを重ねる ===== */
.home-hero { padding: 0; background: #0d2b3e; }
.home-hero .hero-home-inner { position: relative; max-width: none; padding: 0; }
.home-hero .carousel {
aspect-ratio: auto;
height: min(78vh, 720px);
min-height: 460px;
}
/* 写真全体には軽い重ねだけを掛け、文字の後ろの濃さは .home-hero-copy 側の背景で確保する。
(グラデーションを写真側に % で持たせると、ヒーローの高さが変わる(短い画面)と文字の後ろが
薄くなり、白い文字が 3:1 を割ったため。) クリックは下の写真・ドットに通す。 */
.home-hero .carousel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(8, 28, 42, .3) 0%, rgba(8, 28, 42, .08) 40%, rgba(8, 28, 42, .15) 100%);
}
.home-hero .carousel-prev,
.home-hero .carousel-next,
.home-hero .carousel-dots { z-index: 3; }
.home-hero .carousel-prev,
.home-hero .carousel-next { top: 30%; }
.home-hero-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
/* h1 の位置で不透明度 .55 以上(白文字 3:1)、ビジョン行の位置で .60 以上(4.5:1)になるよう、
上の余白 80px を足して、そこまでで濃さを立ち上げる */
padding: 80px max(20px, calc(50% - 600px)) 56px;
background: linear-gradient(180deg, rgba(8, 28, 42, 0) 0, rgba(8, 28, 42, .56) 24%, rgba(8, 28, 42, .84) 100%);
color: #fff;
pointer-events: none; /* 下のスライド操作(ドット)を邪魔しない。ボタンだけ有効にする */
}
.home-hero-copy a { pointer-events: auto; }
.home-hero-copy h1 span { display: inline-block; } /* 文節の途中で折り返さない */
.home-hero-copy h1 {
font-size: clamp(20px, 5.4vw, 42px);
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
max-width: 760px;
}
.home-hero-vision {
margin: 12px 0 22px;
font-size: clamp(15px, 4vw, 20px);
letter-spacing: .08em;
text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.home-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero-btns .btn { padding: 14px 26px; font-size: 16px; }
.home-hero-btns .btn-primary,
.home-hero-btns .btn-primary:hover { color: #fff; } /* 共通の a:hover に文字色を取られないよう明示 */
.home-btn-ghost,
.home-btn-ghost:hover { color: #fff; }
.home-btn-ghost { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .85); }
.home-btn-ghost:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 700px) {
.home-hero .hero-home-inner { padding: 0; }
/* 1画面目を、写真・見出し・ボタンで埋める(ヘッダー分57pxを引く)。下に次の見出しがのぞく高さにする */
.home-hero .carousel {
height: calc(100vh - 57px - 72px);
height: calc(100svh - 57px - 72px);
min-height: 460px;
max-height: 640px;
}
.home-hero-copy { padding-bottom: 40px; }
.home-hero-btns { flex-direction: column; }
.home-hero-btns .btn { text-align: center; }
}
/* ===== 新着情報(上へ移動) ===== */
.home-news { padding: 40px 20px 28px; }
.home-news .news-list li { padding: 10px 0; border-bottom: 1px solid #dcdcdc; }
.home-news .news-list li:last-child { border-bottom: 0; }
.home-news .news-list .date { white-space: normal; } /* 「…（終了しました）」のような長い日付が右にはみ出さない */
.home-more { max-width: 1000px; margin: 14px auto 0; text-align: right; font-size: 15px; }
/* ===== 活動内容: 写真を主役のカードに。スマホは横にスワイプ ===== */
section.home-programs { padding-top: 48px; }
.home-cards .program-item {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
padding-bottom: 18px;
transition: transform .3s, box-shadow .3s;
}
.home-cards .program-item:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.home-cards .program-item img { margin-bottom: 14px; object-position: center 35%; background: #e9edf0; } /* 読み込み前の場所取り */
.home-cards .program-item .label,
.home-cards .program-item .desc { display: block; padding: 0 16px; }
.home-cards .program-item .label { font-weight: 700; }
@media (max-width: 700px) {
.home-cards {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin: 0 -36px; /* 画面の端まで使う(セクション16px + コンテナ20px)。次のカードがのぞく */
padding: 6px 36px 18px;
scroll-padding-inline: 36px; /* スワイプ後のスナップ位置も、最初の位置と揃える */
scrollbar-width: none;
}
.home-cards::-webkit-scrollbar { display: none; }
.home-cards .program-item { flex: 0 0 78%; scroll-snap-align: start; }
.home-cards .program-item img { aspect-ratio: 4 / 3; }
}
/* ===== 2026サマーキャンプの帯(特設ページへの入口) ===== */
.home-camp {
position: relative;
overflow: hidden;
min-height: 440px;
display: flex;
align-items: flex-end;
color: #fff;
background: #0d2b3e;
}
.home-camp picture,
.home-camp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-camp img { object-fit: cover; }
.home-camp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 28, 42, .15) 0%, rgba(8, 28, 42, .1) 100%); }
.home-camp-body {
position: relative;
z-index: 1;
width: 100%;
/* 小見出し・見出しの位置で不透明度 .6 以上(見出しは通常の太さなので 4.5:1)を確保する */
padding: 80px max(20px, calc(50% - 600px)) 48px;
background: linear-gradient(180deg, rgba(8, 28, 42, 0) 0, rgba(8, 28, 42, .62) 22%, rgba(8, 28, 42, .86) 100%);
}
.home-camp-eyebrow { font-size: 13px; letter-spacing: .4em; color: #f6e8bf; margin-bottom: 12px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.home-camp h2 {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
font-size: clamp(22px, 5.3vw, 38px);
font-weight: 500;
letter-spacing: .06em;
margin-bottom: 12px;
text-wrap: balance;
text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.home-camp-body p { max-width: 620px; line-height: 1.9; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.home-camp-body p + p { margin-top: 18px; }
.home-btn-light,
.home-btn-light:hover { color: #0d2b3e; }
.home-btn-light { background: #fff; padding: 14px 28px; font-size: 16px; text-shadow: none; }
.home-btn-light:hover { background: #f1ece0; }
/* ===== ラフテルについて(元の導入文。h1 はヒーローへ移した) ===== */
section.home-about { padding-top: 56px; }
.home-about .article { padding: 0; } /* 既定の左右20pxが外側の余白と重なり、文章が細くなっていた */
@media (max-width: 700px) {
section.home-about { padding-top: 40px; }
.home-about .article { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.home-cards .program-item { transition: none; }
.home-cards .program-item:hover { transform: none; }
}