@charset "UTF-8";

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

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

.hpb-parts-hl-style
{
    border-color: #cccccc;
    background-image: none !important;
}

.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 !important;
}

.hpb-parts-blist-style
{
    border-color: #666666;
}
a.hpb-parts-blist-style:link
{
    color: #666666;
}
a.hpb-parts-blist-style:visited
{
    color: #666666;
}
a.hpb-parts-blist-style:hover
{
    color: #1DB0B3;
}
a.hpb-parts-blist-style:active
{
    color: #1DB0B3;
}

/*--------------------------------------------------------
  ユーザー設定スタイル（ここから追加・強化された設定です）
--------------------------------------------------------*/

/* 1. 全体の読みやすさ向上（文字詰まりの解消） */
body {
    line-height: 1.7; /* 行間を広げてゆったりと読めるように */
    letter-spacing: 0.03em; /* 文字の間隔をわずかに広げて視認性アップ */
}

p {
    margin-bottom: 1.2em; /* 段落ごとの隙間を適正化 */
}

/* 2. 新着情報（news.html）の表のレスポンシブ化 */
#HPB_DIARY_TABLE1B {
    max-width: 100% !important; /* パソコンでは元のサイズ、スマホでは画面幅に縮小 */
    width: 100% !important;
    height: auto !important;
}

#HPB_DIARY_TABLE1B table {
    max-width: 100% !important;
    width: 100% !important;
    border-collapse: collapse; /* 二重線を防ぐ */
    margin-bottom: 20px;
}

/* 新着情報内の画像・PDFのサイズ安全ガード */
.hpb_diary_contents img {
    max-width: 100% !important;
    height: auto !important;
}

.hpb_diary_contents embed {
    max-width: 100% !important;
    width: 100% !important;
    height: 450px; /* PDFが見やすい高さに固定 */
    border: 1px solid #ccc;
}

/* 3. 会社概要（company.html）のレイアウト調整 */
#company dl {
    width: 100%;
    margin: 0 auto;
}

#company dt {
    font-weight: bold;
    color: #009999; /* 研究所のテーマカラーに合わせる */
    border-left: 4px solid #009999;
    padding-left: 8px;
    margin-top: 15px;
    margin-bottom: 5px;
}

#company dd {
    margin-left: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee; /* 項目ごとの区切り線 */
}

/* 4. サイドバー（右側）の「横浜知財みらい企業」エリアの装飾 */
#banner-recog {
    background-color: #fcfbf7; /* ほんのりゴールドが引き立つ薄い背景色 */
    border: 1px solid #f0e6cc;
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
}

#banner-recog img {
    max-width: 100%;
    height: auto;
    transition: transform 0.2s;
}

#banner-recog img:hover {
    transform: scale(1.03); /* ロゴにマウスを乗せたときに少しだけ拡大する演出 */
}

/* 5. リンクのホバー（マウスを乗せたとき）の効果 */
a {
    transition: color 0.2s, opacity 0.2s;
}
a:hover {
    opacity: 0.8; /* リンクの上にマウスが来たらふわっと明るくする */
}