@charset "utf-8";

/* ========================================================== */
/* 靜甲ソフトボール部 パートナーページ スタイル設定
/* ========================================================== */

/* ---------------------------------------------------------- */
/* 1. 基本レイアウト設定（common.cssの上書き）
/* ---------------------------------------------------------- */

/* コンテンツ幅の強制拡張 */
.l-contents.soft-sponsor {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ヘッダーエリアの幅調整 */
.soft-sponsor .l-contents-header {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 !important;
}

/* コンテンツ内部（.inner）の幅設定
   1200px幅の解像度に合わせてmax-widthを調整 */
.soft-sponsor .inner {
    max-width: 1200px !important; 
    width: 95% !important;        
    margin: 0 auto;
    box-sizing: border-box;
}

.soft-sponsor .sponsor-list {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ---------------------------------------------------------- */
/* 2. 見出し（Heading）スタイル
/* ---------------------------------------------------------- */

.soft-sponsor .common-sub-heading {
    text-align: center;
    margin-bottom: 60px;
    color: #ffffff;
    font-size: 40px;
}

.soft-sponsor .heading {
    border-bottom: 3px solid #0056a2;
    padding-bottom: 10px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-size: 28px;
    color: #ffffff;
    text-align: center;
}

/* 事務局名のロゴ風スタイル */
.soft-sponsor .secretariat-heading {
    font-family: "Eurostile", "Arial", sans-serif; /* ロゴっぽいフォントを指定 */
    font-weight: bold;
    font-size: 32px;
    color: #43a4e1;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.2;
    text-transform: uppercase; /* 大文字固定 */
}

/* 事務局ロゴのサイズ指定と中央寄せ */
.soft-sponsor .secretariat-heading img {
    width: 518px;
    height: 90px;
    object-fit: contain; /* アスペクト比を維持しつつ収める */
    display: block;      /* ブロック要素にしてmargin: autoを効かせる */
    margin: 0 auto;      /* 中央寄せ */
    max-width: 100%;     /* スマホ等で画面からはみ出さないように */
    height: auto;        /* スマホ等でアスペクト比を維持して縮小されるように */
}

/* PCサイズ以上でのみ固定サイズを適用 */
@media all and (min-width: 768px) {
    .soft-sponsor .secretariat-heading img {
        width: 518px;
        height: 90px;
    }
}

.soft-sponsor .secretariat-heading .suffix {
    font-size: 0.7em; /* "事務局"を少し小さく */
    margin-left: 10px;
    font-family: "Yu Gothic", "游ゴシック", sans-serif; /* 日本語フォントに戻す */
    font-weight: normal;
}

/* スマホ時の見出しフォントサイズ調整 */
@media all and (max-width: 767px) {
    .soft-sponsor .common-sub-heading { font-size: 26px; }
    .soft-sponsor .heading { font-size: 24px; }
    .soft-sponsor .secretariat-heading { font-size: 24px; }
}


/* ---------------------------------------------------------- */
/* 3. スポンサーロゴ・ボックス（Grid System）
/* ---------------------------------------------------------- */

/* グリッドラッパー共通 */
.soft-sponsor .sponsor-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* デフォルトは中央揃え（トップパートナー用） */
    justify-content: center;
    width: 100%;
}

.soft-sponsor .wrapper-top-first {
    margin-bottom: 0; /* 内部ボックスのマージンで段間を確保するため */
}
.soft-sponsor .wrapper-top-second,
.soft-sponsor .wrapper-premium,
.soft-sponsor .wrapper-family,
.soft-sponsor .wrapper-city {
    margin-bottom: 40px; /* セクション間の隙間 */
}


/* ボックス共通スタイル */
.soft-sponsor .sponsor-box {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    /* 横の隙間：左右5pxずつ = 間隔10px */
    margin: 0 5px; 
}

/* 画像スタイル */
.soft-sponsor .sponsor-box img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    object-position: center;
    border-radius: 0;
    display: block;
    padding: 0;
}

/* リンク付きボックスのホバー効果 */
.soft-sponsor a.sponsor-box {
    transition: opacity 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}
.soft-sponsor a.sponsor-box:hover {
    opacity: 0.7;
}


/* ========================================================== */
/* PC設定 (min-width: 768px)
/* ========================================================== */
@media all and (min-width: 768px) {

    /* --- 1. トップパートナー --- */
    /* 1段目の個数が可変（3個、4個、6個等）になっても自動で折り返されます */
    .soft-sponsor .wrapper-top-first {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
    
    .soft-sponsor .sponsor-box.type-top-first {
        width: 440px;
        height: 146px;
        margin-bottom: 38px; /* 折り返した際や、2段目との隙間 */
    }

    /* 2段目以降のラッパー */
    .soft-sponsor .wrapper-top-second {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .soft-sponsor .sponsor-box.type-top-second {
        width: 390px;
        height: 130px;
        margin-bottom: 38px; /* 折り返した際の隙間 */
    }


    /* --- 2. プレミアムパートナー --- */
    /* 1200px幅に合わせて3列 (350px * 3 + 余白 = 約1080px) で中央配置 */
    .soft-sponsor .wrapper-premium {
        max-width: 1080px; 
        margin-left: auto;
        margin-right: auto;
        justify-content: center; 
    }

    .soft-sponsor .sponsor-box.type-premium {
        width: 350px;
        height: 117px;
        margin-bottom: 19px; /* 折り返しマージン */
    }

    /* --- 3. ファミリーパートナー --- */
    /* 1200px幅に合わせて3列 (300px * 3 + 余白 = 約930px) で中央配置 */
    .soft-sponsor .wrapper-family {
        max-width: 930px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center; 
    }

    .soft-sponsor .sponsor-box.type-family {
        width: 300px;
        height: 75px;
        margin-bottom: 19px; /* 折り返しマージン */
    }


    /* --- 4. シティパートナー --- */
    /* 1200px幅に合わせて3列 (370px * 3 + 余白 = 約1140px) で中央配置 */
    .soft-sponsor .wrapper-city {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center; 
    }

    .soft-sponsor .sponsor-box.type-city {
        width: 370px;
        height: 123px;
        margin-bottom: 19px; /* 折り返しマージン */
    }
}


/* ========================================================== */
/* スマホ設定 (max-width: 767px)
/* ========================================================== */
@media all and (max-width: 767px) {
    /* ラッパーのリセット */
    .soft-sponsor .wrapper-top-first,
    .soft-sponsor .wrapper-top-second,
    .soft-sponsor .wrapper-premium,
    .soft-sponsor .wrapper-family,
    .soft-sponsor .wrapper-city {
        max-width: none;
        justify-content: space-between; /* 両端揃え */
    }

    /* 共通設定: 2列表示 */
    .soft-sponsor .sponsor-box {
        /* (100% - 左右マージン計10px) / 2 */
        width: calc((100% - 10px) / 2);
        height: auto;
        margin: 0 0 10px 0 !important; /* スマホ時はすべて下マージン10pxで統一 */
    }

    /* 高さの確保（アスペクト比維持） */
    .soft-sponsor .sponsor-box.type-top-first { aspect-ratio: 440/146; }
    .soft-sponsor .sponsor-box.type-top-second { aspect-ratio: 410/136; }
    .soft-sponsor .sponsor-box.type-premium { aspect-ratio: 350/117; }
    .soft-sponsor .sponsor-box.type-family { aspect-ratio: 300/75; }
    .soft-sponsor .sponsor-box.type-city { aspect-ratio: 370/123; }
}


/* ---------------------------------------------------------- */
/* 4. メッセージブロック・募集エリア
/* ---------------------------------------------------------- */

.soft-sponsor .message-block.gray-style {
    background-color: #555555;
    padding: 50px 20px;
    margin-top: 20px;
    text-align: center;
    color: #ffffff;
}

.soft-sponsor .mt-small { margin-top: 20px; }

.soft-sponsor .message-block.gray-style .heading {
    color: #43a4e1;
    font-size: 31px;
    font-weight: bold;
    margin-bottom: 25px;
    border-bottom: none;
    margin-top: 0;
}

.soft-sponsor .message-block.gray-style p {
    color: #ffffff;
    font-size: 18px;       /* 16px → 18px に変更（2ポイントアップ） */
    line-height: 2.0;
    text-align: center;    /* 中央寄せを指定 */
}

.soft-sponsor .message-block p a,
.soft-sponsor .address-text a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
}
.soft-sponsor .message-block p a:hover,
.soft-sponsor .address-text a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

@media all and (max-width: 767px) {
    .soft-sponsor .message-block.gray-style { padding: 40px 15px; }
    .soft-sponsor .message-block.gray-style p {
        font-size: 15px;
        text-align: left;
    }
    .soft-sponsor .secretariat-info .message-block p { text-align: center; }
}

/* 5. コンポーネント */
/* アドレスエリアのリンク色 */
.soft-sponsor .address-text a {
    color: #ffffff;
    text-decoration: none;
}

/* フラットデザインのお問い合わせボタン */
.soft-sponsor .flat-blue-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 60px;
    background-color: #43a4e1;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    margin: 30px auto 0;
    transition: opacity 0.3s ease;
    letter-spacing: 0.05em;
    border-radius: 4px;
}
.soft-sponsor .flat-blue-button:hover { opacity: 0.8; }