@charset "utf-8";

/* ==========================================================================
   1. 全体設定
   ========================================================================== */
 body {
    color: #4e342e; /* 濃いチョコレートのような茶色 */
    font-family: 'Zen Maru Gothic', sans-serif;
    background-color: #ffffff;
    margin: 0;
}

.ffJosefin {
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 0.15em;
}

.innerWrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
}

/* 

/* --- ナビゲーション全体の配置（固定と色変化の設定） --- */
#nav {
    position: fixed;    /* ★スクロールしてもついてくるように固定 */
    top: 30px;          /* 画面上からの距離（好みで調整) */
    right: 40px;        /* 画面右からの距離（好みで調整） */
    z-index: 9999;
    transition: all 0.5s ease; /* 色の変化を滑らかにする */
}

#nav ul {
    display: flex;
    list-style-type: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

/* 窓の設定 */
#nav ul li a {
    display: block;
    height: 30px;
    overflow: visible;
    text-decoration: none;
    text-align: center;
    position: relative;
}

/* 共通設定：動きを滑らかにする */
#nav ul li a span {
    display: block;
    height: 30px;
    line-height: 30px;
    transition: all 0.4s ease-out; 
}

/* 1段目：英語 */
.en {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Josefin Sans', sans-serif; /* ★これを追加でおくと確実 */
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

/* 2段目：日本語 */
.jp {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5); 
    opacity: 0;
    transition: all 0.4s ease-out;
}

/* =================================================
   ★スクロールした後に適用される「茶色」の設定
   ================================================= */

/* スクロール後：英語を濃い茶色に、影を消す */
#nav.is-scrolled .en {
    color: #4e342e;     /* 優しい茶色 */
    text-shadow: none;  /* 背景が白くなるので影は不要 */
}

/* スクロール後：日本語を少し明るい茶色に、影を消す */
#nav.is-scrolled .jp {
    color: #8d6e63;
    text-shadow: none;
}

/* --- マウスが乗った時の動き（ここは変更なし） --- */
#nav ul li a:hover .en { transform: translateY(-12px); }
#nav ul li a:hover .jp { opacity: 1; transform: translateY(-12px); }

/* --- マウスが乗った時の動き --- */

/* 英語：上にスッと少しだけ移動する（消えずに見える位置で止める） */
#nav ul li a:hover .en {
    transform: translateY(-12px); /* 12pxほど上にズラす */
}

/* 日本語：ふわっと現れながら、英語を追いかけるように上にズレる */
#nav ul li a:hover .jp {
    opacity: 1;                /* ★見えるようにする */
    transform: translateY(-12px); /* 英語と同じ分だけ上にズラす */
}


/* ==========================================================================
   3. メイン・パララックス（ここは絶対に変えない）
   ========================================================================== */
main {
    position: relative;
    z-index: 10;
}

section { padding: 120px 0; }

/* --- セクション共通見出し（文字サイズを大きく調整） --- */
h2.ffJosefin {
    font-size: 3rem;         /* 2remから3remに大きくしました */
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.4em;   /* 文字の間隔を広げて高級感を出す */
    color: #5d4037; /* 深みのあるコーヒーブラウン（白に映える落ち着いた色） */
    margin-bottom: 100px;    /* 下のコンテンツとの間隔を広く */
    text-transform: uppercase;
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* アニメーション用 */
}

/* タイトル下の青い線も少し太くしてバランスを取る */
h2.ffJosefin::after {
    content: '';
    display: block;
    width: 90px;             /* 線を少し長く */
    height: 2px;             /* 線を少し太く */
    background-color: #bcaaa4; /* 柔らかなミルクティベージュの線 */
    margin: 15px auto 0;
    transition: width 1.5s ease-in-out 0.3s;
    width: 0; /* 最初は 0 でアニメーションで伸びる */
}

/* アニメーション：表示されたら線が伸びる */
h2.ffJosefin.is-active::after {
    width: 180px;
}

/* --- セクションごとの背景色設定 --- */

/* 1. Message (Information) - 清潔な白 */
.msgSec {
    background-color: #ffffff;
    padding: 160px 0;
}

.msgSec h2.ffJosefin { color: #5d4037; }

/* 2. Blog - 爽やかな極薄の青 */
.blogSec {
    background-color: #f0f7ff !important; /* 背景を薄い水色に */
    padding: 120px 0;
}

.blogSec h2.ffJosefin {
    color: #455a64; /* 濃いブルーグレー（青い背景と調和して都会的な印象に） */
}

.blogSec h2.ffJosefin::after {
    background-color: #b0bec5; /* 水色に馴染むグレーの線 */
}

/* 3. Date (Save the Date) - 温かみのあるアイボリー */
.dateSec {
    background-color: #fdfaf5;
    padding: 120px 0;
}

.dateSec h2.ffJosefin { color: #8d6e63; }



/* 4. Form (RSVP) - 落ち着いたライトグレー */
.formSec {
    background-color: #fff0f0;
    padding: 120px 0;
}

.formSec h2.ffJosefin { color: #8d6e63; }

/* --- 3. メッセージセクション (Information) --- */
.msgSec {
    text-align: center;
    padding: 160px 0; /* タイトルが大きくなったので、上下の余白もたっぷり取る */
}

.msgSec p {
    font-size: 1.1rem;      /* 本文も少しだけ大きく */
    line-height: 2.5;       /* 行間をさらに広げて読みやすく */
    color: #3e2723; /* より深い茶色 */
    margin-bottom: 40px;
}

/* もしイラスト（カピぞう等）を入れる場合の調整 */
.msgSec .illust img {
    max-width: 180px;
    opacity: 0.9;
    margin-top: 20px;
}

/* --- パララックス部分：復活したときのコードそのまま --- */
.scrolling-bg {
    position: relative;
    height: 500px;
    width: 100%;
    background-image: url('../images/bg.jpg'); 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.scrolling-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.bg-text {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0.25em;
    line-height: 2;
}

/* ==========================================================================
  
   4. ブログセクション (CSSのみで実現するマガジンスタイル)
   ========================================================================== */
/* ==========================================================================
   4. 洗練されたモダン・グリッド・ブログ
   ========================================================================== */

/* 記事一覧を2列のグリッドにする */
.blogList {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に並べる */
    gap: 80px 40px; /* 上下左右の余白 */
    list-style: none;
    padding: 0;
}

/* 記事ひとつひとつの設定 */
.blogList li a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.4s ease;
}

.blogItem {
    display: flex;
    flex-direction: column; /* 画像を上に、文字を下に */
    gap: 25px;
}

/* 画像：正方形に近い黄金比で固定 */
.blogThumb {
    width: 100% !important;
    height: 350px !important; /* 高さを揃えるのが「洗練」のコツ */
    object-fit: cover;
    border-radius: 2px;
    transition: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* テキストエリア */
.blogText {
    padding: 0 5px;
}

.blogDate {
    display: block;
    font-size: 0.8rem;
    color: #8d6e63; /* 落ち着いたモカブラウン */
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    font-weight: 600;
}

.blogTitle {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.4rem;
    color: red;
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 500;
    /* タイトルが長すぎても2行で止める */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogContent {
    font-size: 0.9rem;
    color: #3e2723;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* 続きを読むを「矢印」に */
.readMore {
    font-size: 0.75rem;
    font-weight: bold;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.readMore::after {
    content: '';
    width: 30px;
    height: 1px;
    background: #111;
    transition: 0.3s;
}

/* --- ホバー時の演出（ここがおしゃれの決め手） --- */
.blogList li a:hover .blogThumb {
    transform: translateY(-10px); /* 少し上に浮き上がる */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.blogList li a:hover .readMore::after {
    width: 50px; /* 矢印の線がスッと伸びる */
    background: #0033cc;
}



.formSec .innerWrap { max-width: 600px; }
input, select, textarea {
    width: 100%; border: none; border-bottom: 1px solid #ddd;
    padding: 15px 5px; background: transparent;
}
.submitBtn input {
    background: #1a1a1a; color: #fff; padding: 18px 80px;
    cursor: pointer; transition: 0.3s; display: block; margin: 40px auto 0;
}
.submitBtn input:hover { background: #0033cc; }

footer {
    background-color: #111; color: #888;
    text-align: center; padding: 60px 0; font-size: 0.8rem;
}

/* ==========================================================================
   記事詳細ページ (view.php) 専用：洗練されたスタイル
   ========================================================================== */

/* 1. 記事全体のコンテナ（中央寄せ） */
.viewContainer {
    max-width: 800px;         /* 読みやすい幅に制限 */
    margin: 100px auto;       /* 上下に余白を作り、中央へ */
    padding: 0 30px;
    background-color: #fff;
}

/* 2. ヘッダー（タイトル・日付） */
.viewHeader {
    text-align: center;       /* 中央揃えで清潔感を出す */
    margin-bottom: 60px;
}

.viewDate {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    color:#4e342e;         
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.viewTitle {
    font-size: 2.4rem;        /* タイトルを大きく、印象的に */
    line-height: 1.4;
    color:#4e342e;
    font-weight: 600;
}

/* 3. 画像の制御（ここで巨大化を抑えます） */
.viewImageWrap {
    margin-bottom: 60px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* 軽い影で浮き上がらせる */
}

.viewImage {
    width: 100% !important;   /* コンテナ幅いっぱいに広げる */
    height: auto !important;  /* 高さは自動で調整（歪ませない） */
    display: block;
    border-radius: 2px;
}

/* 4. 記事本文（読みやすさ重視） */
.viewContent {
    font-size: 1.1rem;
    line-height: 2.2;         /* 行間をたっぷり取って高級感を出す */
    color: #4e342e;
    letter-spacing: 0.03em;
    margin-bottom: 100px;
}

/* 5. フッター・戻るボタン */
.viewFooter {
    border-top: 1px solid #eee;
    padding-top: 40px;
    text-align: center;
}

.backBtn {
    text-decoration: none;
    color: #1a1a1a;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.backBtn .arrow {
    transition: transform 0.3s;
}

.backBtn:hover {
    color: #0033cc;
}

.backBtn:hover .arrow {
    transform: translateX(-8px); /* ホバー時に矢印が左にスッと動く */
}

/* スマホ用の調整 */
@media (max-width: 768px) {
    .viewContainer { margin: 60px auto; padding: 0 20px; }
    .viewTitle { font-size: 1.8rem; }
    .viewContent { font-size: 1rem; line-height: 2; }
}
/* --- レスポンシブ調整（スマホ対応） --- */
@media (max-width: 768px) {
    /* ブログ一覧をスマホでは1列にする */
    .blogList {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    /* セクションの余白を少し狭める */
    .blogSec, .msgSec {
        padding: 80px 0;
    }
    
    /* タイトルの文字サイズを調整 */
    h2.ffJosefin {
        font-size: 2.2rem;
        margin-bottom: 60px;
    }
}

footer {
    background-color: #f4ece6 !important; /* ミルクティーのような色 */
    color: #4e342e !important;           /* 文字は濃い茶色 */
    padding: 80px 0 !important;
    border-top: 1px solid #e2d6cc;       /* 境界に少し濃い線をいれるとおしゃれ */
}

/* ==========================================================================
   view.php でトップページのデザインが混ざるのを防ぐ修正
   ========================================================================== */

/* 詳細ページのヘッダーから、トップページ用の黒背景と高さを取り除く */
.viewContainer .viewHeader {
    position: static !important;
    height: auto !important;      /* 750pxをキャンセル */
    background-color: transparent !important; /* 黒背景を消す */
    padding-top: 60px !important; /* 適切な余白に変更 */
    width: 100% !important;
    overflow: visible !important;
}

/* タイトルの文字色を、背景が白くなっても見えるように黒にする */
.viewTitle {
    color: #3e2723 !important; /* 深い茶色に変更 */
    font-size: 2.4rem;
    margin-top: 10px;
}

/* 画像が大きすぎたり重なったりするのを防ぐ */
.viewImageWrap {
    position: relative !important;
    z-index: 1;
    margin-top: 40px;
}

.viewImage {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* --- 日付をさらに大きく、印象的に --- */
.viewDate {
    font-size: 1.4rem !important;  /* 0.9remから1.4remへ大幅アップ */
    letter-spacing: 0.4em !important; /* 文字の間隔を広げて優雅に */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    opacity: 0.8;
}

/* --- タイトルも少しだけ調整 --- */
.viewTitle {
    font-size: 2.8rem !important; /* タイトルも一回り大きく */
    margin-bottom: 50px !important;
}

/* --- 下の気になる「茶色/黒」の塊を消す --- */
/* 全体設定のfooterが詳細ページで悪目立ちしないように上書きします */

/* 戻るボタンの周りの余白を広げてスッキリさせる */
.viewFooter {
    border-top: none !important;      /* 二重線を防ぐ */
    margin-top: 40px;
    padding-bottom: 100px;            /* 下に余裕を持たせる */
}

/* 「BACK TO LIST」をもう少し目立たせる */
.backBtn {
    font-size: 1rem !important;
    color: #888 !important;           /* 控えめなグレーがおしゃれ */
    border-bottom: 1px solid #ccc;    /* 細い下線を引く */
    padding-bottom: 5px;
}



/* =================================================
   ブログ一覧（カード型レイアウト）の追加
   ================================================= */
/* --- ブログセクション全体のレイアウト --- */
.blogSec {
    padding: 100px 0;
    background-color: #fff;
}

/* 一覧をグリッド（網目状）にする */
.blogList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 画面幅に合わせて自動調整 */
    gap: 50px 30px; /* 縦と横の隙間 */
    list-style: none;
    padding: 0;
    margin-top: 50px;
}

/* 各カードの設定 */
.blogItem {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーした時に少し浮き上がらせる（高級感） */
.blogItem:hover {
    transform: translateY(-8px);
}

/* サムネイル画像のサイズを一定（16:9）にする */
.blogThumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* 画像の縦横比を固定 */
    object-fit: cover;    /* 枠に合わせてトリミング */
    border-radius: 4px;   /* 角をほんの少し丸める */
    background-color: #f8f8f8;
    margin-bottom: 20px;
}

/* 日付の装飾 */
.blogDate {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

/* タイトルの装飾（明朝体で上品に） */
.blogTitle {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.25rem;
    color: #393736;
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 600;
}

/* 本文の抜粋 */
.blogContent {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
}

/* 「続きを読む」をリンクらしく */
.readMore {
    font-size: 0.85rem;
    color: #999;
    text-decoration: underline;
}

/* 本文の行数を3行に制限して、高さを揃える */
.blogContent {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.5em; /* 行数 × line-height（1.5想定）で高さを固定 */
}

/* --- セクション共通設定 --- */
.section-padding {
    padding: 100px 20px; /* 上下にゆとりを持たせる */
    background-color: #ffffff;
    color: #333;
    text-align: center;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

/* --- 見出しのスタイル --- */
.section-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

/* 見出しの下に短い線を入れる（お洒落に見えます） */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: #333;
}


/* パララックス内のテキスト専用の設定 */
.bg-text.scroll-fade {
    /* 他の見出しより少しゆっくり（1.6秒）かけて、0.3秒遅れて動き出す */
    transition: opacity 1.6s ease-out 0.3s, transform 1.6s ease-out 0.3s;
}

/* お知らせリストのスタイル */
.infoListArea {
    margin: 30px auto;
    max-width: 700px;
    text-align: left; /* リストは左揃えが見やすいです */
}

.infoNewsList {
    list-style: none;
    padding: 0;
    border-top: 1px dashed #d7ccc8; /* 柔らかい点線 */
}

.infoNewsList li {
    padding: 15px 10px;
    border-bottom: 1px dashed #d7ccc8;
    display: flex;
    gap: 20px;
}

.infoNewsList li .date {
    color: #8d6e63;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    min-width: 100px;
}

.infoNewsList li a {
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.infoNewsList li a:hover {
    color: #c7887f;
    text-decoration: underline;
}

/* ==========================================================================
   スクロールアニメーション（共通 ＆ スローガン）
   ========================================================================== */

/* 1. 【共通】タイトルや各要素の基本設定（大きく動かす設定） */
.scroll-fade {
    opacity: 0;
    transform: translateY(100px); /* 動きを大きく100pxに */
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 画面内に入った（is-activeがついた）時の共通動作 */
.scroll-fade.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 2. 【タイトル】下線が後から伸びる演出 */
h2.ffJosefin::after {
    content: '';
    display: block;
    width: 0; /* 最初はゼロ */
    height: 2px !important;    /* 太さを強制 */
    background-color: #bcaaa4;
    margin: 10px auto 0 !important; /* 間隔をさらに詰めて10pxに強制 */
    /* 文字が出てから少し遅れて(0.8s)伸び始める */
    transition: width 1.5s ease-in-out 0.8s;
}

h2.ffJosefin.is-active::after {
    width: 180px !important;   /* 長さを180pxに強制 */
}

/* 3. 【スローガン専用】時間差でフワッと出る演出 */

/* ==========================================================================
   大会スローガン：デザイン ＆ ぼかしアニメーション（決定版）
   ========================================================================== */

/* --- 全体の配置（場所の調整） --- */
.slogan-container {
    text-align: center;
    margin: 10px 0 130px !important; /* 上を詰めて下を広げる */
}

/* --- アニメーション前の「隠れている状態」 --- */

/* ラベル（大会スローガン） */
.msgSec .slogan-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    color: #bcaaa4;
    letter-spacing: 0.5em;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;

    /* 初期状態：透明・少し下・ぼかし */
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    /* 0.4秒待ってから、1.2秒かけて動く */
    transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.4s, filter 1.2s ease 0.4s;
}

/* 本文（持続可能な〜） */
.msgSec .slogan-text {
    font-family: "Yu Mincho", "MS PMincho", serif !important;
    color: #8d6e63 !important;
    font-size: 2.2rem !important;
    font-weight: bold !important;
    line-height: 1.6;
    letter-spacing: 0.15em;
    margin: 0 !important;

    /* 初期状態：透明・もっと下・強いぼかし */
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
    /* 0.7秒待ってから、1.5秒かけて動く */
    transition: opacity 1.5s ease 0.7s, transform 1.5s ease 0.7s, filter 1.5s ease 0.7s;
}

/* --- アニメーション後の「表示された状態」 --- */
/* スローガンの枠（.slogan-container）が画面に入ったら中身をクッキリさせる */
.slogan-container.is-active .slogan-label,
.slogan-container.is-active .slogan-text {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important; /* ぼかしを消す */
}

/* ==========================================================================
   RSVPセクション（フォームエリア）専用の遅延設定
   ========================================================================== */

/* 1. RSVPのタイトル（h2）を「Always with a Smile」より遅れて出す */
#formArea h2.scroll-fade {
    /* 1.0s（1秒）待ってからアニメーションを開始する設定 */
    transition-delay: 0.8s !important; 
}

/* 2. RSVPのタイトルの「下線」をさらに遅らせる */
/* 文字が出た後にスルスルと伸ばしたいので、さらに遅く(1.8s)設定 */
#formArea h2.ffJosefin.is-active::after {
    transition-delay: 1.6s !important;
}

/* --- スケジュール全体のデザイン --- */
.scheduleTimeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
}

/* 縦のラインを通す */
.scheduleTimeline::before {
    content: '';
    position: absolute;
    left: 140px; /* 時間と内容の間の位置 */
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e2d6cc;
}

.scheduleItem {
    display: flex;
    margin-bottom: 50px;
    position: relative;
}

/* 時間部分 */
.scheduleItem .time {
    flex: 0 0 120px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1rem;
    color: #8d6e63;
    font-weight: 700;
    padding-top: 5px;
}

/* ドットを表示 */
.scheduleItem::after {
    content: '';
    position: absolute;
    left: 136px;
    top: 12px;
    width: 9px;
    height: 9px;
    background: #bcaaa4;
    border-radius: 50%;
    z-index: 2;
}

/* 詳細部分 */
.scheduleItem .details {
    padding-left: 50px;
    flex: 1;
}

.scheduleItem .details h3 {
    font-size: 1.2rem;
    color: #4e342e;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.location {
    font-size: 0.9rem;
    color: #8d6e63;
    display: flex;
    align-items: center;
    gap: 5px;
}

.location::before {
    content: '📍'; /* アイコンを添えるとオシャレ */
    font-size: 0.8rem;
}

/* 記念講演（目立たせる） */
.mainEvent {
    background: #fdf5f0; /* ほんの少しだけ背景色をつける */
    padding: 30px;
    margin-left: -30px;
    border-radius: 8px;
}

.category {
    display: inline-block;
    font-size: 0.75rem;
    background: #8d6e63;
    color: #fff;
    padding: 2px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.speaker {
    margin: 15px 0;
    padding-left: 15px;
    border-left: 2px solid #e2d6cc;
}

.speaker .title { font-size: 0.85rem; color: #6d4c41; margin: 0; }
.speaker .name { font-size: 1.1rem; font-weight: bold; color: #4e342e; margin: 5px 0 0; }

/* 分科会のリスト */
.subList {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #4e342e;
}

.subList li {
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
}

.subList li span {
    font-weight: bold;
    color: #8d6e63;
    min-width: 85px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .scheduleTimeline::before { left: 0; }
    .scheduleItem { flex-direction: column; padding-left: 20px; }
    .scheduleItem::after { left: -4px; }
    .scheduleItem .time { margin-bottom: 10px; }
    .scheduleItem .details { padding-left: 0; }
    .scheduleTimeline { padding-left: 10px; }
}



/* フォームエリア　3. もしフォーム全体やその下の文章も少し遅らせたい場合 */
#formArea p.scroll-fade {
    transition-delay: 1.2s !important;
}

/* 外側の枠（pタグ）の設定 */
.submitBtn {
    text-align: center; /* 中の要素を中央に寄せる */
    width: 100%;        /* 横幅いっぱいを使う */
    margin-top: 40px;
    display: flex;      /* フレックスボックスで確実に中央へ */
    justify-content: center;
}

/* 外側の枠 */
.submitBtn {
    text-align: center;
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* ボタン本体 */
.submit-btn {
    background-color: #1a237e;
    color: #ffffff !important;
    padding: 16px 0;
    width: 300px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    position: relative; /* 重なりの基準にする */
    overflow: hidden;    /* はみ出た文字を隠す */
}

/* マウスが乗った時のボタン本体 */
.submit-btn:hover {
    background-color: #3949ab;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
    color: transparent !important; /* 元の文字「Send」を透明にする */
}

/* マウスが乗った時に浮かび上がる文字（回答を送信する） */
.submit-btn:hover::after {
    content: "回答を送信する"; /* ここに表示したい文字を書く */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    color: #ffffff;
    font-size: 18px;
    font-family: sans-serif; /* 日本語は見やすいゴシック体で */
}


/* --- accsesページVenue Card Layout (access.php用) --- */
.venue-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.venue-card {
    background: #fff;
    border: 1px solid #e2d6cc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.venue-info { padding: 30px; }
.tag {
    display: inline-block;
    font-size: 0.7rem;
    background: #8d6e63;
    color: #fff;
    padding: 2px 12px;
    border-radius: 50px;
    margin-bottom: 15px;
}
.venue-info h3 { font-size: 1.4rem; color: #4e342e; margin-bottom: 15px; }
.address { font-size: 0.9rem; color: #6d4c41; margin-bottom: 10px; }
.usage { font-size: 0.85rem; color: #8d6e63; background: #fdf5f0; padding: 10px; border-radius: 6px; margin-bottom: 20px; }
.map-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background: #4e342e;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    transition: 0.3s;
}
.map-btn:hover { background: #8d6e63; }

/* --- 1. Venueページのタイトルエリアを整える --- */
.sub-hero {
    padding: 100px 0 60px; /* 上下の余白 */
    text-align: center;
}

.sub-title-area h1 {
    font-size: 3.5rem;
    font-family: 'Josefin Sans', sans-serif;
    color: #4e342e; /* 濃い茶色 */
    margin: 0;
}

.sub-title-area span {
    font-size: 1rem;
    color: #8d6e63;
    letter-spacing: 0.3em;
}

/* --- 2. ふわっと出すためのアニメーション --- */

/* タイトル用 */
.fade-in-title {
    opacity: 0; /* 最初は透明 */
    animation: simpleFadeUp 1.2s ease-out 0.5s forwards; /* 0.5秒遅れて開始 */
}

/* ページ全体（カード）用 */
.fade-in-page {
    opacity: 0; /* 最初は透明 */
    animation: simpleFadeUp 1.0s ease-out 0s forwards; /* すぐに開始 */
}

/* 下から上にスッと出る動き */
@keyframes simpleFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}