@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: 24px;
    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: 18px;
    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; }


/* ==========================================================================
   記事詳細ページ (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;
    }
}

/* フッター全体 */
.site-footer {
    background-color: #4a4a4a; /* 濃いめのグレー（知的な印象） */
    color: #ffffff;
    padding: 60px 20px 30px;
    margin-top: 100px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* ロゴを文字にしたときの設定 */
.new-site-footer .footer-logo-text {
    color: #ffffff;
    font-size: 2.5rem;      /* 文字を大きくダイナミックに */
    font-weight: bold;
    letter-spacing: 2px;   /* 文字の間隔を広げておしゃれに */
    margin-bottom: 5px !important; /* 文字なのでピタッと詰まります */
    line-height: 1.2;
    text-transform: uppercase;
}



/* ナビとの距離を調整 */
.new-site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
    border-bottom: 1px solid transparent;
}

.footer-links a:hover {
    opacity: 0.6;
    border-bottom: 1px solid #fff;
}

/* --- 管理者ログインボタンのカスタマイズ --- */
.footer-admin .admin-link {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 24px;
    color: #ffffff !important;
    border: 1px solid #666;      /* 枠線を少し明るく */
    border-radius: 50px;         /* 丸みをつけておしゃれに */
    text-decoration: none;
    font-size: 20rem;
    transition: all 0.3s ease;
    background-color: rgba(228, 15, 15, 0.05);
}

/* マウスを乗せた時の動き */
.footer-admin .admin-link:hover {
    background-color: #ffffff;   /* 背景を白に */
    color: #333333 !important;   /* 文字を濃いグレーに */
    border-color: #ffffff;
    transform: translateY(-2px); /* 少し浮き上がる演出 */
}

.admin-icon {
    margin-right: 5px;           
     
    /* 歯車アイコンと文字の間隔 */
}



/* ==========================================================================
   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.ffScript.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);
    }
}

/* 既存のfooter設定を完全に上書きする設定 */
.new-site-footer {
    background-color: #333333 !important; /* 真っ黒に近いグレー */
    color: #ffffff !important;
    padding: 60px 20px !important;
    margin-top: 0 !important; /* ← ここを 100px から 0 に変更 */
    text-align: center;
}

.new-site-footer .footer-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.new-site-footer .footer-logo-img {
    max-width: 500px; /* ここを 200px から 500px くらいまで一気に大きく */
    width: 90%;       /* スマホで見るときに画面からはみ出さないための設定 */
    height: auto;
    filter: brightness(0) invert(1); /* 白抜きにする設定 */
    margin-bottom: 10px;            /* 下のメニューとの間隔も少し広げてゆとりを持たせる */
    opacity: 0.9;                   /* 少しだけ透明度を下げるとよりおしゃれ */
}

.new-site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin-top: 0 !important;    /* 上の余白をゼロに */
    margin-bottom: 20px !important;
    padding: 0;
    flex-wrap: wrap;
}

.new-site-footer .footer-links a {
    color: #fff !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.new-site-footer .admin-link {
    display: inline-block;
    color: #999 !important;
    text-decoration: none;
    font-size: 1.2rem;
    border: 1px solid #666;
    padding: 5px 15px;
    border-radius: 20px;
    margin: 20px 0;
}

.new-site-footer .copyright {
    border-top: 1px solid #555;
    padding-top: 20px;
    font-size: 1.2rem;
    color: #888;
}

/* style_tokkatsu.css の一番下に追加 */

/* --- スローガン下の余白調整 --- */
.slogan-container {
    margin-bottom: 10px;
}
.slogan-text {
    margin-bottom: 0;
}

/* 名言（自主的・実践的な…）の位置調整 */
.msgSec .quote-text {
    margin-top: 0;       /* 上に詰める */
    padding-top: 0;
    font-weight: bold;
    color: #5d4037;
    margin-bottom: 60px; /* お知らせとの間隔 */
}

/* --- お知らせ小タイトル --- */
.news-title {
    font-size: 1.2rem;
    color: #2e7d32;
    border-bottom: 2px solid #a5d6a7;
    
    /* ▼ここが変更点です▼ */
    display: table;       /* 下線の幅を文字ピッタリにするための設定 */
    margin: 0 auto 20px;  /* 上下は0(下は20)、左右を自動(auto)にして真ん中に寄せる */
    /* ▲ここまで▲ */
    
    padding-bottom: 5px;
    text-align: center; /* 念のため残しておきます */
}

/* =================================================
   フォーム：ラジオボタンの修正
   ================================================= */

/* ラジオボタン（丸いボタン）自体の設定 */
.formSec input[type="radio"] {
    width: auto !important;       /* 横幅100%を解除して元のサイズに戻す */
    height: auto !important;      /* 高さも自動に戻す */
    border: none !important;      /* 下線を消す */
    margin: 0 5px 0 0;            /* ボタン右側の隙間 */
    padding: 0;                   /* 余計な余白を消す */
    vertical-align: middle;       /* 文字と垂直位置を合わせる */
    transform: translateY(-2px);  /* 微調整：少しだけ上にずらすと綺麗に見えます */
}

/* 「希望する」「希望しない」のラベル部分 */
.formSec label {
    display: inline-block;        /* 横並びを維持 */
    margin-right: 25px;           /* 選択肢同士の間隔を空ける */
    cursor: pointer;              /* カーソルを指の形にする */
    font-size: 1rem;              /* 文字サイズ調整 */
    color: #4e342e;               /* 文字色を統一 */
}

/* 項目名（レセプションへの参加希望）とボタンの距離調整 */
.formSec p {
    display: flex;                /* フレックスボックスで整列 */
    align-items: center;          /* 上下中央揃え */
    flex-wrap: wrap;              /* 画面が狭いときは折り返す */
    gap: 15px;                    /* 項目名とボタンの間隔 */
}

/* 必須マーク（赤） */
.badge-require {
    background-color: #ff0000;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: bold;
}
/* 任意マーク（グレー） */
.badge-any {
    background-color: #cccccc;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: bold;
}
/* プレースホルダーの色 */
::placeholder {
    color: #bbb;
}

/* --- ★主催・後援セクションのデザイン（モダン版） --- */
.organizationSec {
    position: relative;
    padding: 100px 0;
    background-color: #ffffff; /* パララックス対策の白背景 */
    z-index: 10;
}

.organizationSec h2 {
    color: #4e342e;
    margin-bottom: 60px;
   
    text-align: center;
    letter-spacing: 0.05em;
}

/* カードを横並びにするコンテナ */
.org-flex-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 上揃え */
    gap: 40px; /* カード同士の間隔 */
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap; /* 画面が狭い時は折り返す */
}

/* カード共通設定 */
.org-card {
    flex: 1; /* 幅を均等にする */
    min-width: 300px; /* 小さくなりすぎないように */
    /* ▼ここを変更：ほんのり温かいベージュ */
    background-color: #bcffff; 
    
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(78, 52, 46, 0.05);
    transition: transform 0.3s ease;
}

/* ホバー時に少し浮く演出 */
.org-card:hover {
    transform: translateY(-5px);
}

.card-inner {
    padding: 40px;
    text-align: center;
}

/* 見出し（主催・後援）のデザイン */
.org-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #4e342e;
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}

/* 見出しの下に短い線を入れる */
.org-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #c9b8b0; /* アクセントカラー */
}

/* 団体名リスト */
.org-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.org-list li {
    font-size: 1.05rem;
    line-height: 2.2; /* 行間をゆったり取る */
    color: #333;
    font-family: "Zen Maru Gothic", sans-serif;
    border-bottom: 1px dashed #eee; /* 薄い点線で区切る */
}

.org-list li:last-child {
    border-bottom: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .organizationSec {
        padding: 60px 20px;
    }
    
    .org-flex-container {
        flex-direction: column; /* 縦並びにする */
        gap: 30px;
    }
    
    .org-card {
        width: 100%;
    }
}

/* ====================================
   スマホ用ハンバーガーメニュー（最終修正版）
   ==================================== */

/* --- パソコン表示（769px以上） --- */
.openbtn {
    display: none;
}

/* --- スマホ表示（768px以下） --- */
@media screen and (max-width: 768px) {
    
    /* ▼ 1. ハンバーガーボタン */
    .openbtn {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 9999;
        width: 50px;
        height: 50px;
        cursor: pointer;
        background: rgba(0,0,0,0.6);
        border-radius: 5px;
    }

    /* ボタンの中の線 */
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 13px;
        height: 3px;
        border-radius: 2px;
        background-color: #fff;
        width: 24px;
    }
    .openbtn span:nth-of-type(1) { top: 15px; }
    .openbtn span:nth-of-type(2) { top: 23px; }
    .openbtn span:nth-of-type(3) { top: 31px; }

    /* ×印アニメーション */
    .openbtn.active span:nth-of-type(1) {
        top: 18px; left: 0; width: 100%;
        transform: translateY(6px) rotate(-45deg);
    }
    .openbtn.active span:nth-of-type(2) { opacity: 0; }
    .openbtn.active span:nth-of-type(3) {
        top: 23px; left: 0; width: 100%;
        transform: translateY(-6px) rotate(45deg);
    }

    /* ▼ 2. メニュー本体（ここを修正） */
    #nav {
        position: fixed !important;
        top: 0;
        /* 最初は画面の右外（-120%）に隠す */
        right: -120% !important;
        width: 100%;
        height: 100vh;
        background: #000000 !important; /* 真っ黒にする */
        z-index: 9990;
        transition: all 0.5s;
        padding-top: 80px;
        text-align: center;
        overflow-y: auto;
        display: block;
    }

    /* クラス panelactive がついた時だけ出てくる */
    #nav.panelactive {
        right: 0 !important;
    }

    /* ▼ 3. リストの調整 */
    #nav ul {
        display: block !important;
        padding: 0;
        margin: 0;
    }
    #nav ul li {
        display: block !important;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
    #nav ul li a {
        display: block !important;
        color: #fff !important;
        padding: 20px;
        text-decoration: none;
    }
    .en, .jp {
        color: #fff !important;
        opacity: 1 !important;
    }
}




/* --- ★花びらアニメーション用の設定 --- */
.organizationSec {
    position: relative;
    /* 既存のスタイル（paddingやbackground-color）はそのまま維持してください */
    overflow: hidden; /* 枠外に出た花びらを隠す */
}

#petal-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 背景(0)より上、文字(2以上)より下 */
    pointer-events: none; /* クリックを邪魔しない */
}

/* 既存のinnerWrapを前面に出すためにz-indexを指定 */
.organizationSec .innerWrap {
    position: relative;
    z-index: 10; /* 花びらより手前 */
}

/* --- ★Schedule（dateSec）の花びら用設定 --- */
.dateSec {
    position: relative;
    overflow: hidden; /* 枠外を隠す */
    /* 既存の背景色などはそのまま維持されます */
}

#schedule-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 背景より上 */
    pointer-events: none; /* クリックや選択を邪魔しない */
}

/* 文字や内容を花びらより前面に出す設定 */
.dateSec .innerWrap {
    position: relative;
    z-index: 10;
}

/* --- ★おしゃれな筆記体用のクラス --- */
.ffScript {
    font-family: 'Great Vibes', cursive !important;
    
    font-weight: 400;
    font-size: 5.5rem; /* 元の文字より少し大きくする */
    letter-spacing: 0.05em; /* 筆記体なので文字間隔は広げすぎない */
    transform: translateY(10px); /* 筆記体は重心が高いので少し位置調整 */
    text-transform: none; /* 大文字強制などを解除 */
   /* ▼これを追加して真ん中に寄せます */
    text-align: center;
    width: 100%;       /* 横幅いっぱいに広げて中央揃えを確実に */
    display: block;    /* ブロック要素として扱う */
}


/* スマホでは少しサイズを抑える */
@media screen and (max-width: 768px) {
    .ffScript {
        font-size: 3.5rem;
    }
}

/* --- ★CSSだけで作るゴールドと桜色の飾り枠 --- */
.invitation-wrap-css {
    margin: 80px auto 60px;
    max-width: 680px;
    width: 90%;
    position: relative;
    padding: 10px; /* 外側の余白 */
}

/* メインのボックス */
.invitation-box-css {
    position: relative;
    background-color: #fffafb; /* ごく薄い桜色 */
    border: 1px solid #d4af37; /* 細いゴールドの線 */
    padding: 40px 20px;
    text-align: center;
    border-radius: 4px;
    
    /* ふわっと浮くアニメーション */
    animation: floating 3s ease-in-out infinite alternate;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.15);
}

/* テキスト */
.invitation-text-css {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 1.1rem;
    color: #5d4037;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0;
}

/* --- ▼四隅の飾り（ここがおしゃれポイント） --- */
.deco-corner {
    position: absolute;
    width: 30px;  /* 飾りの幅 */
    height: 30px; /* 飾りの高さ */
    border: solid #d4af37; /* ゴールドの色 */
    transition: all 0.3s ease;
}

/* 装飾のデザイン：二重線のような効果 */
.deco-corner::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid rgba(255, 182, 193, 0.8); /* 内側はピンク色 */
}

/* 左上 */
.deco-corner.top-left {
    top: -6px; left: -6px;
    border-width: 3px 0 0 3px; /* 上と左に線 */
}
.deco-corner.top-left::after {
    top: 3px; left: 3px;
    border-width: 2px 0 0 2px;
}

/* 右上 */
.deco-corner.top-right {
    top: -6px; right: -6px;
    border-width: 3px 3px 0 0; /* 上と右に線 */
}
.deco-corner.top-right::after {
    top: 3px; right: 3px;
    border-width: 2px 2px 0 0;
}

/* 左下 */
.deco-corner.bottom-left {
    bottom: -6px; left: -6px;
    border-width: 0 0 3px 3px; /* 下と左に線 */
}
.deco-corner.bottom-left::after {
    bottom: 3px; left: 3px;
    border-width: 0 0 2px 2px;
}

/* 右下 */
.deco-corner.bottom-right {
    bottom: -6px; right: -6px;
    border-width: 0 3px 3px 0; /* 下と右に線 */
}
.deco-corner.bottom-right::after {
    bottom: 3px; right: 3px;
    border-width: 0 2px 2px 0;
}

/* --- アニメーション定義 --- */
@keyframes floating {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* ▼▼▼ 筆記体タイトル（英字）のアニメーション調整 ▼▼▼ */
/* .scroll-fade がついている時だけ、ゆっくり遅らせて表示 */
h2.ffScript.scroll-fade {
    /* 1. 出てくるまでの待ち時間（タメ） */
    transition-delay: 0.5s !important;     /* 0.5秒待ってから動き出す */
    
    /* 2. 出てくるスピード（ふわっと感） */
    transition-duration: 3.0s !important;  /* 2.5秒かけてゆっくり優雅に現れる */
}

/* ▼▼▼ フッター情報のデザイン調整 ▼▼▼ */
.footer-info {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.2rem; /* 少し小さめに */
    line-height: 1.6;
    color: #fff; /* 背景が暗い場合。明るいなら #333 等 */
    text-align: center;
}

.copyright {
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.3); /* 薄い区切り線 */
    padding-top: 20px;
    font-size: 1.0rem; /* コピーライトは最小サイズでOK */
    text-align: center;
    opacity: 0.8;
}

/* --- 最下部の英語（コピーライト）の修正 --- */
.copyright p {
    margin-top: 30px;
    color: #efe8e8 !important;   /* 文字を少し明るくして読みやすく */
    font-size: 1.0rem;
    letter-spacing: 1px;
}

/* スマホ用調整 */
@media screen and (max-width: 768px) {
    .footer-info {
        font-size: 0.8rem;
    }
}

/* =========================================================
   PC版ナビゲーション：ふわっと切り替わるアニメーション設定
   ========================================================= */
@media screen and (min-width: 769px) {

    /* 1. リンク（ボタン全体）の基準設定 */
    #nav ul li a {
        position: relative !important; /* 重要：ここを基準に文字を重ねる */
        display: flex !important;      /* 文字を上下左右中央に配置 */
        justify-content: center;
        align-items: center;
        text-decoration: none;
        /* ナビの高さや余白はお好みで調整してください */
        padding: 0 15px; 
        height: 100%;    
        transition: all 0.3s; /* 背景色などの変化スピード */
    }

    /* 2. 英語と日本語の共通設定 */
    #nav ul li a span.en,
    #nav ul li a span.jp {
        transition: all 0.5s ease !important; /* 0.5秒かけてふわっと変化 */
        font-weight: bold; /* 必要なら太字に */
        display: block;
    }

    /* --- 英語 (.en) の設定 --- */
    #nav ul li a span.en {
        opacity: 1 !important; /* 最初は見える */
        transform: translateY(0);
    }

    /* --- 日本語 (.jp) の設定 --- */
    #nav ul li a span.jp {
        opacity: 0 !important; /* 最初は透明 */
        
        /* ★ここがポイント：英語の上に完全に重ねる記述 */
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* 日本語を枠のど真ん中に持ってくる */
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none; /* マウス判定を邪魔しないようにする */
    }

    /* ====================================
       マウスを乗せた時 (Hover) の動き
       ==================================== */
    
    /* 英語：透明になって少し上にズレる */
    #nav ul li a:hover span.en {
        opacity: 0 !important;
        transform: translateY(-5px); /* 少し上に移動しながら消える演出 */
    }

    /* 日本語：浮き出てくる */
    #nav ul li a:hover span.jp {
        opacity: 1 !important;
        transform: translateY(0);
    }
}

/* ==============================================
   ▼▼▼ オンデマンド配信ボタン（パララックス内） ▼▼▼
   ============================================== */

/* ボタン本体のデザイン */
.ondemand-btn {
    display: inline-block;       /* ブロック状にして幅や余白を持たせる */
    border: 2px solid #ffffff;   /* 白い枠線（太さ2px） */
    color: #ffffff !important;   /* 文字色：白 */
    text-decoration: none;       /* 下線を消す */
    padding: 20px 40px;          /* 内側の余白（上下20px, 左右40px） */
    min-width: 300px;            /* 最低限の幅を確保 */
    transition: all 0.3s ease;   /* ふわっと変化させる */
    background: rgba(0,0,0, 0.3);/* 背景を少し暗くして文字を見やすく（お好みで調整可） */
    text-align: center;
}

/* 中の英語テキスト（On-Demand） */
.ondemand-btn .en {
    display: block;              /* 改行させる */
    font-size: 1.8rem;           /* 文字を大きく */
    letter-spacing: 0.1em;       /* 文字間隔を少し広げる */
    margin-bottom: 10px;         /* 下の日本語との隙間 */
    line-height: 1.2;
}

/* 中の日本語テキスト */
/* 中の日本語テキスト */
.ondemand-btn .jp {
    display: block !important;    /* 強制的に表示させる */
    opacity: 1 !important;        /* 強制的に不透明（見える状態）にする */
    position: static !important;  /* 配置指定をリセット */
    font-size: 1rem;
    font-weight: normal;
    color: #ffffff !important;    /* 色も白で強制 */
    margin-top: 5px;              /* 英語との間隔を少し調整 */
}

/* --- マウスを乗せた時 (Hover) の動き --- */
.ondemand-btn:hover {
    background-color: #ffffff;   /* 背景を真っ白に */
    color: #333333 !important;   /* 文字色を濃いグレー（黒系）に反転 */
    transform: scale(1.02);      /* ほんの少しだけ拡大して押せる感を出す */
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .ondemand-btn {
        padding: 15px 20px;
        width: 80%;              /* スマホでは画面幅の80%くらいに */
        min-width: auto;
    }
    .ondemand-btn .en {
        font-size: 1.4rem;
    }
}

/* ==============================================
   ▼▼▼ ホバー時の文字色修正（影も消してくっきり） ▼▼▼
   ============================================== */
.ondemand-btn:hover .en,
.ondemand-btn:hover .jp {
    color: #333333 !important;       /* 文字色は濃いグレー */
    text-shadow: none !important;    /* ★これが重要！文字の影を消す */
    font-weight: bold !important;    /* 念のため少し太くして読みやすく */
}

/* ====================================================
   ▼▼▼ フォームの境界線と入力欄をくっきりさせる ▼▼▼
   ==================================================== */

/* 1. 各項目（<p>タグ）の下に、はっきりした線を引く */
form p {
    /* これで項目の間にグレーの線が入ります */
    border-bottom: 1px solid #999 !important; 
    
    /* 上下の余白を少し広げて見やすく */
    padding-bottom: 20px;
    margin-bottom: 25px;
}

/* 最後のボタンのところだけ線はいらないので消す */
form p.submitBtn {
    border-bottom: none !important;
}


/* 2. 入力欄（四角い枠）を濃くする */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    /* 枠線を濃いグレーに */
    border: 1px solid #888 !important; 
    
    /* 背景を真っ白にしてコントラストをつける */
    background-color: #fff;
    
    /* 角を少し丸くする（お好みで） */
    border-radius: 4px;
    
    /* 文字サイズ調整 */
    padding: 10px;
}


/* 3. 入力しようとした時（フォーカス時） */
input:focus,
select:focus,
textarea:focus {
    /* 枠線を黒く強調 */
    border-color: #000 !important;
    
    /* 少し影をつけて浮き上がらせる */
    box-shadow: 0 0 5px rgba(0,0,0, 0.2);
    outline: none;
}


/* 4. 「必須」「任意」バッジの調整（見やすく） */
.badge-require {
    background: #d00; /* 必須は赤 */
    color: #fff;
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}
.badge-any {
    background: #888; /* 任意はグレー */
    color: #fff;
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ジャンプした時に、ヘッダーに隠れないように少し上に余白を作る */
#blogArea {
    scroll-margin-top: 120px; /* 固定ヘッダーの高さ + 20pxくらい */
}

/* ====================================================
   ▼▼▼ 2回目以降（HOMEに戻った時）の表示設定：完成版 ▼▼▼
   ==================================================== */

/* 1. アニメーション素材（黒い幕・宇宙・ハヤブサ）を非表示 */
body.is-visited #opening-overlay,
body.is-visited #space-canvas,
body.is-visited #hayabusa-craft {
    display: none !important;
}

/* 2. ヘッダー背景を透明化（スライドショーを見せるため） */
body.is-visited header {
    background: transparent !important;
    opacity: 1 !important;
    animation: none !important;
}

/* 3. タイトルエリアを「表示状態」で固定 */
body.is-visited #title-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    animation: none !important;
    z-index: 100; /* スライドショーの手前 */
}

/* 4. 文字（線画）を「白く塗りつぶした状態」で固定 */
body.is-visited .stroke-layer {
    stroke: #ffffff !important;
    stroke-dasharray: none !important; /* 点線を実線に */
    stroke-dashoffset: 0 !important;   /* 線を描ききった状態に */
    fill: #ffffff !important;          /* 中身を白く塗る */
    fill-opacity: 1 !important;
    opacity: 1 !important;
    animation: none !important;
}

/* 5. 文字（塗りレイヤー）も強制表示 */
body.is-visited .fill-layer {
    fill: #ffffff !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

/* 6. 上下の飾り画像を表示 */
body.is-visited .top-image,
body.is-visited .subtitle-image {
    opacity: 1 !important;
    animation: none !important;
}

/* 7. スライドショーを最初から表示 */
body.is-visited .hero-slideshow {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 0; /* 一番後ろ */
}

/* ====================================================
   ▼▼▼ 修正・追加用CSS ▼▼▼
   ==================================================== */

/* ① タイトルの位置ズレを修正（画面ど真ん中に固定） */
#title-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完全に中央に配置 */
    width: 100%;
    text-align: center;
    z-index: 20; /* スライドショーより手前 */
    margin: 0;
    padding: 0;
}

/* ② 2回目以降の「黒い一瞬」を消す設定 */
/* 2回目(is-visited)の時は、1枚目のスライドをCSSで強制的に表示しておく */
body.is-visited .slide-item:first-child {
    opacity: 1 !important;
    z-index: 1;
}

/* 念のためヘッダー背景も透明にしておく */
body.is-visited header {
    background: transparent !important;
}

/* ====================================================
   ▼▼▼ タイトル強制中央揃え（最強版） ▼▼▼
   ==================================================== */

/* タイトルを包む枠を、画面のど真ん中に固定 */
#title-wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* ここで完全な中央へ */
    
    width: 100% !important;      /* 横幅いっぱいに広げる */
    max-width: 100% !important;
    height: auto !important;
    
    text-align: center !important; /* 中の文字を中央揃え */
    
    margin: 0 !important;
    padding: 0 !important;
    z-index: 200 !important;     /* 確実に一番手前に */
    
    /* フレックスボックスでも中央揃えを補強 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* タイトルの中の文字（h1やh2など）も強制的に中央揃え */
#title-wrapper h1,
#title-wrapper h2,
#title-wrapper p,
#title-wrapper div {
    text-align: center !important;
    margin-left: auto !important;  /* 左マージン自動 */
    margin-right: auto !important; /* 右マージン自動 */
    width: 100% !important;
    max-width: 1200px !important;  /* 広がりすぎ防止 */
}

/* --- ★プルダウンメニュー用の設定（修正版） --- */

/* 1. 親メニュー（Guide）の設定 */
.has-child {
    position: relative;
}

/* 2. プルダウンメニュー（隠れている部分）の基本設定 */
/* ★重要： #nav をつけて優先順位を上げ、!important で強制的に隠します */
#nav .dropdown-menu {
    display: none !important;    /* これで確実に隠れます */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    padding: 10px 0;
    min-width: 180px;            /* 少し幅を広げました */
    z-index: 9999;
    list-style: none;
    border: 1px solid #444;
    border-radius: 5px;
}

/* 3. マウスを乗せた時に表示する仕掛け */
/* ★重要：ここにも !important をつけて、ホバー時は強制的に表示させます */
#nav .has-child:hover .dropdown-menu {
    display: block !important;
}

/* 4. プルダウンの中のリンク設定 */
#nav .dropdown-menu li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#nav .dropdown-menu li a {
    display: block !important;
    padding: 12px 20px !important; /* タップしやすいよう少し広く */
    color: #fff !important;
    font-size: 14px !important;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s;
    background: transparent;       /* 背景色の重複を防ぐ */
}

#nav .dropdown-menu li a:hover {
    background: #444;
    color: #ffd700 !important;
}

/* --- ★スマホ（ハンバーガーメニュー）用の調整 --- */
@media screen and (max-width: 768px) {
    /* スマホではプルダウンを解除して並べる */
    #nav .has-child .dropdown-menu {
        display: block !important;     /* スマホでは常に表示 */
        position: static !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-top: 0 !important;
        min-width: 100%;
        box-shadow: none !important;  /* 影も消す */
    }

    #nav .dropdown-menu li a {
        padding: 15px 0 !important;
        font-size: 14px !important;
        color: #bbb !important;       /* 親より少し暗くして階層感を出す */
        border-bottom: 1px dashed #333 !important; /* 点線で区切る */
        background: transparent !important;
    }
    
    /* 親リンク（Guide）のクリック無効化 */
    #nav .has-child > a {
        pointer-events: none;
    }
}