質問編集履歴

2

変更

2018/07/17 08:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -132,448 +132,442 @@
132
132
 
133
133
  ```ここに言語を入力
134
134
 
135
+
136
+
137
+ .container {
138
+
139
+ -webkit-perspective:100px;
140
+
141
+ perspective:100px;
142
+
143
+ height:40vh;
144
+
145
+ background-size:cover;
146
+
147
+ position:relative;
148
+
149
+ }
150
+
151
+ .slider {
152
+
153
+ opacity:.8;
154
+
155
+ filter:alpha(opacity=80);
156
+
157
+ border: solid 10px #43A1E1;
158
+
159
+ -moz-box-sizing: border-box;
160
+
161
+ -webkit-box-sizing: border-box;
162
+
163
+ -o-box-sizing: border-box;
164
+
165
+ -ms-box-sizing: border-box;
166
+
167
+ box-sizing: border-box;
168
+
169
+ width:600px;
170
+
171
+ height:400px;
172
+
173
+ overflow:hidden;
174
+
175
+ position:absolute;
176
+
177
+ left:50%;
178
+
179
+ top:70%;
180
+
181
+ -webkit-transform:translate(-50%, -50%);
182
+
183
+ -ms-transform:translate(-50%, -50%);
184
+
185
+ transform:translate(-50%, -50%);
186
+
187
+ }
188
+
135
- #sub_box input {
189
+ .slider>input {
190
+
191
+ position:absolute;
192
+
193
+ width:0;
194
+
195
+ height:0;
196
+
197
+ top:0;
198
+
199
+ left:0;
200
+
201
+ visibility:hidden;
202
+
203
+ opacity:0;
204
+
205
+ filter:alpha(opacity=0);
206
+
207
+ }
208
+
209
+ .slider>label {
210
+
211
+ position:absolute;
212
+
213
+ top:50%;
214
+
215
+ -webkit-transform:translate(-100%, -50%);
216
+
217
+ -ms-transform:translate(-100%, -50%);
218
+
219
+ transform:translate(-100%, -50%);
220
+
221
+ display:block;;
222
+
223
+ width:50px;
224
+
225
+ height:50px;
226
+
227
+ line-height:50px;
228
+
229
+ text-align:center;
230
+
231
+ z-index:1000;
232
+
233
+ cursor:pointer;
234
+
235
+ -webkit-transform:translate(0, -50%);
236
+
237
+ -ms-transform:translate(0, -50%);
238
+
239
+ transform:translate(0, -50%);
136
240
 
137
241
  display:none;
138
242
 
139
- }
140
-
141
-
142
-
143
- .container {
144
-
145
- -webkit-perspective:100px;
146
-
147
- perspective:100px;
148
-
149
- height:40vh;
150
-
151
- background-size:cover;
152
-
153
- position:relative;
154
-
155
- }
156
-
157
- .slider {
158
-
159
- opacity:.8;
160
-
161
- filter:alpha(opacity=80);
162
-
163
- border: solid 10px #43A1E1;
164
-
165
- -moz-box-sizing: border-box;
166
-
167
- -webkit-box-sizing: border-box;
168
-
169
- -o-box-sizing: border-box;
170
-
171
- -ms-box-sizing: border-box;
172
-
173
- box-sizing: border-box;
174
-
175
- width:600px;
176
-
177
- height:400px;
178
-
179
- overflow:hidden;
180
-
181
- position:absolute;
182
-
183
- left:50%;
184
-
185
- top:70%;
186
-
187
- -webkit-transform:translate(-50%, -50%);
188
-
189
- -ms-transform:translate(-50%, -50%);
190
-
191
- transform:translate(-50%, -50%);
192
-
193
- }
194
-
195
- .slider>input {
196
-
197
- position:absolute;
198
-
199
- width:0;
200
-
201
- height:0;
202
-
203
- top:0;
204
-
205
- left:0;
206
-
207
- visibility:hidden;
208
-
209
- opacity:0;
210
-
211
- filter:alpha(opacity=0);
212
-
213
- }
214
-
215
- .slider>label {
216
-
217
- position:absolute;
218
-
219
- top:50%;
220
-
221
- -webkit-transform:translate(-100%, -50%);
222
-
223
- -ms-transform:translate(-100%, -50%);
224
-
225
- transform:translate(-100%, -50%);
226
-
227
- display:block;;
228
-
229
- width:50px;
230
-
231
- height:50px;
232
-
233
- line-height:50px;
243
+ font:normal normal normal 14px/1 FontAwesome;
244
+
245
+ text-rendering:auto;
246
+
247
+ -webkit-font-smoothing:antialiased;
248
+
249
+ -moz-osx-font-smoothing:grayscale;
250
+
251
+ -webkit-transition:opacity .25s ease-out;
252
+
253
+ transition:opacity .25s ease-out;
254
+
255
+ }
256
+
257
+ .slider>label:hover {
258
+
259
+ opacity:.5;
260
+
261
+ filter:alpha(opacity=50);
262
+
263
+ }
264
+
265
+ .slider__content {
266
+
267
+ width: 1900%;
268
+
269
+ display:inline-flex;
270
+
271
+ -webkit-transition:-webkit-transform .5s ease-out;
272
+
273
+ transition:transform .5s ease-out;
274
+
275
+ }
276
+
277
+ .slider__content__item {
278
+
279
+ flex: 1 1 0; /* 各スライドの横幅を均等に */
280
+
281
+ }
282
+
283
+ .slider__content__item_ {
284
+
285
+ flex: 1 1 0 /* 各スライドの横幅を均等に */
286
+
287
+ }
288
+
289
+ .slider #slide01:checked~.slider__content {
290
+
291
+ -webkit-transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
292
+
293
+ transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
294
+
295
+ }
296
+
297
+ .slider #slide01:checked~label[for=slide00] {
298
+
299
+ left:0;
300
+
301
+ display:block;
302
+
303
+ }
304
+
305
+ .slider #slide01:checked~label[for=slide00]:before {
306
+
307
+ content:"<";
308
+
309
+ font-weight: bold;
310
+
311
+ font-size:50px;
312
+
313
+ }
314
+
315
+ .slider #slide01:checked~label[for=slide02] {
316
+
317
+ right:0;
318
+
319
+ display:block;
320
+
321
+ }
322
+
323
+ .slider #slide01:checked~label[for=slide02]:before {
324
+
325
+ content:">";
326
+
327
+ font-weight: bold;
328
+
329
+ font-size:50px;
330
+
331
+ }
332
+
333
+ .slider #slide02:checked~.slider__content {
334
+
335
+ -webkit-transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
336
+
337
+ transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
338
+
339
+ }
340
+
341
+ .slider #slide02:checked~label[for=slide01] {
342
+
343
+ left:0;
344
+
345
+ display:block;
346
+
347
+ }
348
+
349
+ .slider #slide02:checked~label[for=slide01]:before {
350
+
351
+ content:"<";
352
+
353
+ font-weight: bold;
354
+
355
+ font-size:50px;
356
+
357
+ }
358
+
359
+ .slider #slide02:checked~label[for=slide03] {
360
+
361
+ right:0;
362
+
363
+ display:block;
364
+
365
+ }
366
+
367
+ .slider #slide02:checked~label[for=slide03]:before {
368
+
369
+ content:">";
370
+
371
+ font-weight: bold;
372
+
373
+ font-size:50px;
374
+
375
+
376
+
377
+ }
378
+
379
+ .slider #slide03:checked~.slider__content {
380
+
381
+ -webkit-transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
382
+
383
+ transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
384
+
385
+ }
386
+
387
+ .slider #slide03:checked~label[for=slide02] {
388
+
389
+ left:0;
390
+
391
+ display:block;
392
+
393
+ }
394
+
395
+ .slider #slide03:checked~label[for=slide02]:before {
396
+
397
+ content:"<";
398
+
399
+ font-weight: bold;
400
+
401
+ font-size:50px;
402
+
403
+
404
+
405
+ }
406
+
407
+ .slider #slide03:checked~label[for=slide04] {
408
+
409
+ right:0;
410
+
411
+ display:block;
412
+
413
+ }
414
+
415
+ .slider #slide03:checked~label[for=slide04]:before {
416
+
417
+ content:">";
418
+
419
+ font-weight: bold;
420
+
421
+ font-size:50px;
422
+
423
+
424
+
425
+ }
426
+
427
+ .slider #slide04:checked~.slider__content {
428
+
429
+ -webkit-transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
430
+
431
+ transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
432
+
433
+ }
434
+
435
+ .slider #slide04:checked~label[for=slide03] {
436
+
437
+ left:0;
438
+
439
+ display:block;
440
+
441
+ }
442
+
443
+ .slider #slide04:checked~label[for=slide03]:before {
444
+
445
+ content:"<";
446
+
447
+ font-weight: bold;
448
+
449
+ font-size:50px;
450
+
451
+
452
+
453
+ }
454
+
455
+ .slider #slide04:checked~label[for=slide05] {
456
+
457
+ right:0;
458
+
459
+ display:block;
460
+
461
+ }
462
+
463
+ .slider #slide04:checked~label[for=slide05]:before {
464
+
465
+ content:">";
466
+
467
+ font-weight: bold;
468
+
469
+ font-size:50px;
470
+
471
+
472
+
473
+ }
474
+
475
+ .slider #slide05:checked~.slider__content {
476
+
477
+ -webkit-transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
478
+
479
+ transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
480
+
481
+ }
482
+
483
+ .slider #slide05:checked~label[for=slide04] {
484
+
485
+ left:0;
486
+
487
+ display:block;
488
+
489
+ }
490
+
491
+ .slider #slide05:checked~label[for=slide04]:before {
492
+
493
+ content:"<";
494
+
495
+ font-weight: bold;
496
+
497
+ font-size:50px;
498
+
499
+
500
+
501
+ }
502
+
503
+ .slider #slide05:checked~label[for=slide06] {
504
+
505
+ right:0;
506
+
507
+ display:block;
508
+
509
+ }
510
+
511
+ .slider #slide05:checked~label[for=slide06]:before {
512
+
513
+ content:">";
514
+
515
+ font-weight: bold;
516
+
517
+ font-size:50px;
518
+
519
+
520
+
521
+ }
522
+
523
+
524
+
525
+ .slider__content__item_ {
526
+
527
+ -webkit-justify-content: center;
528
+
529
+ justify-content: center;
530
+
531
+ -webkit-align-items: center;
532
+
533
+ display: -webkit-flex;
534
+
535
+ -ms-justify-content: center;
536
+
537
+ -ms-align-items: center;
538
+
539
+ display: -ms-flex;
540
+
541
+ display: flex; /* flexコンテナ化 */
542
+
543
+ font-size:42px;
544
+
545
+ font-weight:bold;
234
546
 
235
547
  text-align:center;
236
548
 
237
- z-index:1000;
238
-
239
- cursor:pointer;
240
-
241
- -webkit-transform:translate(0, -50%);
242
-
243
- -ms-transform:translate(0, -50%);
244
-
245
- transform:translate(0, -50%);
246
-
247
- display:none;
248
-
249
- font:normal normal normal 14px/1 FontAwesome;
250
-
251
- text-rendering:auto;
252
-
253
- -webkit-font-smoothing:antialiased;
254
-
255
- -moz-osx-font-smoothing:grayscale;
256
-
257
- -webkit-transition:opacity .25s ease-out;
258
-
259
- transition:opacity .25s ease-out;
260
-
261
- }
262
-
263
- .slider>label:hover {
264
-
265
- opacity:.5;
266
-
267
- filter:alpha(opacity=50);
268
-
269
- }
270
-
271
- .slider__content {
272
-
273
- width: 1900%;
274
-
275
- display:inline-flex;
276
-
277
- -webkit-transition:-webkit-transform .5s ease-out;
278
-
279
- transition:transform .5s ease-out;
280
-
281
- }
282
-
283
- .slider__content__item {
284
-
285
- flex: 1 1 0; /* 各スライドの横幅を均等に */
286
-
287
- }
288
-
289
- .slider__content__item_ {
290
-
291
- flex: 1 1 0 /* 各スライドの横幅を均等に */
292
-
293
- }
294
-
295
- .slider #slide01:checked~.slider__content {
296
-
297
- -webkit-transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
298
-
299
- transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
300
-
301
- }
302
-
303
- .slider #slide01:checked~label[for=slide00] {
304
-
305
- left:0;
306
-
307
- display:block;
308
-
309
- }
310
-
311
- .slider #slide01:checked~label[for=slide00]:before {
312
-
313
- content:"<";
314
-
315
- font-weight: bold;
316
-
317
- font-size:50px;
318
-
319
- }
320
-
321
- .slider #slide01:checked~label[for=slide02] {
322
-
323
- right:0;
324
-
325
- display:block;
326
-
327
- }
328
-
329
- .slider #slide01:checked~label[for=slide02]:before {
330
-
331
- content:">";
332
-
333
- font-weight: bold;
334
-
335
- font-size:50px;
336
-
337
- }
338
-
339
- .slider #slide02:checked~.slider__content {
340
-
341
- -webkit-transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
342
-
343
- transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
344
-
345
- }
346
-
347
- .slider #slide02:checked~label[for=slide01] {
348
-
349
- left:0;
350
-
351
- display:block;
352
-
353
- }
354
-
355
- .slider #slide02:checked~label[for=slide01]:before {
356
-
357
- content:"<";
358
-
359
- font-weight: bold;
360
-
361
- font-size:50px;
362
-
363
- }
364
-
365
- .slider #slide02:checked~label[for=slide03] {
366
-
367
- right:0;
368
-
369
- display:block;
370
-
371
- }
372
-
373
- .slider #slide02:checked~label[for=slide03]:before {
374
-
375
- content:">";
376
-
377
- font-weight: bold;
378
-
379
- font-size:50px;
380
-
381
-
382
-
383
- }
384
-
385
- .slider #slide03:checked~.slider__content {
386
-
387
- -webkit-transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
388
-
389
- transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
390
-
391
- }
392
-
393
- .slider #slide03:checked~label[for=slide02] {
394
-
395
- left:0;
396
-
397
- display:block;
398
-
399
- }
400
-
401
- .slider #slide03:checked~label[for=slide02]:before {
402
-
403
- content:"<";
404
-
405
- font-weight: bold;
406
-
407
- font-size:50px;
408
-
409
-
410
-
411
- }
412
-
413
- .slider #slide03:checked~label[for=slide04] {
414
-
415
- right:0;
416
-
417
- display:block;
418
-
419
- }
420
-
421
- .slider #slide03:checked~label[for=slide04]:before {
422
-
423
- content:">";
424
-
425
- font-weight: bold;
426
-
427
- font-size:50px;
428
-
429
-
430
-
431
- }
432
-
433
- .slider #slide04:checked~.slider__content {
434
-
435
- -webkit-transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
436
-
437
- transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
438
-
439
- }
440
-
441
- .slider #slide04:checked~label[for=slide03] {
442
-
443
- left:0;
444
-
445
- display:block;
446
-
447
- }
448
-
449
- .slider #slide04:checked~label[for=slide03]:before {
450
-
451
- content:"<";
452
-
453
- font-weight: bold;
454
-
455
- font-size:50px;
456
-
457
-
458
-
459
- }
460
-
461
- .slider #slide04:checked~label[for=slide05] {
462
-
463
- right:0;
464
-
465
- display:block;
466
-
467
- }
468
-
469
- .slider #slide04:checked~label[for=slide05]:before {
470
-
471
- content:">";
472
-
473
- font-weight: bold;
474
-
475
- font-size:50px;
476
-
477
-
478
-
479
- }
480
-
481
- .slider #slide05:checked~.slider__content {
482
-
483
- -webkit-transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
484
-
485
- transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
486
-
487
- }
488
-
489
- .slider #slide05:checked~label[for=slide04] {
490
-
491
- left:0;
492
-
493
- display:block;
494
-
495
- }
496
-
497
- .slider #slide05:checked~label[for=slide04]:before {
498
-
499
- content:"<";
500
-
501
- font-weight: bold;
502
-
503
- font-size:50px;
504
-
505
-
506
-
507
- }
508
-
509
- .slider #slide05:checked~label[for=slide06] {
510
-
511
- right:0;
512
-
513
- display:block;
514
-
515
- }
516
-
517
- .slider #slide05:checked~label[for=slide06]:before {
518
-
519
- content:">";
520
-
521
- font-weight: bold;
522
-
523
- font-size:50px;
524
-
525
-
526
-
527
- }
528
-
529
-
530
-
531
- .slider__content__item_ {
532
-
533
- -webkit-justify-content: center;
534
-
535
- justify-content: center;
536
-
537
- -webkit-align-items: center;
538
-
539
- display: -webkit-flex;
540
-
541
- -ms-justify-content: center;
542
-
543
- -ms-align-items: center;
544
-
545
- display: -ms-flex;
546
-
547
- display: flex; /* flexコンテナ化 */
548
-
549
- font-size:42px;
549
+ }
550
+
551
+
552
+
553
+ h2 {
554
+
555
+ margin:20px 0 15px 60px;
556
+
557
+ color:#47A095;
558
+
559
+ }
560
+
561
+
562
+
563
+ .text_p1 {
564
+
565
+ margin:0 60px 20px 60px;
566
+
567
+ font-size:24px;
550
568
 
551
569
  font-weight:bold;
552
570
 
553
- text-align:center;
554
-
555
- }
556
-
557
-
558
-
559
- h2 {
560
-
561
- margin:20px 0 15px 60px;
562
-
563
- color:#47A095;
564
-
565
- }
566
-
567
-
568
-
569
- .text_p1 {
570
-
571
- margin:0 60px 20px 60px;
572
-
573
- font-size:24px;
574
-
575
- font-weight:bold;
576
-
577
571
  }
578
572
 
579
573
 

1

変更

2018/07/17 08:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -140,57 +140,417 @@
140
140
 
141
141
 
142
142
 
143
- #sub_box {
144
-
145
- width:100%;
146
-
147
- }
148
-
149
-
150
-
151
- #sub_box .slider__content__item {
152
-
153
- width:95%;
154
-
155
- border: 1px solid #000;
156
-
157
- margin:auto;
158
-
159
- margin-bottom:40px;
160
-
161
- }
162
-
163
-
164
-
165
- #sub_box .slider__content__item_ {
166
-
167
- width:95%;
168
-
169
- margin:auto;
170
-
171
- font-size:36px;
172
-
173
- padding-top:10px;
174
-
175
- padding-bottom:10px;
176
-
177
- color:#FFF;
178
-
179
- width:94%;
180
-
181
- padding-right:3%;
182
-
183
- padding-left:3%;
184
-
185
- font-size:30px;
186
-
187
- background:#9ABB48;
188
-
189
- background-position: bottom left, bottom right, top right, top left;
190
-
191
- background-repeat: no-repeat;
192
-
193
- margin-bottom:20px;
143
+ .container {
144
+
145
+ -webkit-perspective:100px;
146
+
147
+ perspective:100px;
148
+
149
+ height:40vh;
150
+
151
+ background-size:cover;
152
+
153
+ position:relative;
154
+
155
+ }
156
+
157
+ .slider {
158
+
159
+ opacity:.8;
160
+
161
+ filter:alpha(opacity=80);
162
+
163
+ border: solid 10px #43A1E1;
164
+
165
+ -moz-box-sizing: border-box;
166
+
167
+ -webkit-box-sizing: border-box;
168
+
169
+ -o-box-sizing: border-box;
170
+
171
+ -ms-box-sizing: border-box;
172
+
173
+ box-sizing: border-box;
174
+
175
+ width:600px;
176
+
177
+ height:400px;
178
+
179
+ overflow:hidden;
180
+
181
+ position:absolute;
182
+
183
+ left:50%;
184
+
185
+ top:70%;
186
+
187
+ -webkit-transform:translate(-50%, -50%);
188
+
189
+ -ms-transform:translate(-50%, -50%);
190
+
191
+ transform:translate(-50%, -50%);
192
+
193
+ }
194
+
195
+ .slider>input {
196
+
197
+ position:absolute;
198
+
199
+ width:0;
200
+
201
+ height:0;
202
+
203
+ top:0;
204
+
205
+ left:0;
206
+
207
+ visibility:hidden;
208
+
209
+ opacity:0;
210
+
211
+ filter:alpha(opacity=0);
212
+
213
+ }
214
+
215
+ .slider>label {
216
+
217
+ position:absolute;
218
+
219
+ top:50%;
220
+
221
+ -webkit-transform:translate(-100%, -50%);
222
+
223
+ -ms-transform:translate(-100%, -50%);
224
+
225
+ transform:translate(-100%, -50%);
226
+
227
+ display:block;;
228
+
229
+ width:50px;
230
+
231
+ height:50px;
232
+
233
+ line-height:50px;
234
+
235
+ text-align:center;
236
+
237
+ z-index:1000;
238
+
239
+ cursor:pointer;
240
+
241
+ -webkit-transform:translate(0, -50%);
242
+
243
+ -ms-transform:translate(0, -50%);
244
+
245
+ transform:translate(0, -50%);
246
+
247
+ display:none;
248
+
249
+ font:normal normal normal 14px/1 FontAwesome;
250
+
251
+ text-rendering:auto;
252
+
253
+ -webkit-font-smoothing:antialiased;
254
+
255
+ -moz-osx-font-smoothing:grayscale;
256
+
257
+ -webkit-transition:opacity .25s ease-out;
258
+
259
+ transition:opacity .25s ease-out;
260
+
261
+ }
262
+
263
+ .slider>label:hover {
264
+
265
+ opacity:.5;
266
+
267
+ filter:alpha(opacity=50);
268
+
269
+ }
270
+
271
+ .slider__content {
272
+
273
+ width: 1900%;
274
+
275
+ display:inline-flex;
276
+
277
+ -webkit-transition:-webkit-transform .5s ease-out;
278
+
279
+ transition:transform .5s ease-out;
280
+
281
+ }
282
+
283
+ .slider__content__item {
284
+
285
+ flex: 1 1 0; /* 各スライドの横幅を均等に */
286
+
287
+ }
288
+
289
+ .slider__content__item_ {
290
+
291
+ flex: 1 1 0 /* 各スライドの横幅を均等に */
292
+
293
+ }
294
+
295
+ .slider #slide01:checked~.slider__content {
296
+
297
+ -webkit-transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
298
+
299
+ transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
300
+
301
+ }
302
+
303
+ .slider #slide01:checked~label[for=slide00] {
304
+
305
+ left:0;
306
+
307
+ display:block;
308
+
309
+ }
310
+
311
+ .slider #slide01:checked~label[for=slide00]:before {
312
+
313
+ content:"<";
314
+
315
+ font-weight: bold;
316
+
317
+ font-size:50px;
318
+
319
+ }
320
+
321
+ .slider #slide01:checked~label[for=slide02] {
322
+
323
+ right:0;
324
+
325
+ display:block;
326
+
327
+ }
328
+
329
+ .slider #slide01:checked~label[for=slide02]:before {
330
+
331
+ content:">";
332
+
333
+ font-weight: bold;
334
+
335
+ font-size:50px;
336
+
337
+ }
338
+
339
+ .slider #slide02:checked~.slider__content {
340
+
341
+ -webkit-transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
342
+
343
+ transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
344
+
345
+ }
346
+
347
+ .slider #slide02:checked~label[for=slide01] {
348
+
349
+ left:0;
350
+
351
+ display:block;
352
+
353
+ }
354
+
355
+ .slider #slide02:checked~label[for=slide01]:before {
356
+
357
+ content:"<";
358
+
359
+ font-weight: bold;
360
+
361
+ font-size:50px;
362
+
363
+ }
364
+
365
+ .slider #slide02:checked~label[for=slide03] {
366
+
367
+ right:0;
368
+
369
+ display:block;
370
+
371
+ }
372
+
373
+ .slider #slide02:checked~label[for=slide03]:before {
374
+
375
+ content:">";
376
+
377
+ font-weight: bold;
378
+
379
+ font-size:50px;
380
+
381
+
382
+
383
+ }
384
+
385
+ .slider #slide03:checked~.slider__content {
386
+
387
+ -webkit-transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
388
+
389
+ transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
390
+
391
+ }
392
+
393
+ .slider #slide03:checked~label[for=slide02] {
394
+
395
+ left:0;
396
+
397
+ display:block;
398
+
399
+ }
400
+
401
+ .slider #slide03:checked~label[for=slide02]:before {
402
+
403
+ content:"<";
404
+
405
+ font-weight: bold;
406
+
407
+ font-size:50px;
408
+
409
+
410
+
411
+ }
412
+
413
+ .slider #slide03:checked~label[for=slide04] {
414
+
415
+ right:0;
416
+
417
+ display:block;
418
+
419
+ }
420
+
421
+ .slider #slide03:checked~label[for=slide04]:before {
422
+
423
+ content:">";
424
+
425
+ font-weight: bold;
426
+
427
+ font-size:50px;
428
+
429
+
430
+
431
+ }
432
+
433
+ .slider #slide04:checked~.slider__content {
434
+
435
+ -webkit-transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
436
+
437
+ transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
438
+
439
+ }
440
+
441
+ .slider #slide04:checked~label[for=slide03] {
442
+
443
+ left:0;
444
+
445
+ display:block;
446
+
447
+ }
448
+
449
+ .slider #slide04:checked~label[for=slide03]:before {
450
+
451
+ content:"<";
452
+
453
+ font-weight: bold;
454
+
455
+ font-size:50px;
456
+
457
+
458
+
459
+ }
460
+
461
+ .slider #slide04:checked~label[for=slide05] {
462
+
463
+ right:0;
464
+
465
+ display:block;
466
+
467
+ }
468
+
469
+ .slider #slide04:checked~label[for=slide05]:before {
470
+
471
+ content:">";
472
+
473
+ font-weight: bold;
474
+
475
+ font-size:50px;
476
+
477
+
478
+
479
+ }
480
+
481
+ .slider #slide05:checked~.slider__content {
482
+
483
+ -webkit-transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
484
+
485
+ transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
486
+
487
+ }
488
+
489
+ .slider #slide05:checked~label[for=slide04] {
490
+
491
+ left:0;
492
+
493
+ display:block;
494
+
495
+ }
496
+
497
+ .slider #slide05:checked~label[for=slide04]:before {
498
+
499
+ content:"<";
500
+
501
+ font-weight: bold;
502
+
503
+ font-size:50px;
504
+
505
+
506
+
507
+ }
508
+
509
+ .slider #slide05:checked~label[for=slide06] {
510
+
511
+ right:0;
512
+
513
+ display:block;
514
+
515
+ }
516
+
517
+ .slider #slide05:checked~label[for=slide06]:before {
518
+
519
+ content:">";
520
+
521
+ font-weight: bold;
522
+
523
+ font-size:50px;
524
+
525
+
526
+
527
+ }
528
+
529
+
530
+
531
+ .slider__content__item_ {
532
+
533
+ -webkit-justify-content: center;
534
+
535
+ justify-content: center;
536
+
537
+ -webkit-align-items: center;
538
+
539
+ display: -webkit-flex;
540
+
541
+ -ms-justify-content: center;
542
+
543
+ -ms-align-items: center;
544
+
545
+ display: -ms-flex;
546
+
547
+ display: flex; /* flexコンテナ化 */
548
+
549
+ font-size:42px;
550
+
551
+ font-weight:bold;
552
+
553
+ text-align:center;
194
554
 
195
555
  }
196
556
 
@@ -198,7 +558,7 @@
198
558
 
199
559
  h2 {
200
560
 
201
- margin:20px 0 15px 20px;
561
+ margin:20px 0 15px 60px;
202
562
 
203
563
  color:#47A095;
204
564
 
@@ -206,472 +566,14 @@
206
566
 
207
567
 
208
568
 
209
- #sub_box .slider__content__item_ .text_p1 {
210
-
211
- width:91%;
212
-
213
- margin:4%;
214
-
215
- }
216
-
217
-
218
-
219
- #sub_box .slider__content__item .text_p1 {
220
-
221
- width:91%;
222
-
223
- margin:4%;
224
-
225
- }
226
-
227
-
228
-
229
- #sub_box .slider__content__item .text_p2 {
230
-
231
- width:91%;
232
-
233
- margin:4%;
234
-
235
- }
236
-
237
-
238
-
239
- }
240
-
241
- .container {
569
+ .text_p1 {
242
-
243
- -webkit-perspective:100px;
570
+
244
-
245
- perspective:100px;
246
-
247
- height:40vh;
248
-
249
- background-size:cover;
250
-
251
- position:relative;
252
-
253
- }
254
-
255
- .slider {
256
-
257
- opacity:.8;
258
-
259
- filter:alpha(opacity=80);
260
-
261
- border: solid 10px #43A1E1;
571
+ margin:0 60px 20px 60px;
262
-
263
- -moz-box-sizing: border-box;
572
+
264
-
265
- -webkit-box-sizing: border-box;
266
-
267
- -o-box-sizing: border-box;
268
-
269
- -ms-box-sizing: border-box;
270
-
271
- box-sizing: border-box;
272
-
273
- width:600px;
274
-
275
- height:400px;
276
-
277
- overflow:hidden;
278
-
279
- position:absolute;
280
-
281
- left:50%;
282
-
283
- top:70%;
284
-
285
- -webkit-transform:translate(-50%, -50%);
286
-
287
- -ms-transform:translate(-50%, -50%);
288
-
289
- transform:translate(-50%, -50%);
290
-
291
- }
292
-
293
- .slider>input {
294
-
295
- position:absolute;
296
-
297
- width:0;
298
-
299
- height:0;
300
-
301
- top:0;
302
-
303
- left:0;
304
-
305
- visibility:hidden;
306
-
307
- opacity:0;
308
-
309
- filter:alpha(opacity=0);
310
-
311
- }
312
-
313
- .slider>label {
314
-
315
- position:absolute;
316
-
317
- top:50%;
318
-
319
- -webkit-transform:translate(-100%, -50%);
320
-
321
- -ms-transform:translate(-100%, -50%);
322
-
323
- transform:translate(-100%, -50%);
324
-
325
- display:block;;
326
-
327
- width:50px;
328
-
329
- height:50px;
330
-
331
- line-height:50px;
332
-
333
- text-align:center;
334
-
335
- z-index:1000;
336
-
337
- cursor:pointer;
338
-
339
- -webkit-transform:translate(0, -50%);
340
-
341
- -ms-transform:translate(0, -50%);
342
-
343
- transform:translate(0, -50%);
344
-
345
- display:none;
346
-
347
- font:normal normal normal 14px/1 FontAwesome;
348
-
349
- text-rendering:auto;
350
-
351
- -webkit-font-smoothing:antialiased;
352
-
353
- -moz-osx-font-smoothing:grayscale;
354
-
355
- -webkit-transition:opacity .25s ease-out;
356
-
357
- transition:opacity .25s ease-out;
358
-
359
- }
360
-
361
- .slider>label:hover {
362
-
363
- opacity:.5;
364
-
365
- filter:alpha(opacity=50);
366
-
367
- }
368
-
369
- .slider__content {
370
-
371
- width: 1900%;
372
-
373
- display:inline-flex;
374
-
375
- -webkit-transition:-webkit-transform .5s ease-out;
376
-
377
- transition:transform .5s ease-out;
378
-
379
- }
380
-
381
- .slider__content__item {
382
-
383
- flex: 1 1 0; /* 各スライドの横幅を均等に */
384
-
385
- }
386
-
387
- .slider__content__item_ {
388
-
389
- flex: 1 1 0 /* 各スライドの横幅を均等に */
390
-
391
- }
392
-
393
- .slider #slide01:checked~.slider__content {
394
-
395
- -webkit-transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
396
-
397
- transform:translate3d( calc( -100% / 19 * 0 ), 0, 0);
398
-
399
- }
400
-
401
- .slider #slide01:checked~label[for=slide00] {
402
-
403
- left:0;
404
-
405
- display:block;
406
-
407
- }
408
-
409
- .slider #slide01:checked~label[for=slide00]:before {
410
-
411
- content:"<";
412
-
413
- font-weight: bold;
414
-
415
- font-size:50px;
573
+ font-size:24px;
416
-
417
- }
418
-
419
- .slider #slide01:checked~label[for=slide02] {
420
-
421
- right:0;
422
-
423
- display:block;
424
-
425
- }
426
-
427
- .slider #slide01:checked~label[for=slide02]:before {
428
-
429
- content:">";
430
-
431
- font-weight: bold;
432
-
433
- font-size:50px;
434
-
435
- }
436
-
437
- .slider #slide02:checked~.slider__content {
438
-
439
- -webkit-transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
440
-
441
- transform:translate3d( calc( -100% / 19 * 1 ), 0, 0);
442
-
443
- }
444
-
445
- .slider #slide02:checked~label[for=slide01] {
446
-
447
- left:0;
448
-
449
- display:block;
450
-
451
- }
452
-
453
- .slider #slide02:checked~label[for=slide01]:before {
454
-
455
- content:"<";
456
-
457
- font-weight: bold;
458
-
459
- font-size:50px;
460
-
461
- }
462
-
463
- .slider #slide02:checked~label[for=slide03] {
464
-
465
- right:0;
466
-
467
- display:block;
468
-
469
- }
470
-
471
- .slider #slide02:checked~label[for=slide03]:before {
472
-
473
- content:">";
474
-
475
- font-weight: bold;
476
-
477
- font-size:50px;
478
-
479
-
480
-
481
- }
482
-
483
- .slider #slide03:checked~.slider__content {
484
-
485
- -webkit-transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
486
-
487
- transform:translate3d( calc( -100% / 19 * 2 ), 0, 0);
488
-
489
- }
490
-
491
- .slider #slide03:checked~label[for=slide02] {
492
-
493
- left:0;
494
-
495
- display:block;
496
-
497
- }
498
-
499
- .slider #slide03:checked~label[for=slide02]:before {
500
-
501
- content:"<";
502
-
503
- font-weight: bold;
504
-
505
- font-size:50px;
506
-
507
-
508
-
509
- }
510
-
511
- .slider #slide03:checked~label[for=slide04] {
512
-
513
- right:0;
514
-
515
- display:block;
516
-
517
- }
518
-
519
- .slider #slide03:checked~label[for=slide04]:before {
520
-
521
- content:">";
522
-
523
- font-weight: bold;
524
-
525
- font-size:50px;
526
-
527
-
528
-
529
- }
530
-
531
- .slider #slide04:checked~.slider__content {
532
-
533
- -webkit-transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
534
-
535
- transform:translate3d( calc( -100% / 19 * 3 ), 0, 0);
536
-
537
- }
538
-
539
- .slider #slide04:checked~label[for=slide03] {
540
-
541
- left:0;
542
-
543
- display:block;
544
-
545
- }
546
-
547
- .slider #slide04:checked~label[for=slide03]:before {
548
-
549
- content:"<";
550
-
551
- font-weight: bold;
552
-
553
- font-size:50px;
554
-
555
-
556
-
557
- }
558
-
559
- .slider #slide04:checked~label[for=slide05] {
560
-
561
- right:0;
562
-
563
- display:block;
564
-
565
- }
566
-
567
- .slider #slide04:checked~label[for=slide05]:before {
568
-
569
- content:">";
570
-
571
- font-weight: bold;
572
-
573
- font-size:50px;
574
-
575
-
576
-
577
- }
578
-
579
- .slider #slide05:checked~.slider__content {
580
-
581
- -webkit-transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
582
-
583
- transform:translate3d( calc( -100% / 19 * 4 ), 0, 0);
584
-
585
- }
586
-
587
- .slider #slide05:checked~label[for=slide04] {
588
-
589
- left:0;
590
-
591
- display:block;
592
-
593
- }
594
-
595
- .slider #slide05:checked~label[for=slide04]:before {
596
-
597
- content:"<";
598
-
599
- font-weight: bold;
600
-
601
- font-size:50px;
602
-
603
-
604
-
605
- }
606
-
607
- .slider #slide05:checked~label[for=slide06] {
608
-
609
- right:0;
610
-
611
- display:block;
612
-
613
- }
614
-
615
- .slider #slide05:checked~label[for=slide06]:before {
616
-
617
- content:">";
618
-
619
- font-weight: bold;
620
-
621
- font-size:50px;
622
-
623
-
624
-
625
- }
626
-
627
-
628
-
629
- .slider__content__item_ {
630
-
631
- -webkit-justify-content: center;
632
-
633
- justify-content: center;
634
-
635
- -webkit-align-items: center;
636
-
637
- display: -webkit-flex;
638
-
639
- -ms-justify-content: center;
640
-
641
- -ms-align-items: center;
642
-
643
- display: -ms-flex;
644
-
645
- display: flex; /* flexコンテナ化 */
646
-
647
- font-size:42px;
648
574
 
649
575
  font-weight:bold;
650
576
 
651
- text-align:center;
652
-
653
- }
654
-
655
-
656
-
657
- h2 {
658
-
659
- margin:20px 0 15px 60px;
660
-
661
- color:#47A095;
662
-
663
- }
664
-
665
-
666
-
667
- .text_p1 {
668
-
669
- margin:0 60px 20px 60px;
670
-
671
- font-size:24px;
672
-
673
- font-weight:bold;
674
-
675
577
  }
676
578
 
677
579