1 | @charset "utf-8";
|
---|
2 |
|
---|
3 | /************************************************
|
---|
4 | ブロック用
|
---|
5 | ************************************************ */
|
---|
6 | /*** 目次 ***
|
---|
7 |
|
---|
8 | ▼ブロック共通
|
---|
9 | リスト
|
---|
10 | タイトル
|
---|
11 | ヘッダー上、フッター下のブロックエリア
|
---|
12 |
|
---|
13 | ▼各機能ブロックの指定
|
---|
14 | -新着情報
|
---|
15 | -現在のカゴの中
|
---|
16 | -カテゴリー
|
---|
17 | -ガイドリンク
|
---|
18 | -ログイン(サイド用)
|
---|
19 | -検索
|
---|
20 | -カレンダー
|
---|
21 | -おすすめ商品
|
---|
22 | *メインカラム用 1カラム時 [one_maincolumn]
|
---|
23 | *メインカラム用 2カラム時 [two_maincolumn_left]
|
---|
24 | [two_maincolumn_right]
|
---|
25 | *メインカラム用 3カラム時 [three_maincolumn]
|
---|
26 | *サイドカラム用 [side_column]
|
---|
27 | *商品詳細のオススメ商品 [whobought_area]
|
---|
28 | */
|
---|
29 |
|
---|
30 |
|
---|
31 | /* ==============================================
|
---|
32 | ブロック共通
|
---|
33 | /* ============================================= */
|
---|
34 | #container .bloc_body {
|
---|
35 | background-color: #fff;
|
---|
36 | }
|
---|
37 | .side_column {
|
---|
38 | overflow-x: hidden; /* IE6 表示乱れ防止 */
|
---|
39 | }
|
---|
40 | .side_column .bloc_outer {
|
---|
41 | margin: 10px 7%;
|
---|
42 | }
|
---|
43 | .side_column .bloc_body ,
|
---|
44 | .main_column .bloc_body {
|
---|
45 | border: solid 1px #ccc;
|
---|
46 | border-top: none;
|
---|
47 | }
|
---|
48 | .side_column .bloc_body .box {
|
---|
49 | border: solid 1px #ccc;
|
---|
50 | width: 145px;
|
---|
51 | }
|
---|
52 | .main_column .bloc_outer {
|
---|
53 | margin-bottom: 20px;
|
---|
54 | }
|
---|
55 |
|
---|
56 |
|
---|
57 | /* リスト
|
---|
58 | ----------------------------------------------- */
|
---|
59 | /* ログイン 検索条件 */
|
---|
60 | #container .bloc_outer .bloc_body dl.formlist {
|
---|
61 | margin-bottom: 8px;
|
---|
62 | }
|
---|
63 | #container .bloc_outer .bloc_body dl.formlist dd {
|
---|
64 | margin-bottom: 5px;
|
---|
65 | }
|
---|
66 | #container .bloc_outer .bloc_body dl.formlist dt {
|
---|
67 | margin-bottom: 3px;
|
---|
68 | padding-left: 15px;
|
---|
69 | background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
|
---|
70 | font-size: 90%;
|
---|
71 | }
|
---|
72 | #container .bloc_outer .bloc_body dl.formlist span{
|
---|
73 | vertical-align: top;
|
---|
74 | }
|
---|
75 |
|
---|
76 |
|
---|
77 | /* タイトル
|
---|
78 | ----------------------------------------------- */
|
---|
79 | /* タイトルの背景 白 */
|
---|
80 | #login_area h2 ,
|
---|
81 | #search_area h2 ,
|
---|
82 | #calender_area h2 ,
|
---|
83 | #cart_area h2 ,
|
---|
84 | #cart h2 {
|
---|
85 | padding: 5px 0 8px 10px;
|
---|
86 | border-style: solid;
|
---|
87 | border-color: #f90 #ccc #ccc;
|
---|
88 | border-width: 1px 1px 0;
|
---|
89 | background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
|
---|
90 | font-size: 14px;
|
---|
91 | }
|
---|
92 | #category_area h2 {
|
---|
93 | border-top: solid 1px #f90;
|
---|
94 | background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
|
---|
95 | padding: 5px 0 8px 10px;
|
---|
96 | font-size: 14px;
|
---|
97 | }
|
---|
98 |
|
---|
99 | /* タイトルの背景 オレンジ */
|
---|
100 | #recommend_area h2 ,
|
---|
101 | #news_area h2 {
|
---|
102 | padding: 5px 0 8px 10px;
|
---|
103 | border-style: solid;
|
---|
104 | border-color: #f90 #ccc #ccc;
|
---|
105 | border-width: 1px 1px 0;
|
---|
106 | background: url('../img/background/bg_btn_bloc_02.jpg') repeat-x left bottom #fef3d8;
|
---|
107 | }
|
---|
108 |
|
---|
109 |
|
---|
110 | /* ==============================================
|
---|
111 | ▼ヘッダー上、フッター下のブロックエリア
|
---|
112 | =============================================== */
|
---|
113 | div#topcolumn {
|
---|
114 | margin:0px;
|
---|
115 | clear:both;
|
---|
116 | }
|
---|
117 | div#bottomcolumn {
|
---|
118 | margin:0px;
|
---|
119 | clear: both;
|
---|
120 | }
|
---|
121 |
|
---|
122 |
|
---|
123 | /* ***********************************************
|
---|
124 | ▼各機能ブロックの指定
|
---|
125 | /*********************************************** */
|
---|
126 |
|
---|
127 | /* ===============================================
|
---|
128 | ▼新着情報
|
---|
129 | =============================================== */
|
---|
130 | #news_area .bloc_body {
|
---|
131 | padding: 10px;
|
---|
132 | }
|
---|
133 | #news_area .news_contents {
|
---|
134 | padding-right: 10px;
|
---|
135 | max-height:260px;
|
---|
136 | height: auto !important;
|
---|
137 | height: 260px;
|
---|
138 | overflow:auto;
|
---|
139 | overflow-y:scroll;
|
---|
140 | }
|
---|
141 |
|
---|
142 | #news_area dl.newslist {
|
---|
143 | background: url("../img/background/line_dot_01.gif") repeat-x bottom;
|
---|
144 | }
|
---|
145 | #news_area dl.newslist dt {
|
---|
146 | margin-bottom: 5px;
|
---|
147 | }
|
---|
148 | #news_area dl.newslist dd {
|
---|
149 | margin-bottom: 10px;
|
---|
150 | padding-bottom: 10px;
|
---|
151 | }
|
---|
152 | #news_area dl.end {
|
---|
153 | padding: 10px 0;
|
---|
154 | background: url("") no-repeat bottom;
|
---|
155 | }
|
---|
156 |
|
---|
157 |
|
---|
158 | /* ===============================================
|
---|
159 | ▼現在のカゴの中
|
---|
160 | =============================================== */
|
---|
161 | #cart_area .information {
|
---|
162 | padding: 10px;
|
---|
163 | }
|
---|
164 | #cart_area .postage {
|
---|
165 | margin-top: 10px;
|
---|
166 | padding-top: 10px;
|
---|
167 | background: url("../img/background/line_dot_01.gif") repeat-x top;
|
---|
168 | }
|
---|
169 | #cart_area .postage .point_announce {
|
---|
170 | padding: 2px 0 2px 20px;
|
---|
171 | background: url("../img/icon/ico_price.gif") no-repeat left top;
|
---|
172 | }
|
---|
173 | #cart_area .btn {
|
---|
174 | padding: 10px 0;
|
---|
175 | background: url("../img/background/line_dot_01.gif") repeat-x top #f7f7e6;
|
---|
176 | text-align: center;
|
---|
177 | }
|
---|
178 |
|
---|
179 |
|
---|
180 | /* ===============================================
|
---|
181 | ▼カテゴリー
|
---|
182 | =============================================== */
|
---|
183 | #category_area .bloc_body{
|
---|
184 | background-color: #fffaf0;
|
---|
185 | }
|
---|
186 |
|
---|
187 | #category_area li{
|
---|
188 | padding-left: 5px;
|
---|
189 | }
|
---|
190 | #category_area li.level1{
|
---|
191 | border-bottom: solid 1px #ccc;
|
---|
192 | }
|
---|
193 | #category_area li.level1 p{
|
---|
194 | padding-left: 20px;
|
---|
195 | margin: 7px 3px;
|
---|
196 | }
|
---|
197 | #category_area li.level1 p {
|
---|
198 | background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat;
|
---|
199 | }
|
---|
200 | #category_area li.level1 li p {
|
---|
201 | background: url("../img/icon/ico_level.gif") 7px 7px no-repeat;
|
---|
202 | }
|
---|
203 | #category_area li a {
|
---|
204 | display: block;
|
---|
205 | padding: 0;
|
---|
206 | }
|
---|
207 | a.onlink:link {
|
---|
208 | color: #f00;
|
---|
209 | text-decoration: underline;
|
---|
210 | }
|
---|
211 | a.onlink:visited {
|
---|
212 | color: #f00;
|
---|
213 | }
|
---|
214 | a.onlink:hover {
|
---|
215 | color: #f00;
|
---|
216 | }
|
---|
217 |
|
---|
218 |
|
---|
219 | /* ===============================================
|
---|
220 | ▼ガイドリンク
|
---|
221 | =============================================== */
|
---|
222 | #guide_area {
|
---|
223 | margin-top: 1em;
|
---|
224 | border: none;
|
---|
225 | }
|
---|
226 | #guide_area li{
|
---|
227 | margin-bottom: 5px;
|
---|
228 | letter-spacing: -0.05em;
|
---|
229 | }
|
---|
230 | ul.button_like li {
|
---|
231 | margin: 0;
|
---|
232 | padding: 0 0 1px 0;
|
---|
233 | background: url("../img/background/bg_btn_list.jpg") bottom repeat-x;
|
---|
234 | }
|
---|
235 | ul.button_like li a {
|
---|
236 | margin: 0;
|
---|
237 | padding: 10px 15px 10px 10px;
|
---|
238 | border: 1px solid;
|
---|
239 | border-bottom: none;
|
---|
240 | border-color: #ccc;
|
---|
241 | display: block;
|
---|
242 | background: url("../img/icon/ico_arrow_02.gif") no-repeat right;
|
---|
243 | text-decoration: none;
|
---|
244 | outline: none;
|
---|
245 | }
|
---|
246 |
|
---|
247 |
|
---|
248 | /* ===============================================
|
---|
249 | ▼ログイン(サイド用)
|
---|
250 | ※ヘッダー用はbloc_alpha.css内に記述
|
---|
251 | =============================================== */
|
---|
252 | #container div#login_area .bloc_body {
|
---|
253 | padding: 10px;
|
---|
254 | }
|
---|
255 |
|
---|
256 | #container div#login_area .bloc_body p {
|
---|
257 | margin-bottom: 5px;
|
---|
258 | }
|
---|
259 |
|
---|
260 | #container div#login_area .bloc_body .btn {
|
---|
261 | text-align: center;
|
---|
262 | }
|
---|
263 | #container .login_area dl.formlist {
|
---|
264 | margin-bottom: 8px;
|
---|
265 | width: 420px;
|
---|
266 | }
|
---|
267 | #container .login_area dl.formlist dt {
|
---|
268 | margin-bottom: 3px;
|
---|
269 | padding-left: 15px;
|
---|
270 | color: #333;
|
---|
271 | background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
|
---|
272 | width: 90px;
|
---|
273 | float: left;
|
---|
274 | font-size: 90%;
|
---|
275 | }
|
---|
276 | #container .login_area dl.formlist dd {
|
---|
277 | margin-bottom: 5px;
|
---|
278 | float: right;
|
---|
279 | width: 300px;
|
---|
280 | vertical-align: bottom;
|
---|
281 | text-align: left;
|
---|
282 | }
|
---|
283 | #container div#login_area .bloc_body .mini {
|
---|
284 | margin-top: 5px;
|
---|
285 | letter-spacing: -0.01em;
|
---|
286 | }
|
---|
287 |
|
---|
288 |
|
---|
289 | /* ===============================================
|
---|
290 | ▼検索
|
---|
291 | =============================================== */
|
---|
292 | div#search_area .bloc_body {
|
---|
293 | padding: 10px;
|
---|
294 | }
|
---|
295 | div#search_area .bloc_body .btn {
|
---|
296 | text-align: center;
|
---|
297 | }
|
---|
298 |
|
---|
299 |
|
---|
300 | /* ===============================================
|
---|
301 | ▼カレンダー
|
---|
302 | =============================================== */
|
---|
303 | #calender_area {
|
---|
304 | background-color: transparent;
|
---|
305 | border: none;
|
---|
306 | }
|
---|
307 | #calender_area .bloc_body {
|
---|
308 | padding: 10px 0;
|
---|
309 | background-color: #f1f9fc;
|
---|
310 | }
|
---|
311 | #calender_area table {
|
---|
312 | background: #fff;
|
---|
313 | border: none;
|
---|
314 | width: 150px;
|
---|
315 | margin: 0 auto 5px;
|
---|
316 | font-size: 90%;
|
---|
317 | }
|
---|
318 | #calender_area table td {
|
---|
319 | padding: 1px 3px;
|
---|
320 | border-top: 1px solid #ccc;
|
---|
321 | border-right: none;
|
---|
322 | text-align:center;
|
---|
323 | }
|
---|
324 | #calender_area th {
|
---|
325 | padding: 1px 3px;
|
---|
326 | background: #fff;
|
---|
327 | border: none;
|
---|
328 | text-align: center;
|
---|
329 | }
|
---|
330 | #calender_area table .month {
|
---|
331 | margin-bottom: 5px;
|
---|
332 | padding-left: 12px;
|
---|
333 | background: url("../img/icon/ico_arrow_04.gif") no-repeat left;
|
---|
334 | font-size: 120%;
|
---|
335 | }
|
---|
336 | #calender_area .off {
|
---|
337 | color: #f00;
|
---|
338 | }
|
---|
339 | #calender_area .information {
|
---|
340 | margin-left: 10px;
|
---|
341 | font-size: 90%;
|
---|
342 | }
|
---|
343 |
|
---|
344 |
|
---|
345 | /* ===============================================
|
---|
346 | ▼おすすめ商品
|
---|
347 | =============================================== */
|
---|
348 | /*
|
---|
349 | tplファイルのマークアップが同じ項目
|
---|
350 | メインカラム用 2カラム時 [two_maincolumn_left]
|
---|
351 | [two_maincolumn_right]
|
---|
352 | メインカラム用 3カラム時 [three_maincolumn]
|
---|
353 | サイドカラム用 [side_column]
|
---|
354 | 商品詳細のオススメ商品 [whobought_area]
|
---|
355 | =============================================== */
|
---|
356 | /* 共通
|
---|
357 | ----------------------------------------------- */
|
---|
358 | #recommend_area .bloc_body ,
|
---|
359 | #whobought_area .whobought_bloc {
|
---|
360 | margin-bottom: 10px;
|
---|
361 | padding: 10px 0 10px;
|
---|
362 | border: none;
|
---|
363 | width: 100%;
|
---|
364 | background: url("../img/background/line_dot_01.gif") repeat-x bottom;
|
---|
365 | }
|
---|
366 |
|
---|
367 | #recommend_area .bloc_body p ,
|
---|
368 | #whobought_area .whobought_bloc p {
|
---|
369 | margin: 0 0 5px 0;
|
---|
370 | }
|
---|
371 |
|
---|
372 | #recommend_area .bloc_body img ,
|
---|
373 | #whobought .whobought_bloc img {
|
---|
374 | display: block;
|
---|
375 | float: left;
|
---|
376 | margin: 0 5px 0 0;
|
---|
377 | }
|
---|
378 |
|
---|
379 | #recommend_area .bloc_body h3 ,
|
---|
380 | #whobought_area .whobought_bloc h3 {
|
---|
381 | font-size: 100%;
|
---|
382 | font-weight: normal;
|
---|
383 | }
|
---|
384 |
|
---|
385 |
|
---|
386 | /* 画像
|
---|
387 | ----------------------------------------------- */
|
---|
388 | #recommend_area .bloc_body .productImage ,
|
---|
389 | #whobought_area .whobought_bloc .productImage {
|
---|
390 | margin-bottom: 10px;
|
---|
391 | float: left;
|
---|
392 | width: 90px;
|
---|
393 | }
|
---|
394 |
|
---|
395 |
|
---|
396 | /* 左右の振り分け
|
---|
397 | ----------------------------------------------- */
|
---|
398 | #one_maincolumn #recommend_area .recommendleft ,
|
---|
399 | #two_maincolumn_right #recommend_area .recommendleft ,
|
---|
400 | #two_maincolumn_left #recommend_area .recommendleft ,
|
---|
401 | #three_maincolumn #recommend_area .recommendleft ,
|
---|
402 | #whobought_area .whobought_bloc .whobought_left {
|
---|
403 | float: left;
|
---|
404 | width: 47.5%;
|
---|
405 | }
|
---|
406 | #one_maincolumn #recommend_area .recommendright ,
|
---|
407 | #two_maincolumn_right #recommend_area .recommendright ,
|
---|
408 | #two_maincolumn_left #recommend_area .recommendright ,
|
---|
409 | #three_maincolumn #recommend_area .recommendright ,
|
---|
410 | #whobought_area .whobought_bloc .whobought_right {
|
---|
411 | float: right;
|
---|
412 | width: 47.5%;
|
---|
413 | }
|
---|
414 |
|
---|
415 |
|
---|
416 | /* 商品説明テキスト
|
---|
417 | ----------------------------------------------- */
|
---|
418 | /* メインカラム用 1カラム時*/
|
---|
419 | #one_maincolumn #recommend_area .bloc_body .productContents {
|
---|
420 | float: right;
|
---|
421 | width: 74%;
|
---|
422 | }
|
---|
423 |
|
---|
424 | /* メインカラム用 2カラム時*/
|
---|
425 | #two_maincolumn_right #recommend_area .bloc_body .productContents ,
|
---|
426 | #two_maincolumn_left #recommend_area .bloc_body .productContents ,
|
---|
427 | #two_maincolumn_right #whobought_area .whobought_bloc .productContents ,
|
---|
428 | #two_maincolumn_left #whobought_area .whobought_bloc .productContents {
|
---|
429 | float: right;
|
---|
430 | width: 74%;
|
---|
431 | }
|
---|
432 |
|
---|
433 | /* メインカラム用 3カラム時*/
|
---|
434 | #three_maincolumn #recommend_area .bloc_body .productContents ,
|
---|
435 | #three_maincolumn #whobought_area .whobought_bloc .productContents {
|
---|
436 | float: right;
|
---|
437 | width: 67%;
|
---|
438 | }
|
---|
439 |
|
---|
440 | /* サイドカラム用 (幅px固定) */
|
---|
441 | .side_column #recommend_area .bloc_body {
|
---|
442 | margin-top: 5px;
|
---|
443 | margin-right: 0;
|
---|
444 | width: 157px;
|
---|
445 | padding: 0;
|
---|
446 | }
|
---|
447 | .side_column #recommend_area .bloc_body .productContents {
|
---|
448 | padding: 0;
|
---|
449 | margin: 0;
|
---|
450 | width: 80px;
|
---|
451 | }
|
---|
452 | .side_column #recommend_area .recommendleft {
|
---|
453 | padding: 0;
|
---|
454 | width: 70px;
|
---|
455 | float: left;
|
---|
456 | }
|
---|
457 | .side_column #recommend_area .recommendright {
|
---|
458 | margin: 0;
|
---|
459 | padding: 0;
|
---|
460 | width: 70px;
|
---|
461 | float: right;
|
---|
462 | }
|
---|
463 |
|
---|
464 | /* IE6以下*/
|
---|
465 | * html .side_column #recommend_area .bloc_body {
|
---|
466 | width: 180px;
|
---|
467 | }
|
---|
468 |
|
---|