@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
  ※ レイアウトを壊す指定はすべて削除済み
--------------------------------------------------------*/

/* ボックス系の色設定（元のまま） */
.hpb-parts-cnt-style{
    border-color: #cccccc;
}

.hpb-parts-hl-style{
    border-color: #56A9D9;
}

.hpb-parts-cbox-style{
    border-color: #cccccc;
}

.hpb-parts-hr-style{
    border-color: #cccccc;
}

.hpb-parts-pbox-style{
    border-color: #cccccc;
}
.hpb-parts-pbox-style h4{
    padding: 0px;
}

.hpb-parts-blist-style{
    border-color: #56A9D9;
    background-color: #f3f3f3;
}
a:link.hpb-parts-blist-style{
    color: #000000;
}
a:visited.hpb-parts-blist-style{
    color: #000000;
}
a:hover.hpb-parts-blist-style{
    color: #ff6600;
}
a:active.hpb-parts-blist-style{
    color: #ff6600;
}

/*--------------------------------------------------------
  以下はレイアウトを壊していたため削除
  （#hpb-nav / #hpb-wrapper / #hpb-title / #hpb-main など）
--------------------------------------------------------*/

/*--------------------------------------------------------
  スマホ時のタイトル画像調整（安全な範囲で残す）
--------------------------------------------------------*/
@media screen and (max-width: 768px) {
    #hpb-title {
        position: static !important;
        height: auto !important;
    }
/* ▼スマホ用フォーム修正 */
@media screen and (max-width: 600px) {

  #mail table {
    width: 100%;
    border-collapse: collapse;
  }

  #mail th,
  #mail td {
    display: block;
    width: 100%;
  }

  #mail input.m,
  #mail input.l,
  #mail textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  #mail th {
    margin-top: 10px;
  }
}
/* ============================
   スマホ用レイアウト（新規作成）
   ============================ */
@media screen and (max-width: 768px) {

    /* 全体の横スクロール防止 */
    body, #hpb-wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    /* メインコンテンツを100%幅に */
    #hpb-main {
        float: none;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    /* 左NAVIをメインの下に移動（非表示にしたい場合は言ってください） */
    #hpb-side {
        float: none;
        width: 100%;
        margin-top: 20px;
    }

    /* 画像を画面幅に合わせて縮小 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* h2 の行間をスマホ向けに調整（あなたの編集に合わせて最適化） */
    .hpb-layoutset-02 h2 span.ja {
        line-height: 40px;
        font-size: 1.0em;
        padding-left: 20px;
    }

    /* PC用float解除（2カラム崩れ防止） */
    .hpb-layoutset-02 .hpb-main-box,
    .hpb-layoutset-02 .hpb-side-box {
        float: none;
        width: 100%;
    }
/* ============================
   スマホ用レイアウト（メイン100%版）
   ============================ */
@media screen and (max-width: 768px) {

    /* 全体の横スクロール防止 */
    body, #hpb-wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    /* メインコンテンツを100%幅に */
    #hpb-main {
        float: none;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    /* 左NAVIは位置そのまま（幅だけ調整） */
    #hpb-side {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    /* 画像を画面幅に合わせて縮小 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* h2 の行間をスマホ向けに調整（あなたの編集に合わせて最適化） */
    .hpb-layoutset-02 h2 span.ja {
        line-height: 40px;
        font-size: 1.0em;
        padding-left: 20px;
    }
}