質問編集履歴

4

変更: クラス名

2020/05/01 01:18

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  <!--01-->
38
38
 
39
- <div class="factory_about_ac" id="ac01">
39
+ <div class="ac" id="ac01">
40
40
 
41
41
  <div class="ac_title">
42
42
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  <!--02-->
60
60
 
61
- <div class="factory_about_ac" id="ac02">
61
+ <div class="ac" id="ac02">
62
62
 
63
63
  <div class="ac_title">
64
64
 
@@ -80,7 +80,7 @@
80
80
 
81
81
  <!--03-->
82
82
 
83
- <div class="factory_about_ac" id="ac03">
83
+ <div class="ac" id="ac03">
84
84
 
85
85
  <div class="ac_title">
86
86
 
@@ -104,7 +104,7 @@
104
104
 
105
105
  <!--04-->
106
106
 
107
- <div class="factory_about_ac" id="ac04">
107
+ <div class="ac" id="ac04">
108
108
 
109
109
  <div class="ac_title">
110
110
 
@@ -480,15 +480,15 @@
480
480
 
481
481
  /* ===============================
482
482
 
483
- factory_about
483
+ ac
484
484
 
485
485
  =================================*/
486
486
 
487
- .factory_about_ac { position:relative; }
487
+ .ac { position:relative; }
488
-
488
+
489
- .factory_about_ac + .factory_about_ac { margin-top:24px; }
489
+ .ac + .ac { margin-top:24px; }
490
-
490
+
491
- .factory_about_ac#ac05:after { content:none; }
491
+ .ac#ac05:after { content:none; }
492
492
 
493
493
  .ac_title a { display:flex; min-height:180px; background:#eeeded; color:#000; }
494
494
 

3

削除: 「]」

2020/05/01 01:18

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  div 要素が縦に並んでしまう。
10
10
 
11
- ![![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)]
11
+ ![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)
12
12
 
13
13
 
14
14
 

2

修正: ずれ

2020/05/01 01:15

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,11 @@
8
8
 
9
9
  div 要素が縦に並んでしまう。
10
10
 
11
- ![![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)]```
11
+ ![![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)]
12
+
13
+
14
+
15
+ ```
12
16
 
13
17
  サイズの問題なのでしょうか?
14
18
 

1

削除: 画像ファイル名

2020/05/01 01:13

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -8,520 +8,518 @@
8
8
 
9
9
  div 要素が縦に並んでしまう。
10
10
 
11
- ![![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)](cf92d8883d7d6b84cfed2d9d3c8975cc.png)
11
+ ![![イメージ説明](25737af6a397627b9dcd7e27fdb41e0a.png)]```
12
+
13
+ サイズの問題なのでしょうか?
12
14
 
13
15
  ```
14
16
 
17
+
18
+
15
- サイズ問題なのでしょうか?
19
+ ### 該当ソースコード
20
+
21
+
22
+
23
+ ```HTML
24
+
25
+ <section id="contents">
26
+
27
+ <section id="wrapper" class="con clearfix">
28
+
29
+ <section id="main">
30
+
31
+ <div class="section">
32
+
33
+ <!--01-->
34
+
35
+ <div class="factory_about_ac" id="ac01">
36
+
37
+ <div class="ac_title">
38
+
39
+ <a href="#" class="noscroll">
40
+
41
+ <div class="txt">
42
+
43
+ <span class="en num">01</span>
44
+
45
+ <h4>Link 1</h4>
46
+
47
+ </div>
48
+
49
+ </a>
50
+
51
+ </div>
52
+
53
+ </div>
54
+
55
+ <!--02-->
56
+
57
+ <div class="factory_about_ac" id="ac02">
58
+
59
+ <div class="ac_title">
60
+
61
+ <a href="#" class="noscroll">
62
+
63
+ <div class="txt">
64
+
65
+ <span class="en num">02</span>
66
+
67
+ <h4>Link 2</h4>
68
+
69
+ </div>
70
+
71
+ </a>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ <!--03-->
78
+
79
+ <div class="factory_about_ac" id="ac03">
80
+
81
+ <div class="ac_title">
82
+
83
+ <a href="#" class="noscroll">
84
+
85
+ <div class="txt">
86
+
87
+ <span class="en num">03</span>
88
+
89
+ <h4>Link 3</h4>
90
+
91
+ </div>
92
+
93
+ </a>
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+
100
+
101
+ <!--04-->
102
+
103
+ <div class="factory_about_ac" id="ac04">
104
+
105
+ <div class="ac_title">
106
+
107
+ <a href="#" class="noscroll">
108
+
109
+ <div class="txt">
110
+
111
+ <span class="en num">04</span>
112
+
113
+ <h4>Link 4</h4>
114
+
115
+ </div>
116
+
117
+ </a>
118
+
119
+ </div>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ </section><!--main-->
126
+
127
+ </section><!--wrapper-->
128
+
129
+ </section><!--contents-->
130
+
131
+
16
132
 
17
133
  ```
18
134
 
19
-
20
-
21
- ### 該当のソースコード
22
-
23
-
24
-
25
- ```HTML
26
-
27
- <section id="contents">
28
-
29
- <section id="wrapper" class="con clearfix">
30
-
31
- <section id="main">
32
-
33
- <div class="section">
34
-
35
- <!--01-->
36
-
37
- <div class="factory_about_ac" id="ac01">
38
-
39
- <div class="ac_title">
40
-
41
- <a href="#" class="noscroll">
42
-
43
- <div class="txt">
44
-
45
- <span class="en num">01</span>
46
-
47
- <h4>Link 1</h4>
48
-
49
- </div>
50
-
51
- </a>
52
-
53
- </div>
54
-
55
- </div>
56
-
57
- <!--02-->
58
-
59
- <div class="factory_about_ac" id="ac02">
60
-
61
- <div class="ac_title">
62
-
63
- <a href="#" class="noscroll">
64
-
65
- <div class="txt">
66
-
67
- <span class="en num">02</span>
68
-
69
- <h4>Link 2</h4>
70
-
71
- </div>
72
-
73
- </a>
74
-
75
- </div>
76
-
77
- </div>
78
-
79
- <!--03-->
80
-
81
- <div class="factory_about_ac" id="ac03">
82
-
83
- <div class="ac_title">
84
-
85
- <a href="#" class="noscroll">
86
-
87
- <div class="txt">
88
-
89
- <span class="en num">03</span>
90
-
91
- <h4>Link 3</h4>
92
-
93
- </div>
94
-
95
- </a>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
-
102
-
103
- <!--04-->
104
-
105
- <div class="factory_about_ac" id="ac04">
106
-
107
- <div class="ac_title">
108
-
109
- <a href="#" class="noscroll">
110
-
111
- <div class="txt">
112
-
113
- <span class="en num">04</span>
114
-
115
- <h4>Link 4</h4>
116
-
117
- </div>
118
-
119
- </a>
120
-
121
- </div>
122
-
123
- </div>
124
-
125
- </div>
126
-
127
- </section><!--main-->
128
-
129
- </section><!--wrapper-->
130
-
131
- </section><!--contents-->
135
+ ```css
136
+
137
+ @charset "UTF-8";
138
+
139
+
140
+
141
+ @import url('https://fonts.googleapis.com/css?family=Karla');
142
+
143
+
144
+
145
+ * {
146
+
147
+ box-sizing:border-box;
148
+
149
+ /* tap */
150
+
151
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
152
+
153
+ -webkit-box-shadow: none;
154
+
155
+ box-shadow: none;
156
+
157
+ outline: none;
158
+
159
+ }
160
+
161
+ *:focus { outline: none; }
162
+
163
+
164
+
165
+ html { overflow-y:scroll; }
166
+
167
+ body {
168
+
169
+ width:100%; margin:0; padding:0;
170
+
171
+ text-align:center; font-size:15px; line-height:1.7; letter-spacing:0.05em;
172
+
173
+ color:#000;
174
+
175
+ font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
176
+
177
+ background:#fff;
178
+
179
+ }
180
+
181
+
182
+
183
+ ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
184
+
185
+ img { border:0; }
186
+
187
+ li { list-style-type:none; }
188
+
189
+
190
+
191
+ a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
192
+
193
+ a:link { color:#000; text-decoration:none; }
194
+
195
+ a:visited { color:#000; }
196
+
197
+ a:hover { color:#cc141c; }
198
+
199
+ a:active { color:#cc141c; }
200
+
201
+ a img {
202
+
203
+ -webkit-transition:.2s linear;
204
+
205
+ -moz-transition:.2s linear;
206
+
207
+ -o-transition:.2s linear;
208
+
209
+ transition:.2s linear; }
210
+
211
+ a.fade:hover img { opacity:0.7; }
212
+
213
+
214
+
215
+ a.underline { text-decoration:underline; color:#cc141c; }
216
+
217
+ a.underline:hover { color:#cc141c; }
218
+
219
+ a.blank:after {
220
+
221
+ content:""; display:inline-block; width:15px; height:11px; margin-left:5px;
222
+
223
+ background:url("../img/blank.png") 0 0 no-repeat; background-size:15px 11px; }
224
+
225
+ a.blank:hover:after { background:url("../img/blank_r.png") 0 0 no-repeat; background-size:15px 11px; }
226
+
227
+ a.arrow:before {
228
+
229
+ content:""; display:inline-block; width:5px; height:10px; margin:0 8px;
230
+
231
+ background:url("../img/arrow_right_b.png") 0 0 no-repeat; background-size:5px 10px; }
232
+
233
+ a.arrow:hover:before { background:url("../img/arrow_right_r.png") 0 0 no-repeat; background-size:5px 10px; }
234
+
235
+
236
+
237
+ img { max-width:100%; height:auto; vertical-align:top; }
238
+
239
+
240
+
241
+ /* clearfix */
242
+
243
+ .clearfix:after {
244
+
245
+ visibility: hidden;
246
+
247
+ display: block;
248
+
249
+ font-size: 0;
250
+
251
+ content: " ";
252
+
253
+ clear: both;
254
+
255
+ height: 0;
256
+
257
+ }
258
+
259
+ * html .clearfix { zoom: 1; } /* IE6 */
260
+
261
+ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
262
+
263
+
264
+
265
+ .txt_c { text-align:center; }
266
+
267
+ .txt_l { text-align:left; }
268
+
269
+ .txt_r { text-align:right; }
270
+
271
+
272
+
273
+ .clear { clear:both; }
274
+
275
+ .hidden { visibility:hidden; }
276
+
277
+
278
+
279
+ .serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif; }
280
+
281
+ .en { font-family: Karla, Century Gothic, Futura,sans-serif; }
282
+
283
+ .bold { font-weight:bold; }
284
+
285
+ .big { font-size:120%; }
286
+
287
+ .small { font-size:88%; }
288
+
289
+ .red { color:#df003a!important; }
290
+
291
+ .white { color:#fff!important; }
292
+
293
+ .black { color:#000!important; }
294
+
295
+
296
+
297
+
298
+
299
+ body.fixed { position:fixed; width:100%; height:100%; }
300
+
301
+ .con { position:relative; margin:auto; }
302
+
303
+
304
+
305
+ /* common */
306
+
307
+ p { margin-bottom:20px; }
308
+
309
+ p:last-child { margin-bottom:0; }
310
+
311
+ .con { position:relative; text-align:left; }
312
+
313
+
314
+
315
+ .all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
316
+
317
+ .all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }
318
+
319
+ .all a:hover:after { background:url("../img/arrow_r.png") 0 0 no-repeat; }
320
+
321
+
322
+
323
+ /* footer */
324
+
325
+ footer { padding-bottom:40px; text-align:center; position:relative; }
326
+
327
+
328
+
329
+ footer .office { /*background:url("../img/foot_support_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
330
+
331
+ footer .KB { /*background:url("../img/foot_contact_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
332
+
333
+ footer .inquiry { text-align:center!important; }
334
+
335
+ footer .inquiry h2 { position:relative; margin-bottom:50px; padding-bottom:22px; font-size:14px; font-weight:normal; letter-spacing:0.2em; }
336
+
337
+ footer .inquiry h2 i { display:inline-block; font-style:normal; font-size:52px; font-weight:normal; line-height:1; margin-bottom:30px; }
338
+
339
+ footer .inquiry h2:after { content:""; display:block; width:38px; height:1px; background:#cc141c; position:absolute; bottom:0; left:50%; margin-left:-19px; }
340
+
341
+ footer .inquiry a { display:block; width:100%; height:70px; line-height:70px; font-size:16px; background:#fff; }
342
+
343
+ footer .inquiry a:hover { background:#cc141c; color:#fff; }
344
+
345
+
346
+
347
+ footer .biglink li a { display:block; width:100%; height:100%; text-indent:-9999px; }
348
+
349
+ footer .biglink li:nth-child(1) a { background:url("../img/footlink01.png") center no-repeat #000; }
350
+
351
+ footer .biglink li:nth-child(1) a:hover { background-color:#cc141c; }
352
+
353
+ footer .biglink li:nth-child(2) a { background:url("../img/footlink02.png") center no-repeat; }
354
+
355
+ footer .biglink li:nth-child(2) a:hover { background-color:#eeeeee; }
356
+
357
+ footer .biglink li:nth-child(3) a { background:url("../img/footlink03.png") center no-repeat; }
358
+
359
+ footer .biglink li:nth-child(3) a:hover { background-color:#eeeeee; }
360
+
361
+
362
+
363
+ @media (min-width: 769px) {
364
+
365
+ .sp { display:none; }
366
+
367
+ .con { width:1280px; }
368
+
369
+
370
+
371
+ footer .inquiry > div { width:49%; padding:90px 20px 80px; }
372
+
373
+ footer .office { float:left; }
374
+
375
+ footer .KB { float:right; }
376
+
377
+ footer .inquiry > div > div { display:inline-block; width:80%; min-width:420px; }
378
+
379
+ /*footer .office li:nth-child(1) { float:left; width:46.5%; margin-bottom:30px; }
380
+
381
+ footer .office li:nth-child(2) { float:right; width:46.5%; margin-bottom:30px; }
382
+
383
+ footer .office li:nth-child(3) { clear:both; width:70%; margin:auto; }*/
384
+
385
+ footer .office ul { padding:0 15%; }
386
+
387
+ footer .office li:nth-child(2) { margin-top:30px; }
388
+
389
+ footer .KB ul { padding:0 15%; }
390
+
391
+ footer .KB li:nth-child(2) { margin-top:30px; }
392
+
393
+
394
+
395
+ footer .biglink { margin-top:80px; }
396
+
397
+ footer .biglink li { float:left; width:33.333%; height:90px; }
398
+
399
+ footer .biglink li:nth-child(2) a,
400
+
401
+ footer .biglink li:nth-child(3) a { border:1px solid #d5d5d5; border-left:0; }
402
+
403
+ }
404
+
405
+
406
+
407
+ /* btn_menu animation */
408
+
409
+ @-webkit-keyframes active-menu-bar02 {
410
+
411
+ 100% { height: 0; }
412
+
413
+ }
414
+
415
+ @keyframes active-menu-bar02 {
416
+
417
+ 100% { height: 0; }
418
+
419
+ }
420
+
421
+
422
+
423
+
424
+
425
+
426
+
427
+
428
+
429
+
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+ #contents { padding:35px 0 100px;}
438
+
439
+ #wrapper { font-size:14px; }
440
+
441
+
442
+
443
+ /* 見出し(グレー背景) */
444
+
445
+ .h3_bg { margin-bottom:30px; padding:20px 0; background:#ececec; } /* 横幅100% */
446
+
447
+ .h3_bg h2, .h3_bg h3 { font-size:18px; font-weight:bold; letter-spacing:0.1em; line-height:1; }
448
+
449
+ .h4_bg { margin-bottom:20px; padding:20px 17px; font-size:16px; font-weight:bold; letter-spacing:0.1em; line-height:1; background:#ececec; } /* con内 */
450
+
451
+
452
+
453
+ /* 囲み */
454
+
455
+ div.section { padding:30px 0 90px; border-top:1px solid #dedede; width:33.333%; }
456
+
457
+ div.section:first-child { padding-top:0; border-top:0; }
458
+
459
+ div.section:last-child { padding-bottom:0; }
460
+
461
+ .border_box { border:1p11 slid #dbdbdb; padding:40px; }
462
+
463
+
464
+
465
+
466
+
467
+
468
+
469
+
470
+
471
+
472
+
473
+ /* CSS Document */
474
+
475
+
476
+
477
+ /* ===============================
478
+
479
+ factory_about
480
+
481
+ =================================*/
482
+
483
+ .factory_about_ac { position:relative; }
484
+
485
+ .factory_about_ac + .factory_about_ac { margin-top:24px; }
486
+
487
+ .factory_about_ac#ac05:after { content:none; }
488
+
489
+ .ac_title a { display:flex; min-height:180px; background:#eeeded; color:#000; }
490
+
491
+ .ac_title .txt { width:65%; padding:30px 30px 30px 130px; position:relative; }
492
+
493
+ .ac_title .txt .num { color:#d5001e; font-size:30px; font-weight:700; letter-spacing:0.1em; position:absolute; top:31px; left:30px; }
494
+
495
+ .ac_title .txt .num:before { content:""; display:inline-block; width:19px; height:24px; margin-right:10px; vertical-align:-1px; background:url("/sites/jp000260/SiteAssets/SitePages/line.png") 0 0 no-repeat; background-size:contain; }
496
+
497
+ .ac_title .txt h4 { font-size:32px; margin-bottom:10px; }
498
+
499
+ .ac_title .txt p { font-size:16px; }
500
+
501
+ .ac_title .txt p span { color:#d5001e; font-size:14px; }
502
+
503
+ .ac_title .txt p span:after {
504
+
505
+ content:""; display:inline-block; width:8px; height:8px; margin-left:8px; border-right:1px solid #d5001e; border-bottom:1px solid #d5001e; transform:rotate(45deg); vertical-align:3px; }
506
+
507
+
132
508
 
133
509
 
134
510
 
135
511
  ```
136
512
 
513
+ ### 試したこと
514
+
137
515
  ```css
138
516
 
139
- @charset "UTF-8";
140
-
141
-
142
-
143
- @import url('https://fonts.googleapis.com/css?family=Karla');
144
-
145
-
146
-
147
- * {
148
-
149
- box-sizing:border-box;
150
-
151
- /* tap */
152
-
153
- -webkit-tap-highlight-color: rgba(0,0,0,0);
154
-
155
- -webkit-box-shadow: none;
156
-
157
- box-shadow: none;
158
-
159
- outline: none;
160
-
161
- }
162
-
163
- *:focus { outline: none; }
164
-
165
-
166
-
167
- html { overflow-y:scroll; }
168
-
169
- body {
170
-
171
- width:100%; margin:0; padding:0;
172
-
173
- text-align:center; font-size:15px; line-height:1.7; letter-spacing:0.05em;
174
-
175
- color:#000;
176
-
177
- font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
178
-
179
- background:#fff;
180
-
181
- }
182
-
183
-
184
-
185
- ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
186
-
187
- img { border:0; }
188
-
189
- li { list-style-type:none; }
190
-
191
-
192
-
193
- a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
194
-
195
- a:link { color:#000; text-decoration:none; }
196
-
197
- a:visited { color:#000; }
198
-
199
- a:hover { color:#cc141c; }
200
-
201
- a:active { color:#cc141c; }
202
-
203
- a img {
204
-
205
- -webkit-transition:.2s linear;
206
-
207
- -moz-transition:.2s linear;
208
-
209
- -o-transition:.2s linear;
210
-
211
- transition:.2s linear; }
212
-
213
- a.fade:hover img { opacity:0.7; }
214
-
215
-
216
-
217
- a.underline { text-decoration:underline; color:#cc141c; }
218
-
219
- a.underline:hover { color:#cc141c; }
220
-
221
- a.blank:after {
222
-
223
- content:""; display:inline-block; width:15px; height:11px; margin-left:5px;
224
-
225
- background:url("../img/blank.png") 0 0 no-repeat; background-size:15px 11px; }
226
-
227
- a.blank:hover:after { background:url("../img/blank_r.png") 0 0 no-repeat; background-size:15px 11px; }
228
-
229
- a.arrow:before {
230
-
231
- content:""; display:inline-block; width:5px; height:10px; margin:0 8px;
232
-
233
- background:url("../img/arrow_right_b.png") 0 0 no-repeat; background-size:5px 10px; }
234
-
235
- a.arrow:hover:before { background:url("../img/arrow_right_r.png") 0 0 no-repeat; background-size:5px 10px; }
236
-
237
-
238
-
239
- img { max-width:100%; height:auto; vertical-align:top; }
240
-
241
-
242
-
243
- /* clearfix */
244
-
245
- .clearfix:after {
246
-
247
- visibility: hidden;
248
-
249
- display: block;
250
-
251
- font-size: 0;
252
-
253
- content: " ";
254
-
255
- clear: both;
256
-
257
- height: 0;
258
-
259
- }
260
-
261
- * html .clearfix { zoom: 1; } /* IE6 */
262
-
263
- *:first-child+html .clearfix { zoom: 1; } /* IE7 */
264
-
265
-
266
-
267
- .txt_c { text-align:center; }
268
-
269
- .txt_l { text-align:left; }
270
-
271
- .txt_r { text-align:right; }
272
-
273
-
274
-
275
- .clear { clear:both; }
276
-
277
- .hidden { visibility:hidden; }
278
-
279
-
280
-
281
- .serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif; }
282
-
283
- .en { font-family: Karla, Century Gothic, Futura,sans-serif; }
284
-
285
- .bold { font-weight:bold; }
286
-
287
- .big { font-size:120%; }
288
-
289
- .small { font-size:88%; }
290
-
291
- .red { color:#df003a!important; }
292
-
293
- .white { color:#fff!important; }
294
-
295
- .black { color:#000!important; }
296
-
297
-
298
-
299
-
300
-
301
- body.fixed { position:fixed; width:100%; height:100%; }
302
-
303
- .con { position:relative; margin:auto; }
304
-
305
-
306
-
307
- /* common */
308
-
309
- p { margin-bottom:20px; }
310
-
311
- p:last-child { margin-bottom:0; }
312
-
313
- .con { position:relative; text-align:left; }
314
-
315
-
316
-
317
- .all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
318
-
319
- .all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }
320
-
321
- .all a:hover:after { background:url("../img/arrow_r.png") 0 0 no-repeat; }
322
-
323
-
324
-
325
- /* footer */
326
-
327
- footer { padding-bottom:40px; text-align:center; position:relative; }
328
-
329
-
330
-
331
- footer .office { /*background:url("../img/foot_support_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
332
-
333
- footer .KB { /*background:url("../img/foot_contact_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
334
-
335
- footer .inquiry { text-align:center!important; }
336
-
337
- footer .inquiry h2 { position:relative; margin-bottom:50px; padding-bottom:22px; font-size:14px; font-weight:normal; letter-spacing:0.2em; }
338
-
339
- footer .inquiry h2 i { display:inline-block; font-style:normal; font-size:52px; font-weight:normal; line-height:1; margin-bottom:30px; }
340
-
341
- footer .inquiry h2:after { content:""; display:block; width:38px; height:1px; background:#cc141c; position:absolute; bottom:0; left:50%; margin-left:-19px; }
342
-
343
- footer .inquiry a { display:block; width:100%; height:70px; line-height:70px; font-size:16px; background:#fff; }
344
-
345
- footer .inquiry a:hover { background:#cc141c; color:#fff; }
346
-
347
-
348
-
349
- footer .biglink li a { display:block; width:100%; height:100%; text-indent:-9999px; }
350
-
351
- footer .biglink li:nth-child(1) a { background:url("../img/footlink01.png") center no-repeat #000; }
352
-
353
- footer .biglink li:nth-child(1) a:hover { background-color:#cc141c; }
354
-
355
- footer .biglink li:nth-child(2) a { background:url("../img/footlink02.png") center no-repeat; }
356
-
357
- footer .biglink li:nth-child(2) a:hover { background-color:#eeeeee; }
358
-
359
- footer .biglink li:nth-child(3) a { background:url("../img/footlink03.png") center no-repeat; }
360
-
361
- footer .biglink li:nth-child(3) a:hover { background-color:#eeeeee; }
362
-
363
-
364
-
365
- @media (min-width: 769px) {
366
-
367
- .sp { display:none; }
368
-
369
- .con { width:1280px; }
370
-
371
-
372
-
373
- footer .inquiry > div { width:49%; padding:90px 20px 80px; }
374
-
375
- footer .office { float:left; }
376
-
377
- footer .KB { float:right; }
378
-
379
- footer .inquiry > div > div { display:inline-block; width:80%; min-width:420px; }
380
-
381
- /*footer .office li:nth-child(1) { float:left; width:46.5%; margin-bottom:30px; }
382
-
383
- footer .office li:nth-child(2) { float:right; width:46.5%; margin-bottom:30px; }
384
-
385
- footer .office li:nth-child(3) { clear:both; width:70%; margin:auto; }*/
386
-
387
- footer .office ul { padding:0 15%; }
388
-
389
- footer .office li:nth-child(2) { margin-top:30px; }
390
-
391
- footer .KB ul { padding:0 15%; }
392
-
393
- footer .KB li:nth-child(2) { margin-top:30px; }
394
-
395
-
396
-
397
- footer .biglink { margin-top:80px; }
398
-
399
- footer .biglink li { float:left; width:33.333%; height:90px; }
400
-
401
- footer .biglink li:nth-child(2) a,
402
-
403
- footer .biglink li:nth-child(3) a { border:1px solid #d5d5d5; border-left:0; }
404
-
405
- }
406
-
407
-
408
-
409
- /* btn_menu animation */
410
-
411
- @-webkit-keyframes active-menu-bar02 {
412
-
413
- 100% { height: 0; }
414
-
415
- }
416
-
417
- @keyframes active-menu-bar02 {
418
-
419
- 100% { height: 0; }
420
-
421
- }
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
-
430
-
431
-
432
-
433
-
434
-
435
-
436
-
437
-
438
-
439
- #contents { padding:35px 0 100px;}
440
-
441
- #wrapper { font-size:14px; }
442
-
443
-
444
-
445
- /* 見出し(グレー背景) */
446
-
447
- .h3_bg { margin-bottom:30px; padding:20px 0; background:#ececec; } /* 横幅100% */
448
-
449
- .h3_bg h2, .h3_bg h3 { font-size:18px; font-weight:bold; letter-spacing:0.1em; line-height:1; }
450
-
451
- .h4_bg { margin-bottom:20px; padding:20px 17px; font-size:16px; font-weight:bold; letter-spacing:0.1em; line-height:1; background:#ececec; } /* con内 */
452
-
453
-
454
-
455
- /* 囲み */
456
-
457
- div.section { padding:30px 0 90px; border-top:1px solid #dedede; width:33.333%; }
458
-
459
- div.section:first-child { padding-top:0; border-top:0; }
460
-
461
- div.section:last-child { padding-bottom:0; }
462
-
463
- .border_box { border:1p11 slid #dbdbdb; padding:40px; }
464
-
465
-
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
-
475
- /* CSS Document */
476
-
477
-
478
-
479
- /* ===============================
480
-
481
- factory_about
482
-
483
- =================================*/
484
-
485
- .factory_about_ac { position:relative; }
486
-
487
- .factory_about_ac + .factory_about_ac { margin-top:24px; }
488
-
489
- .factory_about_ac#ac05:after { content:none; }
490
-
491
- .ac_title a { display:flex; min-height:180px; background:#eeeded; color:#000; }
492
-
493
- .ac_title .txt { width:65%; padding:30px 30px 30px 130px; position:relative; }
494
-
495
- .ac_title .txt .num { color:#d5001e; font-size:30px; font-weight:700; letter-spacing:0.1em; position:absolute; top:31px; left:30px; }
496
-
497
- .ac_title .txt .num:before { content:""; display:inline-block; width:19px; height:24px; margin-right:10px; vertical-align:-1px; background:url("/sites/jp000260/SiteAssets/SitePages/line.png") 0 0 no-repeat; background-size:contain; }
498
-
499
- .ac_title .txt h4 { font-size:32px; margin-bottom:10px; }
500
-
501
- .ac_title .txt p { font-size:16px; }
502
-
503
- .ac_title .txt p span { color:#d5001e; font-size:14px; }
504
-
505
- .ac_title .txt p span:after {
506
-
507
- content:""; display:inline-block; width:8px; height:8px; margin-left:8px; border-right:1px solid #d5001e; border-bottom:1px solid #d5001e; transform:rotate(45deg); vertical-align:3px; }
508
-
509
-
510
-
511
-
517
+ #main { float:left; }
518
+
519
+ .section { float:left; }
512
520
 
513
521
  ```
514
522
 
515
- ### 試したこと
516
-
517
- ```css
518
-
519
- #main { float:left; }
520
-
521
- .section { float:left; }
522
-
523
- ```
524
-
525
523
 
526
524
 
527
525
  ### 補足情報(FW/ツールのバージョンなど)