（すいません、ちょっと急いでます）

Question

meichi

305

278もっと見る

300pt

インターネットウェブ制作

（すいません、ちょっと急いでます）

ホームページビルダー19クラシックに関する質問です。
フルCSSテンプレートの企業0013を編集して、右側のページ
にテーブルを作成したのですが、、テーブルの中に文字が
入力しても、反映されないです。どうか、ご教示お願いします。なお、ソースは、この後、掲載します。
なお、申し訳ありませんが、中傷等は、ご勘弁願います。
m(_ _)m

回答の条件

1人1回まで

登録：2015/02/23 14:53:46
終了：2015/03/09 14:55:05

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

meichi 2015/02/23 14:56:16

下記がソースです。。。本当に申し訳ないです。。。。
--------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows">
<title>株式会社</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<p><br>
</p>
</div>
<div id="hpb-headerExtra1"> </div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-title" class="hpb-top-image" style="height : 781px;
text-align : left;
" align="left">
<br>
<br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地</td>
<td width="300" height="30"></td>
</tr>
</tbody>
</table>
<br>
<img src="a.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1" height="190">
<tbody>
<tr>
<td width="287" rowspan="4"> <br>
<br>
<br>
</td>
<td width="24"> </td>
<td height="28" width="263"> </td>
</tr>
<tr>
<td width="24"> </td>
<td height="27" width="263"> </td>
</tr>
<tr>
<td width="24" height="23"></td>
<td width="263" height="23"> </td>
</tr>
<tr>
<td width="24" height="14"></td>
<td width="263" height="14"> </td>
</tr>
</tbody>
</table>
<br>
<img src="katyosyokai1.gif" width="549" height="23" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td height="150"> </td>
</tr>
<tr>
<td height="88"> <br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="hpb-main" style="text-align : left;" align="left">
<p class="large">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<hr>
<span class="en"></span>
<div id="pagetop"></div>

</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">a担当</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">b担当</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">c担当</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">d担当</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">e担当</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">f担当</span><span class="en">RECRUIT</span></a>

<li id="nav-contact"><a href="contact.html"><span class="ja">g担当</span><span class="en">CONTACT US</span></a>

<li id="nav-kago-dai3"><a href="contact.html"><span class="ja">h担当</span><span class="en">CONTACT US</span></a>

<li id="nav-kirishima"><a href="contact.html"><span class="ja">j担当</span><span class="en">CONTACT US</span></a>

<li id="nav-sendai"><a href="contact.html"><span class="ja">k担当</span><span class="en">CONTACT US</span></a>

<li id="nav-kanoya"><a href="contact.html"><span class="ja">l担当</span><span class="en">CONTACT US</span></a>

<li id="nav-1se"><a href="contact.html"><span class="ja">m担当</span><span class="en">CONTACT US</span></a>

<li id="nav-2se"><a href="contact.html"><span class="ja">n担当</span><span class="en">CONTACT US</span></a>

<li id="nav-3se"><a href="contact.html"><span class="ja">o担当</span><span class="en">CONTACT US</span></a>

<li id="nav-ce"><a href="contact.html"><span class="ja">p担当</span><span class="en">CONTACT US</span></a>

</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">
<ul>
<li> <li><li></ul>
</div>
</div>

</div>

<div id="hpb-footerMain">copyright©20XX  all rights reserved. </div>
<h3 class="hpb-c-index">サブナビゲーション</h3>


</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>

---------------------------hpbparts.css---------------------------------------
@charset "Shift_JIS";

/******************************
* float clear
******************************/
.hpb-clear {
clear: both;
}

.hpb-clearfix:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.hpb-clearfix {
zoom: 1; /* for IE6 */
}

/******************************
* レイアウトコンテナ (div)
******************************/

/* 飾りなし幅自動 */
.hpb-parts-cnt-01 {
margin: 0px;
padding: 0px;
border: none;
width: auto;
float: none;
clear: both;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060 {
margin: 0px;
padding: 0px;
border: none;
width: 60px;
float: left;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120 {
margin: 0px;
padding: 0px;
border: none;
width: 120px;
float: left;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180 {
margin: 0px;
padding: 0px;
border: none;
width: 180px;
float: left;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240 {
margin: 0px;
padding: 0px;
border: none;
width: 240px;
float: left;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
margin: 0px;
padding: 0px;
border: none;
width: 360px;
float: left;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: auto;
float: none;
clear: both;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 60px;
float: left;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 120px;
float: left;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 180px;
float: left;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 240px;
float: left;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 360px;
float: left;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
margin: 0px;
padding: 0px 0.2em;
border: none !important;
line-height: 1.2em;
}

/* 下線 1 */
.hpb-parts-hl-02 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 3px !important;
border-bottom-style: double !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
margin: 0px;
padding: 0px 0.2em;
border-width: 1px !important;
border-style: solid !important;
line-height: 1.2em;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
margin: 0px;
padding: 0px 0.2em;
border-width: 3px !important;
border-style: double !important;
line-height: 1.2em;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-style: solid !important;
border-width: 2px 2px 2px 1.2em !important;
line-height: 1.2em;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
margin: 0px;
padding: 5px;
border: none;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: solid;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: dotted;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
margin: 0px;
padding: 2px;
border-width: 3px;
border-style: double;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01 {
margin: 0px;
padding: 0px;
border: none;
float: left;
}

/* 余白あり */
.hpb-parts-img-02 {
margin: 0px;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03 {
margin: 0px 5px 0px 0px !important;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04 {
margin: 0px 0px 0px 5px !important;
padding: 5px;
border: none;
float: right;
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05 {
margin: 0px;
padding: 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
margin: 0px;
padding: 5px 5px 5px 0px;
border: none;
float: left;
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07 {
margin: 0px;
padding: 0px 5px 5px 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
margin: 0px;
padding: 0px 5px 5px 0px;
border: none;
float: left;
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px !important;
border-top-style: solid !important;
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: solid;
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
margin: 0.5em 0px;
border-width: 3px 0px 0px 0px;
border-top-style: double;
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
margin: 5px;
padding: 0px;
border: none;
text-align: left;
width: auto;
float: none;
clear: both;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 70px;
float: left;
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 130px;
float: left;
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 190px;
float: left;
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 250px;
float: left;
}

/* 線囲み */
.hpb-parts-pbox-02 {
margin: 4px;
padding: 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: auto;
float: none;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 70px;
float: left;
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 130px;
float: left;
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 190px;
float: left;
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 250px;
float: left;
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc {
margin: 0px;
padding: 5px 5px 0px 5px;
border: none;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 135px;
float: left;
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 200px;
float: left;
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 265px;
float: left;
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 255px;
float: left;
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 380px;
float: left;
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 505px;
float: left;
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 375px;
float: left;
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 560px;
float: left;
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 745px;
float: left;
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 495px;
float: left;
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 740px;
float: left;
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 985px;
float: left;
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 135px;
float: left;
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 200px;
float: left;
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 265px;
float: left;
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 255px;
float: left;
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 380px;
float: left;
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 505px;
float: left;
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 375px;
float: left;
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 560px;
float: left;
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 745px;
float: left;
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 495px;
float: left;
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 740px;
float: left;
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 985px;
float: left;
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-01 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-01 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-01 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-style: none;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-02 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-02 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-02 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

/* 文字型 3 */
.hpb-parts-blist-03 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-03 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-03 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-03 li a {
display: block;
margin: 0px auto;
padding: 5px;
text-decoration: none;
border-left-width: 2em;
border-left-style: solid;
border-right-width: 2em;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-04 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-04 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-04 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
height: 30px;
}
.hpb-parts-blist-04 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-05 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-05 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-05 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-width: 1px;
border-style: solid;
height: 30px;
}
.hpb-parts-blist-05 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/******************************
* デフォルトスタイル設定
******************************/

.hpb-parts-cnt-style {
text-align: left;
}

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

.hpb-parts-cbox-style {
text-align: left;
}

.hpb-parts-hr-style {
clear: both;
}

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

/*--------------------------------------------------------
フルCSSテンプレート部品レスポンシブル設定
--------------------------------------------------------*/
@media screen and (max-width: 568px) {

/******************************
* Yahoo!ロコ-地図, Googleマップ
******************************/
div[name="HPBMAP"] {
max-width: 100% !important;
}

#hpb-main div[name="HPBMAP"] img {
max-width: none;
}

/******************************
* フォトモーション
******************************/
.hpb-photomotion {
max-width: 100% !important;
height: auto !important;
}
.hpb-photomotion:after {
display:table;
clear:both;
content:"";
}

/* 画像設定 */
#hpb-main img {
max-width: 100%;
height: auto;
}

/******************************
* レイアウトコンテナ (div)
******************************/
/* 飾りなし幅60px */
.hpb-parts-cnt-01-060,
/* 飾りなし幅120px */
.hpb-parts-cnt-01-120,
/* 飾りなし幅180px */
.hpb-parts-cnt-01-180,
/* 飾りなし幅240px */
.hpb-parts-cnt-01-240,
/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 写真ボックス (div)
******************************/
/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060,
/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120,
/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180,
/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240,
/* 線囲み */
.hpb-parts-pbox-02,
/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060,
/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120,
/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180,
/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 複数写真ボックス (div)
******************************/
/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060,
/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060,
/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060,
/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120,
/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120,
/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120,
/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180,
/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180,
/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180,
/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240,
/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240,
/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240,
/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060,
/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060,
/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060,
/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120,
/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120,
/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120,
/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180,
/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180,
/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180,
/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240,
/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240,
/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

}
---------------------------------------------------------------------------------
---------------------------container_1F1_2c_left.css---------------------------------------
@charset "Shift_JIS";

/* 要素リセット */
body{
margin: 0;
padding: 0;
text-align: center;
font-size: 75%;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳＰゴシック' , 'Osaka' ,sans-serif;
color: #000000; /* 標準文字色 */
min-width: 960px;
}
/* Safari用ハック文字サイズ調整 */
/*\*/
html:first-child body{
font-size: 70%;
}
/* end */

img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/

#hpb-container{
background-image : url(headerBg_1F1.png);
background-repeat: repeat-x;
background-position: top left;
}

#hpb-header{
height: 97px;
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}
#hpb-wrapper{
margin-top: -1px;
}

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

.hpb-layoutset-01 #hpb-main{
padding-top: 330px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 118px;
}

#hpb-aside{
width: 214px;
text-align: left;
padding-bottom: 20px;
padding-left: 8px;
float: left;
}
#hpb-footer{
clear: both;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height : 45px;
text-indent: -9999px;
overflow: hidden;
background-image : url(tanou1-kikaku-gosei.jpg);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

.hpb-layoutset-02 #hpb-title{
width: 730px;
height: 111px;
background-image : url(titleBg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}

/* ナビゲーション */

#hpb-nav{
width: 229px;
float: left;
}

#hpb-nav ul{
margin-top: -1px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-left: 0px;
padding-bottom: 0;
list-style-type: none;
text-align: right;
}

#hpb-nav li{
display: block;
font-size: 12px;
letter-spacing: 0.1em;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

#hpb-nav li a{
display: block;
padding-left: 20px;
padding-right: 20px;
height: 55px;
overflow: hidden;
line-height: 55px;
border-bottom: 1px solid #c8dcbd;
font-size: 1.1em;

}
#hpb-nav li a:hover{
background-color: #20bc71;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

/*トップページ*/

#toppage p.large{

}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

body{
min-width: 100%;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/
#hpb-inner{
background-image: none;
width: 100%;
}
#hpb-main{
width: 96%;
float: none;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-main{
padding-top: 0;
margin-top: -10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 0;
}
#hpb-aside{
width: 96%;
float: none;
padding-left: 0;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-aside{
padding-top: 0;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0;
}
#hpb-nav{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
background-color: #20bc71;
}
.hpb-layoutset-02 #hpb-nav{
top: 0;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */
.hpb-layoutset-01 #hpb-title{
width: 100%;
height: 170px;
overflow: hidden;
background-size: contain;
position: relative;
top: 0;
left: 0;
}
.hpb-layoutset-02 #hpb-title{
width: 100%;
background-size: contain;
background-position: top right;
position: relative;
top: 0;
left: 0;
height: auto;
background-color: #3cc482;

}
.hpb-layoutset-02 #hpb-title h2{
line-height: normal;
padding: 14px 0px 0px 10px;
font-size: 1.3em;
}

/* ナビゲーション */
#hpb-nav ul{
display: none;
height: auto;
background-color: #fff;
margin: 0;
text-align: center;
}
#hpb-nav ul.toggled-on{
display: block;
padding-left: 0;
}
#hpb-nav li{
display: block;
background-image: none;
}
#hpb-nav li a{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: auto;
line-height: 1.4;
}
#hpb-nav li a:hover{
background-image: none;
}

/*トップページ*/
#toppage p.large{
margin-bottom: 10px;
}

}
-----------------------------------------------------------------------------
---------------------------main_1F1_2c.css---------------------------------------
@charset "Shift_JIS";

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
background-image : url(bg_1F1.png);
background-position: top left;
background-repeat: repeat;
background-color: #fff;
}
#hpb-container{
margin-top: -1px;
}

#hpb-inner::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* ヘッダー内パーツ */

#hpb-header::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

#hpb-headerMain h1{
width: 960px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 4px 0 5px 12px;
color: #fff;
text-align: left;
font-weight: normal;
line-height: 18px;
font-size: 12px;

}
#hpb-headerLogo{
width: 470px;
float: left;
margin-top: 7px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerLogo a{
display: block;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 5px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-indent: -9999px;
overflow: hidden;
height: 54px;
background-image : url(logo_1F1.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-headerExtra1{
width: 470px;
float: right;
margin-top: 0px;
margin-right: 10px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.1em;
padding-right: 20px;
padding-top: 6px;
}
#hpb-headerExtra1 p.tel{
/* 電話番号の文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: right;
font-size: 1.4em;
color: #3cc482;
font-weight: bold;
vertical-align: middle;
}

#hpb-headerExtra1 p.tel span{
/* 電話番号の「TEL」文字設定 */
display: inline-block;
width: 34px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
text-align: left;
margin-right: 10px;
background-image : url(headerTel_1F1.png);
background-position: top left;
background-repeat: no-repeat;
vertical-align: middle;
}

#hpb-headerExtra1 p.address{
/* 住所文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 1.2;
text-align: right;
}

/* フッター内パーツ */

#hpb-footer{
background-color: #20bc71;
}

#hpb-footerMain{
padding-top: 18px;
padding-bottom: 18px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
text-align: center;
margin: 0;
color: #fff;
}

#hpb-footerExtra1{
padding-top: 13px;
padding-bottom: 23px;
width: 100%;
}

#hpb-footerExtra1 ul{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
text-align: right;
width: 960px;
}

#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline;
background-image : url(point_1F1_02.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 21px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: normal;
}

#hpb-footerExtra1 a:link{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:visited{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:hover{
text-decoration: underline;
}
#hpb-footerExtra1 a:active{
text-decoration: underline;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/

#hpb-nav li a{
/* ナビゲーション文字設定 */
font-weight: normal;
}

#hpb-nav li a:link{
color: #000;
text-decoration: none;
}
/* ナビゲーション文字色設定 */
#hpb-nav li a:visited{
color: #000;
text-decoration: none;
}
#hpb-nav li a:hover{
color: #fff;
text-decoration: none;
}
#hpb-nav li a:active{
color: #fff;
text-decoration: none;
}

#hpb-nav li span.en{
display: none;
}
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
color: #000;
text-decoration: underline;
}
a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #666;
text-decoration: none;
}
a:active{
color: #666;
text-decoration: none;
}

#hpb-skip{
/* ヘッダースキップの非表示 */
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
}

p{
margin-top: 0.5em;
margin-bottom: 2em;
padding-right: 20px;
padding-left: 0.1em;
line-height: 1.4;
text-align: left;
}

p.large{
font-weight: bold;
color: #548a04;
font-size: 1.2em;
}
p.indent{
padding-left: 25px;
}

.left{
float: left;
}

img.left{
margin-left: 14px;
}

.right{
float: right;
}

img.right{
margin-right: 24px;
}

hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;
}

.hpb-layoutset-02 h2{
padding-left: 33px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
line-height: 78px;
color: #fff;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}

h2 span.en{
display: none;
}

#hpb-wrapper h3{
color: #75b400;
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.1em;
background-image : url(indexBg_1F1.png);
background-repeat: no-repeat;
background-position: top center;
padding: 10px 10px 0px 10px;
}

h3.hpb-c-index{
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
background: none;
}

h4{
margin-top: 0;
margin-right: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
color: #0d6138;
font-weight: bold;
}

h5{
margin-top: 0;
margin-bottom: 10px;
margin-left: 14px;
margin-right: 14px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #3cc482;
}

table{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%;
}

table th{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
background-color: #e9faf2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

table td{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

/* フォームパーツ設定 */
input.button{
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding: 10px;
}

textarea{
width: 400px;
height: 200px;
}

input.l{
width: 400px;
}
input.m{
width: 250px;
}
input.s{
width: 150px;
}
#contact form{
text-align:center;
}
#contact form h3{
text-align: left;
}
#contact form table{
margin-left:auto;
}
/* メインコンテンツ内基本パーツ */

#hpb-main p{
margin-left: 10px;
margin-right: 10px;
}

#hpb-main ul{
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl{
margin-top: 0;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#hpb-main dt{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
line-height: 16px;
min-height: 16px;
font-weight: normal;
width: 140px !important;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
}

#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl::after{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#hpb-main img.left{
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}

#hpb-main img.right{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
float: right;
}

#pagetop{
position: absolute;
bottom: 0;
right: 20px;
width: 100%;
text-align: right;
}

#pagetop a{
/* ページの先頭へのリンク設定 */
background-color: #20bc71;
display: inline-block;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#pagetop a:link,
#pagetop a:visited{
color: #fff;
text-decoration: none;
}

/* サイドブロック内パーツ */

#banner ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#banner li{
padding-bottom: 4px;
}

#banner li a{
display: block;
width: 214px;
height: 77px;
text-indent: -9999px;
overflow: hidden;
}

#banner a#banner-service{
/* 製品一覧バナー */
background-image : url(banner_1F1_01.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-recruit{
/* 採用情報バナー */
background-image : url(banner_1F1_02.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-access{
/* アクセスバナー */
background-image : url(banner_1F1_03.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-inner #companyinfo{
background-image : url(sideBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #e9faf2;
margin-bottom: 10px;
border: 1px solid #c8dcbd;
border-radius: 4px;
width: 209px;
}

#hpb-inner #companyinfo h3{
color: #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-size: 1em;
text-align: center;
}

#hpb-inner #companyinfo p{
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* トップページデザイン定義 */

#toppage p.large{
letter-spacing: 0.2em;
}

#toppage h3{
padding: 13px 10px 5px 20px;
margin: 0;
background-image: none;
}

#toppage h3 span.ja{
display: none;
}
#toppage-topics,
#toppage-news{
border: 1px solid #c8dcbd;
border-radius: 4px;
margin: 0 0 25px 0;
background-image : url(topicsBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
}
#toppage-topics h3{

}
#hpb-main #toppage-topics hr{
margin-bottom: 0px;
padding-bottom: 0;
}
#hpb-main #toppage-topics ul{
margin-bottom: 8px;
}
#hpb-main #toppage-topics li{

}
#hpb-main #toppage-topics li:last-child{
border: none;
}

#hpb-main #toppage-news dl{
margin-bottom: 12px;
}
#hpb-main #toppage-news dt{
width: 100px !important;
}
#hpb-main #toppage-news dd{
padding-left: 120px;
}

#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */

#access h3 + img{
margin-left: 10px;
margin-bottom: 10px;
}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/
#hpb-container{
width: 100%;
margin-top: 0;
background-image: none;
background-color: #fff;
}

/* ヘッダー内パーツ */
#hpb-header{
width: 100%;
padding-bottom: 10px;
height: auto;
}
#hpb-headerLogo{
width: 98%;
float: none;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
#hpb-headerMain{
width: 100%;
}
#hpb-headerMain h1{
margin-left: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.4;
text-align: left;
width: auto;
background-color: #20bc71;
}
#hpb-headerLogo a{
display: block;
max-width: 100%;
height: 54px;
background-size: contain;
background-position: top center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerExtra1{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
float: none;
padding: 0;
}

#pagetop{
text-align: center;
left: 0;
}
/* フッター内パーツ */
#hpb-footerMain{
padding-top: 10px;
padding-bottom: 10px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
padding-left: 5px;
padding-right: 5px;
word-break: break-all;
}
#hpb-footerExtra1{
padding-top: 15px;
padding-bottom: 15px;
}
#hpb-footerExtra1 ul{
text-align: center;
width: 100%;
}
#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline-block;
margin-left: 10px;
margin-right: 10px;
padding-right: 0;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/
#hpb-nav h3.hpb-c-index{
width: 27px;
height: 20px;
background-image : url(btn_menu.png);
background-position: top left;
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}

/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
p{
padding-right: 0;
padding-left: 0;
}
img.left{
margin-left: 10px;
margin-right: 10px;
}
img.right{
margin-left: 10px;
margin-right: 10px;
}
.hpb-layoutset-02 h2{
width: 96%;
padding-left: 0;
padding-top: 25px;
line-height: 1.4;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
word-break: break-all;
}
table{
width: 96%;
margin-right: auto;
margin-left: auto;
}

/* フォームパーツ設定 */
textarea{
width: 96%;
}

input.l{
width: 96%;
}
input.m{
width: 60%;
}
input.s{
width: 30%;
}

/* メインコンテンツ内基本パーツ */
#hpb-main h3{
background-size: contain;
}
#hpb-main ul li{
padding-right: 0;
}
#hpb-main dt{
float: none;
line-height: 1.4;
padding-bottom: 0;
}
#hpb-main dd{
line-height: 1.4;
padding-left: 20px;
padding-right: 0;
}
#hpb-main img.left{
margin-left: 10px;
margin-right: 10px;
float: none;
}
#hpb-main img.right{
margin-left: 10px;
margin-right: 10px;
float: none;
}

/* サイドブロック内パーツ */
#banner li a{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#banner a#banner-service,
#banner a#banner-recruit,
#banner a#banner-access{
background-position: top center;
background-size: contain;
}
#hpb-inner #companyinfo{
margin-bottom: 0;
margin-left: auto;
margin-right:auto;
width: 96%;
}

/* トップページデザイン定義 */
#toppage p.large{
margin-left: 0;
margin-right: 0;
}
#hpb-main #toppage-news dd{
padding-left: 20px;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dt:first-child + dd{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */
#access h3 + img{
margin-left: 10px;
margin-right: 10px;
max-width: 96%;
height: auto;
}

}
--------------------------------------------------------------------------------
--------------------------user.css----------------------------------------------
@charset "Shift_JIS";

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

.hpb-parts-cnt-style
{
border-color: #c8dcbd !important;
}

#hpb-main .hpb-parts-hl-style
{
clear: both;
margin-top: 0.5em !important;
margin-bottom: 1em !important;
padding-top: 3px !important;
padding-left: 5px !important;
padding-bottom: 3px !important;
text-align: left;
font-size: 1.3em !important;
color: #000 !important;
font-weight: normal;
background-image: none !important;
background-color: transparent !important;
height: auto;
line-height: normal;
letter-spacing: normal !important;
border-color: #c8dcbd !important;
}

.hpb-parts-cbox-style
{
border-color: #c8dcbd !important;
}

.hpb-parts-hr-style
{
border-color: #c8dcbd !important;
}

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

.hpb-parts-blist-style
{
background-color: #20bc71;
border-color: #61dba0;
}
a.hpb-parts-blist-style:link
{
color: #fff;
}
a.hpb-parts-blist-style:visited
{
color: #fff;
}
a.hpb-parts-blist-style:hover
{
background-color: #4bd191;
}
a.hpb-parts-blist-style:active
{
background-color: #4bd191;
}

/*--------------------------------------------------------
hpbparts
--------------------------------------------------------*/
/* 飾りなし幅自動 */
.hpb-parts-cnt-01
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360
{
margin-bottom: 5px;
padding: 5px;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
}

/* 下線 1 */
.hpb-parts-hl-02
{
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
padding: 5px 0.2em 3px 5px !important;
border-bottom-width: 1px !important;
border-color: #ccc !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
padding: 5px 0.2em 3px 5px !important;
border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
padding-top: 6px !important;
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-top-width: 1px !important;
border-top-color: #ccc !important;
border-top-style: dotted !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
border-right-width: 1px !important;
border-right-color: #ccc;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
margin-bottom: 5px;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
margin-bottom: 0.5em;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
margin-bottom: 0.5em;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
margin-bottom: 0.5em;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
}
.hpb-parts-blist-01 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-01 li a
{
padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
}
.hpb-parts-blist-02 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-02 li a
{
border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{

}
.hpb-parts-blist-03 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-03 li a
{
border-left-width: 1em;
border-right-width: 1em;
border-right-style: solid;
border-top-style: dotted;
border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-05 li a
{
border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
ユーザー設定スタイル
--------------------------------------------------------*/
--------
a-kuma3 2015/02/23 15:44:07

所在地の右側とか、画像を挟んでその下にある TABLE ですよね。
直接、ソースをいじれば表示されているようなんですが...

<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地</td>
<td width="300" height="30">○○県××市</td>
</tr>
</tbody>
</table>
　　...

うーん、ホームページビルダーの使い方の問題なのかな...
でも、「所在地」は入力できてるわけですもんね。
せっかくリクエストをいただいたのですが、ごめんなさい。ちょっとぼくの手には負えないようです...
rouge_2008 2015/02/23 16:35:04

すみません。どのテーブルですか？
「所在地」を入力したテーブル内が表示されないのは、「container_1F1_2c_left.css」の97行目にある「text-indent: -9999px;」が原因のようです。
この指定でテキスト要素が9999px分左側に移動して表示されています。(通常、画面には表示せず隠したい時に指定されます。)

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height : 45px;
text-indent: -9999px; /* ←左のスタイルが原因です */

初期状態でこのスタイルが指定されているデザインなのでしたら、表示する内容を追加する場所を間違えている可能性があります。
カスタマイズ前のソースも開示するか、あるいはホームページビルダーのサポートに問い合わせた方がいいと思います。
meichi 2015/02/23 16:39:48

すいません、いま帰ってきました。。。事情をもうちょっと詳しく説明すると
所在地の文字は、ビルダーで入力できるのですが、、、ブラウザ上でみると
文字が見えないのです。。。。CSSファイルが関係しているようですが・・・・・

職場のIEのバージョンを、確認してくれば、よかった。。。。（残念・・・）

＃いま、直接HTMLを触ると、確かに表示できるのを確認しました。。。。
　a-kuma3さんのおっしゃられるとおり、あたりまえですよね。。。。

＃大変、皆様には、ご迷惑かけますが、本件解決しましたら、追加で200ptお支払い
　します。どうか、よろしくお願いします。

＃どうか、事情を、ご理解くださいとは、いいませんが・・・・・手に負えないのです。m(_ _)m
meichi 2015/02/23 16:51:07

rouge_2008さま、、、いつも、いつもお世話になります。

文字が、ビルダー上で、入力して、テーブルの中に反映されないのは、すべてのテーブルです。。

＃すみません、、、、もう力つきてしまいそうですが・・・私が・・・m(_ _)m

＃でも、、トリガーをいただいて、本当にありがとうございました。。。。m(_ _)m

サポートの方も、、、-9999px　←を非常に気にされていました。。。
ビルダー上で、なおしても、、、戻ってしまうのです。。。画像は、入力できるのですが・・・
サポートの方も、CSSは、サポート外で、手に負えないとのことでした。。。

カスタマイズ前のソースは、職場からでしか、、、開示できないので、、、、
ご必要であれば、明日、コメントで、ださせていただきます。

＃自宅のPCの体験版では、テンプレートを選んでも、使えないのです・・・
　本当に、すみません。。。m(_ _)m

できればですが、、、最初から、もう一度つくるのは、さけたいのです。。。。
（私の勝手で、本当に、申し訳ないですが・・・）
meichi 2015/02/23 16:58:00

すみません、、、もう、いまは、ここまでが、、限界です。

初期状態でこのスタイルが指定されているデザインなのでしたら、表示する内容を追加する場所を間違えている可能性があります。

↑大変、申し訳ありませんが、、、よく理解できませんでした。。m(_ _)m
大変申し訳ありません。。。。。
rouge_2008 2015/02/23 16:59:33

やはり表示内容を追加する場所を間違えていると思います。
追加したテーブルなどを囲んでいる要素のidが「hpb-title」クラス名が「hpb-top-image」になっていますので、ここはサイトやページのタイトルイメージ画像を追加する場所ではないかと思います。(なのでテキスト要素を表示しないスタイルが指定されている。)

------------------------------------------------------
<div id="hpb-title" class="hpb-top-image" style="height : 781px;
text-align : left;
" align="left">
<br>
<br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地</td>
<td width="300" height="30"></td>
</tr>
</tbody>
</table>
<br>


------------------------------------------------------

「所在地」とビルダーで入力する際、どのように入力したのでしょう？
HTMLソースに直接記述したのでしたら、できれば一旦別の編集モードにして適当な内容を追加してから、エディタモードに戻して追加された場所を確認してみてはいかがでしょう？
ビルダーを所有していない為、本来のデザインや動作が確認できず、推測するしかできませんので・・・
rouge_2008 2015/02/23 17:12:20

入れ違いになりましたが、「表示する内容を追加する場所～」については上のコメントの通りです。
ソース開示の前に上のコメントに書いたように別の編集モードでの確認を試すと、表示したい内容を追加する正しい場所が分かるかもしれません。
※この後確認できない場合は明日でも全然大丈夫です。(質問者であるmeichiさんのペースでどうぞ・・・)
rouge_2008 2015/02/23 17:23:58

現在テーブルを追加してあるdiv要素「<div id="hpb-title" class="hpb-top-image" ～ align="left">～</div>」の下に以下のdiv要素(※id「hpb-main」)があります。
おそらく以下の中に追加するといいのではないかと思うのですが・・・

----------------------------------------------------------
<div id="hpb-main" style="text-align : left;" align="left">
<p class="large">

<hr>
<span class="en"></span>
<div id="pagetop"></div>

</div>


----------------------------------------------------------

※本来内容を追加編集するべき場所が確認できたら、「<div id="hpb-title" class="hpb-top-image" ～ align="left">～</div>」内に追加したテーブル等の記述を正しい位置にそっくりカット＆ペーストしてみてください。
(※正しい位置が上記のdiv要素内の時は、上記のdiv要素直下にペーストします。HTMLの仕様として間違いになりますので、p要素内にはペーストしないでください。)
meichi 2015/02/23 20:02:15

さすが、、、rouge_2008さんですね。。いま、ちょっと、おちついたところです。。。。

＃テンプレートは、おっしゃるとおり、

　追加したテーブルなどを囲んでいる要素のidが「hpb-title」クラス名が「hpb-top-image」に　なっていますので、ここはサイトやページのタイトルイメージ画像を追加する場所ではないかと思　います。(なのでテキスト要素を表示しないスタイルが指定されている。)

↑そのとおりです。サポートに聞きながら、わたしは、強引に、その場所に、アイコンと
表を追加してました。。。＃そうすれば、うまくいく可能性があるとのメーカの回答でしたので、

＃度素人の私でも、ちょっとCSSをみたら、右のページの一番上のアイコン（画像）
（tanou1-kikaku-gosei.jpg）がCSSに入っていたので、、、
　この画像は、背景として、扱われているのでは、ないかと思って帰ってきました。

「所在地」とビルダーで入力する際、どのように入力したのでしょう？
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
↑ビルダーの編集モード（HTMLを触らない）で、テーブルの中に、エクセル感覚で入力
しました。。

ソース開示の前に上のコメントに書いたように別の編集モードでの確認を試すと、表示したい内容を追加する正しい場所が分かるかもしれません。
↑もともとのテンプレートで、やってみたいと、おもってますが、、、大変申し訳ないです。
確認は、本来、自分が追加したいところが、目的の場所にあってないことを確認すれば、いいので
しょうか。。。（頭、悪くてすいません）

＃このあと、もうしばらくは、起きていられると思います。。。。大変、何度も聞いてお手数
　かけます。。。m(_ _)m
rouge_2008 2015/02/23 23:46:29

すみません。ビルダー利用者ではないので、機能や動作仕様が良く分かっていないです。
※上のコメントの『HTMLソースに直接記述したのでしたら、できれば一旦別の編集モードにして適当な内容を追加してから、エディタモードに戻して追加された場所を確認～』は、「編集モード」を「編集スタイル」に、「エディタモード」を「エディターズ」モードに読み替えてください。

HTMLを触らないで入力したという事ですので、「スタンダード」あるいは「エディターズ」スタイルで編集したのでしょうか？
編集モードは標準モードですか？
上記の状態で操作したのでしたら、確認作業も「編集スタイル」「編集モード」ともにそのままの状態で操作して大丈夫だと思います。

> 本来、自分が追加したいところが、目的の場所にあってないことを確認すれば、いいのでしょうか。。。

はい、そうです。
本来はサイトやページのタイトル画像を表示する箇所にテーブルを追加してしまったのではないかと思います。
「ページ編集」タブでタイトル画像の下にあるコンテンツの本文を入力すると思われる場所にテーブルを挿入してから、「HTMLソース」タブで追加したテーブルのHTMLタグが何処に挿入されたかを確認してみてください。
※編集前のデフォルト状態のテンプレートを開くと、画像の下に改行マークが表示されていると思います。
それらの改行マークのどれか適当な位置をクリックしてカーソルを置いてからテーブルを追加すると、正しい位置に追加されるのではないかと思います。

※操作方法は以下のページで確認しましたが、おそらく分かりやすいのではないかと思います。
「ページ編集」タブでみた時に改行記号がまったく表示されていない場合は、次のページの下部に記載されている【ビックリマークを見えなくする方法の流れ】を参考にして、「改行記号」にチェックを付けてみてください。

・STEP2. ホームページビルダーのページ内容の修正方法
http://tempnate.com/hp_making/hpbuilder_how2.html
rouge_2008 2015/02/23 23:48:38

一つ忘れました・・・
改行記号が表示されていない場合の設定変更方法は以下のページを参考にしてください。

・ホームページビルダーでのホームページ作成方法
http://tempnate.com/hp_making/hpbuilder.html
meichi 2015/02/24 09:45:44

おはようございます。お世話になります。昨日は、ありがとうございまし。。。。
いまから、始めます。。。。なんとか、自分のペースで頑張ります。。。。。
meichi 2015/02/24 10:35:12

たびたび、お世話になります。。。m(_ _)m 下記のように、しましたら、、
正しく、表に文字が入力できました。。。

<div id="hpb-main" style="text-align : left;" align="left">
<hr>
<span class="en"></span>
<div id="pagetop"></div>
<br>
<br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地：</td>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30">ビル</td>
</tr>
</tbody>

</table>

＃大変、お世話になりました。。m(_ _)m ですが、左側のリンク（a担当等など）の
　レイアウトが下に表示され、くずれてしまっています。。。

＃ここは、もう、メーカに聞いた方がいいでしょうか。。。それとも、別だてで
　質問をあげた方がいいでしょうか。。。

大変、申し訳ないです。。。どちらが、いいかアドバイスいただけると、大変
助かるのですが・・・
a-kuma3 2015/02/24 11:23:55

＞＃大変、お世話になりました。。m(_ _)m ですが、左側のリンク（a担当等など）の
＞　レイアウトが下に表示され、くずれてしまっています。。。

スタイルシートをいじってません？
container_1F1_2c_left.css とか。

例えば、そこに指定されている #hpb-main の float: right が消えてたりすると、左側の担当を選ぶ部分が main の下にずれたりします。

#hpb-main{
　　width: 694px;
　　float: right;　　← これ

＃コメントに書かれたような崩れ方をする、唯一の理由ではないですけれど。

メーカーのサポートって、ビルダーの使い方は教えてくれても、そこに書かれているもの（html や css）については、サポートの範囲外なんじゃないでしょうか。
サポートの契約内容によるとは思いますけど。

この質問が、まだ開いてますから、別だてで質問する必要はないんじゃありません？
延々とコメントが伸びてますし　:-)
meichi 2015/02/24 11:49:23

たびたび、お世話になります。container_1F1_2c_left.css の内容は、下記です。

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

あと、大変、申し訳ありません。。。m(_ _)m いったん最初は、文字が入力
できたのですが、、追記できなくなってしましました。（泣）

つまり、所在地の文字のあとは、ビルダーで入力できるのですが、、、IEで
確認すると、追記した文字が反映されていないのです。。。

ビルダーのバージョンは、19.0.5.0です。IEは、8　です。

＃大変、お手数かけまして、申し訳ありません。。別だてて質問を、あげるのは
　甘えさせていただきます。本当にすみません。。。
meichi 2015/02/24 13:15:22

たびたび、すいません、文字の入力は、私が勘違いしてました。。。ごめんなさい。

＃ただ、保存してなかっただけした。。。

要望が、多くて、本当に申し訳ありませんが、テーブルの上に
本来サイトやページのタイトル画像を表示する箇所にテーブルとアイコンを追加
したいのですが、どうでしょうか。。。テーブルの上に間がかなり、あいてましてm(_ _)m

レイアウトがくずれているのも、、、ありますが、、、
rouge_2008 2015/02/24 13:42:29

> テーブルの上に
> 本来サイトやページのタイトル画像を表示する箇所にテーブルとアイコンを追加
> したいのですが、どうでしょうか。。。テーブルの上に間がかなり、あいてまして

そこはタイトル画像を表示する用途の要素だと思いますので、テーブルなどコンテンツ内容を追加するには、CSSでデザインを変更する必要が出てくると思います。
間が気になる場合は、「<div id="hpb-main" ～>」内でテーブルの挿入位置を変更した方がいいと思います。

----------------------------------------------------------
<div id="hpb-main" style="text-align : left;" align="left">

<hr>
<span class="en"></span>
<div id="pagetop"></div>
<br>
<br>
<br>
<br>

----------------------------------------------------------
a-kuma3 2015/02/24 14:02:49

質問の最初に、コメントに載せたコードから、それほど変わっていないとしたら、
所在地の TABLE の上に大きなスペースが空いているのは、
・id="hpb-title" の DIV に、height: 781px と指定されている（HTML で）
・id="hpb-main" の DIV に、padding-top: 330px と指定されている（container_1F1_2c_left.css で）
の、ふたつが理由だと思います。
DIV#hpb-title の中に、画像などを入れるか、高さを小さくする必要があります。

メニューのところがずれているのは、ちょっと分からないですね。
コメントの最初のソースで、テーブルの位置だけ変えても、メニューがずれないので。
もう一回、全ソース載せます？
meichi 2015/02/24 14:08:47

お忙しい中、本当に申し訳ないです。。。m(_ _)m 下記のようにしました。
すみませんが、まだ、上の間が、あいてます。。。。
（余談で、大変、申し訳ないです・・あと、１時間で、私は、いつもですが、仕事の時間が
　タイムリミットです。。。。m(_ _)m）

<div id="hpb-main" style="text-align : left;" align="left">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地：</td>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30">ビル　３階</td>
</tr>
</tbody>

</table>

＃一つ、気づいたことが、ありまして、レイアウト（左がくずれている件）は
　ビルダーのプレビュー画面・ブラウザ上では、なぜか、正しく表示されています。。

＃ページ編集の画面では、、、くずれているのですが・・・
meichi 2015/02/24 14:20:00

たびたび、連打で、申し訳ないです。。。m(_ _)m

cssをいじったら、OKでした。。。。本当にありがとございます。。。。

＃すみません、あと、いくつか、やりたいことが、ありますので、、、
　時間があるだけ、やってみます。。。
meichi 2015/02/24 15:25:25

すいません、もう会社の時間は、終わりでしたので、いま休憩室にいます。

＃ちょっと事情があって、しばらく自宅に帰れないのです。。。

やりたいことが、ありまして・・・・・下記が画面のイメージだとします。
なお、囲っている線は、イメージでして、画面全体の内側のかこっている部分だと
解釈いただけると助かります。、

___________________
|リンク　アイコン |
|リンク　テーブル |
| |
| |
| |
-------------------

上の画面イメージに、一番上のリンクの上の線の上に画像（タイトル画像のような）を
掲載したいのですが、、、時間ぎりぎりまで、やったのですが。。。。m(_ _)m

＃度素人の上に要望が、多くて、すいませんが、ご教示いただけないでしょうか。。。

本当にすみません。。。。＃ソースを掲載したかったのですが、時間上無理でした。。。。

レイアウトがくずれる件も・・・・m(_ _)m 何か、お気づきの点がありましたら。。。。
rouge_2008 2015/02/24 16:26:24

テーブルの上の間の件はCSS変更で解決したのですね？
どのように変更したのでしょう？

画像の件ですが、テーブルの上に挿入された画像「katyosyokai1-gosei.jpg」の上あるいは下に追加した場合は、希望通りの表示にはなりませんか？
下のHTMLではリンクが記述されていないので、私にはどの位置に追加するのが適切かはちょっと分からないのですが・・・

-------------------------------------------------
<div id="hpb-main" style="text-align : left;" align="left">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
-------------------------------------------------

レイアウトのイメージ画像を作成して提示した方が分かりやすいかもしれません。

※レイアウト崩れの件は、編集記号が原因ではないでしょうか？
上でもコメントしましたが、【ビックリマークを見えなくする方法の流れ】を参考にして、今回は記載された通りに実行してみてください。

・ホームページビルダーでのホームページ作成方法
http://tempnate.com/hp_making/hpbuilder.html

※その他の編集記号が原因の場合は、「ページ編集」タブでの崩れは気にせず、表示確認は「プレビュー」タブで行うようにしてはいかがでしょう？
「ページ編集」タブでは、余分な改行が残っているのを確認できた方がいいと思いますので・・・(「レイアウト用素材記号」が何かは不明ですが。)
rouge_2008 2015/02/24 16:51:06

「ページ編集」タブで編集記号を非表示にしたい場合、一時的に表示モードを「表示優先」に切り替えて使用しても良さそうです。

・表示モードの切り替えボタンとは
http://www-01.ibm.com/support/docview.wss?uid=shc149257314000d201649257672002af5fe
meichi 2015/02/24 18:58:33

大変、お忙しい中、ご回答ありがとうございます。m(_ _)m

テーブルの上の間の件はCSS変更で解決したのですね？どのように変更したのでしょう？
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
↑container_1F1_2c_left.cssのpadding-top: 330pxを10pxにしたら、できました。
ありがとうございます。なお、もとのcssファイルはコピーしてます。

レイアウト崩れの件は、編集記号が原因ではないでしょうか？
→職場でも、紹介していただいたHPは見たのですが、、、すいません。そのときは、気づき
　ませんでした。。。いま、わかりましたので、明日、またやってみます。

画像の件ですけど、、、あたりまえですが、、、、申し訳ないです。伝わってないですよね。
（ここが、よく私の注意される点ですが・・）
明日、イメージを、ご提示させていただければと思います。

＃本当に、お付き合いいただきありがとうございます。。。m(_ _)m
meichi 2015/02/24 19:12:44

すいません、コメントに画像を入れることって可能なのでしょうか。。。。
「はてな」へも質問したのですが、、、19時すぎてしまいました。。。m(_ _)m
rouge_2008 2015/02/24 20:04:39

質問者からの補足メッセージでは、HTMLやはてな記法が有効だと思いましたので、フォトライフにアップした画像を表示できると思います。

・はてなフォトライフに登録した写真を表示する（fotolife記法）
http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%95%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%86%99%E7%9C%9F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88fotolife%E8%A8%98%E6%B3%95%EF%BC%89

・はてなのサービスと連携する (ヘルプはてなフォトライフ)
http://f.hatena.ne.jp/help#hatena

コメントに書く場合は、フォトライフ(またはその他のサービス)にアップした画像のURLをそのまま記述してくれれば大丈夫です。

************************************

思いついたんですが、以下のようにしたいのでしょうか？

左側(サイドバー内)｜右側
メニュー 1のリンク｜タイトル画像エリア
メニュー 2 のリンク｜テーブル
メニュー 3 のリンク|
....(略)....|

↓のようにレイアウト変更

左右にまたがるタイトル(？)画像エリアを追加(右側のテーブルの上部の画像エリアの代わり？)
左側(サイドバー内)｜右側
メニュー 1のリンク｜テーブル
メニュー 2 のリンク｜
メニュー 3 のリンク|
....(略)....|
meichi 2015/02/24 21:02:48

大変、お忙しい中、恐れ入ります。。。。もう少ししたら、たぶん、力つきます。。。
確かにフォトライフが使えそうです。

すいません、希望は、下記です。これで、伝わりますでしょうか。。。

　　　　左右にまたがる画像エリアを追加
左側(サイドバー内) ｜右側
メニュー 1のリンク｜イメージ←（前は、タイトル画像エリアでした）
メニュー 2 のリンク｜テーブル
メニュー 3 のリンク｜イメージ
｜テーブル
....(略)....|

左右にまたがる画像エリアを追加をビルダー上で、追加しても大きくずれるんです。（当時は左）
ソースが、ないので、とても伝えるのに無理があると思うのですが・・・

たびたび、おつきあいいただき、まことにありがとうございます。。。

また、私で準備するご必要な情報等ありましたら、お願いできますでしょうか。。。
a-kuma3 2015/02/24 21:09:14

いわゆる、タイトル画像のように、ページの上に横長の画像を表示したいんですよね。

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"> 

左詰めとか、センタリングは、css で調整することになります。
rouge_2008 2015/02/24 21:19:30

やりたい事はなんとなく分かったような気がしますが、現在の新しいソースが必要みたいです。
まだきちんと調べていませんが、質問時にコメントに投稿されたソースでは、開始タグと終了タグの個数が一致しないようですので・・・
meichi 2015/02/25 10:45:27

昨日は、まことにありがとうありがとうございます。m(_ _)m
まことに、すみませんが、レイアウトは、おっしゃたとおりにやってみましたが、
残念な結果でした。。。申し訳ないです。

下記にまず、HTMLのソースとやりたいことのURLを貼り付けます。
（すいません、この方法しか、なかったのです。m(_ _)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows">
<title>株式会社</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<p><br>
</p>
</div>
<div id="hpb-headerExtra1"></div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-main" style="text-align : left;" align="left">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地：</td>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30">ビル</td>
</tr>
</tbody>

</table>
<br>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
<br>
<br>
<br>
<br>
<br>
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1" height="190">
<tbody>
<tr>
<td width="287" rowspan="4"> <br>
<br>
<br>
</td>
<td width="34"> 氏名</td>
<td height="28" width="230"> <br>
</td>
</tr>
<tr>
<td width="34"> </td>
<td height="27" width="230"> </td>
</tr>
<tr>
<td height="23" width="34"></td>
<td height="23" width="230"> </td>
</tr>
<tr>
<td height="14" width="34"></td>
<td height="14" width="230"> </td>
</tr>
</tbody>
</table>
<br>
<img src="katyosyokai1.gif" width="549" height="23" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td height="150"> </td>
</tr>
<tr>
<td height="88"> メンバー<br>
<br>
山田　花子<br>
田中　太郎<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="hpb-main" style="text-align : left;" align="left">
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
</div>
<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">a担当</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">b担当</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">c担当</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">d担当</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">f担当</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">g担当</span><span class="en">RECRUIT</span></a>
<li id="nav-contact"><a href="contact.html"><span class="ja">h担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kago-dai3"><a href="contact.html"><span class="ja">i担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kirishima"><a href="contact.html"><span class="ja">k担当</span><span class="en">CONTACT US</span></a>
<li id="nav-sendai"><a href="contact.html"><span class="ja">l担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kanoya"><a href="contact.html"><span class="ja">m担当</span><span class="en">CONTACT US</span></a>
<li id="nav-1se"><a href="contact.html"><span class="ja">n担当</span><span class="en">CONTACT US</span></a>
<li id="nav-2se"><a href="contact.html"><span class="ja">o担当</span><span class="en">CONTACT US</span></a>
<li id="nav-3se"><a href="contact.html"><span class="ja">p担当</span><span class="en">CONTACT US</span></a>
<li id="nav-ce"><a href="contact.html"><span class="ja">q担当</span><span class="en">CONTACT US</span></a>
</ul>
</div>
<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">
<ul>
<li><li><li></ul>
</div>
</div>
<div id="hpb-footerMain">copyright©20XX  all rights reserved. </div>
<h3 class="hpb-c-index">サブナビゲーション</h3>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script>
<table border="1">

</table>
</div>
</div>
</div>
</div>
</body>
</html>

下が、やりたいことのURLです。。。いくつも（４つも）ありまして、本当に申し訳
ありません。m(_ _)m
大変お手数ですが、他に必要な情報等ありましたら、お願いできますでしょうか。

http://d.hatena.ne.jp/meichi/20150225
meichi 2015/02/25 14:10:01

本当に、お手数かけまして、申し訳ありません。m(_ _)m

いまのところ、下の緑の線を消すことができ、トップへ戻るへのリンクを設置する
場所をなんとか、簡単に確保できるところまでしました。ソースは、下記です。
ですが、入れたい画像は、いまのところ、どうしても、できないです。m(_ _)m
下のcopyrightは、上のテーブルと間があいしまい、調整したいのですが、、、、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows">
<title>株式会社</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<p><br>
</p>
</div>
<div id="hpb-headerExtra1"></div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-main" style="text-align : left;" align="left">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地：</td>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30">ビル</td>
</tr>
</tbody>

</table>
<br>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
<br>
<br>
<br>
<br>
<br>
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1" height="190">
<tbody>
<tr>
<td width="287" rowspan="4"> <br>
<br>
<br>
</td>
<td width="34"> 氏名</td>
<td height="28" width="230"> <br>
</td>
</tr>
<tr>
<td width="34"> </td>
<td height="27" width="230"> </td>
</tr>
<tr>
<td height="23" width="34"></td>
<td height="23" width="230"> </td>
</tr>
<tr>
<td height="14" width="34"></td>
<td height="14" width="230"> </td>
</tr>
</tbody>
</table>
<br>
<img src="katyosyokai1.gif" width="549" height="23" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td height="150"> </td>
</tr>
<tr>
<td height="88"> メンバー<br>
<br>
山田　花子<br>
田中　太郎<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="hpb-main" style="text-align : left;" align="left">
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
</div>
<div id="hpb-nav">
<p class="hpb-c-index">ナビゲーション</p>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">a担当</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">b担当</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">c担当</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">d担当</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">f担当</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">g担当</span><span class="en">RECRUIT</span></a>
<li id="nav-contact"><a href="contact.html"><span class="ja">h担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kago-dai3"><a href="contact.html"><span class="ja">i担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kirishima"><a href="contact.html"><span class="ja">k担当</span><span class="en">CONTACT US</span></a>
<li id="nav-sendai"><a href="contact.html"><span class="ja">l担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kanoya"><a href="contact.html"><span class="ja">m担当</span><span class="en">CONTACT US</span></a>
<li id="nav-1se"><a href="contact.html"><span class="ja">n担当</span><span class="en">CONTACT US</span></a>
<li id="nav-2se"><a href="contact.html"><span class="ja">o担当</span><span class="en">CONTACT US</span></a>
<li id="nav-3se"><a href="contact.html"><span class="ja">p担当</span><span class="en">CONTACT US</span></a>
<li id="nav-ce"><a href="contact.html"><span class="ja">q担当</span><span class="en">CONTACT US</span></a>
</ul>
</div>
<div id="hpb-aside">
<div id="banner">

</div>
</div>
<div id="hpb-footerMain">copyright©20XX  all rights reserved. </div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script>
<table border="1">

</table>
</div>
</div>
</div>
</div>
</body>
</html>
rouge_2008 2015/02/25 14:54:22

とりあえず、「copyright」を移動する前の状態のHTMLソースに戻すことはできますか？
現在の状態は元のデザインからかなり変わってしまって、レイアウトの為の要素がなくなっているものもあるようです。

開始タグと終了タグの数が一致しない件に関しては、新しいソースでは大丈夫なようです。
meichi 2015/02/25 14:59:59

大変、お忙しい中、ありがとうございます。m(_ _)m

すみません、いったん、お返事は、かえってからさせていただきます。
申し訳ありません。m(_ _)m
meichi 2015/02/25 17:38:26

本当に、お世話になりっぱなしでもうしわけないです。。。。帰ってきて、少し落ち着いた
ところです。

ソースを戻すということですが、、、今日のコメントの10:45:27に私が記載したソース
に戻すということでしょうか。。。（ちがっていたらすいません）
たぶんですが、、新しいソースまではCSSは触ってなく（と自分では、判断しているのですが）
細かくファイル名を保存したので可能かと思います。

開始タグと終了タグの数が一致しない件に関しては、新しいソースでは大丈夫なようです。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
すいません、↑の意味が、いまひとつ、理解できないのですが・・・申し訳ありません。
意図を教えていただけますと、わたしでも、理解できるかもしれないです。m(_ _)m

念のために今のCSSを下記に記載します。（４つありますよね）どうしても、
自宅で仕事ができないのです。。。

--hpbparts.css--
@charset "Shift_JIS";

/******************************
* float clear
******************************/
.hpb-clear {
clear: both;
}

.hpb-clearfix:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.hpb-clearfix {
zoom: 1; /* for IE6 */
}

/******************************
* レイアウトコンテナ (div)
******************************/

/* 飾りなし幅自動 */
.hpb-parts-cnt-01 {
margin: 0px;
padding: 0px;
border: none;
width: auto;
float: none;
clear: both;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060 {
margin: 0px;
padding: 0px;
border: none;
width: 60px;
float: left;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120 {
margin: 0px;
padding: 0px;
border: none;
width: 120px;
float: left;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180 {
margin: 0px;
padding: 0px;
border: none;
width: 180px;
float: left;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240 {
margin: 0px;
padding: 0px;
border: none;
width: 240px;
float: left;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
margin: 0px;
padding: 0px;
border: none;
width: 360px;
float: left;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: auto;
float: none;
clear: both;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 60px;
float: left;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 120px;
float: left;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 180px;
float: left;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 240px;
float: left;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 360px;
float: left;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
margin: 0px;
padding: 0px 0.2em;
border: none !important;
line-height: 1.2em;
}

/* 下線 1 */
.hpb-parts-hl-02 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 3px !important;
border-bottom-style: double !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
margin: 0px;
padding: 0px 0.2em;
border-width: 1px !important;
border-style: solid !important;
line-height: 1.2em;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
margin: 0px;
padding: 0px 0.2em;
border-width: 3px !important;
border-style: double !important;
line-height: 1.2em;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-style: solid !important;
border-width: 2px 2px 2px 1.2em !important;
line-height: 1.2em;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
margin: 0px;
padding: 5px;
border: none;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: solid;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: dotted;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
margin: 0px;
padding: 2px;
border-width: 3px;
border-style: double;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01 {
margin: 0px;
padding: 0px;
border: none;
float: left;
}

/* 余白あり */
.hpb-parts-img-02 {
margin: 0px;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03 {
margin: 0px 5px 0px 0px !important;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04 {
margin: 0px 0px 0px 5px !important;
padding: 5px;
border: none;
float: right;
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05 {
margin: 0px;
padding: 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
margin: 0px;
padding: 5px 5px 5px 0px;
border: none;
float: left;
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07 {
margin: 0px;
padding: 0px 5px 5px 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
margin: 0px;
padding: 0px 5px 5px 0px;
border: none;
float: left;
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px !important;
border-top-style: solid !important;
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: solid;
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
margin: 0.5em 0px;
border-width: 3px 0px 0px 0px;
border-top-style: double;
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
margin: 5px;
padding: 0px;
border: none;
text-align: left;
width: auto;
float: none;
clear: both;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 70px;
float: left;
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 130px;
float: left;
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 190px;
float: left;
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 250px;
float: left;
}

/* 線囲み */
.hpb-parts-pbox-02 {
margin: 4px;
padding: 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: auto;
float: none;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 70px;
float: left;
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 130px;
float: left;
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 190px;
float: left;
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 250px;
float: left;
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc {
margin: 0px;
padding: 5px 5px 0px 5px;
border: none;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 135px;
float: left;
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 200px;
float: left;
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 265px;
float: left;
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 255px;
float: left;
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 380px;
float: left;
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 505px;
float: left;
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 375px;
float: left;
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 560px;
float: left;
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 745px;
float: left;
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 495px;
float: left;
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 740px;
float: left;
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 985px;
float: left;
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 135px;
float: left;
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 200px;
float: left;
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 265px;
float: left;
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 255px;
float: left;
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 380px;
float: left;
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 505px;
float: left;
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 375px;
float: left;
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 560px;
float: left;
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 745px;
float: left;
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 495px;
float: left;
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 740px;
float: left;
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 985px;
float: left;
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-01 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-01 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-01 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-style: none;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-02 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-02 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-02 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

/* 文字型 3 */
.hpb-parts-blist-03 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-03 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-03 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-03 li a {
display: block;
margin: 0px auto;
padding: 5px;
text-decoration: none;
border-left-width: 2em;
border-left-style: solid;
border-right-width: 2em;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-04 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-04 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-04 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
height: 30px;
}
.hpb-parts-blist-04 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-05 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-05 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-05 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-width: 1px;
border-style: solid;
height: 30px;
}
.hpb-parts-blist-05 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/******************************
* デフォルトスタイル設定
******************************/

.hpb-parts-cnt-style {
text-align: left;
}

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

.hpb-parts-cbox-style {
text-align: left;
}

.hpb-parts-hr-style {
clear: both;
}

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

/*--------------------------------------------------------
フルCSSテンプレート部品レスポンシブル設定
--------------------------------------------------------*/
@media screen and (max-width: 568px) {

/******************************
* Yahoo!ロコ-地図, Googleマップ
******************************/
div[name="HPBMAP"] {
max-width: 100% !important;
}

#hpb-main div[name="HPBMAP"] img {
max-width: none;
}

/******************************
* フォトモーション
******************************/
.hpb-photomotion {
max-width: 100% !important;
height: auto !important;
}
.hpb-photomotion:after {
display:table;
clear:both;
content:"";
}

/* 画像設定 */
#hpb-main img {
max-width: 100%;
height: auto;
}

/******************************
* レイアウトコンテナ (div)
******************************/
/* 飾りなし幅60px */
.hpb-parts-cnt-01-060,
/* 飾りなし幅120px */
.hpb-parts-cnt-01-120,
/* 飾りなし幅180px */
.hpb-parts-cnt-01-180,
/* 飾りなし幅240px */
.hpb-parts-cnt-01-240,
/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 写真ボックス (div)
******************************/
/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060,
/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120,
/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180,
/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240,
/* 線囲み */
.hpb-parts-pbox-02,
/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060,
/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120,
/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180,
/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 複数写真ボックス (div)
******************************/
/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060,
/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060,
/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060,
/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120,
/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120,
/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120,
/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180,
/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180,
/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180,
/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240,
/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240,
/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240,
/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060,
/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060,
/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060,
/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120,
/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120,
/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120,
/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180,
/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180,
/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180,
/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240,
/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240,
/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

}

--- container_1F1_2c_left.css---
@charset "Shift_JIS";

/* 要素リセット */
body{
margin: 0;
padding: 0;
text-align: center;
font-size: 75%;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳＰゴシック' , 'Osaka' ,sans-serif;
color: #000000; /* 標準文字色 */
min-width: 960px;
}
/* Safari用ハック文字サイズ調整 */
/*\*/
html:first-child body{
font-size: 70%;
}
/* end */

img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/

#hpb-container{
background-image : url(tantou-up-image.gif);
background-repeat: repeat-x;
background-position: top left;
}

#hpb-header{
height: 97px;
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}
#hpb-wrapper{
margin-top: -1px;
}

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

.hpb-layoutset-01 #hpb-main{
padding-top: 10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 118px;
}

#hpb-aside{
width: 214px;
text-align: left;
padding-bottom: 20px;
padding-left: 8px;
float: left;
}
#hpb-footer{
clear: both;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height : 45px;
text-indent: -9999px;
overflow: hidden;
background-image : url(tanou1-kikaku-gosei.jpg);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

.hpb-layoutset-02 #hpb-title{
width: 730px;
height: 111px;
background-image : url(titleBg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}

/* ナビゲーション */

#hpb-nav{
width: 229px;
float: left;
}

#hpb-nav ul{
margin-top: -1px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-left: 0px;
padding-bottom: 0;
list-style-type: none;
text-align: right;
}

#hpb-nav li{
display: block;
font-size: 12px;
letter-spacing: 0.1em;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

#hpb-nav li a{
display: block;
padding-left: 20px;
padding-right: 20px;
height: 55px;
overflow: hidden;
line-height: 55px;
border-bottom: 1px solid #c8dcbd;
font-size: 1.1em;

}
#hpb-nav li a:hover{
background-color: #20bc71;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

/*トップページ*/

#toppage p.large{

}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

body{
min-width: 100%;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/
#hpb-inner{
background-image: none;
width: 100%;
}
#hpb-main{
width: 96%;
float: none;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-main{
padding-top: 0;
margin-top: -10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 0;
}
#hpb-aside{
width: 96%;
float: none;
padding-left: 0;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-aside{
padding-top: 0;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0;
}
#hpb-nav{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
background-color: #20bc71;
}
.hpb-layoutset-02 #hpb-nav{
top: 0;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */
.hpb-layoutset-01 #hpb-title{
width: 100%;
height: 170px;
overflow: hidden;
background-size: contain;
position: relative;
top: 0;
left: 0;
}
.hpb-layoutset-02 #hpb-title{
width: 100%;
background-size: contain;
background-position: top right;
position: relative;
top: 0;
left: 0;
height: auto;
background-color: #3cc482;

}
.hpb-layoutset-02 #hpb-title h2{
line-height: normal;
padding: 14px 0px 0px 10px;
font-size: 1.3em;
}

/* ナビゲーション */
#hpb-nav ul{
display: none;
height: auto;
background-color: #fff;
margin: 0;
text-align: center;
}
#hpb-nav ul.toggled-on{
display: block;
padding-left: 0;
}
#hpb-nav li{
display: block;
background-image: none;
}
#hpb-nav li a{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: auto;
line-height: 1.4;
}
#hpb-nav li a:hover{
background-image: none;
}

/*トップページ*/
#toppage p.large{
margin-bottom: 10px;
}

}

--- main_1F1_2c.css----
@charset "Shift_JIS";

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
background-image : url(bg_1F1.png);
background-position: top left;
background-repeat: repeat;
background-color: #fff;
}
#hpb-container{
margin-top: -1px;
}

#hpb-inner::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* ヘッダー内パーツ */

#hpb-header::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

#hpb-headerMain h1{
width: 960px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 4px 0 5px 12px;
color: #fff;
text-align: left;
font-weight: normal;
line-height: 18px;
font-size: 12px;

}
#hpb-headerLogo{
width: 470px;
float: left;
margin-top: 7px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerLogo a{
display: block;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 5px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-indent: -9999px;
overflow: hidden;
height: 54px;
background-image : url(logo_1F1.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-headerExtra1{
width: 470px;
float: right;
margin-top: 0px;
margin-right: 10px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.1em;
padding-right: 20px;
padding-top: 6px;
}
#hpb-headerExtra1 p.tel{
/* 電話番号の文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: right;
font-size: 1.4em;
color: #3cc482;
font-weight: bold;
vertical-align: middle;
}

#hpb-headerExtra1 p.tel span{
/* 電話番号の「TEL」文字設定 */
display: inline-block;
width: 34px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
text-align: left;
margin-right: 10px;
background-image : url(headerTel_1F1.png);
background-position: top left;
background-repeat: no-repeat;
vertical-align: middle;
}

#hpb-headerExtra1 p.address{
/* 住所文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 1.2;
text-align: right;
}

/* フッター内パーツ */

#hpb-footer{
background-color: #20bc71;
}

#hpb-footerMain{
padding-top: 18px;
padding-bottom: 18px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
text-align: center;
margin: 0;
color: #fff;
}

#hpb-footerExtra1{
padding-top: 13px;
padding-bottom: 23px;
width: 100%;
}

#hpb-footerExtra1 ul{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
text-align: right;
width: 960px;
}

#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline;
background-image : url(point_1F1_02.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 21px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: normal;
}

#hpb-footerExtra1 a:link{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:visited{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:hover{
text-decoration: underline;
}
#hpb-footerExtra1 a:active{
text-decoration: underline;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/

#hpb-nav li a{
/* ナビゲーション文字設定 */
font-weight: normal;
}

#hpb-nav li a:link{
color: #000;
text-decoration: none;
}
/* ナビゲーション文字色設定 */
#hpb-nav li a:visited{
color: #000;
text-decoration: none;
}
#hpb-nav li a:hover{
color: #fff;
text-decoration: none;
}
#hpb-nav li a:active{
color: #fff;
text-decoration: none;
}

#hpb-nav li span.en{
display: none;
}
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
color: #000;
text-decoration: underline;
}
a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #666;
text-decoration: none;
}
a:active{
color: #666;
text-decoration: none;
}

#hpb-skip{
/* ヘッダースキップの非表示 */
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
}

p{
margin-top: 0.5em;
margin-bottom: 2em;
padding-right: 20px;
padding-left: 0.1em;
line-height: 1.4;
text-align: left;
}

p.large{
font-weight: bold;
color: #548a04;
font-size: 1.2em;
}
p.indent{
padding-left: 25px;
}

.left{
float: left;
}

img.left{
margin-left: 14px;
}

.right{
float: right;
}

img.right{
margin-right: 24px;
}

hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;
}

.hpb-layoutset-02 h2{
padding-left: 33px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
line-height: 78px;
color: #fff;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}

h2 span.en{
display: none;
}

#hpb-wrapper h3{
color: #75b400;
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.1em;
background-image : url(indexBg_1F1.png);
background-repeat: no-repeat;
background-position: top center;
padding: 10px 10px 0px 10px;
}

h3.hpb-c-index{
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
background: none;
}

h4{
margin-top: 0;
margin-right: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
color: #0d6138;
font-weight: bold;
}

h5{
margin-top: 0;
margin-bottom: 10px;
margin-left: 14px;
margin-right: 14px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #3cc482;
}

table{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%;
}

table th{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
background-color: #e9faf2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

table td{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

/* フォームパーツ設定 */
input.button{
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding: 10px;
}

textarea{
width: 400px;
height: 200px;
}

input.l{
width: 400px;
}
input.m{
width: 250px;
}
input.s{
width: 150px;
}
#contact form{
text-align:center;
}
#contact form h3{
text-align: left;
}
#contact form table{
margin-left:auto;
}
/* メインコンテンツ内基本パーツ */

#hpb-main p{
margin-left: 10px;
margin-right: 10px;
}

#hpb-main ul{
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl{
margin-top: 0;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#hpb-main dt{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
line-height: 16px;
min-height: 16px;
font-weight: normal;
width: 140px !important;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
}

#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl::after{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#hpb-main img.left{
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}

#hpb-main img.right{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
float: right;
}

#pagetop{
position: absolute;
bottom: 0;
right: 20px;
width: 100%;
text-align: right;
}

#pagetop a{
/* ページの先頭へのリンク設定 */
background-color: #20bc71;
display: inline-block;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#pagetop a:link,
#pagetop a:visited{
color: #fff;
text-decoration: none;
}

/* サイドブロック内パーツ */

#banner ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#banner li{
padding-bottom: 4px;
}

#banner li a{
display: block;
width: 214px;
height: 77px;
text-indent: -9999px;
overflow: hidden;
}

#banner a#banner-service{
/* 製品一覧バナー */
background-image : url(banner_1F1_01.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-recruit{
/* 採用情報バナー */
background-image : url(banner_1F1_02.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-access{
/* アクセスバナー */
background-image : url(banner_1F1_03.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-inner #companyinfo{
background-image : url(sideBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #e9faf2;
margin-bottom: 10px;
border: 1px solid #c8dcbd;
border-radius: 4px;
width: 209px;
}

#hpb-inner #companyinfo h3{
color: #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-size: 1em;
text-align: center;
}

#hpb-inner #companyinfo p{
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* トップページデザイン定義 */

#toppage p.large{
letter-spacing: 0.2em;
}

#toppage h3{
padding: 13px 10px 5px 20px;
margin: 0;
background-image: none;
}

#toppage h3 span.ja{
display: none;
}
#toppage-topics,
#toppage-news{
border: 1px solid #c8dcbd;
border-radius: 4px;
margin: 0 0 25px 0;
background-image : url(topicsBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
}
#toppage-topics h3{

}
#hpb-main #toppage-topics hr{
margin-bottom: 0px;
padding-bottom: 0;
}
#hpb-main #toppage-topics ul{
margin-bottom: 8px;
}
#hpb-main #toppage-topics li{

}
#hpb-main #toppage-topics li:last-child{
border: none;
}

#hpb-main #toppage-news dl{
margin-bottom: 12px;
}
#hpb-main #toppage-news dt{
width: 100px !important;
}
#hpb-main #toppage-news dd{
padding-left: 120px;
}

#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */

#access h3 + img{
margin-left: 10px;
margin-bottom: 10px;
}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/
#hpb-container{
width: 100%;
margin-top: 0;
background-image: none;
background-color: #fff;
}

/* ヘッダー内パーツ */
#hpb-header{
width: 100%;
padding-bottom: 10px;
height: auto;
}
#hpb-headerLogo{
width: 98%;
float: none;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
#hpb-headerMain{
width: 100%;
}
#hpb-headerMain h1{
margin-left: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.4;
text-align: left;
width: auto;
background-color: #20bc71;
}
#hpb-headerLogo a{
display: block;
max-width: 100%;
height: 54px;
background-size: contain;
background-position: top center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerExtra1{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
float: none;
padding: 0;
}

#pagetop{
text-align: center;
left: 0;
}
/* フッター内パーツ */
#hpb-footerMain{
padding-top: 10px;
padding-bottom: 10px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
padding-left: 5px;
padding-right: 5px;
word-break: break-all;
}
#hpb-footerExtra1{
padding-top: 15px;
padding-bottom: 15px;
}
#hpb-footerExtra1 ul{
text-align: center;
width: 100%;
}
#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline-block;
margin-left: 10px;
margin-right: 10px;
padding-right: 0;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/
#hpb-nav h3.hpb-c-index{
width: 27px;
height: 20px;
background-image : url(btn_menu.png);
background-position: top left;
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}

/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
p{
padding-right: 0;
padding-left: 0;
}
img.left{
margin-left: 10px;
margin-right: 10px;
}
img.right{
margin-left: 10px;
margin-right: 10px;
}
.hpb-layoutset-02 h2{
width: 96%;
padding-left: 0;
padding-top: 25px;
line-height: 1.4;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
word-break: break-all;
}
table{
width: 96%;
margin-right: auto;
margin-left: auto;
}

/* フォームパーツ設定 */
textarea{
width: 96%;
}

input.l{
width: 96%;
}
input.m{
width: 60%;
}
input.s{
width: 30%;
}

/* メインコンテンツ内基本パーツ */
#hpb-main h3{
background-size: contain;
}
#hpb-main ul li{
padding-right: 0;
}
#hpb-main dt{
float: none;
line-height: 1.4;
padding-bottom: 0;
}
#hpb-main dd{
line-height: 1.4;
padding-left: 20px;
padding-right: 0;
}
#hpb-main img.left{
margin-left: 10px;
margin-right: 10px;
float: none;
}
#hpb-main img.right{
margin-left: 10px;
margin-right: 10px;
float: none;
}

/* サイドブロック内パーツ */
#banner li a{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#banner a#banner-service,
#banner a#banner-recruit,
#banner a#banner-access{
background-position: top center;
background-size: contain;
}
#hpb-inner #companyinfo{
margin-bottom: 0;
margin-left: auto;
margin-right:auto;
width: 96%;
}

/* トップページデザイン定義 */
#toppage p.large{
margin-left: 0;
margin-right: 0;
}
#hpb-main #toppage-news dd{
padding-left: 20px;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dt:first-child + dd{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */
#access h3 + img{
margin-left: 10px;
margin-right: 10px;
max-width: 96%;
height: auto;
}

}

--- user.css----
@charset "Shift_JIS";

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

.hpb-parts-cnt-style
{
border-color: #c8dcbd !important;
}

#hpb-main .hpb-parts-hl-style
{
clear: both;
margin-top: 0.5em !important;
margin-bottom: 1em !important;
padding-top: 3px !important;
padding-left: 5px !important;
padding-bottom: 3px !important;
text-align: left;
font-size: 1.3em !important;
color: #000 !important;
font-weight: normal;
background-image: none !important;
background-color: transparent !important;
height: auto;
line-height: normal;
letter-spacing: normal !important;
border-color: #c8dcbd !important;
}

.hpb-parts-cbox-style
{
border-color: #c8dcbd !important;
}

.hpb-parts-hr-style
{
border-color: #c8dcbd !important;
}

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

.hpb-parts-blist-style
{
background-color: #20bc71;
border-color: #61dba0;
}
a.hpb-parts-blist-style:link
{
color: #fff;
}
a.hpb-parts-blist-style:visited
{
color: #fff;
}
a.hpb-parts-blist-style:hover
{
background-color: #4bd191;
}
a.hpb-parts-blist-style:active
{
background-color: #4bd191;
}

/*--------------------------------------------------------
hpbparts
--------------------------------------------------------*/
/* 飾りなし幅自動 */
.hpb-parts-cnt-01
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360
{
margin-bottom: 5px;
padding: 5px;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
}

/* 下線 1 */
.hpb-parts-hl-02
{
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
padding: 5px 0.2em 3px 5px !important;
border-bottom-width: 1px !important;
border-color: #ccc !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
padding: 5px 0.2em 3px 5px !important;
border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
padding-top: 6px !important;
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-top-width: 1px !important;
border-top-color: #ccc !important;
border-top-style: dotted !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
border-right-width: 1px !important;
border-right-color: #ccc;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
margin-bottom: 5px;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
margin-bottom: 0.5em;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
margin-bottom: 0.5em;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
margin-bottom: 0.5em;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
}
.hpb-parts-blist-01 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-01 li a
{
padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
}
.hpb-parts-blist-02 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-02 li a
{
border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{

}
.hpb-parts-blist-03 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-03 li a
{
border-left-width: 1em;
border-right-width: 1em;
border-right-style: solid;
border-top-style: dotted;
border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-05 li a
{
border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
ユーザー設定スタイル
--------------------------------------------------------*/

-----
rouge_2008 2015/02/25 22:22:58

> ソースを戻すということですが、、、今日のコメントの10:45:27に私が記載したソース
> に戻すということでしょうか。。。

本来のデザインの枠組みが残っている状態まで戻してください。
私は元々のデザインは分かりませんが、今日の10:45:27の状態で既にデザインが崩れているように見えます。
右側のエリアにテーブルと画像を追加しただけの状態でしたら、本来のデザインはまだそのまま残っていますか？
面倒かもしれませんが、デザイン崩れが起きる前の状態に戻してから、再度ソースの投稿をお願いします。

開始タグと終了タグの数が一致しない件に関しては、先ほど気がついたばかりですが、結果的には単なる確認ミスでした。すみません・・・
HTMLなどの折りたたみ表示に対応しているのですが、質問開始時にコメントに投稿されたHTMLで作成したファイルでは、最後に空行を入れたため、折りたたみツリーが綺麗に終了していない状態になってしまい、閉じタグが足りない箇所があるのかと勘違いしました。
※HTMLでは省略可能な閉じタグもありますが、必要な閉じタグがないとブラウザで表示不具合(デザイン崩れ)が起こる場合があります。
ビルダーのメニュー操作のみの編集でも問題が生じるようでしたら、サポートに問い合わせる必要があると思いましたので、新しくテンプレートから編集している状態のソースも確認しようと思ったのでお願いしましたが、私の勘違いでしたのでこの件は忘れてください。ｍ(＿＿)ｍ
※ちなみに使用したテキストエディタはNotepad++です。
meichi 2015/02/26 01:01:36

大変、お世話になります。。m(_ _)m こんな時間にすいません。。。。。

デザイン崩れが起きる前の状態に戻してから、再度ソースの投稿をお願いします。
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
意味、わかりました。がんばって、もう一度作成しなおして、投稿させていただきます。
よろしくお願いします。HTML以外のCSSも必要でしょうか。。。

今日、進捗を聞かれました。今のページは、２７日にはには、どのくらいのページを上長が作成を
要望しているか、どうかわかりませんが、来週から、いま、作成しているページを
複製して、随時アップして予定の模様です。
（フレームを使わないので今のページの複製で、右側だけナビゲーションでかわるようにします）
（どんなに、遅くても１ページは作成しないといけないかも、しれません。相談には
　のってくれると思いますが、、）

明日、上長に、やりなおしの報告をするかどうか、迷っているところです。
やり直しの理由は、目的のレイアウトにするとテープルに文字を入力できないことが、
メーカで解決できなかったことにするつもりです。。。。

こんなことまで、いって、本当に申し訳ないです。。。m(_ _)m
rouge_2008 2015/02/26 08:18:27

CSSを変更していないのでしたら、HTMLだけで大丈夫です。
元のデザインのテンプレート(※まったく変更を加えていない状態)に、右側のエリアに画像とテーブルだけを追加した時点のソースをお願いします。

進捗状況を聞かれた場合、フルCSSデザインは複雑に作られている為、レイアウトの変更に時間が掛かる事を伝えてみてはいかがでしょう？

・フルCSSテンプレートを編集・加工する際の注意点
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=050920

・フルCSSテンプレートを編集したい
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=050896

上記にはCSS（スタイルシート）の編集はサポートの範囲外である事が記載されていますが、会社でのサポート契約(？)も同様でしょうか？
マニュアル等を確認してもCSSの編集の操作方法が分からない場合は、後でサポートに問い合わせてみてください。
CSS（スタイルシート）の編集がサポート対象外だとしても、機能の操作方法については対応してくれると思います。
スタイルエクスプレス、スタイルシートマネージャ、CSSエディターの3つの方法があるようですが、それぞれの特徴や機能、操作方法、どれが使いやすいか等は私では分かりませんので・・・
meichi 2015/02/26 08:45:55

朝、早くからさいません。
CSSは、サポート外ですが、
がんばってみます。スマホからです。
元のテンプレートの右側に、テールと
画像を、はりつけた。HTMLをあとで
のせます。本当に、すいません
、
rouge_2008 2015/02/26 08:52:36

一応、ページ最上部の画像のエリアについてのアドバイスになります。

以下はジャストシステムで公開しているビルダーの使い方のページですが、フルCSSデザインが使われているようです。
このページに『※編集方法について詳しくは、「クラシックフルCSS編」（ホームページ・ビルダー18以前をお使いの場合は入門編）のPDFマニュアルをご覧ください。』という記載がありますので、確認した事がない場合は参考になるかもしれませんので、一度このPDFファイルを確認してみてください。

・ページの編集について - かんたんホームページ・デビュー使い方ガイド
http://www.justsystems.com/jp/users/hpb/web/edit.html

ヘッダー内は以下のHTML構造になっていました。
--------------------------------------------------------------
<div id="hpb-header">
<div id="hpb-headerMain">
<h1>このサイトは、ホームページ・ビルダー19の「かんたんホームページ・デビュー」で作成しています。</h1>
</div>
<div id="hpb-headerLogo"><a href="index.html">かんたんホームページ・デビュー使い方ガイド</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>ページの編集方法について詳しくは、サポートFAQをご覧ください。</span><span></span></p>
<a href="http://support.justsystems.com/jp/app/servlet/productslink?apl=hpb" class="btn-reserve" target="brank">サポート情報ページはこちら</a>
</div>
</div>
--------------------------------------------------------------

デザインは違うと思いますが、meichiさんが選択したテンプレートも含めてフルCSSのテンプレートはおそらくすべて同じHTML構造ではないかと思います。
ヘッダー内でそれぞれ「<div id="hpb-headerMain">」が右上の細長いエリア、「<div id="hpb-headerLogo">」は左側のタイトルロゴのエリア、「<div id="hpb-headerExtra1">」が右下のエリアに位置しています。
これらはそれぞれCSSでサイズや表示位置、背景画像等が指定されていますので、これらのどれかを最上部の画像エリアにするよりは、「<div id="hpb-header">」内に新しくdiv要素を追加して画像を入れる方が簡単に希望のレイアウトになりそうです。
CSSの為にidは「headerImage」など重複しない名前を付けてみてください。
※デフォルトの3つのエリアは、必要ない場合は丸ごと削除してください。
meichi 2015/02/26 10:44:51

大変、おいがしい中、まことにありがとうございます。。m(_ _)m
やはり、メーカでは、CSS３つのツールの紹介だけにとどまりました。。。

残念ながら、PDFは見れませんでした。。。

-----------------------------------------------------------
、「<div id="hpb-header">」内に新しくdiv要素を追加して画像を入れる方が簡単に希望のレイアウトになりそうです。
CSSの為にidは「headerImage」など重複しない名前を付けてみてください。
-----------------------------------------------------------
↑のアドバイスは、理解できましたが、CSSのどのファイルに何を追記したらいいか
わからないです。申し訳ありません。m(_ _)m もうわけないですが、下記
に現在のHTMLと元のテンプレートのHTMLを記載します。ご勘弁ください。
m(_ _)m

----------------現在------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows">
<title>株式会社</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<div id="headerImage">
<img src="tantou-up-image.gif">
</div>
<p><br>
</p>
</div>
<div id="hpb-headerExtra1"></div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-main" style="text-align : left;" align="left">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30"> 所在地：</td>
<td width="301" style="color : #000000;padding-top : 0px;padding-left : 0px;padding-right : 0px;padding-bottom : 0px;border-right-color : #cccccc;border-bottom-color : #cccccc;" height="30">ビル</td>
</tr>
</tbody>

</table>
<br>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
<br>
<br>
<br>
<br>
<br>
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
<table border="1" height="190">
<tbody>
<tr>
<td width="287" rowspan="4"> <br>
<br>
<br>
</td>
<td width="34"> 氏名</td>
<td height="28" width="230"> <br>
</td>
</tr>
<tr>
<td width="34"> </td>
<td height="27" width="230"> </td>
</tr>
<tr>
<td height="23" width="34"></td>
<td height="23" width="230"> </td>
</tr>
<tr>
<td height="14" width="34"></td>
<td height="14" width="230"> </td>
</tr>
</tbody>
</table>
<br>
<img src="katyosyokai1.gif" width="549" height="23" border="0"><br>
<br>
<table border="1">
<tbody>
<tr>
<td height="150"> </td>
</tr>
<tr>
<td height="88"> メンバー<br>
<br>
山田　花子<br>
田中　太郎<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="hpb-main" style="text-align : left;" align="left">
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p class="large"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<hr>
<span class="en"></span>
<div id="pagetop"></div>
</div>
<div id="hpb-nav">
<p class="hpb-c-index">ナビゲーション</p>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">a担当</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">b担当</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">c担当</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">d担当</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">f担当</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">g担当</span><span class="en">RECRUIT</span></a>
<li id="nav-contact"><a href="contact.html"><span class="ja">h担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kago-dai3"><a href="contact.html"><span class="ja">i担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kirishima"><a href="contact.html"><span class="ja">k担当</span><span class="en">CONTACT US</span></a>
<li id="nav-sendai"><a href="contact.html"><span class="ja">l担当</span><span class="en">CONTACT US</span></a>
<li id="nav-kanoya"><a href="contact.html"><span class="ja">m担当</span><span class="en">CONTACT US</span></a>
<li id="nav-1se"><a href="contact.html"><span class="ja">n担当</span><span class="en">CONTACT US</span></a>
<li id="nav-2se"><a href="contact.html"><span class="ja">o担当</span><span class="en">CONTACT US</span></a>
<li id="nav-3se"><a href="contact.html"><span class="ja">p担当</span><span class="en">CONTACT US</span></a>
<li id="nav-ce"><a href="contact.html"><span class="ja">q担当</span><span class="en">CONTACT US</span></a>
</ul>
</div>
<div id="hpb-aside">
<div id="banner">

</div>
</div>
<div id="hpb-footerMain">copyright©20XX  all rights reserved. </div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script>
<table border="1">

</table>
</div>
</div>
</div>
</div>
</body>
</html>
-------------元HTML----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows">
<title>株式会社ビルダーストーリー</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<h1>株式会社ビルダーストーリーは○○○○○○○○を専門とする○○○○○○○○会社です。</h1>
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-title" class="hpb-top-image">
<h2>確かな技術と自由な発想　新しいライフスタイルをご提案します</h2>
</div>

<div id="hpb-main">

<div id="toppage">
<p class="large"><img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
</p>
<table border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<div id="toppage-topics">
<h3>TOPICS</h3>
<ul>
<li>「○○○○」は、○○○○○○○○のオリジナルブランドです。伝統的な技術をもとに、自由な発想で新製品を開発しました。新しいライフスタイルをご提案します。
<li>ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。
</ul>
<hr>
</div>
<div id="toppage-news">
<h3><span class="en">NEWS</span><span class="ja">新着情報</span></h3>
<dl>
<dt>20**年*月*日
<dd>○○○○○○○○を更新しました。
<dt>20**年*月*日
<dd>○○新聞に「○○○○○○」が掲載されました。
<dt>20**年*月*日
<dd>サイトをオープンしました。
</dl>
</div>
<div id="pagetop"><a href="#hpb-container">このページの先頭へ</a></div>
</div>

</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップページ</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">会社方針</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">サービス／製品一覧</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">新着情報・FAQ</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">会社概要</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">RECRUIT</span></a>
<li id="nav-contact"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>
</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">
<ul>
<li><a href="service.html" id="banner-service">サービス／製品一覧</a>
<li><a href="recruit.html" id="banner-recruit">採用情報</a>
<li><a href="access.html" id="banner-access">アクセス</a>
</ul>
</div>
<div id="companyinfo">
<h3>株式会社ビルダーストーリー</h3>
<p>〒163-0000<br>
東京都○○区○○○1-2-3</p>
<p>TEL 03-1234-0000<br>
FAX 03-1234-0001</p>
</div>
</div>

</div>

<div id="hpb-footer">
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
<div id="hpb-footerExtra1">
<h3 class="hpb-c-index">サブナビゲーション</h3>
<ul>
<li><a href="privacy.html">プライバシーポリシー</a>
<li><a href="law.html">特定商取引法に関する記述</a>
</ul>
</div>
</div>

</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>
-----------------------------------------
meichi 2015/02/26 10:47:37

元のHTMLには、本来ただしい場所に画像と表を追加してあります。
meichi 2015/02/26 14:21:26

なんか、進捗報告みたいで、本当にすいません。。。。

やっと、上の画像を入れることができました。。。
本当にありがとうございます。m(_ _)m

せっかく、もとのテンプレートのソースを提示させていただいて、、、m(_ _)m

あとは、copyrightの部分の間があいていることが・・・・・

ご存じだと思いますが、15時で退社しなければならないので、それまでは、
まだ、別ページの作成依頼もありますので、そっちをします。

大変お世話になりっぱなりで、申し訳ありません。m(_ _)m
meichi 2015/02/26 15:16:59

お世話になります。。。。今日は、上長は、忙しくて進捗をきかれませんでした。。。

＃どうして、わたし、こういう心配をするのでしょう。。。。

ご迷惑かけました。　これから、帰ります。
rouge_2008 2015/02/26 18:00:05

返信が遅くなってすみません。
現在(画像とテーブル追加後)のHTMLの状態で、やはりデザインが崩れているようです。
「プレビュー」タブやブラウザでの表示確認では問題ありませんか？
CSSファイルは現在どの状態でしょう？(CSSファイルが元の状態から変更になっていますか？)
※私の方では質問時に投稿されたCSSでは元のテンプレートでもデザインが崩れていたので、2015/02/25 17:38:26のコメント(http://q.hatena.ne.jp/1424670826#c280563)のCSSで確認しています。(このCSSの場合、画像とテーブル追加後のHTMLではデザインが崩れていますが、元のテンプレートは大丈夫なようです。)

> 元のHTMLには、本来ただしい場所に画像と表を追加してあります。

すみません。正しい場所に追加されたように見えていないのですが・・・
なぜか「<div id="hpb-main" style="text-align : left;" align="left">」要素が2つあり、上の階層の方に追加されています。
それ以外の箇所も元のHTMLとは違う構造になっていますので、再度元のテンプレートから編集し直した方が良さそうです。
以下、元のテンプレートの編集箇所周辺のソースに注意点を記述しました。
--------------------------------------------------------------
<div id="hpb-main">

<div id="toppage">

<div id="pagetop"><a href="#hpb-container">このページの先頭へ</a></div>
</div>

</div>
--------------------------------------------------------------

> やはり、メーカでは、CSS３つのツールの紹介だけにとどまりました。。。

各ツールの操作方法は教えてくれると思いますので、やりたい事の操作手順が分からない時に聞くといいかもしれません。
CSSの変更を行った事があると思いますが、その時はどのように編集しましたか？
使いたいツールを指定してもらえれば、一応私も調べてみます。

> 残念ながら、PDFは見れませんでした。。。

会社のPCでは、マニュアル等のPDFは特別な場所に移動してあるのかもしれませんね。
meichiさんのPCの試用版だと普通にインストールされていると思いますので、探して確認してみてください。

その他については、また後でコメントします。ｍ(＿＿)ｍ
meichi 2015/02/26 20:49:25

たびたび、お世話になります。。。m(＿　＿)m　大変、丁寧な、コメントありがとう
ございます。。。申し訳ありませんが、１つづつ確認させていただけないでしょうか。。。

「プレビュー」タブやブラウザでの表示確認では問題ありませんか？
→やっぱり、くずれていると判断されているんですね。。ブラウザやプレビュー画面
（Firefox,Opera,GoogleCrome,IE8で自分のPCで確認しましたが、問題なかったです。
　けど、アップしたとき、くずれる可能性が、私、心配しています。
　似たようなことが、以前も、ありました。。。

※私の方では質問時に投稿されたCSSでは元のテンプレートでもデザインが崩れていたので、2015/02/25 17:38:26のコメント(http://q.hatena.ne.jp/1424670826#c280563)のCSSで確認しています。(このCSSの場合、画像とテーブル追加後のHTMLではデザインが崩れていますが、元のテンプレートは大丈夫なようです。)
→ここでの、「元のテンプレート」ですが、申し訳ありません、どの時点でのテンプレートを
　さしてらっしゃるのでしょうか。。。HTMLかCSSのどちらかも、判断がつかないです。
　大変、申し訳ありません。「元のテンプレート」とは、２つをさしてますでしょうか。　
　１つでしょうか。。

元のHTMLには、本来ただしい場所に画像と表を追加してあります。
→やっとわかりました。。わたしの伝え方がわるくてすいません。10:44:51の
　----------------現在------------------　とかかせていただいた、下記
　のHTMLだと思うのですが、あってますでしょうか、、ここだと、確かに２つあります。

(※画像が入っている「<p class="large">」の左側にカーソルを置いた状態で挿入のメニューを実行するとうまくいくかもしれません。
→ここは、HTMLの編集画面で<p class="large">のタグの左側に直接、imgのタグを
　貼り付けたほうがいいでしょうか。。。。私の記憶があいまいで申し訳ありませんが、
　「確かな技術と自由な発想　新しいライフスタイルをご提案します」の部分が大きな
　画像で、目的の位置に挿入できなかった。。。と思います。
　メーカとのサポートで、どのような手順を覚えてないのですが、目的のところに
　画像と表を挿入しましたら、表に文字が入力できなくなって、はてなに投稿したのが
　経緯です。

いまは、この返信が限界です。。。あとで、PDFを探してみます。。。
CSSのツールは、今日の担当者は、紹介だけで、あとは、自己責任のような言い方を
しまいした。残念です。担当者によっては、教えてくれる方もいらっしゃるかも
しれません。

やっぱりCSSは編集しないと実現できないんでしょうか。

　
meichi 2015/02/26 20:51:52

すいません、たびたび、読み直してみたのですが、、、「元のテンプレート」が
どれをさして、らっしゃるのかかが、わからないです。申し訳ないです。
rouge_2008 2015/02/26 22:58:33

すみません。分かりにくかったですか・・・
「元のテンプレート」は編集前のデザインのテンプレートの事です。
最初に使用するテンプレートを選択すると思います。
meichiさんが「元HTML」として投稿したものが、選択したデザインのテンプレートのHTMLソースだと思いますが、違っていたでしょうか？
HTML、CSS両方とも編集前の状態から作業しないと、編集が複雑になってしまいますので最初からお願いします。

元のテンプレートのデザインでは、上部にヘッダー、下部の左側にメニューとバナースペース(※何も追加されていないので空白)のエリア、右側にメインのコンテンツ表示エリアが並んで表示されていますが、編集後のHTML(※2015/02/26 10:44:51のコメントで「現在」で投稿されたHTML)では、上部にヘッダー、その下に追加した画像やテーブルのエリア(※本来のメインコンテンツ表示エリアと重複するidの要素)、さらにその下に本来のメインコンテンツ表示エリア(※空要素だけで構成されているので大きな空白になっています)、さらに下部にメニューとバナースペースのエリアがあります。
HTMLも大きく変更されていますし見た目も崩れているのですが、meichiさんの環境では元のテンプレートに近い状態で表示されるのですか？

>> (※画像が入っている「<p class="large">」の左側にカーソルを置いた状態で挿入のメニューを実行するとうまくいくかもしれ>> ません。
> →ここは、HTMLの編集画面で<p class="large">のタグの左側に直接、imgのタグを
>　貼り付けたほうがいいでしょうか。。。。私の記憶があいまいで申し訳ありませんが、
>　「確かな技術と自由な発想　新しいライフスタイルをご提案します」の部分が大きな
>　画像で、目的の位置に挿入できなかった。。。と思います。

HTMLの編集画面で編集しても大丈夫なのでしたら、そちらを利用してもいいと思います。
使い易い方で試してみてください。
HTMLの編集画面を利用するのでしたら、1行増やして直前の行にimgタグを貼り付けるといいと思います。

> やっぱりCSSは編集しないと実現できないんでしょうか。

実現したいデザインによりますので、今の所はまだ分かりません。
meichi 2015/02/27 06:30:59

朝、こんなに早くから、すいません、大変ご迷惑かけます。。。。m(_ _)m
昨日は、力つきて早く休みました。わたしの勝手ですいません。

元のテンプレートの意味がやっとわかりました。。。すみません。

meichiさんが「元HTML」として投稿したものが、選択したデザインのテンプレートのHTMLソースだと思いますが、違っていたでしょうか？
→すいません、選択したテンプレートではあったのですが、右側に画像とテーブルを追加した
　状態でした。申し訳ありません。

たびたびですが、再度確認があるんですが、申し訳ないです。

meichiさんの環境では元のテンプレートに近い状態で表示されるのですか？
→ほぼ、元のテンプレートに近い状態で表示されます。アドバイスを伺うと不思議なのですが。

1行増やして直前の行にimgタグを貼り付けるといい
→ここですが、増やす１行が何をさしているのかがが、どうしてもわからないのです。m(_ _)m
私の考えでは、下記の考えですが、どうでしょうか。
<div id="toppage">
１行追加（この１行がわからないのです）
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><p class="large">

アドバイスいただいたとおり、やってみます。ここまで成功したとすると、左側のメニューに
緑の縦線があり、上に約１ｃｍの緑の線あり、下に大きく緑の表示部分があるのですが、
この状態で、一度HTMLとCSSを投稿させていただきたいと思います。

実現したいデザインは、多々要望がありまして、申し訳ないですが、下記のURLです。
コメントが増えすぎて、ご迷惑かけますが、以前のコメントに、申し訳ありません記載
させていただきました。４つもありまして、本当に申し訳ないです。
（画像、トップページへ戻るリンク、下の緑の線、copyrightの位置）
http://d.hatena.ne.jp/meichi/20150225

もうわけありません、あとは、９時でないと会社のPCの電源は入れられないのです。

やっぱり朝、始業前に課長に状況を相談します。そこで、どういう判断がでるか、
わかりませんが、、、

上長の判断の結果を先に投稿させていただきたいと思います。

今日も、大変、お忙しいとおもいますが、よろしくお願いします。m(_ _)m
meichi 2015/02/27 08:51:16

上長に、相談しました。
そしたら、別ページを作成するよう
言われました。4つのページです。
その後、担当者のページに、とりかかる
つもりです。いつもですが、私の
心配しすぎでした。ごめんなさい。
ご迷惑かけます。m(__)m
rouge_2008 2015/02/27 11:03:37

>> meichiさんが「元HTML」として投稿したものが、選択したデザインのテンプレートのHTMLソースだと思いますが、違っていたでしょうか？
> →すいません、選択したテンプレートではあったのですが、右側に画像とテーブルを追加した
　状態でした。申し訳ありません。

「元HTML」となっているソースの「<p class="large"><img ～><br></p>」が画像、その下の空のテーブルを追加したのですか？

> アドバイスいただいたとおり、やってみます。ここまで成功したとすると、左側のメニューに
> 緑の縦線があり、上に約１ｃｍの緑の線あり、下に大きく緑の表示部分があるのですが、
> この状態で、一度HTMLとCSSを投稿させていただきたいと思います。

「元HTML」が現在一番最新の状態なのでしたら、成功しているように見えますので、そのまま作業を続けて大丈夫だと思います。
左側メニューと上の線については背景画像なのか見えませんし、CSSでもまだ確認できないのですが、下のフッター部分は大きく緑色の背景になっています。
既に投稿されたものですので、再度投稿しなくても大丈夫です。

引き続き上長さんの指示に従って作業をすすめてください。
私の方はまた後でコメントします。
meichi 2015/02/27 11:15:25

大変、お忙しい中ありがとうございます。m(_ _)m
今日、私、よけいなことをしてしまいました。。。。

「元HTML」となっているソースの「<p class="large"><img ～><br></p>」が画像、その下の空のテーブルを追加したのですか？
→その通りです。。。。

私、まだ、４つページ作成の２ページ作成途中までです。。。。。
また、わたしで、必要な情報等ありましたら、よろしくお願いします。m(_ _)m
rouge_2008 2015/02/27 12:30:35

実現したい事について確認がありますのでお願いします。

1.画像はヘッダーの画像の事ですね？
a-kuma3さんがコメントしたように「<div id="hpb-headerMain">」内に直接追加で大丈夫だと思います。
この要素には特別なスタイルは指定されていませんので、おそらく問題なく表示されると思います。
「<div id="hpb-headerMain">」の内側(※ただし「<h1>～</h1>」の外側)に追加されれば問題ありません。(「HTMLソース」タブで直接追加してもいいのでしたらそちらで試してみてください。)
---------------------------------------------------------
<div id="hpb-header">
<div id="hpb-headerMain">
<img src="～"> 
<h1>株式会社ビルダーストーリーは○○○○○○○○を専門とする○○○○○○○○会社です。</h1>
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
</div>
---------------------------------------------------------
※「<h1>～</h1>」の内側に追加する場合は、CSSを変更する必要があります。(内側余白が不要だと思いますので・・・)
※「<div id="hpb-headerLogo">」「<div id="hpb-headerExtra1">」「<p class="tel">」「<p class="address">」等を使わない場合は削除します。(すぐに削除せずに残しておいて最後に削除しても大丈夫です。)
※上手くいかなかった場合は、どのような問題点があるのかを具体的に教えてください。

2.「トップページへ戻るのリンク」について
　左側メニューの1番目が「トップページ」となっていますが、このメニューの他に必要なのでしょうか？

3.枠の線3つについて
「TOPICS」と「NEWS」の各項目を区切っている線の事ですか？
CSSを編集します。
今回はCSSエディターを使って直接編集すると簡単だと思います。(「スタイルエクスプレス」や「スタイルシートマネージャー」でもいいです。使いやすいと思うツールで試してください。)

どちらも「main_1F1_2c.css」内にあります。

・TOPICSは480行目以降の「#hpb-main ul li」に対するスタイルの中で指定されています。
(1行ずつ無効にする場合の記述「/*」から「*/」までがCSSのコメントになります。)
--------------------------------------
#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
/* border-bottom-width: 1px; */
/* border-bottom-style: solid; */
/* border-bottom-color: #c8dcbd; */
}

--------------------------------------

NEWSは526行目以降の「#hpb-main dd」に対するスタイルの中で指定されています。
(連続する複数行をまとめて無効にする場合の記述です。)
--------------------------------------
#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
/* border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd; */
}
--------------------------------------

※それぞれ無効ではなく削除してもOKですが、後でやり取りする事がある時に、行数の指定がかみ合わなくなるかもしれません。

4.「copyrightの位置」については後でコメントします。
meichi 2015/02/27 12:53:13

大変、おいがしい中、ありがとうございます。。。m(_ _)m

1.画像はヘッダーの画像の事ですね？
→たぶん、それで、あっているとおもいます。。ありがとうございます。。。
cssをいじらず、a-kuma3さんので、やってみます。

2.「トップページへ戻るのリンク」について
　左側メニューの1番目が「トップページ」となっていますが、このメニューの他に必要なのでしょうか？
→一番目のトップページのリンクは、そのままで、いいと思います。
あと、必要なのは、左のリンクは担当名にするつもりですが、リンクを
増やす方法は、私で、ビルダー上でできます。
その下に、サービス・製品　とか、４つほどありますが、私で削除できそうです。

あと、左のリンクに緑の縦線がありますが、たぶんわたしで削除可能
だと思います。

3.枠の線3つについて
「TOPICS」と「NEWS」の各項目を区切っている線の事ですか？
→その通りです。。ありがとうございます。

いったん、いまは、２つ追加の作成ページを上長が確認中です。
画像を１つ大きさを変更する作業がでてきました。。。。。

本当に、お世話になります。。。m(_　_)m
meichi 2015/02/27 12:56:49

たびたび、すいません、あと、上の横長の緑の線（画像）を消したいのと
下の大きな横長の緑の画像を消したいのが、ありました。

本当に、もうわけありません。m(_ _)m

あと、わたしで必要な情報等ありましたら、よろしくお願いします。
rouge_2008 2015/02/27 15:27:03

> たびたび、すいません、あと、上の横長の緑の線（画像）を消したいのと
> 下の大きな横長の緑の画像を消したいのが、ありました。

フッターの大きな緑色のエリアは、画像ではなくて背景色です。

・「main_1F1_2c.css」の133行目以降にあるフッター内パーツ「#hpb-footer」に対して指定されたスタイルを変更します。
無効にしても別の色を指定してもどちらでも大丈夫です。
※以下は無効にしています。
---------------------------------------------
/* フッター内パーツ */

#hpb-footer{
/* background-color: #20bc71; */
}
---------------------------------------------

色を消すだけでなく、このエリア自体を削除したいのでしょうか？

上の横長の線は(※左側メニューの横の線も)見えませんので、背景画像として指定されていると思います。
該当しそうな箇所として、いくつか背景画像が指定されていましたので確認してみてください。

・同じCSSファイルの7行目「body」に対するスタイル
---------------------------------------------

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
background-image : url(bg_1F1.png); // ←の背景画像
background-position: top left;
background-repeat: repeat;
background-color: #fff;
}
---------------------------------------------
※必要ない場合は「background-color」のスタイルだけ残して他は無効または削除

・「container_1F1_2c_left.cs」の46行目「#hpb-inner」に指定されたスタイル
---------------------------------------------
#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png); // ←の背景画像
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}
---------------------------------------------
※必要ない場合は背景関連のスタイル(「background-*****」となっている記述)の内、「background-color」のスタイルだけ残して無効または削除(※「position」など背景関連以外は残します。)
meichi 2015/02/27 16:58:08

大変、お忙しい中、本当にありがとうございます。m(_ _)m
難しいCSSを、ご教示いただいて、本当にありがとうございます。

いま、自宅です。。。。

色を消すだけでなく、このエリア自体を削除したいのでしょうか？
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
→色を消したいと思ってます。すいません。。。

＃今日は、４つページ作成依頼がありましたが、２ページしかアップできませんでした。
　アップの権限は、私では、もってないのです。。m(_ _)m

確認ですが、、「container_1F1_2c_left.cs」の46行目の
width: 960px;
margin-left: auto;
margin-top: -1px;
は残すと判断していいでしょうか。。。私でも、調べてみて、背景関連以外と思ったので、m(＿＿)m

来週、また、がんばります。。。。思い出したのですが、、、自分のPCにWebサーバを
入れて動作確認を、されていると、、、今日もだったのですが、PCとアップでくずれる
場合があるのですね。。わたしも、Apache等のWebサーバを入れて今後は、確認する
ようにします。。。。たぶん、今のわたしでしたら、インストールと簡単な設定ぐらい
は、できるでしょう。。。

来週も、大変お忙しいでしょうが、また、いつもですが、わからないことが、ありましたら、
ご教示いただけますと、大変、助かります。m(_ _)m

ありがとうございます。。。
rouge_2008 2015/02/27 19:28:22

>> 色を消すだけでなく、このエリア自体を削除したいのでしょうか？
>＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
> →色を消したいと思ってます。

それでは、上でコメントしたようにCSSを編集するだけで大丈夫です。
今はHTMLを編集する必要はありません。(「copyright」の移動の為に後で変更する事になります。)

> 確認ですが、、「container_1F1_2c_left.cs」の46行目の
> width: 960px;
> margin-left: auto;
> margin-top: -1px;
> は残すと判断していいでしょうか。。。私でも、調べてみて、背景関連以外と思ったので、m(＿＿)m

はい、残します。
他に、背景関連以外は「position」「margin-right」もです。
無効にして背景画像をなしにする場合は次のようにします。
---------------------------------------------
#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
/* background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left; */
background-color: #fff;
margin-top: -1px;
}
---------------------------------------------

> 自分のPCにWebサーバを
> 入れて動作確認を、されていると、、、今日もだったのですが、PCとアップでくずれる
> 場合があるのですね。。わたしも、Apache等のWebサーバを入れて今後は、確認する
> ようにします。。。。

そうですね。PC内で動作確認できると便利ですので、試してみてください。
適切に設定されていれば、アップしても崩れる事はないと思います。
設定以外では、ほとんどは転送の失敗のようです。
meichi 2015/02/27 20:48:42

ありがとうございます。。。。。

何度も確認で、もうしわけないですが・・・・22:58:33のコメントで１行とありますが、
この１行というのが、なにを１行追加すればいいか、わからないのです。m(_ _)m

私の考えでは、下記の考えですが、どうでしょうか。
<div id="toppage">
ここに１行追加だと思っているのですが・・（この１行がわからないのです）
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><p class="large">

すみません。。。m(_ _)m
rouge_2008 2015/02/28 13:40:12

空行を1行増やしてから、挿入位置の基準とするタグの直前の行(※増やした行)に画像やテーブルなどを新たに追加するという意味です。(タグを追加してから改行しても大丈夫です。)

HTMLソースを見やすくする為、各行に1つのタグを記述するだけですので、表示には影響がありません。(※ブラウザによっては、画像を横に並べて表示したい時に思ったように表示されない事もあるようですので、部分的に続けて記述する場合もあります。)
特に決まりはありませんので、気にしないでください。

meichiさんが例示しているソースの場合、

・追加前に空行1つ追加(※「<img src="～">」の前に追加したい場合)
-------------------------------------------------
<div id="toppage">

<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><p class="large">
-------------------------------------------------

・追加後
-------------------------------------------------
<div id="toppage">
<img src="">
<img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><p class="large">
-------------------------------------------------

※既に画像とテーブルを1つずつ追加しているようですので、今後は順番に後ろに追加していく事になると思います。
(TOPICSの前に画像とテーブルを追加するのでしたら、「<div id="toppage-topics">」の直前の行に追加していきます。)
-------------------------------------------------------------
<div id="toppage">
<p class="large"><img src="katyosyokai1-gosei.jpg" width="350" height="28" border="0"><br>
<br>
</p>
<table border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

<div id="toppage-topics">
-------------------------------------------------------------
meichi 2015/02/28 16:19:40

休みの中、コメントいただきありがとうございます。。。。m(_ _)m

返信が、遅くなりスイマセン、やっと意味が、分かりました。。。

ここまで、コメントが長くなり、すいません。。。。

いつできるか、どうか、わかりませんが、、、（スイマセン事情があるので）いったん
いままのコメントををわたしで、整理した方がいいですね。。。

こんなに、長くなり、すいません。。。

この休みの間は、もうコメントを要求（言い方が・・）しないつもりなので、、、
よろしくお願いします。。。m(_ _)m
rouge_2008 2015/03/01 22:10:29

copyrightの位置変更についてですが、この表記はどのサイトも通常はフッターに表示しています。
右側コンテンツ(※画像やテーブル等)の内容より左側のメニューが長い場合、コンテンツとフッターとの間が空きますが、コンテンツの内容量が十分にあれば、おそらく間はほとんど気にならなくなると思います。
一応、位置変更方法を記載しますので、時間が取れたら試してみてください。

1.フッターのdiv要素「<div id="hpb-footer">」内の以下の記述を丸ごとコピーします。
------------------------------------------------------
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
------------------------------------------------------

2.コピーしたタグをコンテンツのdiv要素「<div id="toppage">」内の最後にペーストして、idを「hpb-footerMain」以外に変更します。(※ここでは「copyright」に変更しています。)
------------------------------------------------------
<div id="pagetop"><a href="#hpb-container">このページの先頭へ</a></div>
<div id="copyright">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
------------------------------------------------------
※ここでは「<div id="pagetop">」の次行にペーストしていますが、前の行でも大丈夫です。

3.必要があれば、CSSで表示位置を調整します。(※次は一例)
------------------------------------------------------
#copyright p {
text-align: center;
}
------------------------------------------------------
※右側コンテンツ下の真ん中に表示します。

Q&Aサイトの利用者は各自都合の良い時間に利用するだけですので、いつ質問やコメント等しても構わないと思います。
返信までの時間も人それぞれですので、気楽に利用してみてください。
meichi 2015/03/02 05:24:00

こんなに、朝、早くから、すいません。。。m(_ _)m

たびたびのコメントありがとうございます。。。。

結局、この土、日は、コメントの整理がつかなかったのですが・・・・

コメントの整理は、時間があるときに、してみます。。。

Q&Aサイトの利用者は各自都合の良い時間に利用するだけですので、いつ質問やコメント等しても構わないと思います。
返信までの時間も人それぞれですので、気楽に利用してみてください

→ありがとうございます。。。甘えさせていただきます。。m(_ _)m
meichi 2015/03/04 17:12:00

お世話になります。。。実は、私個人でビルダーを購入しました。。。
ここまで、しないと、やっていけないのです。。。。パーフェクトマスターまで買いました。

最初から、つくりなおしました。。

ありがとうございます。m(_ _)m おかげ様で、アドバイスいただいた分のだいたいは、
体裁として、できました。

あと、いまの段階で解決できない部分があります。

下記のCSSです。

.hpb-layoutset-01 #hpb-title{
width: 730px;
height: 309px;
text-indent: -9999px;
overflow: hidden;
background-image : url(mainimg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

container_1F1_2c_left.css　です。

上記のCSS部分にmainimg_1F1.pngの大きな画像ファイルがあります。。
この部分をどうにかして、画像ファイルを消して、なおかつ、あいた間を上にもってきて
テーブルに文字を入力して、反映したいのですが、、、、

これで、つたわりますでしょうか。。。

これ以上、わたしでやると、どつぼにはまりそうです。。。

＃前、似たようなことをやって、レイアウトがくずれテーブルに文字が
　入力できなくなりました。。。m(_ _)m

いまは、ビルダー上で、編集画面でレイアウトはくずれてないです。。

下記に現在のHTMLを載せます。あと必要な情報等ありましたら、お願いできますでしょうか。
よろしくお願いします。m(_ _)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.6.0 for Windows">
<title>株式会社ビルダーストーリー</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<h1><br></h1>
<img src="header.jpg" width="1000" height="70">
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">

<div id="hpb-title" class="hpb-top-image">
<h2>確かな技術と自由な発想　新しいライフスタイルをご提案します</h2>
</div>

<div id="hpb-main">

<div id="toppage">
<img src="planning-icon.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="262"> 所在地：○○○県　○○市　○町　○番○号</td>
<td width="306">○○ビル　○○階 </td>
</tr>
</tbody>
</table>
<br>
<br>
<img src="chief.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td rowspan="5" width="203">    <img src="am100_pe013.jpg" width="177" height="160" border="0"></td>
<td width="52"> 氏名</td>
<td width="286"> ○○　○○</td>
</tr>
<tr>
<td width="52"> メール</td>
<td width="286"> foo@foo.co.jp</td>
</tr>
<tr>
<td width="52"> 出身</td>
<td width="286"> ○○県　○○市</td>
</tr>
<tr>
<td width="52"> 趣味</td>
<td width="286"> 水泳</td>
</tr>
<tr>
<td width="52"> 一言</td>
<td width="286"> 頑張ります</td>
</tr>
</tbody>
</table>
<br>
<img src="menber.jpg" width="417" height="26" border="0"><br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td height="212"> <img src="am100_pe014.jpg" width="571" height="294" border="0"></td>
</tr>
<tr>
<td height="51">○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
</div>
<div id="copyright">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>

</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップページ</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">会社方針</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">サービス／製品一覧</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">新着情報・FAQ</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">会社概要</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">RECRUIT</span></a>

<li id="nav-contact"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-1"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-3"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-2"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-4"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-5"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-6"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-7"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-8"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-9"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-10"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-11"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">

</div>
</div>

</div>

<div id="hpb-footer">
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
<div id="hpb-footerExtra1">
<h3 class="hpb-c-index">サブナビゲーション</h3>
<a href="law.html">特定商取引法に関する記述</a>

</div>
</div>

</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>

雑談ですが、個人なので、２回（これ以上は有償）問い合わせしました。。。。
CSSスタイルマネージャー、スタイルエクスプレスの使い方を聞いても、とりあってくれないです。
残念です。。
meichi 2015/03/04 21:58:09

たびたび、すいません、、、あれから、いろいろして、さっきのコメントの課題は
なんとか、自力で、できたような気がします。。。。
Apacheを自分のPCに入れて確認したので、大丈夫だと思います。。。。

＃すみません、なんとかですが、、、header.jpgの下に一行空白を入れたいのですが、
　無理なのでしょうか。。。ちょっと調べるとdivタグの中にbrタグはだめのような
　記載があるのですが。。。下記に今のHTMLを載せます。何度もすいません。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.6.0 for Windows">
<title>株式会社ビルダーストーリー</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<h1><br></h1>
<img src="header.jpg" width="1000" height="70">
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
<br>
<br>
<br>
</div>
<div id="hpb-main">

<div id="toppage">
<img src="planning-icon.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="262"> 所在地：○○○○県　○○市　○町　○番×号</td>
<td width="306">○○ビル　○○○×階 </td>
</tr>
</tbody>
</table>
<br>
<br>
<img src="chief.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td rowspan="5" width="203">    <img src="am100_pe015.jpg" width="169" height="169" border="0"></td>
<td width="52"> 氏名</td>
<td width="286"> ○○　○○○×</td>
</tr>
<tr>
<td width="52"> メール</td>
<td width="286"> foo@foo.co.jp×○</td>
</tr>
<tr>
<td width="52"> 出身</td>
<td width="286"> ○○県　○○市×○</td>
</tr>
<tr>
<td width="52"> 趣味</td>
<td width="286"> 水泳○×</td>
</tr>
<tr>
<td width="52"> 一言</td>
<td width="286"> 頑張ります○×</td>
</tr>
</tbody>
</table>
<br>
<img src="menber.jpg" width="417" height="26" border="0"><br>
<br>
<br>
<table border="1" width="585">
<tbody>
<tr>
<td height="212"> <img src="am100_pe013.jpg" width="633" height="407" border="0"></td>
</tr>
<tr>
<td height="51">○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
×△</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
</div>
<div id="copyright">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップページ</span><span class="en">TOP PAGE</span></a>

<li id="nav-concept"><a href="concept.html"><span class="ja">×方針</span><span class="en">CONCEPT</span></a>

<li id="nav-service"><a href="service.html"><span class="ja">サービス／製品一覧</span><span class="en">SERVICE&PRODUCTS</span></a>

<li id="nav-news"><a href="news.html"><span class="ja">新着情報・FAQ</span><span class="en">NEWS&FAQ</span></a>

<li id="nav-company"><a href="company.html"><span class="ja">会社概要</span><span class="en">COMPANY</span></a>

<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">RECRUIT</span></a>

<li id="nav-contact"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-1"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-3"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-2"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-4"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-5"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-6"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-7"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-8"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-9"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-10"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-11"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner"></div>
</div>

<div id="hpb-footer">
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
<div id="hpb-footerExtra1">
<h3 class="hpb-c-index">サブナビゲーション</h3>
<a href="law.html">特定商取引法に関する記述</a>

</div>
</div>

</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>
meichi 2015/03/04 22:16:57

すみません、そろそろ限界なのですが・・念のため、CSSも載せさせていただきます。。。
もうしわけないです。。

container_1F1_2c_left.css

@charset "Shift_JIS";

/* 要素リセット */
body{
margin: 0;
padding: 0;
text-align: center;
font-size: 75%;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳＰゴシック' , 'Osaka' ,sans-serif;
color: #000000; /* 標準文字色 */
min-width: 960px;
}
/* Safari用ハック文字サイズ調整 */
/*\*/
html:first-child body{
font-size: 70%;
}
/* end */

img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/

#hpb-container{
/*background-image : url(headerBg_1F1.png);
background-repeat: repeat-x;
background-position: top left;*/
}

#hpb-header{
height: 97px;
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}
#hpb-wrapper{
margin-top: -1px;
}

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

.hpb-layoutset-01 #hpb-main{
/*padding-top: 330px;*/
}
.hpb-layoutset-02 #hpb-main{
padding-top: 118px;
}

#hpb-aside{
width: 214px;
text-align: left;
padding-bottom: 20px;
padding-left: 8px;
float: left;
}
#hpb-footer{
clear: both;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height: 309px;
text-indent: -9999px;
overflow: hidden;
background-image : url(mainimg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

.hpb-layoutset-02 #hpb-title{
width: 730px;
height: 111px;
background-image : url(titleBg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}

/* ナビゲーション */

#hpb-nav{
width: 229px;
float: left;
}

#hpb-nav ul{
margin-top: -1px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-left: 0px;
padding-bottom: 0;
list-style-type: none;
text-align: right;
}

#hpb-nav li{
display: block;
font-size: 12px;
letter-spacing: 0.1em;
/*background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;*/
}

#hpb-nav li a{
display: block;
padding-left: 20px;
padding-right: 20px;
height: 55px;
overflow: hidden;
line-height: 55px;
border-bottom: 1px solid #c8dcbd;
font-size: 1.1em;

}
#hpb-nav li a:hover{
background-color: #20bc71;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

/*トップページ*/

#toppage p.large{

}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

body{
min-width: 100%;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/
#hpb-inner{
background-image: none;
width: 100%;
}
#hpb-main{
width: 96%;
float: none;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-main{
padding-top: 0;
margin-top: -10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 0;
}
#hpb-aside{
width: 96%;
float: none;
padding-left: 0;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-aside{
padding-top: 0;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0;
}
#hpb-nav{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
background-color: #20bc71;
}
.hpb-layoutset-02 #hpb-nav{
top: 0;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */
.hpb-layoutset-01 #hpb-title{
width: 100%;
height: 170px;
overflow: hidden;
background-size: contain;
position: relative;
top: 0;
left: 0;
}
.hpb-layoutset-02 #hpb-title{
width: 100%;
background-size: contain;
background-position: top right;
position: relative;
top: 0;
left: 0;
height: auto;
background-color: #3cc482;

}
.hpb-layoutset-02 #hpb-title h2{
line-height: normal;
padding: 14px 0px 0px 10px;
font-size: 1.3em;
}

/* ナビゲーション */
#hpb-nav ul{
display: none;
height: auto;
background-color: #fff;
margin: 0;
text-align: center;
}
#hpb-nav ul.toggled-on{
display: block;
padding-left: 0;
}
#hpb-nav li{
display: block;
background-image: none;
}
#hpb-nav li a{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: auto;
line-height: 1.4;
}
#hpb-nav li a:hover{
background-image: none;
}

/*トップページ*/
#toppage p.large{
margin-bottom: 10px;
}

}

hpbparts.css

@charset "Shift_JIS";

/******************************
* float clear
******************************/
.hpb-clear {
clear: both;
}

.hpb-clearfix:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.hpb-clearfix {
zoom: 1; /* for IE6 */
}

/******************************
* レイアウトコンテナ (div)
******************************/

/* 飾りなし幅自動 */
.hpb-parts-cnt-01 {
margin: 0px;
padding: 0px;
border: none;
width: auto;
float: none;
clear: both;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060 {
margin: 0px;
padding: 0px;
border: none;
width: 60px;
float: left;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120 {
margin: 0px;
padding: 0px;
border: none;
width: 120px;
float: left;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180 {
margin: 0px;
padding: 0px;
border: none;
width: 180px;
float: left;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240 {
margin: 0px;
padding: 0px;
border: none;
width: 240px;
float: left;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
margin: 0px;
padding: 0px;
border: none;
width: 360px;
float: left;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: auto;
float: none;
clear: both;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 60px;
float: left;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 120px;
float: left;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 180px;
float: left;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 240px;
float: left;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 360px;
float: left;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
margin: 0px;
padding: 0px 0.2em;
border: none !important;
line-height: 1.2em;
}

/* 下線 1 */
.hpb-parts-hl-02 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 3px !important;
border-bottom-style: double !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
margin: 0px;
padding: 0px 0.2em;
border-width: 1px !important;
border-style: solid !important;
line-height: 1.2em;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
margin: 0px;
padding: 0px 0.2em;
border-width: 3px !important;
border-style: double !important;
line-height: 1.2em;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-style: solid !important;
border-width: 2px 2px 2px 1.2em !important;
line-height: 1.2em;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
margin: 0px;
padding: 5px;
border: none;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: solid;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: dotted;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
margin: 0px;
padding: 2px;
border-width: 3px;
border-style: double;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01 {
margin: 0px;
padding: 0px;
border: none;
float: left;
}

/* 余白あり */
.hpb-parts-img-02 {
margin: 0px;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03 {
margin: 0px 5px 0px 0px !important;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04 {
margin: 0px 0px 0px 5px !important;
padding: 5px;
border: none;
float: right;
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05 {
margin: 0px;
padding: 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
margin: 0px;
padding: 5px 5px 5px 0px;
border: none;
float: left;
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07 {
margin: 0px;
padding: 0px 5px 5px 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
margin: 0px;
padding: 0px 5px 5px 0px;
border: none;
float: left;
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px !important;
border-top-style: solid !important;
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: solid;
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
margin: 0.5em 0px;
border-width: 3px 0px 0px 0px;
border-top-style: double;
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
margin: 5px;
padding: 0px;
border: none;
text-align: left;
width: auto;
float: none;
clear: both;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 70px;
float: left;
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 130px;
float: left;
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 190px;
float: left;
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 250px;
float: left;
}

/* 線囲み */
.hpb-parts-pbox-02 {
margin: 4px;
padding: 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: auto;
float: none;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 70px;
float: left;
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 130px;
float: left;
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 190px;
float: left;
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 250px;
float: left;
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc {
margin: 0px;
padding: 5px 5px 0px 5px;
border: none;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 135px;
float: left;
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 200px;
float: left;
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 265px;
float: left;
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 255px;
float: left;
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 380px;
float: left;
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 505px;
float: left;
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 375px;
float: left;
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 560px;
float: left;
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 745px;
float: left;
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 495px;
float: left;
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 740px;
float: left;
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 985px;
float: left;
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 135px;
float: left;
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 200px;
float: left;
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 265px;
float: left;
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 255px;
float: left;
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 380px;
float: left;
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 505px;
float: left;
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 375px;
float: left;
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 560px;
float: left;
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 745px;
float: left;
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 495px;
float: left;
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 740px;
float: left;
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 985px;
float: left;
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-01 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-01 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-01 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-style: none;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-02 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-02 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-02 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

/* 文字型 3 */
.hpb-parts-blist-03 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-03 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-03 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-03 li a {
display: block;
margin: 0px auto;
padding: 5px;
text-decoration: none;
border-left-width: 2em;
border-left-style: solid;
border-right-width: 2em;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-04 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-04 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-04 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
height: 30px;
}
.hpb-parts-blist-04 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-05 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-05 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-05 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-width: 1px;
border-style: solid;
height: 30px;
}
.hpb-parts-blist-05 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/******************************
* デフォルトスタイル設定
******************************/

.hpb-parts-cnt-style {
text-align: left;
}

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

.hpb-parts-cbox-style {
text-align: left;
}

.hpb-parts-hr-style {
clear: both;
}

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

/*--------------------------------------------------------
フルCSSテンプレート部品レスポンシブル設定
--------------------------------------------------------*/
@media screen and (max-width: 568px) {

/******************************
* Yahoo!ロコ-地図, Googleマップ
******************************/
div[name="HPBMAP"] {
max-width: 100% !important;
}

#hpb-main div[name="HPBMAP"] img {
max-width: none;
}

/******************************
* フォトモーション
******************************/
.hpb-photomotion {
max-width: 100% !important;
height: auto !important;
}
.hpb-photomotion:after {
display:table;
clear:both;
content:"";
}

/* 画像設定 */
#hpb-main img {
max-width: 100%;
height: auto;
}

/******************************
* レイアウトコンテナ (div)
******************************/
/* 飾りなし幅60px */
.hpb-parts-cnt-01-060,
/* 飾りなし幅120px */
.hpb-parts-cnt-01-120,
/* 飾りなし幅180px */
.hpb-parts-cnt-01-180,
/* 飾りなし幅240px */
.hpb-parts-cnt-01-240,
/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 写真ボックス (div)
******************************/
/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060,
/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120,
/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180,
/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240,
/* 線囲み */
.hpb-parts-pbox-02,
/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060,
/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120,
/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180,
/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 複数写真ボックス (div)
******************************/
/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060,
/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060,
/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060,
/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120,
/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120,
/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120,
/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180,
/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180,
/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180,
/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240,
/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240,
/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240,
/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060,
/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060,
/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060,
/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120,
/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120,
/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120,
/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180,
/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180,
/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180,
/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240,
/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240,
/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

}

main_1F1_2c.css

@charset "Shift_JIS";

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
/*background-image : url(bg_1F1.png);
background-position: top left;
background-repeat: repeat;*/
background-color: #fff;
}
#hpb-container{
margin-top: -1px;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}

/* ヘッダー内パーツ */

#hpb-header::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

#hpb-headerMain h1{
width: 960px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 4px 0 5px 12px;
color: #fff;
text-align: left;
font-weight: normal;
line-height: 18px;
font-size: 12px;

}
#hpb-headerLogo{
width: 470px;
float: left;
margin-top: 7px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerLogo a{
display: block;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 5px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-indent: -9999px;
overflow: hidden;
height: 54px;
background-image : url(logo_1F1.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-headerExtra1{
width: 470px;
float: right;
margin-top: 0px;
margin-right: 10px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.1em;
padding-right: 20px;
padding-top: 6px;
}
#hpb-headerExtra1 p.tel{
/* 電話番号の文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: right;
font-size: 1.4em;
color: #3cc482;
font-weight: bold;
vertical-align: middle;
}

#hpb-headerExtra1 p.tel span{
/* 電話番号の「TEL」文字設定 */
display: inline-block;
width: 34px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
text-align: left;
margin-right: 10px;
background-image : url(headerTel_1F1.png);
background-position: top left;
background-repeat: no-repeat;
vertical-align: middle;
}

#hpb-headerExtra1 p.address{
/* 住所文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 1.2;
text-align: right;
}

/* フッター内パーツ */

#hpb-footer{
/*background-color: #20bc71;*/
}

#hpb-footerMain{
padding-top: 18px;
padding-bottom: 18px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
text-align: center;
margin: 0;
color: #fff;
}

#hpb-footerExtra1{
padding-top: 13px;
padding-bottom: 23px;
width: 100%;
}

#hpb-footerExtra1 ul{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
text-align: right;
width: 960px;
}

#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline;
background-image : url(point_1F1_02.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 21px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: normal;
}

#hpb-footerExtra1 a:link{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:visited{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:hover{
text-decoration: underline;
}
#hpb-footerExtra1 a:active{
text-decoration: underline;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/

#hpb-nav li a{
/* ナビゲーション文字設定 */
font-weight: normal;
}

#hpb-nav li a:link{
color: #000;
text-decoration: none;
}
/* ナビゲーション文字色設定 */
#hpb-nav li a:visited{
color: #000;
text-decoration: none;
}
#hpb-nav li a:hover{
color: #fff;
text-decoration: none;
}
#hpb-nav li a:active{
color: #fff;
text-decoration: none;
}

#hpb-nav li span.en{
display: none;
}
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
color: #000;
text-decoration: underline;
}
a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #666;
text-decoration: none;
}
a:active{
color: #666;
text-decoration: none;
}

#hpb-skip{
/* ヘッダースキップの非表示 */
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
}

p{
margin-top: 0.5em;
margin-bottom: 2em;
padding-right: 20px;
padding-left: 0.1em;
line-height: 1.4;
text-align: left;
}

p.large{
font-weight: bold;
color: #548a04;
font-size: 1.2em;
}
p.indent{
padding-left: 25px;
}

.left{
float: left;
}

img.left{
margin-left: 14px;
}

.right{
float: right;
}

img.right{
margin-right: 24px;
}

hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;
}

.hpb-layoutset-02 h2{
padding-left: 33px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
line-height: 78px;
color: #fff;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}

h2 span.en{
display: none;
}

#hpb-wrapper h3{
color: #75b400;
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.1em;
background-image : url(indexBg_1F1.png);
background-repeat: no-repeat;
background-position: top center;
padding: 10px 10px 0px 10px;
}

h3.hpb-c-index{
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
background: none;
}

h4{
margin-top: 0;
margin-right: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
color: #0d6138;
font-weight: bold;
}

h5{
margin-top: 0;
margin-bottom: 10px;
margin-left: 14px;
margin-right: 14px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #3cc482;
}

table{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%;
}

table th{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
background-color: #e9faf2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

table td{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

/* フォームパーツ設定 */
input.button{
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding: 10px;
}

textarea{
width: 400px;
height: 200px;
}

input.l{
width: 400px;
}
input.m{
width: 250px;
}
input.s{
width: 150px;
}
#contact form{
text-align:center;
}
#contact form h3{
text-align: left;
}
#contact form table{
margin-left:auto;
}
/* メインコンテンツ内基本パーツ */

#hpb-main p{
margin-left: 10px;
margin-right: 10px;
}

#hpb-main ul{
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl{
margin-top: 0;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#hpb-main dt{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
line-height: 16px;
min-height: 16px;
font-weight: normal;
width: 140px !important;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
}

#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl::after{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#hpb-main img.left{
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}

#hpb-main img.right{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
float: right;
}

#pagetop{
position: absolute;
bottom: 0;
right: 20px;
width: 100%;
text-align: right;
}

#pagetop a{
/* ページの先頭へのリンク設定 */
background-color: #20bc71;
display: inline-block;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#pagetop a:link,
#pagetop a:visited{
color: #fff;
text-decoration: none;
}

/* サイドブロック内パーツ */

#banner ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#banner li{
padding-bottom: 4px;
}

#banner li a{
display: block;
width: 214px;
height: 77px;
text-indent: -9999px;
overflow: hidden;
}

#banner a#banner-service{
/* 製品一覧バナー */
background-image : url(banner_1F1_01.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-recruit{
/* 採用情報バナー */
background-image : url(banner_1F1_02.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-access{
/* アクセスバナー */
background-image : url(banner_1F1_03.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-inner #companyinfo{
background-image : url(sideBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #e9faf2;
margin-bottom: 10px;
border: 1px solid #c8dcbd;
border-radius: 4px;
width: 209px;
}

#hpb-inner #companyinfo h3{
color: #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-size: 1em;
text-align: center;
}

#hpb-inner #companyinfo p{
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* トップページデザイン定義 */

#toppage p.large{
letter-spacing: 0.2em;
}

#toppage h3{
padding: 13px 10px 5px 20px;
margin: 0;
background-image: none;
}

#toppage h3 span.ja{
display: none;
}
#toppage-topics,
#toppage-news{
border: 1px solid #c8dcbd;
border-radius: 4px;
margin: 0 0 25px 0;
background-image : url(topicsBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
}
#toppage-topics h3{

}
#hpb-main #toppage-topics hr{
margin-bottom: 0px;
padding-bottom: 0;
}
#hpb-main #toppage-topics ul{
margin-bottom: 8px;
}
#hpb-main #toppage-topics li{

}
#hpb-main #toppage-topics li:last-child{
border: none;
}

#hpb-main #toppage-news dl{
margin-bottom: 12px;
}
#hpb-main #toppage-news dt{
width: 100px !important;
}
#hpb-main #toppage-news dd{
padding-left: 120px;
}

#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */

#access h3 + img{
margin-left: 10px;
margin-bottom: 10px;
}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/
#hpb-container{
width: 100%;
margin-top: 0;
background-image: none;
background-color: #fff;
}

/* ヘッダー内パーツ */
#hpb-header{
width: 100%;
padding-bottom: 10px;
height: auto;
}
#hpb-headerLogo{
width: 98%;
float: none;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
#hpb-headerMain{
width: 100%;
}
#hpb-headerMain h1{
margin-left: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.4;
text-align: left;
width: auto;
background-color: #20bc71;
}
#hpb-headerLogo a{
display: block;
max-width: 100%;
height: 54px;
background-size: contain;
background-position: top center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerExtra1{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
float: none;
padding: 0;
}

#pagetop{
text-align: center;
left: 0;
}
/* フッター内パーツ */
#hpb-footerMain{
padding-top: 10px;
padding-bottom: 10px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
padding-left: 5px;
padding-right: 5px;
word-break: break-all;
}
#hpb-footerExtra1{
padding-top: 15px;
padding-bottom: 15px;
}
#hpb-footerExtra1 ul{
text-align: center;
width: 100%;
}
#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline-block;
margin-left: 10px;
margin-right: 10px;
padding-right: 0;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/
#hpb-nav h3.hpb-c-index{
width: 27px;
height: 20px;
background-image : url(btn_menu.png);
background-position: top left;
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}

/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
p{
padding-right: 0;
padding-left: 0;
}
img.left{
margin-left: 10px;
margin-right: 10px;
}
img.right{
margin-left: 10px;
margin-right: 10px;
}
.hpb-layoutset-02 h2{
width: 96%;
padding-left: 0;
padding-top: 25px;
line-height: 1.4;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
word-break: break-all;
}
table{
width: 96%;
margin-right: auto;
margin-left: auto;
}

/* フォームパーツ設定 */
textarea{
width: 96%;
}

input.l{
width: 96%;
}
input.m{
width: 60%;
}
input.s{
width: 30%;
}

/* メインコンテンツ内基本パーツ */
#hpb-main h3{
background-size: contain;
}
#hpb-main ul li{
padding-right: 0;
}
#hpb-main dt{
float: none;
line-height: 1.4;
padding-bottom: 0;
}
#hpb-main dd{
line-height: 1.4;
padding-left: 20px;
padding-right: 0;
}
#hpb-main img.left{
margin-left: 10px;
margin-right: 10px;
float: none;
}
#hpb-main img.right{
margin-left: 10px;
margin-right: 10px;
float: none;
}

/* サイドブロック内パーツ */
#banner li a{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#banner a#banner-service,
#banner a#banner-recruit,
#banner a#banner-access{
background-position: top center;
background-size: contain;
}
#hpb-inner #companyinfo{
margin-bottom: 0;
margin-left: auto;
margin-right:auto;
width: 96%;
}

/* トップページデザイン定義 */
#toppage p.large{
margin-left: 0;
margin-right: 0;
}
#hpb-main #toppage-news dd{
padding-left: 20px;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dt:first-child + dd{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */
#access h3 + img{
margin-left: 10px;
margin-right: 10px;
max-width: 96%;
height: auto;
}

}

user.css

@charset "Shift_JIS";

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

.hpb-parts-cnt-style
{
border-color: #c8dcbd !important;
}

#hpb-main .hpb-parts-hl-style
{
clear: both;
margin-top: 0.5em !important;
margin-bottom: 1em !important;
padding-top: 3px !important;
padding-left: 5px !important;
padding-bottom: 3px !important;
text-align: left;
font-size: 1.3em !important;
color: #000 !important;
font-weight: normal;
background-image: none !important;
background-color: transparent !important;
height: auto;
line-height: normal;
letter-spacing: normal !important;
border-color: #c8dcbd !important;
}

.hpb-parts-cbox-style
{
border-color: #c8dcbd !important;
}

.hpb-parts-hr-style
{
border-color: #c8dcbd !important;
}

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

.hpb-parts-blist-style
{
background-color: #20bc71;
border-color: #61dba0;
}
a.hpb-parts-blist-style:link
{
color: #fff;
}
a.hpb-parts-blist-style:visited
{
color: #fff;
}
a.hpb-parts-blist-style:hover
{
background-color: #4bd191;
}
a.hpb-parts-blist-style:active
{
background-color: #4bd191;
}

/*--------------------------------------------------------
hpbparts
--------------------------------------------------------*/
/* 飾りなし幅自動 */
.hpb-parts-cnt-01
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360
{
margin-bottom: 5px;
padding: 5px;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
}

/* 下線 1 */
.hpb-parts-hl-02
{
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
padding: 5px 0.2em 3px 5px !important;
border-bottom-width: 1px !important;
border-color: #ccc !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
padding: 5px 0.2em 3px 5px !important;
border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
padding-top: 6px !important;
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-top-width: 1px !important;
border-top-color: #ccc !important;
border-top-style: dotted !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
border-right-width: 1px !important;
border-right-color: #ccc;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
margin-bottom: 5px;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
margin-bottom: 0.5em;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
margin-bottom: 0.5em;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
margin-bottom: 0.5em;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
}
.hpb-parts-blist-01 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-01 li a
{
padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
}
.hpb-parts-blist-02 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-02 li a
{
border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{

}
.hpb-parts-blist-03 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-03 li a
{
border-left-width: 1em;
border-right-width: 1em;
border-right-style: solid;
border-top-style: dotted;
border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-05 li a
{
border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
ユーザー設定スタイル
--------------------------------------------------------*/
rouge_2008 2015/03/06 03:40:06

すみません。返信が遅くなりました。

ページタイトル画像のエリアについては自己解決できたという事ですが、ブラウザを最大画面にするなど、1100px以上の画面幅にして確認したでしょうか？
最新のHTMLソースでは、「<div id="hpb-inner">」などレイアウトの為の要素が削除されている為、画面幅を大きくするとメニューがどんどん左に離れてコンテンツとの間が空いてしまいます。
元からあるホームページのフレーム内に表示するページという事ですので、あまり気にならないのかもしれませんが、一度確認してみてください。

> header.jpgの下に一行空白を入れたいのですが、
> 無理なのでしょうか。。。ちょっと調べるとdivタグの中にbrタグはだめのような
> 記載があるのですが。。。

特にそのような決まりはないと思いましたが、どのページで確認したのでしょう？
それから、それは何の為の空白でしょう？
見た目のバランスを考えて、任意の要素同士の間に余白を設ける場合、通常はCSSで外側余白「margin」を指定します。
ヘッダーのトップ画像と下のメニューやコンテンツとの間に余白を設けたい場合は、「#hpb-header」に「margin-bottom」を指定します。
※ただし、メニューとコンテンツのfloatを解除する要素が必要です。
元々は「<div id="hpb-inner">」がこの為の要素でしたので、3/04 17:12:00投稿時点のHTMLソースに戻してやり直した方がいいと思います。
CSSも必要な記述が削除されているようですので、編集前の(HTMLと同じ)時点に戻してみてください。
meichi 2015/03/06 05:08:28

大変、お忙しい中、ありがとうございます。。朝、早くからすいません。。（いつもですが・・）
夜中にコメントいただきありがとうございます。。。。

ひとつずつ記載させていただきます。。。

1100px以上の画面幅にして確認したでしょうか？
→確かに、確認してないです。会社のPCでがディスプレイが大きいのでまた確認してみます。

特にそのような決まりはないと思いましたが、どのページで確認したのでしょう？
http://weblan3.com/html/br.php
→すみません、上記のページでみると、大丈夫そうです。。。が、今回作成しているページで
brタグをいれても、反映されないです。。（すいません、記憶です）
アドバイスいただいたとおり、CSSで、やってみます。

それから、それは何の為の空白でしょう？
→ヘッダー画像とそのしたのコンテンツの間が、もうしわけありません、自己判断ですが、
　あいてたので、、、申し訳ないです。

※ただし、メニューとコンテンツのfloatを解除する要素が必要です。
→すみません、どこで設定するのかが、いまは、理解できないです。m(_ _)m
　自分でも、努力して調べてみます。

3/04 17:12:00
→わかりました。。。実は、この時点で、上の緑の線を消したいときにビルダー上で
　強引に消しまた、そのとき、スタイルシートに反映させてしまいました。
　たぶん、CSSの必要なファイルが消えているのもそのせいだとおもいます。。。
→上の緑の線を消すとき、CSSの該当場所を私で確認したときには、記憶違いかも
　しれませんが、反映されなかったような・・・・それで、ビルダー上でやりました。

だんどりとしては、HTMLソースを戻す、、、、CSSをもう一度、本来の企業0013の
内容をもどして、やってみます。。。

すみません、事情がありまして、午前中は、思考力が下がっているので、やるときには
慎重にします。。

会社のPCでは、メールの添付ファイルさえもできないので、だいたい14時半ごろめど
にして、メール本文のべたうちで、内容を記載して、あとは、自宅でやってみます。

本当に、ありがとうございます。。。。m(_ _)m
rouge_2008 2015/03/06 13:10:21

それでは、HTMLとCSSを3/04 17:12:00時点の状態に戻してからの作業についてですが、その前にいくつか確認点があります。

>> それから、それは何の為の空白でしょう？
> →ヘッダー画像とそのしたのコンテンツの間が、もうしわけありません、自己判断ですが、
　あいてたので、、、

ヘッダー画像のサイズは「img」タグに指定されている1000px×70pxでしょうか？
私の方では特に間が空いているようには見えない(※適切な余白に見える)のですが、ヘッダー画像「header.jpg」とコンテンツ内の一番上の画像「planning-icon.jpg」を隙間なく表示したいのでしょうか？

ヘッダー内の「<h1>」、ヘッダー下(コンテンツの上)の「h2」を使わないようですが、必須ではありませんが、HTML構造としてはなるべくならあった方がいいと思います。
ヘッダー画像「header.jpg」、コンテンツ内の「planning-icon.jpg」「chief.jpg」「menber.jpg」に、それぞれのコンテンツの見出しとなるような画像説明テキストをつける事はできないでしょうか？
meichi 2015/03/06 14:25:46

お世話になります。。。なんとか、最初からつくりなおしました。hpb-innerはあります。
下記にHTMLを記載します。空白の件は、調べてしたのですが、限界でした。
すいません。m(__)m 　このあと、CSSをのせます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.6.0 for Windows">
<title>株式会社ビルダーストーリー</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<h1><br></h1>
<img src="header.jpg" width="1000" height="70">
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">


<div id="hpb-main">

<div id="toppage">
<img src="planning-icon.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="262"> 所在地：○○○◆県　○○市　○町　○番○号</td>
<td width="306">○○ビル　○○◆階 </td>
</tr>
</tbody>
</table>
<br>
<br>
<img src="chief.jpg"><br>
<br>
<table border="1">
<tbody>
<tr>
<td rowspan="5" width="203">    　　　　画像なし◆</td>
<td width="52"> 氏名</td>
<td width="286"> ○○　○○▼◆</td>
</tr>
<tr>
<td width="52"> メール</td>
<td width="286"> foo@foo.co.jp▼◆</td>
</tr>
<tr>
<td width="52"> 出身</td>
<td width="286"> ○○県　○○市▼◆</td>
</tr>
<tr>
<td width="52"> 趣味</td>
<td width="286"> 水泳▼◆</td>
</tr>
<tr>
<td width="52"> 一言</td>
<td width="286"> 頑張ります▼◆</td>
</tr>
</tbody>
</table>
<br>
<img src="menber.jpg" width="417" height="26" border="0"><br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td height="212">　　　　　　　　　　　　　　　　　　　　　　 画像なし◆</td>
</tr>
<tr>
<td height="51">○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○◆</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
</div>
<div id="copyright">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>

</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップ◆ページ</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">会社方針</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">サービス／製品一覧</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">新着情報・FAQ</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">会社概要</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">RECRUIT</span></a>

<li id="nav-contact"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-1"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-3"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-2"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-4"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-5"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-6"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-7"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-8"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-9"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-10"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-11"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">

</div>
</div>

</div>

<div id="hpb-footer">
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
<div id="hpb-footerExtra1">
<h3 class="hpb-c-index">サブナビゲーション</h3>
<a href="law.html">特定商取引法に関する記述</a>

</div>
</div>

</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>
meichi 2015/03/06 14:35:01

すいません、CSSです。今回は、強引にビルダー上で編集してないので、、、、

container_1F1_2c_left.css

@charset "Shift_JIS";

/* 要素リセット */
body{
margin: 0;
padding: 0;
text-align: center;
font-size: 75%;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳＰゴシック' , 'Osaka' ,sans-serif;
color: #000000; /* 標準文字色 */
min-width: 960px;
}
/* Safari用ハック文字サイズ調整 */
/*\*/
html:first-child body{
font-size: 70%;
}
/* end */

img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/

#hpb-container{
/*background-image : url(headerBg_1F1.png);
background-repeat: repeat-x;
background-position: top left;*/
}

#hpb-header{
height: 97px;
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}

.clear {

clear:both;　/*floatの解除、ここがポイント*/

}

#hpb-wrapper{
margin-top: -1px;
}

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

.hpb-layoutset-01 #hpb-main{
/*padding-top: 330px;*/
}
.hpb-layoutset-02 #hpb-main{
padding-top: 118px;
}

#hpb-aside{
width: 214px;
text-align: left;
padding-bottom: 20px;
padding-left: 8px;
float: left;
}
#hpb-footer{
clear: both;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height: 309px;
text-indent: -9999px;
overflow: hidden;
background-image : url(mainimg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

.hpb-layoutset-02 #hpb-title{
width: 730px;
height: 111px;
background-image : url(titleBg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}

/* ナビゲーション */

#hpb-nav{
width: 229px;
float: left;
}

#hpb-nav ul{
margin-top: -1px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-left: 0px;
padding-bottom: 0;
list-style-type: none;
text-align: right;
}

#hpb-nav li{
display: block;
font-size: 12px;
letter-spacing: 0.1em;
/*background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;*/
}

#hpb-nav li a{
display: block;
padding-left: 20px;
padding-right: 20px;
height: 55px;
overflow: hidden;
line-height: 55px;
border-bottom: 1px solid #c8dcbd;
font-size: 1.1em;

}
#hpb-nav li a:hover{
background-color: #20bc71;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

/*トップページ*/

#toppage p.large{

}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

body{
min-width: 100%;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/
#hpb-inner{
background-image: none;
width: 100%;
}
#hpb-main{
width: 96%;
float: none;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-main{
padding-top: 0;
margin-top: -10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 0;
}
#hpb-aside{
width: 96%;
float: none;
padding-left: 0;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-aside{
padding-top: 0;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0;
}
#hpb-nav{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
background-color: #20bc71;
}
.hpb-layoutset-02 #hpb-nav{
top: 0;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */
.hpb-layoutset-01 #hpb-title{
width: 100%;
height: 170px;
overflow: hidden;
background-size: contain;
position: relative;
top: 0;
left: 0;
}
.hpb-layoutset-02 #hpb-title{
width: 100%;
background-size: contain;
background-position: top right;
position: relative;
top: 0;
left: 0;
height: auto;
background-color: #3cc482;

}
.hpb-layoutset-02 #hpb-title h2{
line-height: normal;
padding: 14px 0px 0px 10px;
font-size: 1.3em;
}

/* ナビゲーション */
#hpb-nav ul{
display: none;
height: auto;
background-color: #fff;
margin: 0;
text-align: center;
}
#hpb-nav ul.toggled-on{
display: block;
padding-left: 0;
}
#hpb-nav li{
display: block;
background-image: none;
}
#hpb-nav li a{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: auto;
line-height: 1.4;
}
#hpb-nav li a:hover{
background-image: none;
}

/*トップページ*/
#toppage p.large{
margin-bottom: 10px;
}

}

hpbparts.css

@charset "Shift_JIS";

/******************************
* float clear
******************************/
.hpb-clear {
clear: both;
}

.hpb-clearfix:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.hpb-clearfix {
zoom: 1; /* for IE6 */
}

/******************************
* レイアウトコンテナ (div)
******************************/

/* 飾りなし幅自動 */
.hpb-parts-cnt-01 {
margin: 0px;
padding: 0px;
border: none;
width: auto;
float: none;
clear: both;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060 {
margin: 0px;
padding: 0px;
border: none;
width: 60px;
float: left;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120 {
margin: 0px;
padding: 0px;
border: none;
width: 120px;
float: left;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180 {
margin: 0px;
padding: 0px;
border: none;
width: 180px;
float: left;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240 {
margin: 0px;
padding: 0px;
border: none;
width: 240px;
float: left;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
margin: 0px;
padding: 0px;
border: none;
width: 360px;
float: left;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: auto;
float: none;
clear: both;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 60px;
float: left;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 120px;
float: left;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 180px;
float: left;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 240px;
float: left;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 360px;
float: left;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
margin: 0px;
padding: 0px 0.2em;
border: none !important;
line-height: 1.2em;
}

/* 下線 1 */
.hpb-parts-hl-02 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 3px !important;
border-bottom-style: double !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
margin: 0px;
padding: 0px 0.2em;
border-width: 1px !important;
border-style: solid !important;
line-height: 1.2em;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
margin: 0px;
padding: 0px 0.2em;
border-width: 3px !important;
border-style: double !important;
line-height: 1.2em;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-style: solid !important;
border-width: 2px 2px 2px 1.2em !important;
line-height: 1.2em;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
margin: 0px;
padding: 5px;
border: none;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: solid;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: dotted;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
margin: 0px;
padding: 2px;
border-width: 3px;
border-style: double;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01 {
margin: 0px;
padding: 0px;
border: none;
float: left;
}

/* 余白あり */
.hpb-parts-img-02 {
margin: 0px;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03 {
margin: 0px 5px 0px 0px !important;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04 {
margin: 0px 0px 0px 5px !important;
padding: 5px;
border: none;
float: right;
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05 {
margin: 0px;
padding: 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
margin: 0px;
padding: 5px 5px 5px 0px;
border: none;
float: left;
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07 {
margin: 0px;
padding: 0px 5px 5px 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
margin: 0px;
padding: 0px 5px 5px 0px;
border: none;
float: left;
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px !important;
border-top-style: solid !important;
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: solid;
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
margin: 0.5em 0px;
border-width: 3px 0px 0px 0px;
border-top-style: double;
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
margin: 5px;
padding: 0px;
border: none;
text-align: left;
width: auto;
float: none;
clear: both;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 70px;
float: left;
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 130px;
float: left;
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 190px;
float: left;
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 250px;
float: left;
}

/* 線囲み */
.hpb-parts-pbox-02 {
margin: 4px;
padding: 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: auto;
float: none;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 70px;
float: left;
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 130px;
float: left;
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 190px;
float: left;
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 250px;
float: left;
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc {
margin: 0px;
padding: 5px 5px 0px 5px;
border: none;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 135px;
float: left;
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 200px;
float: left;
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 265px;
float: left;
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 255px;
float: left;
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 380px;
float: left;
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 505px;
float: left;
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 375px;
float: left;
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 560px;
float: left;
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 745px;
float: left;
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 495px;
float: left;
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 740px;
float: left;
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 985px;
float: left;
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 135px;
float: left;
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 200px;
float: left;
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 265px;
float: left;
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 255px;
float: left;
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 380px;
float: left;
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 505px;
float: left;
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 375px;
float: left;
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 560px;
float: left;
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 745px;
float: left;
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 495px;
float: left;
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 740px;
float: left;
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 985px;
float: left;
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-01 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-01 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-01 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-style: none;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-02 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-02 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-02 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

/* 文字型 3 */
.hpb-parts-blist-03 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-03 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-03 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-03 li a {
display: block;
margin: 0px auto;
padding: 5px;
text-decoration: none;
border-left-width: 2em;
border-left-style: solid;
border-right-width: 2em;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-04 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-04 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-04 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
height: 30px;
}
.hpb-parts-blist-04 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-05 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-05 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-05 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-width: 1px;
border-style: solid;
height: 30px;
}
.hpb-parts-blist-05 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/******************************
* デフォルトスタイル設定
******************************/

.hpb-parts-cnt-style {
text-align: left;
}

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

.hpb-parts-cbox-style {
text-align: left;
}

.hpb-parts-hr-style {
clear: both;
}

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

/*--------------------------------------------------------
フルCSSテンプレート部品レスポンシブル設定
--------------------------------------------------------*/
@media screen and (max-width: 568px) {

/******************************
* Yahoo!ロコ-地図, Googleマップ
******************************/
div[name="HPBMAP"] {
max-width: 100% !important;
}

#hpb-main div[name="HPBMAP"] img {
max-width: none;
}

/******************************
* フォトモーション
******************************/
.hpb-photomotion {
max-width: 100% !important;
height: auto !important;
}
.hpb-photomotion:after {
display:table;
clear:both;
content:"";
}

/* 画像設定 */
#hpb-main img {
max-width: 100%;
height: auto;
}

/******************************
* レイアウトコンテナ (div)
******************************/
/* 飾りなし幅60px */
.hpb-parts-cnt-01-060,
/* 飾りなし幅120px */
.hpb-parts-cnt-01-120,
/* 飾りなし幅180px */
.hpb-parts-cnt-01-180,
/* 飾りなし幅240px */
.hpb-parts-cnt-01-240,
/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 写真ボックス (div)
******************************/
/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060,
/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120,
/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180,
/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240,
/* 線囲み */
.hpb-parts-pbox-02,
/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060,
/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120,
/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180,
/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 複数写真ボックス (div)
******************************/
/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060,
/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060,
/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060,
/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120,
/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120,
/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120,
/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180,
/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180,
/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180,
/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240,
/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240,
/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240,
/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060,
/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060,
/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060,
/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120,
/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120,
/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120,
/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180,
/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180,
/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180,
/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240,
/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240,
/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

}

main_1F1_2c.css

@charset "Shift_JIS";

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
background-image : url(bg_1F1.png);
background-position: top left;
background-repeat: repeat;
background-color: #fff;
}
#hpb-container{
margin-top: -1px;
}

#hpb-inner::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* ヘッダー内パーツ */

#hpb-header::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;

}

#hpb-headerMain h1{
width: 960px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 4px 0 5px 12px;
color: #fff;
text-align: left;
font-weight: normal;
line-height: 18px;
font-size: 12px;

}
#hpb-headerLogo{
width: 470px;
float: left;
margin-top: 7px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerLogo a{
display: block;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 5px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-indent: -9999px;
overflow: hidden;
height: 54px;
background-image : url(logo_1F1.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-headerExtra1{
width: 470px;
float: right;
margin-top: 0px;
margin-right: 10px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.1em;
padding-right: 20px;
padding-top: 6px;
}
#hpb-headerExtra1 p.tel{
/* 電話番号の文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: right;
font-size: 1.4em;
color: #3cc482;
font-weight: bold;
vertical-align: middle;
}

#hpb-headerExtra1 p.tel span{
/* 電話番号の「TEL」文字設定 */
display: inline-block;
width: 34px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
text-align: left;
margin-right: 10px;
background-image : url(headerTel_1F1.png);
background-position: top left;
background-repeat: no-repeat;
vertical-align: middle;
}

#hpb-headerExtra1 p.address{
/* 住所文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 1.2;
text-align: right;
}

/* フッター内パーツ */

#hpb-footer{
/*background-color: #20bc71;*/
}

#hpb-footerMain{
padding-top: 18px;
padding-bottom: 18px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
text-align: center;
margin: 0;
color: #fff;
}

#hpb-footerExtra1{
padding-top: 13px;
padding-bottom: 23px;
width: 100%;
}

#hpb-footerExtra1 ul{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
text-align: right;
width: 960px;
}

#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline;
background-image : url(point_1F1_02.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 21px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: normal;
}

#hpb-footerExtra1 a:link{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:visited{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:hover{
text-decoration: underline;
}
#hpb-footerExtra1 a:active{
text-decoration: underline;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/

#hpb-nav li a{
/* ナビゲーション文字設定 */
font-weight: normal;
}

#hpb-nav li a:link{
color: #000;
text-decoration: none;
}
/* ナビゲーション文字色設定 */
#hpb-nav li a:visited{
color: #000;
text-decoration: none;
}
#hpb-nav li a:hover{
color: #fff;
text-decoration: none;
}
#hpb-nav li a:active{
color: #fff;
text-decoration: none;
}

#hpb-nav li span.en{
display: none;
}
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
color: #000;
text-decoration: underline;
}
a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #666;
text-decoration: none;
}
a:active{
color: #666;
text-decoration: none;
}

#hpb-skip{
/* ヘッダースキップの非表示 */
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
}

p{
margin-top: 0.5em;
margin-bottom: 2em;
padding-right: 20px;
padding-left: 0.1em;
line-height: 1.4;
text-align: left;
}

p.large{
font-weight: bold;
color: #548a04;
font-size: 1.2em;
}
p.indent{
padding-left: 25px;
}

.left{
float: left;
}

img.left{
margin-left: 14px;
}

.right{
float: right;
}

img.right{
margin-right: 24px;
}

hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;
}

.hpb-layoutset-02 h2{
padding-left: 33px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
line-height: 78px;
color: #fff;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}

h2 span.en{
display: none;
}

#hpb-wrapper h3{
color: #75b400;
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.1em;
background-image : url(indexBg_1F1.png);
background-repeat: no-repeat;
background-position: top center;
padding: 10px 10px 0px 10px;
}

h3.hpb-c-index{
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
background: none;
}

h4{
margin-top: 0;
margin-right: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
color: #0d6138;
font-weight: bold;
}

h5{
margin-top: 0;
margin-bottom: 10px;
margin-left: 14px;
margin-right: 14px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #3cc482;
}

table{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%;
}

table th{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
background-color: #e9faf2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

table td{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

/* フォームパーツ設定 */
input.button{
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding: 10px;
}

textarea{
width: 400px;
height: 200px;
}

input.l{
width: 400px;
}
input.m{
width: 250px;
}
input.s{
width: 150px;
}
#contact form{
text-align:center;
}
#contact form h3{
text-align: left;
}
#contact form table{
margin-left:auto;
}
/* メインコンテンツ内基本パーツ */

#hpb-main p{
margin-left: 10px;
margin-right: 10px;
}

#hpb-main ul{
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl{
margin-top: 0;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#hpb-main dt{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
line-height: 16px;
min-height: 16px;
font-weight: normal;
width: 140px !important;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
}

#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl::after{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#hpb-main img.left{
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}

#hpb-main img.right{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
float: right;
}

#pagetop{
position: absolute;
bottom: 0;
right: 20px;
width: 100%;
text-align: right;
}

#pagetop a{
/* ページの先頭へのリンク設定 */
background-color: #20bc71;
display: inline-block;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#pagetop a:link,
#pagetop a:visited{
color: #fff;
text-decoration: none;
}

/* サイドブロック内パーツ */

#banner ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#banner li{
padding-bottom: 4px;
}

#banner li a{
display: block;
width: 214px;
height: 77px;
text-indent: -9999px;
overflow: hidden;
}

#banner a#banner-service{
/* 製品一覧バナー */
background-image : url(banner_1F1_01.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-recruit{
/* 採用情報バナー */
background-image : url(banner_1F1_02.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-access{
/* アクセスバナー */
background-image : url(banner_1F1_03.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-inner #companyinfo{
background-image : url(sideBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #e9faf2;
margin-bottom: 10px;
border: 1px solid #c8dcbd;
border-radius: 4px;
width: 209px;
}

#hpb-inner #companyinfo h3{
color: #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-size: 1em;
text-align: center;
}

#hpb-inner #companyinfo p{
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* トップページデザイン定義 */

#toppage p.large{
letter-spacing: 0.2em;
}

#toppage h3{
padding: 13px 10px 5px 20px;
margin: 0;
background-image: none;
}

#toppage h3 span.ja{
display: none;
}
#toppage-topics,
#toppage-news{
border: 1px solid #c8dcbd;
border-radius: 4px;
margin: 0 0 25px 0;
background-image : url(topicsBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
}
#toppage-topics h3{

}
#hpb-main #toppage-topics hr{
margin-bottom: 0px;
padding-bottom: 0;
}
#hpb-main #toppage-topics ul{
margin-bottom: 8px;
}
#hpb-main #toppage-topics li{

}
#hpb-main #toppage-topics li:last-child{
border: none;
}

#hpb-main #toppage-news dl{
margin-bottom: 12px;
}
#hpb-main #toppage-news dt{
width: 100px !important;
}
#hpb-main #toppage-news dd{
padding-left: 120px;
}

#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */

#access h3 + img{
margin-left: 10px;
margin-bottom: 10px;
}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/
#hpb-container{
width: 100%;
margin-top: 0;
background-image: none;
background-color: #fff;
}

/* ヘッダー内パーツ */
#hpb-header{
width: 100%;
padding-bottom: 10px;
height: auto;
margin-bottom: 10px;

}
#hpb-headerLogo{
width: 98%;
float: none;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
#hpb-headerMain{
width: 100%;
}
#hpb-headerMain h1{
margin-left: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.4;
text-align: left;
width: auto;
background-color: #20bc71;
}
#hpb-headerLogo a{
display: block;
max-width: 100%;
height: 54px;
background-size: contain;
background-position: top center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerExtra1{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
float: none;
padding: 0;
}

#pagetop{
text-align: center;
left: 0;
}
/* フッター内パーツ */
#hpb-footerMain{
padding-top: 10px;
padding-bottom: 10px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
padding-left: 5px;
padding-right: 5px;
word-break: break-all;
}
#hpb-footerExtra1{
padding-top: 15px;
padding-bottom: 15px;
}
#hpb-footerExtra1 ul{
text-align: center;
width: 100%;
}
#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline-block;
margin-left: 10px;
margin-right: 10px;
padding-right: 0;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/
#hpb-nav h3.hpb-c-index{
width: 27px;
height: 20px;
background-image : url(btn_menu.png);
background-position: top left;
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}

/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
p{
padding-right: 0;
padding-left: 0;
}
img.left{
margin-left: 10px;
margin-right: 10px;
}
img.right{
margin-left: 10px;
margin-right: 10px;
}
.hpb-layoutset-02 h2{
width: 96%;
padding-left: 0;
padding-top: 25px;
line-height: 1.4;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
word-break: break-all;
}
table{
width: 96%;
margin-right: auto;
margin-left: auto;
}

/* フォームパーツ設定 */
textarea{
width: 96%;
}

input.l{
width: 96%;
}
input.m{
width: 60%;
}
input.s{
width: 30%;
}

/* メインコンテンツ内基本パーツ */
#hpb-main h3{
background-size: contain;
}
#hpb-main ul li{
padding-right: 0;
}
#hpb-main dt{
float: none;
line-height: 1.4;
padding-bottom: 0;
}
#hpb-main dd{
line-height: 1.4;
padding-left: 20px;
padding-right: 0;
}
#hpb-main img.left{
margin-left: 10px;
margin-right: 10px;
float: none;
}
#hpb-main img.right{
margin-left: 10px;
margin-right: 10px;
float: none;
}

/* サイドブロック内パーツ */
#banner li a{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#banner a#banner-service,
#banner a#banner-recruit,
#banner a#banner-access{
background-position: top center;
background-size: contain;
}
#hpb-inner #companyinfo{
margin-bottom: 0;
margin-left: auto;
margin-right:auto;
width: 96%;
}

/* トップページデザイン定義 */
#toppage p.large{
margin-left: 0;
margin-right: 0;
}
#hpb-main #toppage-news dd{
padding-left: 20px;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dt:first-child + dd{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */
#access h3 + img{
margin-left: 10px;
margin-right: 10px;
max-width: 96%;
height: auto;
}

}

user.css

@charset "Shift_JIS";

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

.hpb-parts-cnt-style
{
border-color: #c8dcbd !important;
}

#hpb-main .hpb-parts-hl-style
{
clear: both;
margin-top: 0.5em !important;
margin-bottom: 1em !important;
padding-top: 3px !important;
padding-left: 5px !important;
padding-bottom: 3px !important;
text-align: left;
font-size: 1.3em !important;
color: #000 !important;
font-weight: normal;
background-image: none !important;
background-color: transparent !important;
height: auto;
line-height: normal;
letter-spacing: normal !important;
border-color: #c8dcbd !important;
}

.hpb-parts-cbox-style
{
border-color: #c8dcbd !important;
}

.hpb-parts-hr-style
{
border-color: #c8dcbd !important;
}

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

.hpb-parts-blist-style
{
background-color: #20bc71;
border-color: #61dba0;
}
a.hpb-parts-blist-style:link
{
color: #fff;
}
a.hpb-parts-blist-style:visited
{
color: #fff;
}
a.hpb-parts-blist-style:hover
{
background-color: #4bd191;
}
a.hpb-parts-blist-style:active
{
background-color: #4bd191;
}

/*--------------------------------------------------------
hpbparts
--------------------------------------------------------*/
/* 飾りなし幅自動 */
.hpb-parts-cnt-01
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360
{
margin-bottom: 5px;
padding: 5px;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
}

/* 下線 1 */
.hpb-parts-hl-02
{
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
padding: 5px 0.2em 3px 5px !important;
border-bottom-width: 1px !important;
border-color: #ccc !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
padding: 5px 0.2em 3px 5px !important;
border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
padding-top: 6px !important;
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-top-width: 1px !important;
border-top-color: #ccc !important;
border-top-style: dotted !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
border-right-width: 1px !important;
border-right-color: #ccc;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
margin-bottom: 5px;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
margin-bottom: 0.5em;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
margin-bottom: 0.5em;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
margin-bottom: 0.5em;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
}
.hpb-parts-blist-01 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-01 li a
{
padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
}
.hpb-parts-blist-02 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-02 li a
{
border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{

}
.hpb-parts-blist-03 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-03 li a
{
border-left-width: 1em;
border-right-width: 1em;
border-right-style: solid;
border-top-style: dotted;
border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-05 li a
{
border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
ユーザー設定スタイル
--------------------------------------------------------*/
meichi 2015/03/06 14:42:51

すいません、入れ違いになりました。。。

ヘッダー画像のサイズは「img」タグに指定されている1000px×70pxでしょうか？
→その通りです。。。
私の方では特に間が空いているようには見えない(※適切な余白に見える)のですが、ヘッダー画像「header.jpg」とコンテンツ内の一番上の画像「planning-icon.jpg」を隙間なく表示したいのでしょうか？
→すいません、header.jpgとplanning-icon.jpgの間に10pxでもいいので、空白を
　あけたいのです。。。。（すいません、朝書いたので、書き間違えてますm(_ _)m）

もうしわけないです。m(_ _)m
meichi 2015/03/06 14:45:01

ヘッダー画像「header.jpg」、コンテンツ内の「planning-icon.jpg」「chief.jpg」「menber.jpg」に、それぞれのコンテンツの見出しとなるような画像説明テキストをつける事はできないでしょうか？
→いまから、時間ぎりぎりまで、しらべてみます。。。
rouge_2008 2015/03/06 21:08:15

>> ヘッダー画像のサイズは「img」タグに指定されている1000px×70pxでしょうか？
> →その通りです。。。

ヘッダーの幅やメニュー含むコンテンツのレイアウト幅が960pxですので、ヘッダー画像の幅も960pxで作成されていると最適だと思います。(※余分な分がはみ出て表示されていませんか？幅を40px分小さくカットしてみてください。縮小だと高さも変更になりますので・・・)
※コンテンツエリア内に表示する画像の幅は694px(画像に枠を表示する場合はさらに枠の幅を引いたサイズ)以内である必要があります。(レイアウト幅等から自動計算されてコンテンツエリアの幅は694pxになっています。)

>> 私の方では特に間が空いているようには見えない(※適切な余白に見える)のですが、ヘッダー画像「header.jpg」とコンテンツ内の一番上の画像「planning-icon.jpg」を隙間なく表示したいのでしょうか？
> →すいません、header.jpgとplanning-icon.jpgの間に10pxでもいいので、空白をあけたいのです。。。。

「#hpb-header」に下外側余白のスタイル指定を追加します。

#hpb-header {
height: 97px;
overflow: hidden;
width: 960px; /* ここでヘッダーの幅が決められています */
margin-left: auto;
margin-right: auto;
margin-bottom: 10px; /* ←ここを追加 */
}

>> ヘッダー画像「header.jpg」、コンテンツ内の「planning-icon.jpg」「chief.jpg」「menber.jpg」に、それぞれのコンテンツの見出しとなるような画像説明テキストをつける事はできないでしょうか？
> →いまから、時間ぎりぎりまで、しらべてみます。。。

すみません。見出しとして使用できるような画像かどうかを聞きたかったので・・・
「header.jpg」は「○○株式会社 ○○○部○○課」等、「planning-icon.jpg」は「○△担当チーム紹介」等、見出しになりそうなテキストが画像に表示されていますか？)
meichi 2015/03/09 11:35:24

大変お世話になります。m(_ _)m すみません、返事が遅くなりました。
一応ですが、修正しました。。。。見出しのところが自信ありませんが、、、
下記にHTMLをつけます。そのあと、CSSをつけます。大変、お手数かけますが、
ご確認をお願いします。m(_ _)m　私の勝手ですいませんが、今日までが、質問の締切に
なってます。コメントの場合は、すみませんが、キャンセルになった場合のコメントの
見方を再度教えていただけないでしょうか。。。よろしくお願いします。m(_ _)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.6.0 for Windows">
<title>株式会社ビルダーストーリー</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1F1_2c_left.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1F1_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="move-mainnav.js">hpb-move-mainnav-js</script> </head>
<body id="hpb-template-01-32-01" class="hpb-layoutset-01 hpb-responsive">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>

<div id="hpb-container">

<div id="hpb-header">
<div id="hpb-headerMain">
<h1><br></h1>
<img src="header-1.jpg" alt="○○営業部">
</div>
<div id="hpb-headerLogo"><a href="index.html">株式会社ビルダーストーリー</a></div>
<div id="hpb-headerExtra1">
<p class="tel"><span>TEL. </span>03-1234-0000</p>
<p class="address">〒163-0000 東京都○○区○○○1-2-3</p>
</div>
</div>

<div id="hpb-inner">

<div id="hpb-wrapper">


<div id="hpb-main">

<div id="toppage">
<img src="planning-icon.jpg" alt="○○担当"><br>
<br>
<table border="1">
<tbody>
<tr>
<td width="262"> 所在地：○○○◆県　○○市　○町　○番○号</td>
<td width="306">○○ビル　○○◆階 </td>
</tr>
</tbody>
</table>
<br>
<br>
<img src="chief.jpg" alt="課長紹介">
<br>
<table border="1">
<tbody>
<tr>
<td rowspan="5" width="203">    　　　　画像なし◆</td>
<td width="52"> 氏名</td>
<td width="286"> ○○　○○▼◆</td>
</tr>
<tr>
<td width="52"> メール</td>
<td width="286"> foo@foo.co.jp▼◆</td>
</tr>
<tr>
<td width="52"> 出身</td>
<td width="286"> ○○県　○○市▼◆</td>
</tr>
<tr>
<td width="52"> 趣味</td>
<td width="286"> 水泳▼◆</td>
</tr>
<tr>
<td width="52"> 一言</td>
<td width="286"> 頑張ります▼◆</td>
</tr>
</tbody>
</table>
<br>
<img src="menber.jpg" alt="メンバー紹介"417" height="26" border="0"><br>
<br>
<br>
<table border="1">
<tbody>
<tr>
<td height="212">　　　　　　　　　　　　　　　　　　　　　　 画像なし◆</td>
</tr>
<tr>
<td height="51">○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○<br>
○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○○　○○○◆</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
</div>
<div id="copyright">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>

</div>

</div>

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップ◆ページ</span><span class="en">TOP PAGE</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">会社方針</span><span class="en">CONCEPT</span></a>
<li id="nav-service"><a href="service.html"><span class="ja">サービス／製品一覧</span><span class="en">SERVICE&PRODUCTS</span></a>
<li id="nav-news"><a href="news.html"><span class="ja">新着情報・FAQ</span><span class="en">NEWS&FAQ</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">会社概要</span><span class="en">COMPANY</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">RECRUIT</span></a>

<li id="nav-contact"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-1"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-3"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-2"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-4"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-5"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-6"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-7"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-8"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-9"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-10"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

<li id="nav-11"><a href="contact.html"><span class="ja">お問い合わせ</span><span class="en">CONTACT US</span></a>

</ul>
</div>

<div id="hpb-aside">
<h3 class="hpb-c-index">バナースペース</h3>
<div id="banner">

</div>
</div>

</div>

<div id="hpb-footer">
<div id="hpb-footerMain">
<p>copyright©20XX Builder Story Inc. all rights reserved.</p>
</div>
<div id="hpb-footerExtra1">
<h3 class="hpb-c-index">サブナビゲーション</h3>
<a href="law.html">特定商取引法に関する記述</a>

</div>
</div>

</div>
<script type="text/javascript" src="navigation.js">hpb-navigation-js</script> </body>
</html>
meichi 2015/03/09 11:39:47

すみませ、下記がCSSです。

container_1F1_2c_left.css

@charset "Shift_JIS";

/* 要素リセット */
body{
margin: 0;
padding: 0;
text-align: center;
font-size: 75%;
font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳＰゴシック' , 'Osaka' ,sans-serif;
color: #000000; /* 標準文字色 */
min-width: 960px;
}
/* Safari用ハック文字サイズ調整 */
/*\*/
html:first-child body{
font-size: 70%;
}
/* end */

img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/

#hpb-container{
/*background-image : url(headerBg_1F1.png);
background-repeat: repeat-x;
background-position: top left;*/
}

#hpb-header{
height: 97px;
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
}

#hpb-inner{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
background-image : url(innerBg_1F1.png);
background-repeat: repeat-y;
background-position: top left;
background-color: #fff;
margin-top: -1px;
}

.clear {

clear:both;　/*floatの解除、ここがポイント*/

}

#hpb-wrapper{
margin-top: -1px;
}

#hpb-main{
width: 694px;
float: right;
text-align: left;
padding-bottom: 30px;
padding-left: 18px;
padding-right: 18px;
}

.hpb-layoutset-01 #hpb-main{
/*padding-top: 330px;*/
}
.hpb-layoutset-02 #hpb-main{
padding-top: 118px;
}

#hpb-aside{
width: 214px;
text-align: left;
padding-bottom: 20px;
padding-left: 8px;
float: left;
}
#hpb-footer{
clear: both;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */

.hpb-layoutset-01 #hpb-title{
width: 730px;
height: 309px;
text-indent: -9999px;
overflow: hidden;
background-image : url(mainimg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}

.hpb-layoutset-02 #hpb-title{
width: 730px;
height: 111px;
background-image : url(titleBg_1F1.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}

/* ナビゲーション */

#hpb-nav{
width: 229px;
float: left;
}

#hpb-nav ul{
margin-top: -1px;
margin-right: 0;
margin-bottom: 14px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-left: 0px;
padding-bottom: 0;
list-style-type: none;
text-align: right;
}

#hpb-nav li{
display: block;
font-size: 12px;
letter-spacing: 0.1em;
/*background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;*/
}

#hpb-nav li a{
display: block;
padding-left: 20px;
padding-right: 20px;
height: 55px;
overflow: hidden;
line-height: 55px;
border-bottom: 1px solid #c8dcbd;
font-size: 1.1em;

}
#hpb-nav li a:hover{
background-color: #20bc71;
background-image : url(mainmenu_1F1.png);
background-repeat: no-repeat;
background-position: top right;
}

/*トップページ*/

#toppage p.large{

}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

body{
min-width: 100%;
}

/*--------------------------------------------------------
レイアウト設定
--------------------------------------------------------*/
#hpb-inner{
background-image: none;
width: 100%;
}
#hpb-main{
width: 96%;
float: none;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-main{
padding-top: 0;
margin-top: -10px;
}
.hpb-layoutset-02 #hpb-main{
padding-top: 0;
}
#hpb-aside{
width: 96%;
float: none;
padding-left: 0;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.hpb-layoutset-01 #hpb-aside{
padding-top: 0;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0;
}
#hpb-nav{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
background-color: #20bc71;
}
.hpb-layoutset-02 #hpb-nav{
top: 0;
}

/*--------------------------------------------------------
デザイン設定
--------------------------------------------------------*/
/* タイトル */
.hpb-layoutset-01 #hpb-title{
width: 100%;
height: 170px;
overflow: hidden;
background-size: contain;
position: relative;
top: 0;
left: 0;
}
.hpb-layoutset-02 #hpb-title{
width: 100%;
background-size: contain;
background-position: top right;
position: relative;
top: 0;
left: 0;
height: auto;
background-color: #3cc482;

}
.hpb-layoutset-02 #hpb-title h2{
line-height: normal;
padding: 14px 0px 0px 10px;
font-size: 1.3em;
}

/* ナビゲーション */
#hpb-nav ul{
display: none;
height: auto;
background-color: #fff;
margin: 0;
text-align: center;
}
#hpb-nav ul.toggled-on{
display: block;
padding-left: 0;
}
#hpb-nav li{
display: block;
background-image: none;
}
#hpb-nav li a{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: auto;
line-height: 1.4;
}
#hpb-nav li a:hover{
background-image: none;
}

/*トップページ*/
#toppage p.large{
margin-bottom: 10px;
}

}

hpbparts.css

@charset "Shift_JIS";

/******************************
* float clear
******************************/
.hpb-clear {
clear: both;
}

.hpb-clearfix:after {
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.hpb-clearfix {
zoom: 1; /* for IE6 */
}

/******************************
* レイアウトコンテナ (div)
******************************/

/* 飾りなし幅自動 */
.hpb-parts-cnt-01 {
margin: 0px;
padding: 0px;
border: none;
width: auto;
float: none;
clear: both;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060 {
margin: 0px;
padding: 0px;
border: none;
width: 60px;
float: left;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120 {
margin: 0px;
padding: 0px;
border: none;
width: 120px;
float: left;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180 {
margin: 0px;
padding: 0px;
border: none;
width: 180px;
float: left;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240 {
margin: 0px;
padding: 0px;
border: none;
width: 240px;
float: left;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
margin: 0px;
padding: 0px;
border: none;
width: 360px;
float: left;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: auto;
float: none;
clear: both;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 60px;
float: left;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 120px;
float: left;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 180px;
float: left;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 240px;
float: left;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360 {
margin: 0px;
padding: 0px;
border-width: 1px;
border-style: solid;
width: 360px;
float: left;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
margin: 0px;
padding: 0px 0.2em;
border: none !important;
line-height: 1.2em;
}

/* 下線 1 */
.hpb-parts-hl-02 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
margin: 0px;
padding: 0px 0.2em;
border-bottom-width: 3px !important;
border-bottom-style: double !important;
border-top-style: none !important;
border-right-style: none !important;
border-left-style: none !important;
line-height: 1.2em;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
margin: 0px;
padding: 0px 0.2em;
border-width: 1px !important;
border-style: solid !important;
line-height: 1.2em;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
margin: 0px;
padding: 0px 0.2em;
border-width: 3px !important;
border-style: double !important;
line-height: 1.2em;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-left-width: 1.2em !important;
border-left-style: solid !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-top-style: none !important;
border-right-style: none !important;
line-height: 1.2em;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
margin: 0px;
padding: 0px 0px 0px 0.2em;
border-style: solid !important;
border-width: 2px 2px 2px 1.2em !important;
line-height: 1.2em;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
margin: 0px;
padding: 5px;
border: none;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: solid;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
margin: 0px;
padding: 4px;
border-width: 1px;
border-style: dotted;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
margin: 0px;
padding: 2px;
border-width: 3px;
border-style: double;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01 {
margin: 0px;
padding: 0px;
border: none;
float: left;
}

/* 余白あり */
.hpb-parts-img-02 {
margin: 0px;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03 {
margin: 0px 5px 0px 0px !important;
padding: 5px;
border: none;
float: left;
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04 {
margin: 0px 0px 0px 5px !important;
padding: 5px;
border: none;
float: right;
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05 {
margin: 0px;
padding: 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
margin: 0px;
padding: 5px 5px 5px 0px;
border: none;
float: left;
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07 {
margin: 0px;
padding: 0px 5px 5px 5px;
border: none;
float: left;
clear: both;
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
margin: 0px;
padding: 0px 5px 5px 0px;
border: none;
float: left;
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px !important;
border-top-style: solid !important;
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: solid;
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dotted;
height: 0px;
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
margin: 0.5em 0px;
border-width: 1px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
margin: 0.5em 0px;
border-width: 2px 0px 0px 0px;
border-top-style: dashed;
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
margin: 0.5em 0px;
border-width: 3px 0px 0px 0px;
border-top-style: double;
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
margin: 5px;
padding: 0px;
border: none;
text-align: left;
width: auto;
float: none;
clear: both;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 70px;
float: left;
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 130px;
float: left;
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 190px;
float: left;
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 250px;
float: left;
}

/* 線囲み */
.hpb-parts-pbox-02 {
margin: 4px;
padding: 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: auto;
float: none;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 70px;
float: left;
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 130px;
float: left;
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 190px;
float: left;
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 250px;
float: left;
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc {
margin: 0px;
padding: 5px 5px 0px 5px;
border: none;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 135px;
float: left;
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 200px;
float: left;
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 265px;
float: left;
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 255px;
float: left;
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 380px;
float: left;
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 505px;
float: left;
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 375px;
float: left;
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 560px;
float: left;
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 745px;
float: left;
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 495px;
float: left;
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 740px;
float: left;
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
margin: 5px;
padding: 0px 0px 5px 0px;
border: none;
text-align: left;
width: 985px;
float: left;
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 135px;
float: left;
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 200px;
float: left;
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 265px;
float: left;
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 255px;
float: left;
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 380px;
float: left;
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 505px;
float: left;
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 375px;
float: left;
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 560px;
float: left;
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 745px;
float: left;
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 495px;
float: left;
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 740px;
float: left;
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
margin: 4px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
text-align: left;
width: 985px;
float: left;
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-01 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-01 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-01 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-style: none;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-02 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-02 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-02 li a {
display: block;
margin: 0px;
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

/* 文字型 3 */
.hpb-parts-blist-03 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-03 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: center;
}
.hpb-parts-blist-03 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-03 li a {
display: block;
margin: 0px auto;
padding: 5px;
text-decoration: none;
border-left-width: 2em;
border-left-style: solid;
border-right-width: 2em;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-04 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-04 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-04 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
height: 30px;
}
.hpb-parts-blist-04 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
margin: 0px;
padding: 0px;
}
.hpb-parts-blist-05 ul {
margin: 0px;
padding: 5px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
.hpb-parts-blist-05 li {
padding: 0px 5px 5px 5px;
}
.hpb-parts-blist-05 li a {
display: block;
margin: 0px;
padding: 0px;
text-decoration: none;
border-width: 1px;
border-style: solid;
height: 30px;
}
.hpb-parts-blist-05 li a img {
margin: 0px;
padding: 0px 5px 0px 0px;
border: none;
vertical-align: middle;
}

/******************************
* デフォルトスタイル設定
******************************/

.hpb-parts-cnt-style {
text-align: left;
}

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

.hpb-parts-cbox-style {
text-align: left;
}

.hpb-parts-hr-style {
clear: both;
}

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

/*--------------------------------------------------------
フルCSSテンプレート部品レスポンシブル設定
--------------------------------------------------------*/
@media screen and (max-width: 568px) {

/******************************
* Yahoo!ロコ-地図, Googleマップ
******************************/
div[name="HPBMAP"] {
max-width: 100% !important;
}

#hpb-main div[name="HPBMAP"] img {
max-width: none;
}

/******************************
* フォトモーション
******************************/
.hpb-photomotion {
max-width: 100% !important;
height: auto !important;
}
.hpb-photomotion:after {
display:table;
clear:both;
content:"";
}

/* 画像設定 */
#hpb-main img {
max-width: 100%;
height: auto;
}

/******************************
* レイアウトコンテナ (div)
******************************/
/* 飾りなし幅60px */
.hpb-parts-cnt-01-060,
/* 飾りなし幅120px */
.hpb-parts-cnt-01-120,
/* 飾りなし幅180px */
.hpb-parts-cnt-01-180,
/* 飾りなし幅240px */
.hpb-parts-cnt-01-240,
/* 飾りなし幅360px */
.hpb-parts-cnt-01-360 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 写真ボックス (div)
******************************/
/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060,
/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120,
/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180,
/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240,
/* 線囲み */
.hpb-parts-pbox-02,
/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060,
/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120,
/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180,
/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

/******************************
* 複数写真ボックス (div)
******************************/
/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060,
/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060,
/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060,
/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120,
/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120,
/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120,
/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180,
/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180,
/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180,
/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240,
/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240,
/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240,
/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060,
/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060,
/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060,
/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120,
/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120,
/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120,
/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180,
/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180,
/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180,
/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240,
/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240,
/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
max-width:100%;
margin-left: auto;
margin-right: auto;
}

}

main_1F1_2c.css

@charset "Shift_JIS";

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/

body{
background-image : url(bg_1F1.png);
background-position: top left;
background-repeat: repeat;
background-color: #fff;
}
#hpb-container{
margin-top: -1px;
}

#hpb-inner::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* ヘッダー内パーツ */

#hpb-header::after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;

}

#hpb-headerMain h1{
width: 960px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 4px 0 5px 12px;
color: #fff;
text-align: left;
font-weight: normal;
line-height: 18px;
font-size: 12px;

}
#hpb-headerLogo{
width: 470px;
float: left;
margin-top: 7px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerLogo a{
display: block;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 5px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-indent: -9999px;
overflow: hidden;
height: 54px;
background-image : url(logo_1F1.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-headerExtra1{
width: 470px;
float: right;
margin-top: 0px;
margin-right: 10px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0.1em;
padding-right: 20px;
padding-top: 6px;
}
#hpb-headerExtra1 p.tel{
/* 電話番号の文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: right;
font-size: 1.4em;
color: #3cc482;
font-weight: bold;
vertical-align: middle;
}

#hpb-headerExtra1 p.tel span{
/* 電話番号の「TEL」文字設定 */
display: inline-block;
width: 34px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
text-align: left;
margin-right: 10px;
background-image : url(headerTel_1F1.png);
background-position: top left;
background-repeat: no-repeat;
vertical-align: middle;
}

#hpb-headerExtra1 p.address{
/* 住所文字設定 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 1.2;
text-align: right;
}

/* フッター内パーツ */

#hpb-footer{
/*background-color: #20bc71;*/
}

#hpb-footerMain{
padding-top: 18px;
padding-bottom: 18px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
text-align: center;
margin: 0;
color: #fff;
}

#hpb-footerExtra1{
padding-top: 13px;
padding-bottom: 23px;
width: 100%;
}

#hpb-footerExtra1 ul{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
text-align: right;
width: 960px;
}

#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline;
background-image : url(point_1F1_02.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 21px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: normal;
}

#hpb-footerExtra1 a:link{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:visited{
text-decoration: underline;
color: #fff;
}
#hpb-footerExtra1 a:hover{
text-decoration: underline;
}
#hpb-footerExtra1 a:active{
text-decoration: underline;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/

#hpb-nav li a{
/* ナビゲーション文字設定 */
font-weight: normal;
}

#hpb-nav li a:link{
color: #000;
text-decoration: none;
}
/* ナビゲーション文字色設定 */
#hpb-nav li a:visited{
color: #000;
text-decoration: none;
}
#hpb-nav li a:hover{
color: #fff;
text-decoration: none;
}
#hpb-nav li a:active{
color: #fff;
text-decoration: none;
}

#hpb-nav li span.en{
display: none;
}
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
color: #000;
text-decoration: underline;
}
a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #666;
text-decoration: none;
}
a:active{
color: #666;
text-decoration: none;
}

#hpb-skip{
/* ヘッダースキップの非表示 */
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
}

p{
margin-top: 0.5em;
margin-bottom: 2em;
padding-right: 20px;
padding-left: 0.1em;
line-height: 1.4;
text-align: left;
}

p.large{
font-weight: bold;
color: #548a04;
font-size: 1.2em;
}
p.indent{
padding-left: 25px;
}

.left{
float: left;
}

img.left{
margin-left: 14px;
}

.right{
float: right;
}

img.right{
margin-right: 24px;
}

hr{
width: 100%;
height: 1px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 20px;
margin-left: auto;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-left-width: 1px;
border-left-style: none;
color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: none;
}

.hpb-layoutset-02 h2{
padding-left: 33px;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
line-height: 78px;
color: #fff;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}

h2 span.en{
display: none;
}

#hpb-wrapper h3{
color: #75b400;
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.1em;
background-image : url(indexBg_1F1.png);
background-repeat: no-repeat;
background-position: top center;
padding: 10px 10px 0px 10px;
}

h3.hpb-c-index{
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
text-indent: -9999px;
background: none;
}

h4{
margin-top: 0;
margin-right: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
color: #0d6138;
font-weight: bold;
}

h5{
margin-top: 0;
margin-bottom: 10px;
margin-left: 14px;
margin-right: 14px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
text-align: left;
font-size: 1.1em;
line-height: 1.2;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #3cc482;
}

table{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%;
}

table th{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
background-color: #e9faf2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

table td{
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 8px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

/* フォームパーツ設定 */
input.button{
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding: 10px;
}

textarea{
width: 400px;
height: 200px;
}

input.l{
width: 400px;
}
input.m{
width: 250px;
}
input.s{
width: 150px;
}
#contact form{
text-align:center;
}
#contact form h3{
text-align: left;
}
#contact form table{
margin-left:auto;
}
/* メインコンテンツ内基本パーツ */

#hpb-main p{
margin-left: 10px;
margin-right: 10px;
}

#hpb-main ul{
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#hpb-main ul li{
text-align: left;
line-height: 1.6;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl{
margin-top: 0;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#hpb-main dt{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
line-height: 16px;
min-height: 16px;
font-weight: normal;
width: 140px !important;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-image : url(point_1F1.png);
background-position: 5px 11px;
background-repeat: no-repeat;
}

#hpb-main dd{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-align: left;
line-height: 16px;
min-height: 16px;
padding-left: 165px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}

#hpb-main dl::after{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#hpb-main img.left{
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}

#hpb-main img.right{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
float: right;
}

#pagetop{
position: absolute;
bottom: 0;
right: 20px;
width: 100%;
text-align: right;
}

#pagetop a{
/* ページの先頭へのリンク設定 */
background-color: #20bc71;
display: inline-block;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#pagetop a:link,
#pagetop a:visited{
color: #fff;
text-decoration: none;
}

/* サイドブロック内パーツ */

#banner ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
}

#banner li{
padding-bottom: 4px;
}

#banner li a{
display: block;
width: 214px;
height: 77px;
text-indent: -9999px;
overflow: hidden;
}

#banner a#banner-service{
/* 製品一覧バナー */
background-image : url(banner_1F1_01.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-recruit{
/* 採用情報バナー */
background-image : url(banner_1F1_02.png);
background-position: top left;
background-repeat: no-repeat;
}

#banner a#banner-access{
/* アクセスバナー */
background-image : url(banner_1F1_03.png);
background-position: top left;
background-repeat: no-repeat;
}

#hpb-inner #companyinfo{
background-image : url(sideBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #e9faf2;
margin-bottom: 10px;
border: 1px solid #c8dcbd;
border-radius: 4px;
width: 209px;
}

#hpb-inner #companyinfo h3{
color: #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-size: 1em;
text-align: center;
}

#hpb-inner #companyinfo p{
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* トップページデザイン定義 */

#toppage p.large{
letter-spacing: 0.2em;
}

#toppage h3{
padding: 13px 10px 5px 20px;
margin: 0;
background-image: none;
}

#toppage h3 span.ja{
display: none;
}
#toppage-topics,
#toppage-news{
border: 1px solid #c8dcbd;
border-radius: 4px;
margin: 0 0 25px 0;
background-image : url(topicsBg_1F1.png);
background-position: top center;
background-repeat: no-repeat;
}
#toppage-topics h3{

}
#hpb-main #toppage-topics hr{
margin-bottom: 0px;
padding-bottom: 0;
}
#hpb-main #toppage-topics ul{
margin-bottom: 8px;
}
#hpb-main #toppage-topics li{

}
#hpb-main #toppage-topics li:last-child{
border: none;
}

#hpb-main #toppage-news dl{
margin-bottom: 12px;
}
#hpb-main #toppage-news dt{
width: 100px !important;
}
#hpb-main #toppage-news dd{
padding-left: 120px;
}

#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */

#access h3 + img{
margin-left: 10px;
margin-bottom: 10px;
}

/* =======================================================
レスポンシブル設定
======================================================= */
@media screen and (max-width: 568px) {

/*--------------------------------------------------------
共通レイアウトパーツ設定
--------------------------------------------------------*/
#hpb-container{
width: 100%;
margin-top: 0;
background-image: none;
background-color: #fff;
}

/* ヘッダー内パーツ */
#hpb-header{
width: 100%;
padding-bottom: 10px;
height: auto;
margin-bottom: 10px;

}
#hpb-headerLogo{
width: 98%;
float: none;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
#hpb-headerMain{
width: 100%;
}
#hpb-headerMain h1{
margin-left: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.4;
text-align: left;
width: auto;
background-color: #20bc71;
}
#hpb-headerLogo a{
display: block;
max-width: 100%;
height: 54px;
background-size: contain;
background-position: top center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
#hpb-headerExtra1{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
float: none;
padding: 0;
}

#pagetop{
text-align: center;
left: 0;
}
/* フッター内パーツ */
#hpb-footerMain{
padding-top: 10px;
padding-bottom: 10px;
}
#hpb-footerMain p{
/* コピーライト文字設定 */
padding-left: 5px;
padding-right: 5px;
word-break: break-all;
}
#hpb-footerExtra1{
padding-top: 15px;
padding-bottom: 15px;
}
#hpb-footerExtra1 ul{
text-align: center;
width: 100%;
}
#hpb-footerExtra1 li{
/* フッターナビ設定 */
display: inline-block;
margin-left: 10px;
margin-right: 10px;
padding-right: 0;
}

/*--------------------------------------------------------
ナビゲーションデザイン設定
--------------------------------------------------------*/
#hpb-nav h3.hpb-c-index{
width: 27px;
height: 20px;
background-image : url(btn_menu.png);
background-position: top left;
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}

/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
p{
padding-right: 0;
padding-left: 0;
}
img.left{
margin-left: 10px;
margin-right: 10px;
}
img.right{
margin-left: 10px;
margin-right: 10px;
}
.hpb-layoutset-02 h2{
width: 96%;
padding-left: 0;
padding-top: 25px;
line-height: 1.4;
margin-top: 4px;
margin-right: auto;
margin-left: auto;
word-break: break-all;
}
table{
width: 96%;
margin-right: auto;
margin-left: auto;
}

/* フォームパーツ設定 */
textarea{
width: 96%;
}

input.l{
width: 96%;
}
input.m{
width: 60%;
}
input.s{
width: 30%;
}

/* メインコンテンツ内基本パーツ */
#hpb-main h3{
background-size: contain;
}
#hpb-main ul li{
padding-right: 0;
}
#hpb-main dt{
float: none;
line-height: 1.4;
padding-bottom: 0;
}
#hpb-main dd{
line-height: 1.4;
padding-left: 20px;
padding-right: 0;
}
#hpb-main img.left{
margin-left: 10px;
margin-right: 10px;
float: none;
}
#hpb-main img.right{
margin-left: 10px;
margin-right: 10px;
float: none;
}

/* サイドブロック内パーツ */
#banner li a{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#banner a#banner-service,
#banner a#banner-recruit,
#banner a#banner-access{
background-position: top center;
background-size: contain;
}
#hpb-inner #companyinfo{
margin-bottom: 0;
margin-left: auto;
margin-right:auto;
width: 96%;
}

/* トップページデザイン定義 */
#toppage p.large{
margin-left: 0;
margin-right: 0;
}
#hpb-main #toppage-news dd{
padding-left: 20px;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dt:first-child + dd{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8dcbd;
}
#hpb-main #toppage-news dd:last-child{
border: none;
}

/* アクセスページデザイン定義 */
#access h3 + img{
margin-left: 10px;
margin-right: 10px;
max-width: 96%;
height: auto;
}

}

user.css

@charset "Shift_JIS";

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

.hpb-parts-cnt-style
{
border-color: #c8dcbd !important;
}

#hpb-main .hpb-parts-hl-style
{
clear: both;
margin-top: 0.5em !important;
margin-bottom: 1em !important;
padding-top: 3px !important;
padding-left: 5px !important;
padding-bottom: 3px !important;
text-align: left;
font-size: 1.3em !important;
color: #000 !important;
font-weight: normal;
background-image: none !important;
background-color: transparent !important;
height: auto;
line-height: normal;
letter-spacing: normal !important;
border-color: #c8dcbd !important;
}

.hpb-parts-cbox-style
{
border-color: #c8dcbd !important;
}

.hpb-parts-hr-style
{
border-color: #c8dcbd !important;
}

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

.hpb-parts-blist-style
{
background-color: #20bc71;
border-color: #61dba0;
}
a.hpb-parts-blist-style:link
{
color: #fff;
}
a.hpb-parts-blist-style:visited
{
color: #fff;
}
a.hpb-parts-blist-style:hover
{
background-color: #4bd191;
}
a.hpb-parts-blist-style:active
{
background-color: #4bd191;
}

/*--------------------------------------------------------
hpbparts
--------------------------------------------------------*/
/* 飾りなし幅自動 */
.hpb-parts-cnt-01
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅60px */
.hpb-parts-cnt-01-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅120px */
.hpb-parts-cnt-01-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅180px */
.hpb-parts-cnt-01-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅240px */
.hpb-parts-cnt-01-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 飾りなし幅360px */
.hpb-parts-cnt-01-360
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅自動 */
.hpb-parts-cnt-02
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅60px */
.hpb-parts-cnt-02-060
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅120px */
.hpb-parts-cnt-02-120
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅180px */
.hpb-parts-cnt-02-180
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅240px */
.hpb-parts-cnt-02-240
{
margin-bottom: 5px;
padding: 5px;
}

/* 線囲み幅360px */
.hpb-parts-cnt-02-360
{
margin-bottom: 5px;
padding: 5px;
}

/******************************
* 見出し (h1-h6)
******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
}

/* 下線 1 */
.hpb-parts-hl-02
{
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
padding: 5px 0.2em 3px 5px !important;
border-bottom-width: 1px !important;
border-color: #ccc !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
padding: 5px 0.2em 3px 5px !important;
border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
padding-top: 6px !important;
padding-left: 0.5em !important;
border-left-width: 0.5em !important;
border-left-color: #d3d3d3 !important;
border-top-width: 1px !important;
border-top-color: #ccc !important;
border-top-style: dotted !important;
border-bottom-width: 1px !important;
border-bottom-color: #ccc !important;
border-bottom-style: dotted !important;
border-right-width: 1px !important;
border-right-color: #ccc;
}

/******************************
* 文章枠 (div)
******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
margin-bottom: 5px;
}

/******************************
* 写真/画像 (img)
******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
* 水平線 (hr)
******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
* 写真ボックス (div)
******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
margin-bottom: 0.5em;
}

/* 飾りなし画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
margin-bottom: 0.5em;
}

/* 線囲み画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
margin-bottom: 0.5em;
}

/******************************
* 複数写真ボックス (div)
******************************/

/* 飾りなし画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
* バナーリスト
******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
}
.hpb-parts-blist-01 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-01 li a
{
padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
}
.hpb-parts-blist-02 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-02 li a
{
border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{

}
.hpb-parts-blist-03 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-03 li a
{
border-left-width: 1em;
border-right-width: 1em;
border-right-style: solid;
border-top-style: dotted;
border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
border-bottom: none !important;
padding: 2px !important;
padding-left: 0 !important;
background-image: none !important;
}
.hpb-parts-blist-05 li a
{
border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
ユーザー設定スタイル
--------------------------------------------------------*/
rouge_2008 2015/03/09 16:16:11

> 見出しのところが自信ありませんが、、、

見出しにできるような画像という事でしょうか？
「alt="～"」で見出しの代わりにする画像説明テキストを指定しているので、ここはそのままで大丈夫です。
それぞれの内容は、構造上の階層ではどうなりますか？
「○○担当」の下に「課長紹介」と「メンバー紹介」が同階層で続くのでしたら、次のようにしてみてください。(※テーブルその他は省略しています。)
--------------------------------------------------
<h2><img src="planning-icon.jpg" alt="○○担当"></h2>

<h3><img src="chief.jpg" alt="課長紹介"></h3>

<h3><img src="menber.jpg" alt="メンバー紹介" 417"="" height="26" border="0"></h3>
--------------------------------------------------
※「h1」はヘッダーにあるので、「h2」から始めています。(※「h1～h6」を続けて使用する決まりはありません。)
※見出しを設定する画像を選択した状態で、「挿入」メニューの「段落」から任意の見出しの項目を選択すると設定されると思います。(「HTMLソース」タブで直接「<img src="～">」を選択した状態にしてから挿入メニューを実行しても、見出しタグを直接入力しても、どの方法でもやりやすい方法で試してみてください。)
※ウェブページに必須という事ではありませんが、HTMLも文書構造を考えて作成した方がいいかもしれませんので、一応参考にしてください。(これによってSEOで有利になるという事は特にないと思いますが・・・)

※すべて同じ階層になるのでしたら、以下のようにします。
--------------------------------------------------
<h2><img src="planning-icon.jpg" alt="○○担当"></h2>

<h2><img src="chief.jpg" alt="課長紹介"></h2>

<h2><img src="menber.jpg" alt="メンバー紹介" 417"="" height="26" border="0"></h2>
--------------------------------------------------

とりあえず現在の状態で特に表示に問題はないように見えます。
何かありましたらまたコメントしてください。

> キャンセルになった場合のコメントの見方を再度教えていただけないでしょうか。。。

自動終了によるキャンセルの場合、質問ページはそのまま残りますので、直接アクセスして確認してください。
以下がこの質問ページのURLです。

・（すいません、ちょっと急いでます）ホームページビルダー19クラシックに関する質問です。...
http://q.hatena.ne.jp/1424670826

人力検索のマイページ(ユーザーのプロフィールページ)から質問ページにアクセスする事も可能です。
meichiさんの場合、以下が人力検索のマイページのURLです。(※ヘッダーメニューの「マイページ」をクリックするとアクセスできます。)

http://q.hatena.ne.jp/meichi/
※質問履歴、回答履歴、ベストアンサー、ウォッチリストから直近5件ずつ一覧が表示されていますので、さらに確認したい場合は、「もっと見る」のリンクをクリックします。

ちなみに以下が質問履歴のページのURLです。
http://q.hatena.ne.jp/meichi/questionlist

※スマートフォンからアクセスしている場合は、画面右上のプロフィールアイコンをクリックするとマイページ(プロフィールページ)に移動し、プロフィールページの「利用情報」の下に表示されている「利用履歴」の「質問履歴」をクリックすると過去の質問一覧にアクセスできると思います。
meichi 2015/03/10 00:53:45

お世話になります。大変お忙しい中、ありがとうございました。m(_ _)m

それぞれの内容は、構造上の階層ではどうなりますか？
→同じ・・・という表現であってますでしょうか。。。

アドバイスいただいたとおり、見出しタグをいれ、Apacheで確認しました。
大丈夫だと思います。

こんなにも、お世話になりましたので、やはり、ポイントは、私の勝手ながら、
送信させていただきます。ご容赦ください。。。もし、迷惑なら、その旨
おっしゃてください。

気づいたことは、テーブルに画像を挿入するとき、画像のサイズをある程度
縮小しないと、あとからテーブルのサイズ等（レイアウト）を
いじれなくなることでしょうか。
手間がかかりますが、そこは、、、HTML上問題ないので、私で調整します。

もし、なにか、きづきましたら、教えていただけないでしょうか。。。

＃余談になりますが、部長から、さすがに、まだかと催促されました。。。
　そうですよね。。

めずらしく、明日休みなので、いまだにおきています。

私のPCの画面が小さいので、最終確認はしますが、大丈夫でしょう。
会社のPCにWebサーバをいれようと、必死で考えたのですが、無理でした。。

本当にありがとうございました。おかげ様で、CSSの概念（すいません）
だけは、理解できました。

これからも、課題があると思いますので、そのときは、別立てで質問を
あげさせていただきます。また、皆様のご協力をいただたきたいと思います、

よろしくお願いします。m(_ _)m
rouge_2008 2015/03/11 01:55:10

とりあえず、当面やりたかった事が完了したようで良かったです。
せっかくですが、今回のポイントはけっこうです・・・

> 気づいたことは、テーブルに画像を挿入するとき、画像のサイズをある程度
> 縮小しないと、あとからテーブルのサイズ等（レイアウト）を
> いじれなくなることでしょうか。

あらかじめ行や列の数などテーブルの形を決めておいて、なるべく変更しないようにするしかないと思います。
※セルの連結形態は、後からでも変更できるようです。
表の編集ツールバーのボタンから各種結合や分割ボタンを利用するか、あるいは「表」メニューから各種結合や分割メニューを実行します。

・表を使ってページをレイアウトする
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=047822

画像は少し縮小するだけでしたら、imgタグのサイズに直接縮小サイズを指定するだけでもいいと思います。(縦横比率が崩れないように注意してください。)
大幅に縮小する必要がある場合は、実際に画像を縮小した方がいいと思いますが・・・

テーブルのサイズはCSSで決まっています。(main_1F1_2c.css)

table {
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cccccc;
width: 90%; /* ここでテーブルの幅が指定されている */
}

親要素である「<div id="toppage">」が694pxなので、90%でテーブルの最大幅は624pxになります。
枠線や内側余白などの指定がありますので、1行すべて使って画像を表示する場合でも、590px以内の幅にする必要があるようです。

> 会社のPCにWebサーバをいれようと、必死で考えたのですが、無理でした。。

会社のサーバー(？)にはセキュリティが施されているようですが、貸与されているPCには何も制限がないのですか？
自分で自由にインストールしても大丈夫なのでしょうか？
a-kuma3 2015/03/11 02:08:04

途中からついていけなくなりましたが、ゴールまでたどり着いたようで何よりです。

meichi＞こんなにも、お世話になりましたので、やはり、ポイントは、私の勝手ながら、
meichi＞送信させていただきます。ご容赦ください。。。もし、迷惑なら、その旨
meichi＞おっしゃてください。
送っちゃえ　:-)

meichi＞会社のPCにWebサーバをいれようと、必死で考えたのですが、無理でした。
Windows に Apache をインストールすることはできますが、その PC の管理者権限を持ってないと、ちょっと厳しいですね。
meichi 2015/03/11 06:36:28

おはようございます。こんな時間にいつもいつもすいません、

roog2008さまのアドバイスは、ほぼ理解できました。。。。テーブルは変更せず
画像を縮小するなりして、工夫します。

会社のサーバー(？)にはセキュリティが施されているようですが、貸与されているPCには何も制限がないのですか？
自分で自由にインストールしても大丈夫なのでしょうか？
→よく考えてみれば、あんまりよくないです。ある程度のソフト（ここが微妙なのですが）
　はいいのですが・・・
　雑談で、すいませんが、おとといもやっぱりアップして、レイアウトがくずれたり
　しました。（このときは、自分でビルダーを普通に操作したのですが）
　サポートでは、ビルダーからツールからブラウザを選択して確認する方法しか
　ありませんでした。

送っちゃえ　:-)
→もう、おとといの夜やっやいました。。。。今回は、これで勘弁してくださ。

＃いつもながら、今日、会社で、なにがあるかわからないのに、自分で想像して
　あれをいわれるんじゃないかと、考えるのが、悪いところです。。。。m(_ _)m

今日から、社内監査の仕事をまた、はじめないといけないです。
平行して、HPもです。。。体調をくずさないようにがんばります。

＃仕事がおそいので、早めにはじめるしかないんです。

＃愚痴と雑談ですいませんでした。。。。ポイントは、もうすぐとどくとおもいます。。

本当にありがとうございました。m(_ _)m
meichi 2015/03/11 23:49:28

せっかくですが、今回のポイントはけっこうです・・・
→すみません、もうおくちゃいました。。。ご迷惑でしょうか。。。。

CSSを最初は、ご存知ないようなコメントをいただきましたが、こんなにも
お世話になりました。。。。。あとのあつかいは、おまかせします。

わたしも無理強いを押し付けるわけには、さすがにいかないでしょう。。。

これからも、まだメニューがありまので、皆様に大変お世話になると思います。
ポイントは、まだ心配ないと思います。
いまの自分は、体調面の事情があって、どうしても人力検索が必要なんです。
サポートでは、解決でない部分がたくさんありますので、、
いったん、おちつけば、あとは更新のみなので、、、

＃そのうち、いたらんことを考えて質問するかもしれませんが、、、、
　新体操のホームページのことを思いだいます。。。いまだに更新してないです。
　ボランティアでは、ではこんなもんですかね。。

今日は、会社の監査の仕事だけで終わりました、、、心配しすぎですね、
明日は、わかんないのに、かってに自分で予定をたててしまいます、
いかんですね、、、

すいません、愚痴でした、、申し訳ないです、、m(_ _)m
rouge_2008 2015/03/12 07:56:23

すみません。遅くなりました。

>> 自分で自由にインストールしても大丈夫なのでしょうか？
> →よく考えてみれば、あんまりよくないです。ある程度のソフト（ここが微妙なのですが）
>　はいいのですが・・・

信頼できるソフトなら市販だけでなくオープンソースも許可されているのでしょうか？
Apacheなら大丈夫そうですが、一度許可されているソフトのリストがないか確認してみてはいかがでしょう？

> 雑談で、すいませんが、おとといもやっぱりアップして、レイアウトがくずれたり
> しました。（このときは、自分でビルダーを普通に操作したのですが）

レイアウトはどんな感じに崩れていたのでしょう？
もう原因は分かりましたか？

>> せっかくですが、今回のポイントはけっこうです・・・
> →すみません、もうおくちゃいました。。。ご迷惑でしょうか。。。。

ポイントは迷惑ではないのですが、コメントアドバイスだけで済ませるつもりだったので、あまり多く送られても困ってしまいます。(今現在まだ届いていないので、まだ確認できていませんが・・・)

> CSSを最初は、ご存知ないようなコメントをいただきましたが、

CSSは普通に使う分には困らない程度に分かりますが、どこかにそのような事を書いたでしょうか？
ホームページビルダーを所持していないので、付属ツールの使い方や機能は調べないと分からないのですが・・・

> いまの自分は、体調面の事情があって、どうしても人力検索が必要なんです。
> サポートでは、解決でない部分がたくさんありますので、、

本当に必要として利用する人がいるのは、運営も嬉しいのではないかと思います。

> ＃そのうち、いたらんことを考えて質問するかもしれませんが、、、、

ぜひどうぞ。
私で分かる事でしたら回答かあるいはコメントします。

>　新体操のホームページのことを思いだいます。。。いまだに更新してないです。

載せたい情報が分からないと更新できないと思いますし、何か頼まれたのでないのなら気にしなくてもいいと思います。
新体操クラブ(？)のメンバーの中から担当者を何人か決めて、お知らせ程度は自分たちで更新できるようになってもらえれば一番いいと思いますが・・・
meichi 2015/03/12 09:38:00

おはようございます。。。大変お世話になります。いま会社です。

今は、下記のコメントの返信をする時間しかないのですが・・・ご容赦ください。

ポイントは迷惑ではないのですが、コメントアドバイスだけで済ませるつもりだったので、あまり多く送られても困ってしまいます。(今現在まだ届いていないので、まだ確認できていませんが・・・)
→そうなんですね。。。届いてから、あんまり困るようであれば、あとはおまかせします。
　
すみませんが、これからもよろしくお願いします。そうでないと私の仕事がないのです。。
meichi 2015/03/12 23:56:40

すいません、返信が遅くなりました。

信頼できるソフトなら市販だけでなくオープンソースも許可されているのでしょうか？
Apacheなら大丈夫そうですが、一度許可されているソフトのリストがないか確認してみてはいかがでしょう？
→オープンソースも許可されています（お思う）ダウンロードできるソフトは
　大丈夫みたいです。
　今日も、Apacheに自分のPCにいれたのですが、一度は、起動しかけたのですが、
　Windowsファイアウォールのチェックを間違えたのが、原因だとおもってるの
　ですが、起動しませんでした。その後入れなしたのしたのですが、httpd.confを
　どこかで、間違っているか、はまりました。できなかったです。
　あきらめて、別の簡単なWebサーバを入れてみます。
　許可されているソフト一覧は、確認してみます。
（そういうとこは、あきらめないのです）

CSSは普通に使う分には困らない程度に分かりますが、どこかにそのような事を書いたでしょうか？
ホームページビルダーを所持していないので、付属ツールの使い方や機能は調べないと分からないのですが・・・
→いま、ざっとみたのですが、、そのようなコメントはないですね。すいませんm(_ _)m

本当に必要として利用する人がいるのは、運営も嬉しいのではないかと思います。
→ひとつ思い当たるページがあります、そこが、きびしそうです。

新体操クラブ(？)のメンバーの中から担当者を何人か決めて、お知らせ程度は自分たちで更新できるようになってもらえれば一番いいと思いますが・・・
→いま、２人です。（私以外）、でも、なかなか、新体操の運営の話ばっかりで
　ホームページにあまり、触れないですね。。。
　（そもそもPCをまともに使えるのは私だけです）
→また、わたし、一ヶ月まえ、いたらんことを先生に言いフェイスブックにお知らせを
　載せたらと、それっきりです。。。

レイアウトはどんな感じに崩れていたのでしょう？
もう原因は分かりましたか？
→テーブルを上下別につくったのですが、上下のテーブルに空白があったのですが、
そこをくっつけました。そしたら、アップしたら、テーブルのセルで、非表示に
した部分が一部残っていました。テープルの作成やりなおしです。
今日は、いわれませんでしたが・・

今日、とりあえず、課長に今回つくったHPをみせました。おかげさまで評判よかった
です。m(_ _)m あんまり、日にちがたってので、わたしからいいました。
本当にありがとうございます。m(_ _)m　共通同期の操作で左のリンクだけ作成
しなおしたのですが・・アップで、くずれないかどうかです。

あと、サポートで、ひとこといわれたのですが、今回つくったHPはビルダー上で
共通同期という操作が必要で、今回のページをやったのですが、今後は、その機能を利用
できないといわれました。よくわかんないです。。
＃まさか、今後は、白紙から作れということか？

大変お世話になりますが、今後ともよろしくお願いします。m(_ _)m
質問は、もちろん、素案だけは、なんとかして自力でやってからアドバイスを
いただきたいと思います。（新体操のときみたいに）

長文ですいませんでした。
rouge_2008 2015/03/13 03:10:21

ポイントありがとうございました。
お礼が遅くなりましてすみません。午前中に届いたようです。
ありがたく頂戴して一部は返送しましたので、お知らせからメッセージの確認をお願いします。

> Windowsファイアウォールのチェックを間違えたのが、原因だとおもってるの
> ですが、起動しませんでした。その後入れなしたのしたのですが、httpd.confを
> どこかで、間違っているか、はまりました。できなかったです。

サービスとして起動しているのでしょうか？
何か設定変更はしましたか？

・Apacheが立ち上がらない問題について
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10112045530

コマンドラインで「httpd.exe」を直接起動してみてください。
上記で説明されている以下の3つの原因をチェックできます。

1.ポート番号競合
2.モジュールエラー
3.設定ファイルの書き間違え

※コマンドプロンプトを起動後、「Apacheをインストールしたディレクトリ\bin\httpd」を入力して実行します。
※パスに空白を含む場合は、次のように「"」で囲みます。(パスは一例です。)
"c:\program files\Apache Software Foundation\apache2\bin\httpd"

> アップしたら、テーブルのセルで、非表示に
> した部分が一部残っていました。テープルの作成やりなおしです。

良く分からないのですが、レイアウト崩れはテーブル編集に失敗したという事でしょうか？
原因が分かっているだけでも良かったです。

> あと、サポートで、ひとこといわれたのですが、今回つくったHPはビルダー上で
> 共通同期という操作が必要で、今回のページをやったのですが、今後は、その機能を利用
> できないといわれました。

「共通同期」が分からなかったのですが、ヘッダー、ナビメニュー、フッターなどページの共通部分を一括更新できる機能のようですね。
『今後は』の後にも何か「○○する場合」などの条件の説明がなかったでしょうか？
『今後ページ内のコンテンツなど共通部分ではない箇所の編集する時には「共通同期」を利用できない。』という内容ではありませんか？
同じフルCSSテンプレートから作成する場合、今後新しく追加するページでもヘッダー、ナビメニュー、フッターの編集にはいつでも「共通同期」が利用できるのではないかと思います。
利用できない場合はこの機能の動作仕様として少し不可解ですので、サポート担当者の説明が思い出せない場合は、もう一度問い合わせて確認してみてはいかがでしょう？

私も長文になってしまいました。(今回だけでなく度々ありますが・・・)
お互いあんまり気にしないようにしましょう。
rouge_2008 2015/03/13 04:21:39

Apacheについてですが、追加で確認です。

> Windowsファイアウォールのチェックを間違えたのが、原因だとおもってるの
> ですが、起動しませんでした。その後入れなしたのしたのですが、httpd.confを
> どこかで、間違っているか、はまりました。できなかったです。

Windows ファイアウォールが原因だと思ったのはなぜですか？
最初と同じ場所にインストールしたのでしょうか？

もしかして「Windowsセキュリティの重要な警告」が表示されましたか？
※OSによって画面は違います。(Windows 7の場合、以下のような画面のようです。)

・ShAirDiskサポートツール (PTW-WMS1)
http://www.princeton.co.jp/download/driver_software/ptwwms1.html

「Windowsセキュリティの重要な警告」が表示された時に「アクセスを許可する」(Win7以降)または「ブロックを解除する」(Win Vista、XP)をクリックしないと、ファイアウォールの例外リストに「ブロック」の設定で追加されます。
ローカル(自PC)での確認ができればいいのでブロックされていても大丈夫なのですが、「Apache Service Monitor」からの起動および停止に失敗する原因かもしれません。
以下を参考にしてApacheの通信を許可する設定に変更するか、一覧から削除してみてください。
※プログラムの一覧(例外リスト)から削除した場合、削除後の初回起動時に再び「Windowsセキュリティの重要な警告」が表示されますので、その時に許可してください。)

・[Windows 7] Windows ファイアウォールでプログラムごとに通信を許可 / ブロックする方法を教えてください。
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=6608-4415

・Windowsファイアウォールの設定をプログラムごとに有効/無効にする方法＜Windows Vista(R)＞
http://dynabook.com/assistpc/faq/pcdata/008432.htm
meichi 2015/03/13 07:36:42

おはようございます。。。ポイント受け取っていたただきありがとうございました。

コメントで、HPの話がなかったので、大丈夫と思いました。

サービスとして起動しているのでしょうか？
何か設定変更はしましたか？
→サービスです。設定変更は、httpd.confのみです。

時間がありましたら、やってみます。

『今後は』の後にも何か「○○する場合」などの条件の説明がなかったでしょうか？
→残念ながら、なかったです。。。もう一度、問い合わせてみます。

『今後ページ内のコンテンツなど共通部分ではない箇所の編集する時には「共通同期」を利用できない。』という内容ではありませんか？
→そう思います。。。ですけど、今後も利用できそうで安心しました。
　自分でも調べてみます。

＃今日は、監査の仕事があり、無理かもしれないですが
　（仕事の時間按分がなかなかできないのです）。。。申し訳ないです。
　午後は、サポートがつながらないので、、いつもですが、来週の電話の約束を
　もらってます。

Windows ファイアウォールが原因だと思ったのはなぜですか？
最初と同じ場所にインストールしたのでしょうか？
→ファイアウォールは、直感です。すいません。
　最初と同じ場所にインストールしました。

もしかして「Windowsセキュリティの重要な警告」が表示されましたか？
→そのとおりです。。

Webサーバまで、コメントいただきありがとうございました。
アドバイスとおり時間をみてやってみます。

いつも、いつもながら、大変お世話になります。m(_ _)m
meichi 2015/03/13 23:26:57

夜分すいません、、、ようやく自宅で会社で修正したHTMLを確認をApacheで
確認できました。レイアウトは大丈夫でした。。安心しました。。。
本当にありがとうございます。

会社で、Apacheに格闘していたのですが、、、ようやくhttpd.confを修正
できたとおもったら、起動できませんでした。

(OS 10013)アクセス許可で禁じられた方法でソケットにアクセスしようとしました。

↑です。自分でも、調べられそうですが、、、会社のPCは手ごわいです。。。。。u-n
IISでもだめでした。。。なんか、会社のPCでいたらんことをしているような気がします。

＃話、かわりますが、、、お知らせからメッセージの確認をお願いします。
というのは、すいません。どこから確認するのでしょうか。。。m(_ _)m

共通同期に再度サポートに聞きました。今後もできそうですが、、、
変更したテンプレートの共通部分をユーザで確認するよういわれました。
なんで、テンプレートの共通部分をユーザで確認しなければならないのか
いまいち、納得しないのですが、、、、、（AM聞いたから、理解がいまいちでした）

＃まだ、課長はアップしてないです。。。

しばらくは、会社の監査とだいぶ前にきたほかの担当の紹介ページを作成していきます。

今日は、このへんにしときます。日曜日は、Windows2012Serverの評価版でもいじります。
rouge_2008 2015/03/14 11:58:28

すみません。返信遅くなりました。

スマートフォンでの表示は分かりませんが、お知らせの確認はヘッダメニューにある吹き出しアイコンをクリックして行います。(マウスオーバーで「あなたへのお知らせ」というテキストが表示されます。)
お知らせのアイコンに赤(橙色？)丸数字のアイコンが重なっていなければ、未確認の新着通知はないと思います。
「はてなさんからはてなメッセージ(ポイントを受信しま…)が届きました」がメッセージつきポイント受信のお知らせですので、リンクをクリックして確認してみてください。

Apacheについてですが、ポート指定は80番のままですか？
IISでも駄目という事は、通常はIISは無効にしてあるのですね。
他に何かウェブサーバー系のソフトが動作していませんか？
「Windowsセキュリティの重要な警告」が表示されたという事は、一度はApacheの起動に成功したはずなのですが・・・
許可するプログラム(例外リスト)の設定変更または一覧からの削除は試してみたでしょうか？
できれば一覧からの削除を試してみてください。(上記の警告画面が表示された場合、Apacheは起動していると思います。)

「Apache Service Monitor」は起動していますか？
タスクトレイに赤い羽根(Apache公式サイトでおなじみ)がついた白丸の中に赤丸あるいは緑の三角のアイコンがあれば起動しています。(※赤丸はApache停止中、緑色の三角は実行中になります。)
小さくて少し分かりにくいですが、以下のページの画像でアイコンが確認できます。

・Apacheの動作確認 - Windows環境
http://webkaru.net/php/windows-apache-confirmation/

上記のページを参考に「Apache Service Monitor」を「Open Apache Monitor」で開いて、登録されているApacheのサービスを確認してみてください。(どのような状態になっていますか？)
それから、Apacheはどこからダウンロードしてどのようにインストールしましたか？
インストールと設定の参考にしたサイトを教えてください。
現在、Windows用のインストーラーは配布されていないようですので・・・

> 変更したテンプレートの共通部分をユーザで確認するよういわれました。
> なんで、テンプレートの共通部分をユーザで確認しなければならないのか
> いまいち、納得しないのですが、、、、、

私も分からないです。
「ユーザで確認」の操作はどういうものですか？

作業は週明けに会社が始まって時間が取れた時になると思いますので、返信は急がなくても大丈夫です。
rouge_2008 2015/03/14 16:39:25

少し調べてみました・・・
「共通部分をユーザーで確認」についてですが、「ユーザー共通部分」でしょうか？

> 変更したテンプレートの共通部分をユーザで確認するよういわれました。
> なんで、テンプレートの共通部分をユーザで確認しなければならないのか
> いまいち、納得しないのですが、、、、、

フルCSSテンプレートのヘッダー、サイドバー、フッターについては、「ユーザー共通部分」として登録する必要はないと思います。
標準の「共通部分」と同じようにユーザーが独自に任意の要素のエリアを登録して一括更新できる機能のようです。
「共通部分をユーザーで確認」が何の為の操作なのか不明なので推測になりますが、『「共通部分として登録」から登録したユーザー共通部分を削除する場合は、「ユーザー共通部分の管理」ダイアログを表示して行う～』など何か説明していませんでしたか？
「共通部分をユーザーで確認」する場合の操作方法とその理由をもう一度サポートに問い合わせてみてはいかがでしょう。
フルCSSテンプレートから作成したページだけでなく、独自のデザインで作成したページでも共通部分を登録できるのかは不明ですので、今後の為にあわせて聞いておいてもいいと思います。
rouge_2008 2015/03/14 23:34:55

すみません。Apacheについて間違いがありましたので訂正します。

ファイアウォールの許可するプログラムの一覧(例外リスト)でブロックされていても、Apacheの起動・停止等に影響はないようです。(※自PC内での動作確認用として利用するだけですので、ウェブアクセスにも支障はないと思います。)

>> もしかして「Windowsセキュリティの重要な警告」が表示されましたか？
> →そのとおりです。。

こちらはどの時点で表示されましたか？
私の環境ではサービスとして起動した場合には表示されませんでした。(※ファイアウォールの許可するプログラムに追加されていない状態で、コマンドラインで「httpd.exe」を直接起動した場合のみ表示されます。)
この警告の画面が表示された時には、Apacheの起動に成功していた可能性があります。

後は、今日投稿したコメントの内容について(「Apache Service Monitor」での状態確認など・・・)お願いします。
meichi 2015/03/15 16:31:31

すみません、返信遅くなりました。
お世話になります。m(_ _)m お知らせの件ありがとうございました。。。。

Apacheについてですが、ポート指定は80番のままですか？
→httd.confで、80番を指定しているので、間違いないはずなのですが・・・

IISでも駄目という事は、通常はIISは無効にしてあるのですね。
→そのとおりです。だけど、詳しくかけないのですが、Webサーバは目的の場所に
　インストールしないと、したいことが、達成できないのです。
　どこにインストールするか、書くと申し訳ないです。。書くとちょっとまずそうです。

他に何かウェブサーバー系のソフトが動作していませんか？
→そういえば、IISを起動しっぱなしでした。いま、思いつきました。

「Windowsセキュリティの重要な警告」が表示されたという事は、一度はApacheの起動に成功したはずなのですが・・・
許可するプログラム(例外リスト)の設定変更または一覧からの削除は試してみたでしょうか？
→ありがとうございます、アドバイスいただいたとおり、やってみます。

できれば一覧からの削除を試してみてください。(上記の警告画面が表示された場合、Apacheは起動していると思います。)
→そうですね。まずは、Windowsの警告画面まで表示するところまでやってみます。

「Apache Service Monitor」は起動していますか？
→初めてしりました。。。SEを10年もやってたのに、、、m(_ _)m
　もともと、UnixのインターネットサーバのSEでしたので、まともにWindowsを
　触ったことがないのです・・・

タスクトレイに赤い羽根(Apache公式サイトでおなじみ)がついた白丸の中に赤丸あるいは緑の三角のアイコンがあれば起動しています。
(※赤丸はApache停止中、緑色の三角は実行中になります。)
小さくて少し分かりにくいですが、以下のページの画像でアイコンが確認できます。

・Apacheの動作確認 - Windows環境
http://webkaru.net/php/windows-apache-confirmation/
→上記ページみました。会社で、やってみます。
上記のページを参考に「Apache Service Monitor」を「Open Apache Monitor」で開いて、登録されているApacheのサービスを確認してみてください。
(どのような状態になっていますか？)
→自宅PCで、やってみました。よくわかりました。会社にも同じものをインストール
　してあるので、Moniterははいっていると思います。
それから、Apacheはどこからダウンロードしてどのようにインストールしましたか？
インストールと設定の参考にしたサイトを教えてください。
→http://www.adminweb.jp/apache/install/index1.html　のとおりにしました。
　わかりやすかったので、、、
現在、Windows用のインストーラーは配布されていないようですので・・・

-----------------下記からこの部分は、あとは私でサポートにきいてみます-------------

私も分からないです。
「ユーザで確認」の操作はどういうものですか？
→私では、もともとからあるテンプレートから変更してページを作成した場合、
　ヘッダー、フッター、サイドバーのどこかが、共通同期の対象の部分になって
　いるかを、ユーザ自身で確認するようにと解釈したのですが・・・

「共通部分をユーザーで確認」についてですが、「ユーザー共通部分」でしょうか？
→ありがとうございます。私も、そう思います。

すみません、急いではまったくいないですが・・・理解できずすいません。m(_ _)m
下記からは、一行ずつ、コメントさせていただきます。
が、、、、答えは、サポートから求めるようにします。。。ここまで、調べていただき
ありがとうございました。。。。m(_ _)m

フルCSSテンプレートのヘッダー、サイドバー、フッターについては、「ユーザー共通部分」として登録する必要はないと思います。
→私、サイドバーをなにか、勘違いしているのでしょうか。。。。今回のページでは
　左のリンクメニューをサイドバーと思っていたのですが・・・
　上記の登録が、申し訳ないです。。よく意味が理解できないです。m(_ _)m
　サポートに聞いてみます。

標準の「共通部分」と同じようにユーザーが独自に任意の要素のエリアを登録して一括更新できる機能のようです。
「共通部分をユーザーで確認」が何の為の操作なのか不明なので推測になりますが、『「共通部分として登録」から登録したユーザー共通部分を削除する場合は、「ユーザー共通部分の管理」ダイアログを表示して行う～』など何か説明していませんでしたか？
→残念ですが、、そのような説明はありませんでした。また、しつこくサポートに
　なっとくするまで、聞いてみます。

＃共通同期は、今後もあると思いますので、納得できるまで、聞いてみます。

----------------------ここまで-----------------------------------------------

----------------------ここからもあとは、自力でします------------------------

こちらはどの時点で表示されましたか？
→Apacheですが、最初にインストールして起動したとき表示されました。

あとは、共通同期、Apache共自力でサポートに問い合わせるなり、調べるなり
やってみます。。。。本当に、ありがとうございます。m(_ _)m

＃私の次のコメントが、本当にありがとうございました。とかけるように・・・

＃自分のペースでやっていきます。。。
meichi 2015/03/16 06:10:18

いつもいつもながら、朝、早くからすいませんm(_ _)m
ポイントを受け取りました。

こんなにも、お世話になったのに、あのポイントでいいいんでしょうか。。。。

今回の質問は、もうこれ以上は、自分でがんばります。

これから、先もHPの作成が続きますので、そのときは、別立てで質問を
あげるとおもいます。大変、お忙しい中、すみませんが、よろしくお願いします。m(_ _)m
rouge_2008 2015/03/17 15:55:18

すみません。遅くなりましたが、少し気がついた事があります。

>> それから、Apacheはどこからダウンロードしてどのようにインストールしましたか？
>> インストールと設定の参考にしたサイトを教えてください。
> →http://www.adminweb.jp/apache/install/index1.html　のとおりにしました。

Apacheは参考サイトの通りにインストール＆設定していれば動作すると思います。
それで駄目な場合、会社のPC特有の問題が何かあるのかもしれません。
ウェブサーバーは目的の場所にインストールする必要があるという事でしたが、セキュリティが関係あるのでしたら、会社のセキュリティ担当者に確認してみてはいかがでしょう？
詳しく書けないとなるとアドバイスは難しくなりますが、作成途中のウェブページのデータを自PC内ではなく、会社のネットワーク上の別のPC内に保存してあるのだったでしょうか？
ネットワーク上の別のPCの場合は、ApacheをそちらのPCにインストールして、ネットワーク内部で自PCからアクセスする事になります。(「localhost」または「127.0.0.1」ではアクセスできません。)
それともネットワーク上の別PCではなく、ネットワークドライブだったでしょうか？
その場合も、Apacheでネットワークドライブ上のディレクトリをドキュメントルートに設定できるかなどを確認する必要もあります。(私の方では確認できませんので・・・)

参考ページだけでなく「Apacheのインストール」の内の各ページを参考にすると、コマンドプロンプトでの起動やサービスとしての起動などもおおむね分かると思います。

・Apache入門
http://www.adminweb.jp/apache/

※さらに詳細な設定が必要な場合は、他の項目内のページも確認してみてください。
Apacheをインストールする場所が特殊な場所のようですので、まずは会社のセキュリティ担当者に確認する必要があると思います。

以下、ホームページビルダーについてです。

> が、、、、答えは、サポートから求めるようにします。。。ここまで、調べていただき
> ありがとうございました。。。。m(_ _)m

そうした方がいいと思います。
meichiさんとサポート担当者とのやり取りは私の方では分かりませんので、サポート担当者の一部の言葉だけを提示されても、どのような理由で何をどのようにすれば良いと言われたのかは分かりません。
meichiさんの解釈が正しいのか間違っているのか私の方では分かりませんので、不明な点がある場合はサポート担当者に確認するしかないと思います。

>> フルCSSテンプレートのヘッダー、サイドバー、フッターについては、「ユーザー共通部分」として登録する必要はないと思います。
> →私、サイドバーをなにか、勘違いしているのでしょうか。。。。今回のページでは
> 左のリンクメニューをサイドバーと思っていたのですが・・・

リンクメニュー(ナビメニュー)がサイドバーで正しいです。
サイドバー内に各リンクメニューとバナーや広告エリアが入っています。(バナーと広告エリアの中身は削除したようですが・・・)
これらの標準の「共通部分」(ヘッダー、サイドバー、フッター)と同じようにユーザーが独自に任意の要素のエリアを共通部分として登録できるようですので、もし必要であれば問い合わせて聞いてみてください。
meichi 2015/03/17 21:06:50

たびたび、お世話になります。。。。m(_ _)m　コメントいただけると思ってませんでした
助かります。

すみません、、、いつものことですが、、、ひとつづつコメントさせていただきます。
ご容赦ください。

会社のPC特有の問題が何かあるのかもしれません。
→そのとおりだと思います。今日、ApacheMoniterを起動させてWindowsの警告画面表示まで
　戻したのですが。。。Moniterでは、起動できていませんでした。。。
　強烈です。。。Apacheは、ソフトの起動例外として登録されていました。
　IISにも挑戦したのですが、ドキュメントルートを、どうしても、目的の場所に指定
　する必要があったので、設定したのですが、localhostをブラウザで開くと
　セキュリティが効いているようで、IISのindex.htmlが開けませんでした。。。
　詳しいSEの方に聞いたのですが・・・IISで、できるようなできないような。。。
　「まあ、ぼちぼち、やれば・・・」でした。そうします。

＃すみません、もしこのコメントをほかの方がごらんになっても、中傷等はご勘弁
　ください。。

作成途中のウェブページのデータを自PC内ではなく、会社のネットワーク上の別のPC内に保存してあるのだったでしょうか？
→そのとおりです。別のPC内に保存しないといけない理由があったのです。。m(__)m

ネットワーク上の別のPCの場合は、ApacheをそちらのPCにインストールして、ネットワーク内部で自PCからアクセスする事になります。(「localhost」または「127.0.0.1」ではアクセスできません。)
それともネットワーク上の別PCではなく、ネットワークドライブだったでしょうか？
その場合も、Apacheでネットワークドライブ上のディレクトリをドキュメントルートに設定できるかなどを確認する必要もあります。(私の方では確認できませんので・・・)
→その別のPCにインストールすることも考えたのですが、、、ほかのSEの方に相談したら、
　リスクが高いということでした。。ので、、、あきらめました。。。
　このPCはNW管理者のものですので、NW管理者に聞いたら、きっとNGでしょう。

そうした方がいいと思います。（ホームページビルダー）
→おととい必要な部分を印刷して、午後から、しつこく聞いたのですが、メモの嵐
（愚痴ですいません）
　になって、わけがわからなくなって、残った時間は、机のかたづけとかしてました。
　私、人（？）とのコミュニケーションは、聴覚型ではなく、視覚型なのです。。
　だから、どうしてもサポートとは、メールでやりとりしたほうが、確実なのですが、、
　いったん、問い合わせ番号は、払いだしてあるので、メモを整理して、また
　やりとりしてみます。。。

これらの標準の「共通部分」(ヘッダー、サイドバー、フッター)と同じようにユーザーが独自に任意の要素のエリアを共通部分として登録できるようですので
→これですが、、、サポートに聞いたのですが、、要素のエリアを共通部分として登録
　で、申し訳ないですが、向こうは、そういったのはない（知らないのかも）
　ような話をしていた記憶があります。。また聞いてみます。

rooge_2008さまには、決してご迷惑かけたくないので、サポートに聞くときには、
このコメントで、必要な部分を印刷して聞いてます。
でないと、私の勝手な想像ですいませんが、リモートで入られるとhatenaの画面を
向こうが見えるからです。（想像しすぎでしょうか）

ありがとうございました。。また、がんばってみます。。
rouge_2008 2015/03/18 02:35:08

特に真新しい情報はありませんが、とりあえず少し補足します。

> そのとおりだと思います。今日、ApacheMoniterを起動させてWindowsの警告画面表示まで
> 戻したのですが。。。Moniterでは、起動できていませんでした。。。
> 強烈です。。。Apacheは、ソフトの起動例外として登録されていました。

Monitorで表示されるのはサービスのApacheの状態ですから、コマンドプロンプトから起動している場合は停止状態のままです。
※コマンドプロンプトから起動した場合、コマンドプロンプトを閉じればApacheも終了します。(この辺りの事は参考サイトを確認してみてください。)
「ソフトの起動例外」って何の事でしょう？
ファイアウォールの許可するプログラム(例外プログラム)の事でしょうか？
この設定の事でしたら、「Windowsセキュリティの重要な警告」画面が表示された時に追加されます。(許可あるいはブロックがどのような設定で追加されるかは、この画面でのチェックした項目やクリックしたボタンによって決まります。)
※コマンドプロンプトからは起動時にこのセキュリティの警告画面が表示されますが、Apacheサービスの場合、サービスとして登録した時に表示される事を確認しました。(コマンドプロンプトから起動した時と同じで、許可するプログラムに追加済みの場合は登録されないと思います。)

> IISにも挑戦したのですが、ドキュメントルートを、どうしても、目的の場所に指定
> する必要があったので、設定したのですが、localhostをブラウザで開くと
> セキュリティが効いているようで、IISのindex.htmlが開けませんでした。。。
> 詳しいSEの方に聞いたのですが・・・IISで、できるようなできないような。。。
> 「まあ、ぼちぼち、やれば・・・」でした。そうします。

ドキュメントルートがネットワーク上の別のPCだからかもしれませんね。
※ネットワークドライブではなく、ネットワーク上の別のPCなのですね？
IISではドキュメントルートに別PCも指定できるのですか？
Apacheで可能かどうかは私は分からないので、必要なら質問するしかないと思いますが、IISでできるのでしたらとりあえずそちらから先に試してみるのはいいと思います。

ふと思い出したのですが、ページのレイアウト崩れの確認で各種ブラウザで確認したという事でしたが、この時はどのようにアクセスしていたのでしょう？
ブラウザで作成途中のページにアクセスして表示確認できるのでしたら、ApacheやIISなどのウェブサーバーを入れる必要はないような気がしてきました・・・

ホームページビルダーの件ですが、独自に追加した箇所は「ユーザー共通部分」と呼んでいるようです。
「タグ一覧」ビューで任意のレイアウト要素を右クリックして「共通部分として登録」を実行すると、「ユーザー共通部分」として登録する事ができますので、登録した「ユーザー共通部分」は共通同期による一括更新が可能になるようです。
以下の書籍見本で操作が確認できます。

・ホームページ・ビルダー19 スパテク136(著者: 西真由)
https://books.google.co.jp/books?id=1t3SBAAAQBAJ&pg=PA142&lpg=PA142&dq=%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%85%B1%E9%80%9A%E9%83%A8%E5%88%86&source=bl&ots=ruU2A3XRiZ&sig=h_2smPb8jMOGOmtnwDAnXq0IKPw&hl=ja&sa=X&ei=QWEIVejQEaXTmgXokIHQBA&ved=0CCQQ6AEwAQ#v=onepage&q=%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%85%B1%E9%80%9A%E9%83%A8%E5%88%86&f=false

ビルダーのサポートはリモート操作によるものなのですか。初めて知りました・・・
画面はたぶん見えていると思います。
お気遣いありがとうございます。私の方は大丈夫です。
サポート担当者は会社と個人名を知っていると思いますので、meichiさんのアカウント名が知られる事の方がまずいのでは・・・と思います。

それでは、上手くいくといいですね。
meichi 2015/03/18 06:21:20

おはようございます。。。たびたびのコメントありがとうございます。。。m(_ _)m

※コマンドプロンプトから起動した場合、コマンドプロンプトを閉じればApacheも終了します。(この辺りの事は参考サイトを確認してみてください。)
「ソフトの起動例外」って何の事でしょう？
→ソフトの起動例外（すいません、ソフトの例外だったかもしれないです）
　コントロールパネルのプログラムの追加と削除で画面左側のWindowsの○○
　をしてい（すいません記憶が・）
　したとき、参照でApacheのhttpd.exeを指定したき「例外です」と表示されました。
　すいません。これで、つたわりますか・・・m(_ _)m

ファイアウォールの許可するプログラム(例外プログラム)の事でしょうか？
→すいません、たぶんそうです。

許可あるいはブロックがどのような設定で追加されるかは、この画面でのチェックした項目やクリックしたボタンによって決まります。)
※コマンドプロンプトからは起動時にこのセキュリティの警告画面が表示されますが、Apacheサービスの場合、サービスとして登録した時に表示される事を確認しました。(コマンドプロンプトから起動した時と同じで、許可するプログラムに追加済みの場合は登録されないと思います。)
→ありがとうございます。アドバイスいただいたとおりやってみます。

ドキュメントルートがネットワーク上の別のPCだからかもしれませんね。
※ネットワークドライブではなく、ネットワーク上の別のPCなのですね？
IISではドキュメントルートに別PCも指定できるのですか？
→IISで別PCを指定できるかは、詳しいSEの担当に聞かないと申し訳なです。わからないです
　自力では、厳しいです。申し訳ないです。。。

ふと思い出したのですが、ページのレイアウト崩れの確認で各種ブラウザで確認したという事でしたが、この時はどのようにアクセスしていたのでしょう？
→別PCで、HTMLを直接ダブルクリックして確認していました。。。

「タグ一覧」ビューで任意のレイアウト要素を右クリックして「共通部分として登録」を実行すると、「ユーザー共通部分」として登録する事ができますので、登録した「ユーザー共通部分」は共通同期による一括更新が可能になるようです。
以下の書籍見本で操作が確認できます。

・ホームページ・ビルダー19 スパテク136(著者: 西真由)
https://books.google.co.jp/books?id=1t3SBAAAQBAJ&pg=PA142&lpg=PA142&dq=%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%85%B1%E9%80%9A%E9%83%A8%E5%88%86&source=bl&ots=ruU2A3XRiZ&sig=h_2smPb8jMOGOmtnwDAnXq0IKPw&hl=ja&sa=X&ei=QWEIVejQEaXTmgXokIHQBA&ved=0CCQQ6AEwAQ#v=onepage&q=%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%85%B1%E9%80%9A%E9%83%A8%E5%88%86&f=false
→スパテクという本もあるのですね。。。私の買ったパーフェクトマスターは
　すみません、机の下に眠っています。。参考にさせていただきます。。

ビルダーのサポートはリモート操作によるものなのですか。初めて知りました・・・
→これは、サポートとのやりとりで、話がなかなか通じないとき使います。
　向こうからリモートをやりましょうか？と言ってきます。
　そこで、IDとパスワードを発行してもらってビルダーの画面を操作するのです。。。
　今回作成したページも、最初は、緑の線とか、下の大きな緑とか消してもらい
　ました。。
　アドバイスありがとうございます。私のアカウントが知られるほうが
　まずいのですね。。。

いつも、いつもですが、時間があるときにやってみます。ありがとうございます。m(_ _)m
rouge_2008 2015/03/19 02:55:09

すみません。一部まだ気になる箇所があったのでコメントします。

>>「ソフトの起動例外」って何の事でしょう？
> →ソフトの起動例外（すいません、ソフトの例外だったかもしれないです）
> コントロールパネルのプログラムの追加と削除で画面左側のWindowsの○○
> をしてい（すいません記憶が・）
> したとき、参照でApacheのhttpd.exeを指定したき「例外です」と表示されました。

利用しているWindowsのバージョンが違うようですので、どのような操作をしている時に何が表示されたのかよく分かりません。
私の方はVistaですが、会社のPCはXPでしょうか？
XPでしたら「プログラムの追加と削除」という項目があったと思います。
「プログラムの追加と削除」画面の左側メニューは、「プログラムの変更と削除」「プログラムの追加」「Windows コンポーネントの追加と削除」「プログラムのアクセスと既定の設定」となっています。
前者2つは項目名から何の為の機能か分かると思いますし、それなりによく使うと思います。
後者2つですが、人によっては使う事もあると思います。

以下のページでは「Windowsコンポーネントの追加と削除」を実行した時の画面が確認できます。
(ご存知だと思いますが、IISもここで追加および削除可能です。)

・プログラムの追加と削除で非表示のアイテムを削除する
http://www.atmarkit.co.jp/fwin2k/win2ktips/617adddelinf/adddelinf.html

以下のページでは「プログラムのアクセスと既定の設定」を実行した時の画面が確認できます。
XPについての説明は少ししかありませんが・・・

・既定のプログラムを指定するには
http://pc.nikkeibp.co.jp/article/technique/20110829/1036498/

「参照」ボタンはどちらにもないようですが、何の操作をしようとしてその画面を開いていたのでしょう？

> ふと思い出したのですが、ページのレイアウト崩れの確認で各種ブラウザで確認したという事でしたが、この時はどのようにアクセスしていたのでしょう？
> →別PCで、HTMLを直接ダブルクリックして確認していました。。。

そうですか。直接ダブルクリックしていたのですね。
会社のセキュリティが優先されると思いますので、もし実現できない場合は、現在可能な範囲で対応するしかないと思います。
幸いビルダーのプレビュー画面でも確認できますし、セキュリティ担当者と相談しながら試してみてください。
社内の特殊なセキュリティに関しては、担当者に何とかしてもらうしかないと思いますので・・・
IISあるいはApacheでのドキュメントルートに関する質問でしたら回答できる人がいるかもしれませんので、別PCのあるネットワークの構築状態など提示できる情報をセキュリティ担当者と相談した上で質問してみてもいいと思います。
meichi 2015/03/19 05:44:43

おはようございます。いつもながら、この時間です。。。m(_ _)m

会社のPCは、Windows7のProffesonalです。

http://www.atmarkit.co.jp/fwin2k/win2ktips/617adddelinf/adddelinf.html
を参考にさせていただきます。ありがとうございます。。

「参照」ボタンはどちらにもないようですが、何の操作をしようとしてその画面を開いていたのでしょう？
→すみません、http.exeの指定は、思い出したのですが、コントロールパネルの
　Windowsファイアウォールで
「Windows のファイウォールのWindowsファイアウォールを介したプログラムまたは
　機能を許可する」でした。。。。そこで、「別のプログラムを許可」で参照をクリック
　しhttp.exeのあるパスを指定したら、だめだったと思います。（記憶ですいません）

昨日、セキュリティ担当者に教えていただいたのですが、自分のPCでIISをデフォルト
でインストールしてHTMLをアップしたときの挙動が確認できるかもしれないです。
申し訳ないです。どういうことを教えていただいたのかは、書くとまずいと私で
勝手に思ってるのですが・・・m(_ _)m

前、IISを自分のPCにデフォルトでインストールしたときには、index.htmlのIISの画像が表示されていました。（これから先やるとわかりませんが・・）

昨日、会社のセキュリティ担当者とやりとりしたのですが、やっぱり特例
（たとえば、私のPCだけセキュリティ対象外にするとか・公開サーバへのアクセス許可）
は無理みたいです。。

なんとか、あれこれやって自PCでアップアップしたときの動きを確認できる
ようがんばってみます。

いろいろ、あの手この手で、皆さんやっているみたいです。

時間があるときにやってみます。。。ありがとうございます。m(_ _)m
rouge_2008 2015/03/19 22:36:39

すみません。コメントお邪魔します。

> http://www.atmarkit.co.jp/fwin2k/win2ktips/617adddelinf/adddelinf.html
> を参考にさせていただきます。ありがとうございます。。

上記はXPの「Windowsコンポーネントの追加と削除」機能の説明ですので、OSややりたい事が違う場合はあまり参考にならないと思います。
ファイアウォールの許可するプログラムの設定でしたら、いくつか上でコメントした以下のページは参考にならなかったでしょうか？

・[Windows 7] Windows ファイアウォールでプログラムごとに通信を許可 / ブロックする方法を教えてください。
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=6608-4415

新たに追加設定する前に許可されたプログラムの一覧を確認して、既に一覧に表示されている場合は、最初の項目の「プログラムごとに通信を許可する /　ブロックする」を参考にして設定変更してみてください。(※設定変更が面倒な場合は、削除してから追加してもいいと思います。)

IISの有効化についてはセキュリティ担当者の指示で大丈夫なようですが、操作方法が分からない場合は会社PCのOSと同じWindows 7での説明ページを探した方がいいと思います。
ローカル(ウェブサーバーもドキュメントルートも自PC内)での確認でしたら特に問題はないはずですが、ドキュメントルートに設定したいディレクトリが社内ネットワーク上の別PC内にあるのでしたら、まず先に技術的に可能かどうかを確認する必要があると思います。
私は知らないので確実な事は言えませんが、ネットワークドライブでしたら動作する可能性はあっても、ネットワーク上の別PCの場合は個人的には難しいのではないかと思います。
IISとApacheの両方に詳しい人でなくても、それぞれに詳しい人にその辺りを確認してから、時間がとれた時に作業する方がいいと思います。
meichi 2015/03/19 23:19:49

お世話になります。。。。もう、力つきそうなので、あまり返信できないことを
ご容赦ください。。m(_ _)m

話し、まったくはずれますが、今日IISをデフォルトの設定にもどしました。

http://localhostでアクセスできました。。もうしわけないです。くわしくは、
かけないのですが、、、セキュリティ担当者に教えていただいて、自PCで
ドキュメントルートを自PCに設定して、アップしたときの挙動を自PCで確認できそうです

とりあえずは、このままIISですすめてみます。コメントにまったくなっていないと
おもいますが、、進捗報告のようですが、、、、すみません。。。

共通同期と、IISとどちらが先か、いまは、頭まわってないです。

なにか、返信をかえしたくてかきました。ご容赦ください。。。
meichi 2015/06/07 17:46:35

すいません、ご無沙汰してます。実は、今年度に入ってからHPの仕事は、言い方は、あれですが、とりあげられました。。。（泣く）大変、お世話になったのに、本当に申し訳ないです。監査の仕事が、たぶんですが、軌道にのるまでは、、、、、何べんも報告に遅れ失敗してますので、かわりといっては、なんですが・・・自宅PCにビルダーがありますので、私用で、下記ページをつくっています。

http://riruruhp.web.fc2.com/index.html

↑で、自宅で、気が向いたときで、申し訳ないですが・・勉強してみます。
住所も、かいてますが、ここまでは、問題ないでしょう・・・

会社では、そのうちアクセス制限のページ（BASIC認証）をつくるはずなので、IISの
勉強を、合間にしてます。

＃a-kuma3さまへ・・・もう1ヶ月強ぐらいでしょうか。ほぼ毎日夕食をつくってます。
　いまは、無難なもので・・・続けることが大事ですよね。。。。僕の場合、風呂に
　入ってからでないと、スイッチがはいらないのですが・・・

全くの余談で、申し訳ありませんでした。。このコメントに対する、中傷等は、
ご勘弁願います。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Answer 1

回答はまだありません

（すいません、ちょっと急いでます）

回答（0件）

コメント（103件)

この質問への反応（ブックマークコメント）