/* ==========================================================================
   1. 変数・リセット・基本設定（スマホデフォルト）
   ========================================================================== */
:root {
    --color-pink: #ec4899;
    --color-light-blue: #75d4f2;
    --color-dark-blue: #082868;
    --color-bg-gray: #f9fafb;
    --color-yellow: #fffb00;
    --font-primary: 'Kosugi Maru', 'Zen Maru Gothic', sans-serif;
}


*, *::before, *::after {
    box-sizing: border-box;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: #333;
    background-color: var(--color-bg-gray);
    line-height: 1.8;
    overflow-x: hidden;
    letter-spacing: 0.03em;
}

/* --- 画像・リンクの共通設定 --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ==========================================================================
   2. 基本レイアウト（スマホデフォルト）
   ========================================================================== */
.site-wrapper {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-radius: 0; /* 画像以外の角丸を撤去 */
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section {
    padding: 3.5rem 0;
    position: relative;
    border-bottom: 3px solid #333333;
}

.section-gradient-blue {
    background-color: #e0f2fe; 
}

.section-gradient-pink { background-color: #ffd8e0;}

.section-gradient-yellow { 
    background-color: #fef9c3;
    background-image: url('../image/bg_square_yellow.png'); 
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
}

.section-header { text-align: center; margin-bottom: 4rem; }



/* ==========================================================================
   3. ボタン（画像以外の角丸を撤去）
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    border-radius: 60px;
    padding: 0.75rem 1.75rem;
    font-size: 1.05rem; /* スマホでタップしやすく邪魔にならないサイズ */
    border: 1px solid #000;
    background-color: #fffb00;
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
                background 0.3s ease, 
                box-shadow 0.3s ease; /* なめらかなリッチアニメーション */
}

.btn-form {
    padding: 1rem 2.5rem;
    font-size: clamp(1rem, 0.886rem + 0.57vw, 1.313rem);
    max-width: 320px;
}

.btn-form:hover {
    background-color: #ffffff;
    transform: translateY(-3px); /* ふわっと3px浮き上がるホバー */
    border: 1px dashed #000;

}

.btn-form:active {
    transform: translateY(-1px); /* クリック時の沈み込みフィードバック */
}

.btn-block {
    display: flex;
    width: 100%; /* スマホでは押しやすいよう100%幅に */
    max-width: 100%;
}

/* 💡ボタンを並べるコンテナ（スマホ時は1列に並び、PC時は横並び2カラム） */
.cta-buttons-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    align-items: center;
}

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */
.site-header {
    background-color: rgba(255, 255, 255, 0.65); /* 💡不透明度を下げ、すりガラスの透け感を高めました */
    backdrop-filter: blur(12px);                 /* 💡ぼかし強度を強めて、背景がなめらかに透ける質感に調整 */
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 💡上質な光沢感と境界を定義する白線を追加 */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);       /* 💡ごく軽いシャドウで浮かび上がるような立体感をプラス */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
}

.logo {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffdde4;
    -webkit-text-stroke: 1.5px #333;
    paint-order: stroke fill;
}


/* スマホ用ナビゲーション */
.main-nav {
    display: none; 
}

.hamburger-menu {
    display: block;
}

.nav-toggle-checkbox {
    display: none;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark-blue);
    border-radius: 0; /* 画像以外の角丸を撤去 */
    transition: 0.3s ease;
}

/* モバイルメニュー */
.mobile-menu {
    display: none;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 0.5rem 0;
}

.mobile-nav-link {
    display: block;
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-dark-blue);
    border-bottom: 1px solid #f5f5f5;
}

.mobile-nav-link:last-child {
    border-bottom: none;
}



.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.info-item i {
    width: 24px;
    height: 24px;
    color: var(--color-yellow);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.info-label {
    display: block;
    font-size: 1.6rem;
    color: #75d4f2;
    font-weight: bold;
    -webkit-text-stroke: 1px #082868;
    paint-order: stroke fill;
}

.info-val {
    font-size: 1.2rem; /* 0.9remから0.2rem引き上げ */
    font-weight: 700;
}

.hero-cta {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   6. 各セクション
   ========================================================================== */

/* --- ② てゲハイフェスとは？ --- */

#about .container,
#recruit-info .container {
    width: 100%;
    padding: 40px;
    margin: 20px auto;
    border-radius: 20px;
}

.about-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-text h3 {
    font-size: 1.6rem; /* 1.6remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    margin-bottom: 1rem;
    line-height: 1.5;
    background: #ec4899;
}

.about-text p {
    font-size: 1.1rem; /* 0.9remから0.2rem引き上げ */
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
}

.about-overview-card {
    border-radius: 0; 
    padding: 1.5rem;
    border: 1px dashed #333333; 
}

.about-overview-card h3 {
    font-size: 1.8rem; /* 1.6remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    margin-bottom: 1rem;
    padding-left: 10px;
}

.overview-list {
    list-style: none;
}

.overview-list li {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

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

.overview-list .label {
    font-size: 1rem; /* 0.75remから0.2rem上げて0.95remになるが、最低値ルールにより1remに調整 */
    color: var(--color-pink);
    font-weight: bold;
    margin-bottom: 2px;
}

.overview-list .val {
    font-size: 1.1rem; /* 0.9remから0.2rem引き上げ */
    color: #444;
}

/* --- ③ 実行委員会お仕事内容 --- */
.work-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 2rem;
}

.work-card {
    background: #fff;
    padding: 1.75rem 1.25rem;
    border: 1px dashed #333333; /* 破線囲みに統一 */
    border-radius: 0; /* 画像以外の角丸を撤去 */
}

.work-card-header {
    width: 100%;
    padding-bottom: 12px;     
    margin-bottom: 15px;      
    border-bottom: 1px dashed #333333; 
}

.work-title-wrap {
    display: flex;
    align-items: center;      
    width: 100%;
}

.work-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;   
    color: #f08ca0;              
    font-weight: 900;
    padding: 5px 15px;           
    font-size: 1.3rem; /* 1.1remから0.2rem引き上げ */
    border-right: 1px dashed #333333; 
    border-radius: 0; /* 画像以外の角丸を撤去 */
}

.work-card-header h3 {
    margin: 0;
    padding-left: 15px;          
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
}

.work-card-body p {
    font-size: 1.05rem; /* 0.85remから0.2rem引き上げ */
    line-height: 1.7;
    color: #555;
}

.work-icon {
    background-color: var(--color-bg-gray);
    width: 44px;
    height: 44px;
    border-radius: 0; /* 画像以外の角丸を撤去 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-icon i {
    width: 20px;
    height: 20px;
    color: var(--color-dark-blue);
}

.sticker-showcase {
    margin-top: 15px;
    text-align: center;
}

.sticker-tag {
    display: inline-block;
    font-size: 1rem; /* 0.75remから0.2rem上げて0.95remになるが、最低値ルールにより1remに調整 */
    background-color: #ec4899;
    color: #fff;
    padding: 2px 8px;
    border-radius: 0; /* 画像以外の角丸を撤去 */
    margin-bottom: 8px;
    font-weight: bold;
}

.sticker-img-wrapper {
    max-width: 150px;
    margin: 0 auto;
    border-radius: 0; /* 画像以外の角丸を撤去 */
    overflow: hidden;
}

.sticker-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.work-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;        
    margin-top: 15px;
    border-radius: 0; /* 画像以外の角丸を撤去 */
    overflow: hidden;
}

.work-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;           
    object-position: center;
    display: block;
}

/* --- ⑤ 昨年度の様子（無限ループギャラリー） --- */
#gallery {

}

.ms-slider-container {
    width: 100% ;
    overflow: hidden ;
    padding: 25px 0 ;
    position: relative ;
    display: block ;
}

.ms-infinite-track {
    display: flex ;
    width: max-content ;
    flex-wrap: nowrap ;
}

.ms-track-lane {
    display: grid ;
    grid-template-rows: repeat(2, 140px) ; 
    grid-auto-flow: column ;               
    gap: 10px ;                           
    padding-right: 10px ;
    animation: scrollGallery 60s linear infinite ; 
}

.ms-slider-container:hover .ms-track-lane {
    animation-play-state: paused ;
}

.ms-item {
    position: relative ;
    top: auto ;
    left: auto ;
    margin: 0 ;
    border-radius: 0 ; /* 画像以外の角丸を撤去（直角フラット仕様） */
    overflow: hidden ;
}

.ms-item img {
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ;
    border-radius: 20px;
}

.ms-item.size-sm {
    width: 160px ;
    height: 140px ;
    grid-row: span 1 ;
    grid-column: span 1 ;
}

.ms-item.size-lg {
    width: 330px ; 
    height: 140px ;
    grid-row: span 1 ;
    grid-column: span 2 ; 
}

.ms-item.size-tall {
    width: 160px ;
    height: 290px ;    
    grid-row: span 2 ; 
    grid-column: span 1 ;
}

.ms-item.size-xl {
    width: 500px ; 
    height: 290px ; 
    grid-row: span 2 ; 
    grid-column: span 3 ; 
}

.ms-item:hover {
    transform: translateY(-4px) ;
    z-index: 10 ;
    transition: transform 0.2s ease, box-shadow 0.2s ease ;
}

.ms-label {
    position: absolute ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) ;
    color: #fff ;
    font-size: 1rem; /* 0.75remから0.2rem上げて0.95remになるが、最低値ルールにより1remに調整 */
    padding: 20px 10px 8px ;
    font-weight: bold ;
    pointer-events: none ;
    opacity: 0 ;
    transition: opacity 0.3s ease ;
}

.ms-item:hover .ms-label {
    opacity: 1 ;
}

@keyframes scrollGallery {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* 先輩メッセージ */
.senior-messages-box {
    background-color: #fff;
    border-radius: 0; /* 画像以外の角丸を撤去 */
    padding: 1.75rem 1.25rem;
    border: 1px dashed #333333; /* 破線囲みに統一 */
}

.messages-title {
    font-size: 1.35rem; /* 1.15remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.messages-title i {
    width: 18px;
    height: 18px;
    color: var(--color-pink);
}

.messages-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.message-card {
    position: relative;
    background: var(--color-bg-gray);
    border-radius: 0; /* 画像以外の角丸を撤去 */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border: 1px dashed #333333; /* 破線囲みに統一 */
}

.quote-icon {
    color: var(--color-pink);
    opacity: 0.15;
    position: absolute;
    top: 10px; left: 10px;
}

.message-text {
    font-size: 1.05rem; /* 0.85remから0.2rem引き上げ */
    line-height: 1.7;
    color: #444;
    font-weight: 700;
    margin-bottom: 1rem;
}

.message-author {
    font-size: 1rem; /* 0.75remから0.2rem上げて0.95remになるが、最低値ルールにより1remに調整 */
    color: var(--color-pink);
    font-weight: bold;
    align-self: flex-end;
}


/* ⑥ 募集要項・Q&A (スマホデフォルト: 1列縦並び、PC: 50%横並び & ダッシュ境界線) */
.recruit-details-grid {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 0;
    border: 1px dashed #333333; /* 囲みは黒のダッシュ線 */
}

.details-card {
    margin: 0;
    padding: 0;
    width: 100%;
}

.details-card_box {
    padding: 12px; /* スマホパディング：12px */
}

.details-card h3 {
    font-size: 1.6rem; /* 1.6remから0.2rem引き上げ */
    font-weight: 900;
    color: #fff;
    padding: 12px 0 12px 12px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #333; /* ダッシュ線で統一 */
    background-color: #f08ca0;
}


.details-list li {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-bottom: 1px dashed #eee;
}

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

.d-label {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-pink);
    margin-bottom: 4px;
}

.d-val {
    font-size: 1.05rem; /* 0.85remから0.2rem引き上げ */
    color: #444;
    line-height: 1.6;
}

/* 応募CTAボックス（スマホデフォルト: 横幅いっぱい） */
.apply-cta-box {
    margin: 0;
    background-color: #fef9c3;
    padding: 2rem 1.25rem;
    text-align: center;
    width: 100%;
}

.apply-cta-box p {
    font-size: 1rem; /* 0.8remから0.2rem引き上げ */
    font-weight: bold;
    color: #333;
    margin-bottom: 1.2rem;
}

/* お願い注意ボックス（スマホ: カード間の境目にダッシュ境界線を追加） */
.request-box {
    border-top: 1px dashed #333333; /* スマホ縦並び時のカード間区切り線 */
}

.request-bullets {
    padding-left: 1.1rem;
    margin-top: 0.75rem;
}

.request-bullets li {
    font-size: 1rem; /* 0.8remから0.2rem引き上げ */
    color: #555;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* --- 11. Q&Aアコーディオン --- */
.faq-container {
    max-width: 800px;
    margin: 4rem auto 0 auto;
}

.faq-title {
    font-size: 1.6rem; /* 1.4remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.faq-title i {
    color: var(--color-pink);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #eee;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 1.5rem;
    text-align: left;
    font-size: 1.2rem; /* 1remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    cursor: pointer;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: rgba(236, 72, 153, 0.02);
}

.faq-icon {
    color: var(--color-pink);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background-color: var(--color-bg-gray);
    border-top: 1px solid transparent;
}

.faq-answer p {
    padding: 1.5rem;
    font-size: 1.15rem; /* 0.95remから0.2rem引き上げ */
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* アクティブ時のスタイル */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    border-top: 1px solid #eee;
}

/* ==========================================================================
   7. フッター
   ========================================================================== */
.site-footer {
    background: #fff;
    border-top: 3px solid var(--color-dark-blue);
    padding: 3rem 0;
    text-align: center;
}

.footer-logo {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffdde4;
    -webkit-text-stroke: 1.5px #333;
    paint-order: stroke fill;
}

.copyright {
    font-weight: 700;
    font-size: 1rem; /* 0.75remから0.2rem上げて0.95remになるが、最低値ルールにより1remに調整 */
    color: #999;
}

/* --- トップへ戻るボタン --- */
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--color-yellow);
    border: none;
    border-radius: 0; /* 画像以外の角丸を撤去（直角フラット仕様） */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
    visibility: hidden;
    opacity: 0;
}

#scrollTopBtn i {
    width: 18px;
    height: 18px;
    color: var(--color-dark-blue);
}

#scrollTopBtn.show {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   8. アニメーション設定
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 一文字アニメーションマーカー */
.marker-char {
    position: relative;
    display: inline-block;
    white-space: pre;
}

.marker-char::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0; 
    height: 8px;
    background-color: var(--color-yellow);
    z-index: -1;
    transition: width 0.1s linear;
    transition-delay: calc(0.3s + var(--char-index) * 0.03s);
}

.visible .marker-char::after {
    width: 100%;
}


/* ==========================================================================
   9. タブレット・PC向けスタイル拡張（Media Queries）
   ========================================================================== */

.about-text h3 {
    font-size: 1.8rem; /* 1.6remから0.2rem引き上げ */
    font-weight: 900;
    color: var(--color-dark-blue);
    margin-bottom: 1rem;
    line-height: 1.5;
}


.section-title {
    font-family: 'Kosugi Maru', 'Zen Maru Gothic', sans-serif;
    font-size: 2.2rem; /* 3remから0.2rem引き上げ */
    font-weight: 900;
    display: inline-block;
    color: #fffb00; 
    -webkit-text-stroke: 2.6px #666;
    paint-order: stroke fill;
    margin-bottom: 1rem;
    letter-spacing: 0.2em;
}

.section-subtitle {
    font-size: 1.6rem; /* 2remから0.2rem引き上げ */
    font-weight: 700;
    color: #ff6b6b;
    line-height: 1.6;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
    



/* タブレットサイズ（768px以上）でのレイアウト上書き */
@media (min-width: 768px) {
    .section {
        padding: 5rem 0;
    }

.section-title {
    font-family: 'Kosugi Maru', 'Zen Maru Gothic', sans-serif;
    font-size: 2rem; /* 3remから0.2rem引き上げ */
    font-weight: 900;
    display: inline-block;
    color: #fffb00; 
    -webkit-text-stroke: 2.6px #666;
    paint-order: stroke fill;
    margin-bottom: 1rem;
    letter-spacing: 0.2em;
}

.section-subtitle {
    font-size: 1.8rem; /* 2remから0.2rem引き上げ */
    font-weight: 700;
    color: #ff6b6b;
    line-height: 1.6;
}


    .section-subtitle {
        font-size: 1.4rem; /* 1.2remから0.2rem引き上げ */
    }

    /* ヒーローエリア */
    .hero-title {
        font-size: 2.4rem; /* 2.6remから0.2rem引き上げ */
    }

    .hero-subtitle {
        font-size: 1.4rem; /* 1.2remから0.2rem引き上げ */
    }

    .hero-info-box {
        flex-direction: row;
        gap: 2rem;
        padding: 1.5rem;
    }

    .info-item {
        flex: 1;
    }

    .btn-lg {
        width: auto; 
    }

    /* ② てゲハイフェスとは？ */
    .about-grid {
        gap: 3rem;
    }

    .about-text h3 {
        font-size: 1.5rem; /* 1.3remから0.2rem引き上げ */
    }

    .about-text p {
        font-size: 1.15rem; /* 0.95remから0.2rem引き上げ */
    }

    /* ③ 実行委員会仕事内容（2列対応） */
    .work-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .work-card:nth-child(3) {
        grid-column: span 2;
    }

    .messages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    /* ⑥ 募集要項・Q&A (PC横並び・1fr 1fr、パディング40px、境目のダッシュボーダー) */
    .recruit-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 画面の半分半分(50%ずつ)で表示 */
        gap: 0;
    }

    .details-card_box {
        padding: 20px /* PCパディング：40px */
    }

    /* お願い注意ボックス：PC時の2枚のカードの境目にダッシュ（破線）ボーダーを設定 */
    .request-box {
        border-top: none; /* スマホ用の上の境界線をクリア */
        border-left: 1px dashed #333333; /* 左右中央の境目のダッシュボーダー */
    }

    /* 応募CTAボックス（PC: 横幅いっぱいにフィット） */
    .apply-cta-box {
        padding: 40px; /* PCパディング：40px */
        border-top: none; /* 上部外枠の重なりを解消 */
        border-left: 1px dashed #333333;
        border-right: 1px dashed #333333;
        border-bottom: 1px dashed #333333;
    }

    .faq-container {
        padding-top: 2rem;
    }

    .faq-question {
        padding: 1.5rem;
        font-size: 1.2rem; /* 1remから0.2rem引き上げ */
    }

    .faq-answer p {
        padding: 1.5rem;
        font-size: 1.1rem; /* 0.9remから0.2rem引き上げ */
    }
}

/* PCサイズ（1024px以上）でのレイアウト上書き */
@media (min-width: 1024px) {
    /* ヘッダー */
    .header-container {
        padding: 0.5rem 1.5rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .logo {
        font-size: 1.7rem; /* 1.5remから0.2rem引き上げ */
    }

    /* メインナビゲーションを有効化 */
    .main-nav {
        display: flex;
        align-items: center;
        background-color: #fff;
        border: none; 
        border-radius: 20px;
        padding: 4px 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }

    .nav-link {
        color: #666;
        font-weight: 700;
        font-size: 1.05rem; /* 0.85remから0.2rem引き上げ */
        padding: 8px 14px;
        border-radius: 0; /* 画像以外の角丸を撤去 */
        white-space: nowrap;
    }

    .nav-link:hover {
        color:#ec4899;
    }

    .hamburger-menu {
        display: none;
    }

    /* ヒーローエリア */
    .hero-section {
        min-height: 80vh;
    }

    .hero-title {
        font-size: 3.4rem; /* 3.2remから0.2rem引き上げ */
    }

    .hero-info-box {
        max-width: 750px;
    }

    /* ② てゲハイフェスとは？ */
    .about-grid {
        grid-template-columns: 1.2fr 0.8fr;
        align-items: start;
    }

    /* ③ 実行委員会仕事内容（3列対応） */
    .work-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .work-card:nth-child(3) {
        grid-column: span 1; 
    }

    .work-card {
        padding: 2.25rem 1.75rem;
        transition: transform 0.3s ease;
    }


    /* フッター */
    .footer-logo {
        font-size: 1.7rem; /* 1.5remから0.2rem引き上げ */
    }
}


/* ==========================================================================
   スマホデフォルト設定（画面幅の狭いモバイル用スタイル）
   ========================================================================== */

/* 募集要項のコンテナ（スマホ時は1列縦並び、外枠全体をダッシュ線で囲む） */
.recruit-details-grid {
    display: flex;
    flex-direction: column; 
    gap: 0;
    border: 1px dashed #333333; /* 直角フラットな黒のダッシュ線 */
}

/* スマホ閲覧時の各カード内のパディングは 12px */
.details-card_box {
    padding: 12px; 
}



/* お願いカード（スマホ時はカードの境目として上部にダッシュ境界線を追加） */
.request-box {
    border-top: 1px dashed #333333; 
}


/* ==========================================================================
   スマホデフォルト設定（画面幅の狭いモバイル用スタイル）
   ========================================================================== */



/* 先輩の声カードを囲むグリッド（スマホ時は1列縦積み） */
.work-voices-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* 先輩の声カード本体（直角フラット、ダッシュ破線ボーダー） */
.voice-card {
    display: flex;
    flex-direction: row; /* 左に写真、右にコメントを配置 */
    align-items: center;
    background-color: #ffffff;
    border: 1px dashed #333333; /* 黒の破線で統一 */
    padding: 1.25rem;
    gap: 1.25rem;
    border-radius: 0; /* 画像以外の角丸を完全に撤去 */
}

/* 先輩の写真ラッパー（直角に揃える） */
.voice-img-wrapper {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
}

.voice-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px; /* 写真素材そのものの滑らかな角丸は保護して残す */
}

/* 右側コメントテキスト部分 */
.voice-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.voice-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.voice-author {
    font-size: 0.85rem;
    color: var(--color-pink);
    font-weight: bold;
    align-self: flex-end;
}


/* ==========================================================================
   9. タブレット・PC向けスタイル拡張（Media Queries: 768px以上）
   ========================================================================== */
@media (min-width: 768px) {

    /* 募集要項グリッドの指定箇所に以下を追記します */

    /* 先輩の声PCグリッド（PC時は50%横並びにする） */
    .work-voices-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50%ずつ横並びに分割 */
        gap: 25px;
    }
}
/* 募集要項グリッド（スマホは縦並び） */
.recruit-details-grid {
    display: flex;
    flex-direction: column; 
    gap: 0;
    border: 1px dashed #333333; 
}

.details-card_box {
    padding: 1.5rem 1rem; /* スマホパディング：12px相当に縮小 */
}

/* お願い注意ボックス（スマホ: カード間の境目にダッシュ境界線を追加） */
.request-box {
    border-top: 1px dashed #333333; 
}


.hero-tag {
    display: inline-block;
    color: #fffb00;
    -webkit-text-stroke: 1.2px #000000;
    paint-order: stroke fill;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 0;
    font-size: 3.6rem;
    margin-bottom: 0.75rem;
    line-height:1.5;
}



/* ==========================================================================
   PC向けスタイル拡張（Media Queries: 768px以上）
   ========================================================================== */
@media (min-width: 768px) {

    /* ⑥ 募集要項・Q&A (PC横並び・1fr 1fr、パディング40px、境目のダッシュボーダー) */
    .recruit-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 画面の半分半分(50%ずつ)で表示 */
        gap: 0;
    }



    /* お願い注意ボックス：PC時の2枚のカードの境目にダッシュ（破線）ボーダーを設定 */
    .request-box {
        border-top: none; /* スマホ用の上の境界線をクリア */
        border-left: 1px dashed #333333; /* 左右中央の境目のダッシュボーダー */
    }

    /* 応募CTAボックス（PC: グリッドの真下で横幅いっぱいにフィット） */
    .apply-cta-box {
        padding: 40px; /* PCパディング：40px */
        border-top: none; /* 上部外枠の重なりを解消 */
        border-left: 1px dashed #333333;
        border-right: 1px dashed #333333;
        border-bottom: 1px dashed #333333;
    }
}


/* ==========================================================================
   4. ヘッダー (すりガラス＆袋文字ロゴ仕様)
   ========================================================================== */
.site-header {
    background-color: rgba(255, 255, 255, 0.65); /* 不透明度を下げ、すりガラスの透け感を高めました */
    backdrop-filter: blur(12px);                 /* ぼかし強度を強めて、背景が透ける質感に調整 */
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 上質な光沢感と境界を定義する白線を追加 */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);       /* ごく軽いシャドウで立体感をプラス */
}

.logo {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffdde4;
    -webkit-text-stroke: 1.5px #333;
    paint-order: stroke fill;
}

/* ==========================================================================
   5. ヒーローセクション (新2カラム＆左寄せ4:3比率写真・左下重ねコピー構成)
   ========================================================================== */
.hero-section {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0;
    background-color: var(--color-bg-gray);
    border-bottom: 3px solid #333333;
}

/* ヒーロー用コンテナグリッド（スマホ時：縦並び1列） */
.hero-container-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* --- 左側写真＆タイトル重ね合わせカラム --- */
.hero-left-col {
    position: relative;
    width: 100%;
}

/* 写真フレーム（スマホ時：アスペクト比4:3で表示） */
.hero-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* 4:3の比率を維持 */
    border-radius: 22px; /* 額縁外側の丸み */
    overflow: hidden;    /* スライドショーのはみ出しを綺麗に切り取る */
    border: 10px solid #fffb00; /* 常に表示される10pxの額縁ボーダー */
}

/* スライドショー本体 */
.hero-bg-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



.hero-bg-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /*filter: brightness(0.55);*/
    transform: scale(1.03);
}

.hero-bg-slide.active { opacity: 1; z-index: 2; }

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(8, 40, 104, 0.45) 0%, rgba(236, 72, 153, 0.35) 100%); /* 暗いカラーグラデーションオーバーレイを復元 */
    z-index: 3;
}

.hero-overlap-text {
    position: absolute;
    bottom: -10px;
    left: -10px;
    z-index: 12;
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.35;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #000000;
    paint-order: stroke fill;
    text-align: left;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- 右側タイトル＆インフォカラム --- */
.hero-right-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
    text-align: left;
}

/* 実行委員会メンバー大募集！タグ */
.hero-tag {
    display: inline-block;
    color: var(--color-yellow);
    -webkit-text-stroke: 1.2px #000000;
    paint-order: stroke fill;
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    line-height:1.5;
}

.hero-subtitle {
    font-size: 0.95rem; /* スマホサイズ：0.95rem */
    font-weight: 700;
    line-height: 1.6;
    color: #555555;     /* 白背景に合わせた見やすいダークグレー */
    margin-bottom: 1.5rem;
}

/* クイックインフォボックスの適合化 */
.hero-info-box {
    background: #ffffff; 
    border: 1px dashed #082868; /* 可愛いダッシュ破線に適合 */
    border-radius: 10px;
    padding: 1.2rem;
    margin: 0 0 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
}

.info-label {
    display: block;
    font-size: 1.6rem;
    color: #75d4f2;
    font-weight: bold;
    -webkit-text-stroke: 1px #082868;
    paint-order: stroke fill;
    line-height: 1.4;
}

/* ==========================================================================
   9. タブレット・PC向けスタイル拡張（Media Queries: 768px以上）
   ========================================================================== */
@media (min-width: 768px) {
    /* ヒーローコンテナ：PC時は横並び2カラム（6.2 : 3.8の比率で約6:4に分割） */
    .hero-container-grid {
        display: grid;
        grid-template-columns: 6.2fr 3.8fr;
        gap: 3.5rem;
        align-items: center; /* 写真とテキストの縦方向の中央揃え */
    }

    /* タブレット・PC表示向け：.hero-tagの文字サイズを3.0remに拡張し、フチ幅も綺麗にスケール */
    .hero-tag {
        font-size: 3rem;
        -webkit-text-stroke: 2.2px #000000;
        margin-bottom: 1.5rem;
        display: inline-block;
    }

    /* 左下に重ねるキャッチコピーをPC向けに拡大調整 */
    .hero-overlap-text {
        font-size: 2.6rem;
        -webkit-text-stroke: 2.2px #000000;
        bottom: -15px;
        left: -15px;
    }

    .hero-subtitle {
        font-size: 1.15rem;
        margin-bottom: 2rem;
    }

    .hero-info-box {
        flex-direction: column; /* 縦並びインフォメーション */
        gap: 1.25rem;
        padding: 1.5rem;
    }
}