@charset "UTF-8";

/* ================================================= */
/* 1. ページ全体のレイアウト (960px中央寄せ) */
/* ================================================= */

/* ベースのリセット */
body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important; /* 背景色が必要なら指定 */
    text-align: center !important; /* 古いIE対策も含め中央寄せ */
}

/* ページ上部のロゴエリア (HTMLで追加した #sub-header) */
#sub-header {
    width: 100% !important;
    background-color: #fff; /* 背景色 */
    border-bottom: 1px solid #ccc; /* 区切り線（お好みで） */
    margin-bottom: 20px;
}

#sub-header-inner {
    width: 960px !important;
    margin: 0 auto !important; /* 中央寄せ */
    padding: 10px 0; /* 上下の余白 */
    text-align: left !important; /* ロゴは左寄せ */
    box-sizing: border-box;
}

/* メインコンテナ (コンテンツエリア) */
#hpb-container {
    width: 960px !important;
    margin: 0 auto !important; /* 中央寄せ */
    text-align: left !important; /* 中身のテキストは左揃え */
    padding: 0 !important;
    box-sizing: border-box;
    display: block !important;
}

/* ================================================= */
/* 2. メニュー (#hpb-nav) の横並び設定 */
/* ================================================= */

/* ナビゲーション全体 */
#hpb-nav {
    display: block !important;
    width: 960px !important; /* コンテンツ幅に合わせる */
    margin: 0 auto 20px auto !important; /* 中央寄せと下の余白 */
    clear: both;
}

/* リスト (ul) を横並びにする強力な指定 (Flexbox) */
#hpb-nav ul {
    display: flex !important; /* 横並びにする */
    justify-content: flex-start; /* 左寄せ (均等配置なら space-between や space-around) */
    flex-wrap: wrap; /* 折り返し許可 */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* リスト項目 (li) */
#hpb-nav li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    /* 必要に応じて幅を指定、なければ自動 */
    /* width: 20%; */ 
}

/* メニューのリンク (a) の見た目調整 */
#hpb-nav li a {
    display: block !important;
    padding: 10px 20px !important; /* クリックしやすい広さ */
    text-decoration: none !important;
    /* 文字色や背景色などは既存のデザイン(hpbparts.css等)が適用されますが、
       崩れる場合はここに追記してください */
}

/* ================================================= */
/* 3. 不要な要素の非表示 (index.html用の要素など) */
/* ================================================= */

/* もし index.html 用の固定ヘッダーがHTMLに残っていても消す */
#site-header {
    display: none !important;
}

/* もし フルスクリーン背景がHTMLに残っていても消す */
#fullscreen-slider {
    display: none !important;
}

/* layout-960px.css に追記 */

/* ページ下部のバナー画像を強制的に960px幅にする */
/* HPBの既存CSS (.hpb-parts-img-01) の設定を上書きします */
.hpb-parts-img-01 {
    width: 960px !important; 
    max-width: 960px !important;
    height: auto !important; /* アスペクト比を維持 */
    display: block !important;
    margin: 10px auto !important; /* 中央寄せと上下の余白 */
}

/* bxSliderのページャーのスタイルを修正 */

/* 1. ページャー全体（ul要素）を横並びで中央寄せにする */
.bx-wrapper .bx-pager {
    text-align: center;
    padding-top: 20px; /* スライドとの間に少し隙間を空ける */
}

/* 2. 各ページャー項目（aタグまたはspanタグ）をドット風にする */
.bx-wrapper .bx-pager.bx-default-pager a {
    display: inline-block; /* 横並びにする */
    width: 10px;        /* ドットの幅 */
    height: 10px;       /* ドットの高さ */
    margin: 0 5px;      /* ドット間の隙間 */
    background: #bbb;   /* ドットの色（非アクティブ） */
    text-indent: -9999px; /* ★数字の「1, 2, 3...」を非表示にする */
    border-radius: 50%; /* 完全な円形にする */
}

/* 3. アクティブなドットの色を変える */
.bx-wrapper .bx-pager.bx-default-pager a.active, 
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #000; /* アクティブなドットの色 */
}

/* layout-960px.css の末尾にある、以下のセクション全体を置き換えてください */

/* ================================================= */
/* 5. bxSlider ページャー強制修正（修正版） */
/* ------------------------------------------------- */
/* HPBのCSSによる上書きを防ぎ、ドットを横並びに戻します */
/* ================================================= */

/* 1. ページャーの親要素 (bx-pager-item) を横並びに強制 (これが最重要) */
.bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block !important; /* 親要素の横並びを強制 */
    margin: 0 !important; /* 余計な余白もリセット */
    padding: 0 !important;
}

/* 2. ドットのリンク要素 (a) に対して、数字非表示とサイズを強制 */
/* （既存のコードを再利用し、必要な設定のみ残します） */
.bx-wrapper .bx-pager.bx-default-pager a {
    text-indent: -9999px !important; /* 数字の非表示を強制 */
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
    border-radius: 50% !important; /* 円形を強制 */
    /* background: #bbb !important; は bxslider.min.css で設定されているため省略可能 */
}

/* フォトギャラリーの表組みの幅をメインエリア幅に合わせる */
#hpb-main #HPB_WPG_THUMB_TABLE1 {
    width: 100% !important;  /* 親要素(#hpb-main)の幅に強制的に合わせる */
    max-width: 100% !important;
    margin: 0 auto !important;
    table-layout: fixed;     /* セルの幅計算を固定して崩れを防ぐ */
}

/* 各セル内の幅を均等に2分割し、レスポンシブにする */
#hpb-main #HPB_WPG_THUMB_TABLE1 td {
    width: 50% !important; /* 左右のセルを50%ずつにする */
    height: auto !important;
    box-sizing: border-box;
}

/* 画像がセル内に収まるようにする */
#hpb-main #HPB_WPG_THUMB_TABLE1 td img {
    width: 100%;             /* セルの幅いっぱいに画像を広げる */
    height: auto;
    max-width: 100%;
}