@charset "UTF-8";
/*
    Template: swell
    Theme Name: hyogo-jyosei-sports
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* フッターウィジェットの横幅制限を解除して全幅にする */
.l-footer__inner {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ウィジェット内の余計な余白をゼロにする */
.c-widget, .p-footerWidget {
    margin: 0 !important;
    padding: 0 !important;
}

/* ブログパーツ自体の幅を100%にする */
.p-blogCard[data-id="293"], 
.p-blogParts {
    margin: 0 !important;
    max-width: none !important;
}


/* --- メインビジュアルの文字サイズを画面に合わせる設定 --- */

/* 1. パソコン（広い画面） */
.p-mainVisual__slideTitle {
    font-size: 3.0rem !important; /* 標準の3.5倍。数字を大きくすればさらに巨大化します */
    font-weight: bold !important;
    line-height: 1.2 !important;
}

/* 2. タブレット（中くらいの画面） */
@media screen and (max-width: 1024px) {
    .p-mainVisual__slideTitle {
        font-size: 2.5rem !important; /* 少し小さく */
    }
}

/* 3. スマホ（狭い画面） */
@media screen and (max-width: 767px) {
    .p-mainVisual__slideTitle {
        font-size: 1.5rem !important; /* さらに小さくして1画面に収める */
        padding: 0 10px; /* 文字が端に寄りすぎないように調整 */
    }
}




/* 1. 投稿リストを横一列に並べてスクロール可能にする */
.event-scroll-area .p-postList {
    display: flex !important;
    overflow-x: auto !important; /* 横スクロールを許可 */
    flex-wrap: nowrap !important;
    gap: 24px !important;
    padding: 20px 10px 40px 10px !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory !important;
}

/* 2. 各カードのサイズをPDFのバランスに合わせる */
.event-scroll-area .p-postList__item {
    flex: 0 0 320px !important; /* PCでのカードの横幅 */
    max-width: 320px !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    height: auto !important;
}

/* 3. カード本体のデザイン（白背景・影・角丸） */
.event-scroll-area .c-postCard {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    height: 100% !important;
    border: none !important;
    transition: transform 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 4. タイトルをPDF風に極太・大きくし、重なりを防止 */
.event-scroll-area .c-postCard__title {
    font-size: 1.35rem !important;
    font-weight: 900 !important; /* 最大の太さ */
    color: #222 !important;
    white-space: normal !important; /* 改行を許可 */
    line-height: 1.5 !important;
    padding: 20px 15px !important; /* 余白をしっかり確保 */
    display: block !important;    /* 重なりを防ぐためにブロック表示に固定 */
    position: static !important;   /* 絶対配置による重なりを防止 */
    margin: 0 !important;
    flex-grow: 1;
}

/* 5. スクロールバーをPDFのピンク色にする */
.event-scroll-area .p-postList::-webkit-scrollbar {
    height: 10px;
}
.event-scroll-area .p-postList::-webkit-scrollbar-thumb {
    background: #d81b60; /* PDFのテーマカラー */
    border-radius: 10px;
}
.event-scroll-area .p-postList::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* 6. スマホではカードを少し横幅を狭めて「次がある」ことを伝える */
@media screen and (max-width: 767px) {
    .event-scroll-area .p-postList__item {
        flex: 0 0 280px !important; /* スマホでの横幅 */
        max-width: 280px !important;
    }
}


/* サイト全体のSWELLボタンのホバー色をPDFのピンクにする */
.swell-block-button__link:hover {
background-color: #888888 !important; /* ここに好きな色（#d81b60など）を入れる */
color: #fff !important;               /* ホバー時の文字色 */
opacity: 1 !important;                /* SWELL標準の半透明化を無効にして色をハッキリ出す */}

.c-pageTitle__subTitle {
    display: none !important;
}

/* --- フッター全体の横幅制限を全幅（100%）に強制解除 --- */
.l-footer,
.l-footer__inner,
.l-footer__inner .l-container,
.l-footer__widgetArea,
.l-footer__foot,
.w-footer__box,
.p-footerWidget {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 左右に最低限の余白を持たせたい場合の調整 */
.l-footer__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
}