@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style
{
    border-color: #cbb7a7;
    text-align: left !important;
}

.hpb-parts-hl-style
{
    margin-top: 15px !important;
    padding: 5px 0.2em !important;
    background-image: none !important;
    border-color: #e8619e;
}

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

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

.hpb-parts-pbox-style
{
    border-color: #cbb7a7;
}
.hpb-parts-pbox-style h4
{
    padding: 0px;
}
.hpb-parts-pbox-style img
{
    margin: 0px !important;
}

.hpb-parts-blist-style
{
    border-color: #e8619e;
}
a.hpb-parts-blist-style:link
{
    color: #723918;
}
a.hpb-parts-blist-style:visited
{
    color: #723918;
}
a.hpb-parts-blist-style:hover
{
    color: #e8619e;
}
a.hpb-parts-blist-style:active
{
    color: #e8619e;
}

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/
/* ========================================================
   スマホ画面（横幅568px以下）のとき、メニューボタンを上に配置
   ======================================================== */
@media screen and (max-width: 568px) {
    /* 親要素の並び順を制御できるようにする */
    #hpb-inner {
        display: flex;
        flex-direction: column;
    }

    /* ナビゲーション（三本線ボタン）を一番上に引き上げる */
    #hpb-nav {
        order: -1;
        margin-bottom: 10px; /* 本文との間に少し隙間を作る */
    }
}
/* ========================================================
   トップのメイン画像をスマホ画面の横幅に自動フィットさせる
   ======================================================== */
@media screen and (max-width: 568px) {
    /* 固定幅を解除し、画面幅（100%）に合わせる */
    #hpb-title.hpb-top-image img {
        width: 100% !important;
        height: auto !important; /* 縦横比を崩さない */
    }
}