/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
*/

/* --- スマホでは全幅、PCでは幅を制限するクラス --- */
.fullwidth-on-mobile {
    max-width: 100%;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 画面幅が782px以上（タブレットやPC）の場合のスタイル */
@media (min-width: 782px) {
    .fullwidth-on-mobile {
        max-width: 80%; /* ここでPCの幅を制限 */
    }
}

/* --- ヘッダースケーターアニメーション --- */
.header-skater {
    position: absolute;
    bottom: 0;
    left: -40px; /* 最初は画面の左外に隠す */
    width: 24px;
    height: 24px;
    animation-name: skate-across;
    animation-timing-function: linear;
    animation-iteration-count: infinite; /* 無限に繰り返す */
}

/* 左から右へ移動するアニメーションの定義 */
@keyframes skate-across {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(110vw); /* 画面幅+αまで移動して完全に消える */
    }
}

/* --- 「大会情報」タグの右下にある赤い三角形 --- */
.corner-triangle {
    position: absolute; /* 親要素(.relative)を基準に配置 */
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    /* 透明なボーダーで三角形の形を作り、左下だけ赤色にする */
    border-width: 0 0 8px 8px;
    border-color: transparent transparent #ef4444 transparent; /* Tailwindのred-500の色 */
}

/* --- 連盟セクションの特別スタイル --- */

/* 1. カードのホバーアニメーション (フワッと浮く) */
.info-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 滑らかに動く設定 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 通常時の影 */
}

.info-card-hover:hover {
    transform: translateY(-8px); /* 上に8px浮く */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 影を濃くして浮遊感を出す */
}

/* 2. タイトルのレスポンシブ配置 (スマホ:中央 / PC:右寄せ) */
.responsive-align-right {
    text-align: center; /* 基本は中央 */
}

@media (min-width: 782px) {
    .responsive-align-right {
        text-align: right !important; /* PCサイズ以上なら右寄せを強制 */
    }
}