KuniakiTakenaka hace 2 años
padre
commit
3e152785d8
Se han modificado 100 ficheros con 34669 adiciones y 11167 borrados
  1. 1435
    552
      cgi-bin/mail/webform_.cgi
  2. 1435
    551
      cgi-bin/mail/webform_accounting.cgi
  3. 1435
    552
      cgi-bin/mail/webform_administration.cgi
  4. 1435
    551
      cgi-bin/mail/webform_disaster_prevention.cgi
  5. 1435
    552
      cgi-bin/mail/webform_disaster_prevention_.cgi
  6. 1435
    551
      cgi-bin/mail/webform_education.cgi
  7. 1435
    553
      cgi-bin/mail/webform_health.cgi
  8. 1435
    551
      cgi-bin/mail/webform_hoken.cgi
  9. 1435
    551
      cgi-bin/mail/webform_houkatu.cgi
  10. 1435
    552
      cgi-bin/mail/webform_library.cgi
  11. 1435
    552
      cgi-bin/mail/webform_lifelong_learning.cgi
  12. 1435
    551
      cgi-bin/mail/webform_parliament.cgi
  13. 1435
    551
      cgi-bin/mail/webform_policy.cgi
  14. 1435
    551
      cgi-bin/mail/webform_residents.cgi
  15. 1435
    552
      cgi-bin/mail/webform_storage.cgi
  16. 1435
    551
      cgi-bin/mail/webform_tax.cgi
  17. 1435
    551
      cgi-bin/mail/webform_urban.cgi
  18. 1435
    552
      cgi-bin/mail/webform_water.cgi
  19. 1435
    552
      cgi-bin/mail/webform_welfare.cgi
  20. 19
    0
      css/alone_mobile.css
  21. 18
    5
      css/bannerInclude.css
  22. 16
    1
      css/base.css
  23. 6
    0
      css/border.css
  24. 8
    0
      css/border_mobile.css
  25. 10
    0
      css/calender_mobile.css
  26. 44
    0
      css/culture_mobile.css
  27. 83
    18
      css/footer.css
  28. 119
    0
      css/footer_mobile.css
  29. 7
    0
      css/googleMap.css
  30. 7
    0
      css/googleMap_mobile.css
  31. 337
    47
      css/header.css
  32. 526
    0
      css/header_mobile.css
  33. 1451
    0
      css/header_pc.css
  34. 98
    0
      css/image.css
  35. 99
    0
      css/image_mobile.css
  36. BIN
      css/img/aboutCoronavirus.png
  37. BIN
      css/img/backgroundm1.png
  38. BIN
      css/img/backgroundm2.png
  39. BIN
      css/img/backgroundm3.png
  40. BIN
      css/img/mayorRoom/Room_of_the_mayor.png
  41. BIN
      css/img/mayorRoom/emergency.png
  42. BIN
      css/img/mayorRoom/kawasemi-stools2.png
  43. BIN
      css/img/mayorRoom/kitagata_gikai02.png
  44. BIN
      css/img/mayorRoom/kouhoukitagata.png
  45. BIN
      css/img/sample/Calendar_banner.png
  46. BIN
      css/img/sample/DisasterPrevention.png
  47. BIN
      css/img/sample/Icon_awesome-female.png
  48. BIN
      css/img/sample/Icon_awesome-home.png
  49. BIN
      css/img/sample/Icon_awesome-male.png
  50. BIN
      css/img/sample/academy_concept.png
  51. BIN
      css/img/sample/background1.png
  52. BIN
      css/img/sample/background2.png
  53. BIN
      css/img/sample/background3.png
  54. BIN
      css/img/sample/corona_blueBanner.png
  55. BIN
      css/img/sample/corona_greenBanner.png
  56. BIN
      css/img/sample/corona_whiteBlueBanner.png
  57. BIN
      css/img/sample/corona_yellowBanner.png
  58. BIN
      css/img/sample/familyIcon.png
  59. BIN
      css/img/sample/header_logo.png
  60. BIN
      css/img/sample/hometownTax.png
  61. BIN
      css/img/sample/infoTitle_banner.png
  62. BIN
      css/img/sample/infoTitle_list.png
  63. BIN
      css/img/sample/kawasemiLetter.png
  64. BIN
      css/img/sample/kawasemi_backNumber.png
  65. BIN
      css/img/sample/kitagataTown_headerLogo.png
  66. BIN
      css/img/sample/kitagatabanner5.png
  67. BIN
      css/img/sample/kitagatakids_banner01.png
  68. BIN
      css/img/sample/kyouiku_iinkai_banner02.png
  69. BIN
      css/img/sample/logo_kitagata_green_S.png
  70. BIN
      css/img/sample/moveTokyo.png
  71. BIN
      css/img/sample/nuclearTown.png
  72. BIN
      css/img/sample/parliment.png
  73. BIN
      css/img/sample/publicKitagata.png
  74. BIN
      css/img/sample/publicSituation.png
  75. BIN
      css/img/sample/return_top.png
  76. BIN
      css/img/sample/seryuufes_2019.png
  77. BIN
      css/img/sample/townPresident.png
  78. 11
    0
      css/inquiry_mobile.css
  79. 12
    0
      css/link.css
  80. 11
    1
      css/map.css
  81. 142
    103
      css/mayor.css
  82. 157
    0
      css/mayor_mobile.css
  83. 150
    0
      css/notices_mobile.css
  84. 0
    0
      css/pageview_mobile.css
  85. BIN
      css/pdf/2seibikeikakusyo_2021.pdf
  86. 102
    0
      css/reset.css
  87. 141
    93
      css/school.css
  88. 31
    0
      css/school_mobile.css
  89. 295
    256
      css/second_body.css
  90. 641
    0
      css/second_body_mobile.css
  91. 529
    0
      css/second_header_mobile.css
  92. 4
    1
      css/second_template.css
  93. 186
    0
      css/second_template_mobile.css
  94. 1010
    44
      css/section_190212.css
  95. 171
    0
      css/section_mobile.css
  96. 131
    52
      css/slideme.css
  97. 631
    0
      css/style.css
  98. 127
    67
      css/table.css
  99. 74
    0
      css/table_mobile.css
  100. 0
    0
      css/third_template.css

+ 1435
- 552
cgi-bin/mail/webform_.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_accounting.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_administration.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_disaster_prevention.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_disaster_prevention_.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_education.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 553
cgi-bin/mail/webform_health.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_hoken.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_houkatu.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_library.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_lifelong_learning.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_parliament.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_policy.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_residents.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_storage.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_tax.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 551
cgi-bin/mail/webform_urban.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_water.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1435
- 552
cgi-bin/mail/webform_welfare.cgi
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 19
- 0
css/alone_mobile.css Ver fichero

@@ -0,0 +1,19 @@
1
+@charset "UTF-8";
2
+
3
+
4
+.alone__Listen_to_the_parliament {
5
+    border: #0b0b0b solid 2px;
6
+    padding: 5px;
7
+    margin: 5px;
8
+    font-size: large;
9
+}
10
+
11
+
12
+@media screen and (max-width: 768px) {
13
+    .alone__Listen_to_the_parliament {
14
+        display: block;
15
+    }
16
+}
17
+
18
+
19
+

+ 18
- 5
css/bannerInclude.css Ver fichero

@@ -1,9 +1,22 @@
1 1
 /* CSS Document */
2 2
 
3
-body#banner1{
4
-	width: 1000px;
3
+body#banner1 {
4
+    width: 1000px;
5 5
 }
6
-div.box{
7
-	margin-left: 110px;
8
-	margin-right:110px;
6
+
7
+.spaceImg {
8
+    width: 920px;
9
+    height: 32px;
9 10
 }
11
+
12
+/*@media screen and (max-width: 768px) {*/
13
+/*    .spaceImg {*/
14
+/*        display: none !important;*/
15
+/*    }*/
16
+/*}*/
17
+
18
+div.box {
19
+    margin-left: 110px;
20
+    margin-right: 110px;
21
+}
22
+

+ 16
- 1
css/base.css Ver fichero

@@ -41,7 +41,15 @@
41 41
 html {
42 42
     width: 100%;
43 43
     margin: 0 auto;
44
-    background-color: #ffffff;
44
+    /* background-color: #ffffff; */
45
+}
46
+
47
+html#html-back{
48
+    background-repeat: no-repeat;
49
+    background-attachment: fixed;
50
+    -o-background-size: cover;
51
+    -moz-background-size: cover;
52
+    -webkit-background-size: cover;
45 53
 }
46 54
 
47 55
 body {
@@ -81,6 +89,13 @@ div#main {
81 89
     padding: 10px 40px 40px 40px;
82 90
 }
83 91
 
92
+@media screen and (max-width: 768px) {
93
+    div#main {
94
+        width: 100%;
95
+        padding: 0;
96
+    }
97
+}
98
+
84 99
 .gothic {
85 100
     font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
86 101
 }

+ 6
- 0
css/border.css Ver fichero

@@ -0,0 +1,6 @@
1
+@charset "utf-8";
2
+
3
+.alien_border {
4
+    padding: 6px;
5
+    border: black 1px solid;
6
+}

+ 8
- 0
css/border_mobile.css Ver fichero

@@ -0,0 +1,8 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .alien_border {
5
+        padding: 0;
6
+        border: black 1px solid;
7
+    }
8
+}

+ 10
- 0
css/calender_mobile.css Ver fichero

@@ -0,0 +1,10 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .tab_content div.page {
5
+        width: 100%;
6
+        height: auto;
7
+        position: absolute;
8
+        color: #222;
9
+    }
10
+}

+ 44
- 0
css/culture_mobile.css Ver fichero

@@ -0,0 +1,44 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    /* template start */
5
+    article#template_list_title_2{
6
+        position: relative;
7
+        display: block;
8
+        width: 690px;
9
+        /*height: 460px;*/
10
+        margin: 0px 0px 0px 0px;
11
+        padding: 0px 10px 10px 10px;
12
+    }
13
+    div#template_title_2{
14
+        position: relative;
15
+        display: block;
16
+        width: 690px;
17
+        height: 32px;
18
+        margin: 0px 0px 0px 0px;
19
+        background-image: url(img/longbar2_secondfloor.png);
20
+    }
21
+    span#template_title_2{
22
+        display: table-cell;
23
+        width: 690px;
24
+        height: 32px;
25
+        font-size: 18px;
26
+        color: #000000;
27
+        vertical-align: middle;
28
+        font-weight:bold;
29
+    }
30
+    div#template_title_block_2{
31
+        position: relative;
32
+        display: block;
33
+        width: 680px;
34
+        margin: 0px 0px 0px 10px;
35
+    }
36
+    span#template_article_block_2 {
37
+        position: relative;
38
+        display: block;
39
+        width: 660px;
40
+        margin: 10px 0px 10px 10px;
41
+    }
42
+    /* template end */
43
+
44
+}

+ 83
- 18
css/footer.css Ver fichero

@@ -15,28 +15,93 @@
15 15
  */
16 16
 
17 17
 footer {
18
-	position: relative;
19
-	display: block;
20
-	width: 920px;
21
-	height: 110px;
22
-	bottom: 0px;
23
-	margin: 0px 10px 0px 0px;
24
-	padding: 0;
18
+    position: relative;
19
+    display: block;
20
+    width: 920px;
21
+    height: 110px;
22
+    bottom: 0px;
23
+    margin: 0px 10px 0px 0px;
24
+    padding: 0;
25 25
 }
26 26
 
27
-div.footer{
28
-	position: relative;
29
-	display: block;
30
-	width: 920px;
31
-	height: 80px;
27
+@media screen and (max-width: 768px) {
28
+    footer {
29
+        position: relative;
30
+        display: block;
31
+        width: calc(100% - 20px);
32
+        height: 240px;
33
+        margin: 2px auto 0px;
34
+        padding: 0;
35
+    }
32 36
 }
33 37
 
34
-p.footer_text{
35
-	margin:2px auto;
36
-	text-align:center;
37
-	font-size:12px;
38
+div.footer {
39
+    position: relative;
40
+    display: block;
41
+    width: 920px;
42
+    height: 80px;
38 43
 }
39 44
 
40
-p.footer_text a{
41
-	text-decoration:none;
45
+@media screen and (max-width: 768px) {
46
+    .footer_img {
47
+        display: none;
48
+    }
42 49
 }
50
+
51
+p.footer_text {
52
+    margin: 16px auto;
53
+    text-align: center;
54
+    font-size: 12px;
55
+}
56
+
57
+@media screen and (max-width: 768px) {
58
+    p.footer_text {
59
+        font-size: 8px;
60
+    }
61
+}
62
+
63
+p.footer_text a {
64
+    text-decoration: none;
65
+}
66
+
67
+/* footer モバイル用にクラス定義*/
68
+div.footer_mobile {
69
+    display: none;
70
+}
71
+
72
+@media screen and (max-width: 768px) {
73
+    div.footer_mobile {
74
+        display: block;
75
+    }
76
+
77
+    div.footer_mobile_title {
78
+        position: relative;
79
+        display: block;
80
+        width: calc(100% - 20px);
81
+        text-align: center;
82
+    }
83
+
84
+    img.footerImg__logo {
85
+        padding-left: 20px;
86
+    }
87
+
88
+    h1.footerMobile__text {
89
+        margin: 0 0 16px;
90
+        padding-left: 20px;
91
+        color: #109033;
92
+    }
93
+
94
+    div.footer_mobile_address {
95
+        position: relative;
96
+        display: block;
97
+        width: 100%;
98
+        text-align: center;
99
+        font-size: 15px;
100
+    }
101
+
102
+    .sp__brDisplay {
103
+        display: none;
104
+    }
105
+}
106
+
107
+/* footer ここまで */

+ 119
- 0
css/footer_mobile.css Ver fichero

@@ -0,0 +1,119 @@
1
+@charset "utf-8";
2
+
3
+/* ********************************************** 
4
+ * footer定義 css
5
+ * 
6
+ * 画面の大きさ・位置定義
7
+ * 
8
+ * 
9
+ ********************************************** */
10
+
11
+/* 
12
+ * 2014/02/26
13
+ * footer 大きさ定義
14
+ * 
15
+ */
16
+
17
+footer {
18
+    position: relative;
19
+    display: block;
20
+    width: 920px;
21
+    height: 110px;
22
+    bottom: 0px;
23
+    margin: 0px 10px 0px 0px;
24
+    padding: 0;
25
+}
26
+
27
+@media screen and (max-width: 768px) {
28
+    footer {
29
+        position: relative;
30
+        display: block;
31
+        width: calc(100% - 20px);
32
+        height: 240px;
33
+        margin: 2px auto 0px;
34
+        padding: 0;
35
+    }
36
+
37
+    .footer_pc {
38
+        display: none;
39
+    }
40
+}
41
+
42
+div.footer {
43
+    position: relative;
44
+    display: block;
45
+    width: 920px;
46
+    height: 80px;
47
+}
48
+
49
+@media screen and (max-width: 768px) {
50
+    .footer_img {
51
+        display: none;
52
+    }
53
+}
54
+
55
+p.footer_text {
56
+    margin: 16px auto;
57
+    text-align: center;
58
+    font-size: 12px;
59
+}
60
+
61
+@media screen and (max-width: 768px) {
62
+    p.footer_text {
63
+        font-size: 8px;
64
+    }
65
+}
66
+
67
+p.footer_text a {
68
+    text-decoration: none;
69
+}
70
+
71
+/* footer モバイル用にクラス定義*/
72
+div.footer_mobile {
73
+    display: none;
74
+}
75
+
76
+@media screen and (max-width: 768px) {
77
+    div.footer_mobile {
78
+        display: block;
79
+    }
80
+
81
+    div.footer_mobile_title {
82
+        position: relative;
83
+        display: block;
84
+        width: calc(100% - 20px);
85
+        text-align: center;
86
+    }
87
+
88
+    span.footerTextWrap__text{
89
+        font-size: 4vw;
90
+    }
91
+
92
+    img.footerImg__logo {
93
+        margin: 10px 6px;
94
+        width: 37px;
95
+        height: 37px;
96
+        object-fit: cover;
97
+    }
98
+
99
+    h1.footerMobile__text {
100
+        margin: 0 0 16px;
101
+        padding-left: 20px;
102
+        color: #109033;
103
+    }
104
+
105
+    div.footer_mobile_address {
106
+        position: relative;
107
+        display: block;
108
+        width: 100%;
109
+        text-align: center;
110
+        font-size: 15px;
111
+    }
112
+
113
+    .sp__brDisplay {
114
+        display: none;
115
+    }
116
+    
117
+}
118
+
119
+/* footer ここまで */

+ 7
- 0
css/googleMap.css Ver fichero

@@ -0,0 +1,7 @@
1
+@charset "utf-8";
2
+
3
+.googleMap {
4
+    width: 600px;
5
+    height: 450px;
6
+    border: 0;
7
+}

+ 7
- 0
css/googleMap_mobile.css Ver fichero

@@ -0,0 +1,7 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .googleMap_mobile {
5
+        width: 100%;
6
+    }
7
+}

+ 337
- 47
css/header.css Ver fichero

@@ -13,62 +13,352 @@
13 13
  * 
14 14
  */
15 15
 
16
-header {
17
-	position: relative;
18
-	display: block;
19
-	width: 200px;
20
-	height: 600px;
21
-	margin: 10px 10px 10px 0px;
22
-	background-image: url(img/header_background.png);
16
+header.pc__header {
17
+    position: relative;
18
+    display: block;
19
+    width: 200px;
20
+    height: 600px;
21
+    margin: 10px 10px 10px 0px;
22
+    background-image: url(img/header_background.png);
23 23
 }
24 24
 
25
-div#header{
26
-	position: absolute;
27
-	display: block;
28
-	top:0px;
25
+div#header {
26
+    position: absolute;
27
+    display: block;
28
+    top: 0px;
29 29
 }
30 30
 
31
-div#h_block_1{
32
-	position: relative;
33
-	display: block;
34
-	width: 200px;
35
-	height: 250px;
31
+div#h_block_1 {
32
+    position: relative;
33
+    display: block;
34
+    width: 200px;
35
+    height: 250px;
36 36
 }
37
-div#h_block_search{
38
-	position: relative;
39
-	display: block;
40
-	width: 200px;
41
-	height: 50px;
37
+
38
+div#h_block_search {
39
+    position: relative;
40
+    display: block;
41
+    width: 200px;
42
+    height: 50px;
42 43
 }
43
-div.h_line{
44
-	position: relative;
45
-	display: block;
46
-	width: 180px;
47
-	height: 0px;
48
-	margin: 0px 10px 0px 10px;
49
-	border-top: solid 2px #FFFFFF;
44
+
45
+div.h_line {
46
+    position: relative;
47
+    display: block;
48
+    width: 180px;
49
+    height: 0px;
50
+    margin: 0px 10px 0px 10px;
51
+    border-top: solid 2px #FFFFFF;
50 52
 }
51
-article.h_text_l{
52
-	position: relative;
53
-	display: block;
54
-	width: 150px;
55
-	height: 50px;
56
-	margin: 10px 10px 10px 30px;
53
+
54
+article.h_text_l {
55
+    position: relative;
56
+    display: block;
57
+    width: 150px;
58
+    height: 50px;
59
+    margin: 10px 10px 10px 30px;
57 60
 }
58
-span.h_text{
59
-	display: table-cell;
60
-	width: 180px;
61
-	height: 50px;
62
-	vertical-align: middle;
63
-	color: #ffffff;
64
-	font-size: 20px;
61
+
62
+span.h_text {
63
+    display: table-cell;
64
+    width: 180px;
65
+    height: 50px;
66
+    vertical-align: middle;
67
+    color: #ffffff;
68
+    font-size: 20px;
65 69
 }
66
-article.h_search{
67
-	position: relative;
68
-	display: block;
69
-	margin: 10px 0px 0px 10px;
70
+
71
+article.h_search {
72
+    position: relative;
73
+    display: block;
74
+    margin: 10px 0px 0px 10px;
70 75
 }
71 76
 
72 77
 a.h_link {
73
-	text-decoration: none;
74
-}
78
+    text-decoration: none;
79
+}
80
+
81
+.sp__header {
82
+    display: none;
83
+}
84
+
85
+/* ヘッダー レスポンシブ対応 */
86
+@media screen and (max-width: 768px) {
87
+    header.pc__header {
88
+        display: none;
89
+    }
90
+
91
+    .sp__header {
92
+        position: relative;
93
+        display: block;
94
+        width: 375px;
95
+        height: 56px;
96
+        background-color: #FFFFFF;
97
+    }
98
+
99
+    .sp__headerLogo {
100
+        padding: 10px 8px 8px 8px;
101
+        width: 80%;
102
+    }
103
+
104
+    .sp__headerLogoImg {
105
+        width: 100%;
106
+    }
107
+
108
+    /*ハンバーガーアイコンの作成 */
109
+    #h-menu {
110
+        position: absolute;
111
+        display: block;
112
+        width: 55px;
113
+        height: 56px;
114
+        top: 0px;
115
+        right: 0px;
116
+        background-color: #109033; /* アイコンの線の色 */
117
+    }
118
+
119
+    #h-menu span {
120
+        display: block;
121
+        position: absolute;
122
+        width: 23px;
123
+        height: 2px;
124
+        top: 36px;
125
+        left: 17px;
126
+        background: #ffffff;
127
+        -webkit-transition: 0.3s ease-in-out;
128
+        -moz-transition: 0.3s ease-in-out;
129
+        transition: 0.3s ease-in-out;
130
+    }
131
+
132
+    #h-menu span:nth-child(1) {
133
+        top: 14px;
134
+    }
135
+
136
+    #h-menu span:nth-child(2) {
137
+        top: 22px;
138
+    }
139
+
140
+    #h-menu span:nth-child(3) {
141
+        top: 30px;
142
+    }
143
+
144
+    /* ハンバーガーアイコン下のテキスト */
145
+    #h-text {
146
+        position: absolute;
147
+        width: 32px;
148
+        font-size: 6px;
149
+        color: #ffffff;
150
+        text-align: center;
151
+        top: 34px;
152
+        left: 12px;
153
+    }
154
+
155
+    /* メニュー */
156
+    nav {
157
+        background: #fff;
158
+        position: absolute;
159
+        z-index: 9;
160
+        top: 3.125rem;
161
+        right: 0;
162
+        overflow-x: hidden;
163
+        width: 0;
164
+        -webkit-transition: 0.5s;
165
+        -moz-transition: 0.5s;
166
+        transition: 0.5s;
167
+    }
168
+
169
+    /* メニューを開いた時 */
170
+    nav.open-menu {
171
+        width: 100%;
172
+    }
173
+
174
+    div.h-menu span:nth-child(1) {
175
+        transform: rotate(45deg);
176
+        top: 20px !important;
177
+    }
178
+
179
+    div.h-menu span:nth-child(2) {
180
+        width: 0;
181
+        opacity: 0;
182
+    }
183
+
184
+    div.h-menu span:nth-child(3) {
185
+        transform: rotate(-45deg);
186
+        top: 20px !important;
187
+    }
188
+
189
+    /* ハンバーガーアイコン下のテキスト */
190
+    div.h-menu :nth-child(4) {
191
+        display: none;
192
+    }
193
+
194
+    div.h-menu_block {
195
+        position: relative;
196
+        display: block;
197
+        width: 90%;
198
+        height: 50px;
199
+        margin: 20px auto;
200
+        font-size: larger;
201
+        
202
+    }
203
+
204
+    div.h-menu_block_text ::before{
205
+        content: '';
206
+        position: absolute;
207
+        right: 28px;
208
+        top: 50%;
209
+        margin-top: -8px;
210
+        width: 20px;
211
+        height: 20px;
212
+        border-top: 1px solid #888;
213
+        border-right: 1px solid #888;
214
+        transform: rotate(45deg);
215
+        
216
+    }
217
+
218
+    /* div.h-menu_block a { 
219
+        position: absolute;
220
+        display: block;
221
+        top: 0;
222
+        left: 0;
223
+        width: 100%;
224
+        height: 100%;
225
+    } */
226
+
227
+    div.h-menu_block_text {
228
+        position: relative;
229
+        display: inline-block;
230
+        width: 100%;
231
+        height: 50px;
232
+        background: #ccc;
233
+        vertical-align: middle;
234
+        
235
+    }
236
+
237
+    div.h-menu_block_text_center {
238
+        margin-top: 5%;
239
+        margin-left: 20px;
240
+        
241
+    }
242
+
243
+    div.h-menu_block_left {
244
+        position: relative;
245
+        display: block;
246
+        width: 42%;
247
+        height: 50px;
248
+        margin-left: 20px;
249
+        float: left;
250
+        /* font-size: large; */
251
+        
252
+    }
253
+
254
+    /* div.h-menu_block_left ::before {
255
+        content: '';
256
+        position: absolute;
257
+        right: 28px;
258
+        top: 50%;
259
+        margin-top: -8px;
260
+        width: 20px;
261
+        height: 20px;
262
+        border-top: 1px solid #AAA;
263
+        border-right: 1px solid #AAA;
264
+        transform: rotate(45deg);
265
+        
266
+    } */
267
+
268
+    div.h-menu_block_text_left_center {
269
+        margin-top: 10%;
270
+        margin-left: 15px;
271
+        
272
+    }
273
+
274
+    div.h-menu_block_clear {
275
+        display: block;
276
+        clear: both;
277
+    }
278
+
279
+    div.h-menu_lang {
280
+        position: relative;
281
+        display: block;
282
+        width: 90%;
283
+        height: 80px;
284
+        margin: 20px auto;
285
+    }
286
+    div.h-menu_block_lang {
287
+        position: relative;
288
+        display: inline-block;
289
+        width: 100%;
290
+        height: 80px;
291
+        background: #ccc;
292
+        vertical-align: middle;
293
+    }
294
+    .h-menu_block_text_line {
295
+        height: 30px;
296
+    }
297
+    .h-menu_block_text_color_1{
298
+        position: relative;
299
+        display: inline-block; 
300
+        width: 40px;
301
+        /* height: 25px; */
302
+        text-align: center;
303
+        background: #D6D6D6;
304
+    }
305
+    .h-menu_block_text_color_2{
306
+        position: relative;
307
+        display: inline-block; 
308
+        width: 40px;
309
+        /* height: 25px; */
310
+        text-align: center;
311
+        background: #F7F3BC;
312
+    }
313
+    .h-menu_block_text_color_3{
314
+        position: relative;
315
+        display: inline-block; 
316
+        width: 40px;
317
+        /* height: 25px; */
318
+        text-align: center;
319
+        background: #DAEDD0;
320
+    }
321
+    .mobile_translation{
322
+        position: relative;
323
+        display: block;
324
+        top: -20px;
325
+        left: 78px;
326
+        height: 25px;
327
+    }
328
+
329
+    div.h-menu_search {
330
+        position: relative;
331
+        display: block;
332
+        width: 90%;
333
+        height: 50px;
334
+        margin-left: 20px;
335
+        margin-bottom: 20px;
336
+    }
337
+    div.h-menu_block_search {
338
+        position: relative;
339
+        display: inline-block;
340
+        width: 100%;
341
+        height: 45px;
342
+        vertical-align: middle;
343
+    }
344
+
345
+    .mobile_form_input{
346
+        width: 60%;
347
+        height: 40px;
348
+        margin: 0px;
349
+    }
350
+    .mobile_form_button{
351
+        display       : inline-block;
352
+        width: 36%;
353
+        height: 45px;
354
+        font-size     : large;        /* 文字サイズ */
355
+        text-align    : center;      /* 文字位置   */
356
+        cursor        : pointer;     /* カーソル   */
357
+        background    : #109033;     /* 背景色     */
358
+        color         : #ffffff;     /* 文字色     */
359
+        line-height   : 1em;         /* 1行の高さ  */
360
+        margin: 0px;
361
+        margin-left: -6px;
362
+        border: none;
363
+    }
364
+}

+ 526
- 0
css/header_mobile.css Ver fichero

@@ -0,0 +1,526 @@
1
+@charset "utf-8";
2
+
3
+/* ********************************************** 
4
+ * header定義 css
5
+ * 
6
+ * headerの大きさ・位置定義
7
+ * 
8
+ ********************************************** */
9
+
10
+/* 
11
+ * 2014/02/26
12
+ * header 大きさ定義
13
+ * 
14
+ */
15
+
16
+.header {
17
+	display: none;
18
+}
19
+
20
+@media screen and (max-width: 768px) {
21
+header {
22
+	position: absolute;
23
+	display: none;
24
+	top: 0px;
25
+	left: 0px;
26
+	width: 200px;
27
+	height: 600px;
28
+	margin: 80px 0px 0px 40px;
29
+	background-image: url(img/header_background.png);
30
+}
31
+
32
+div#header{
33
+	position: absolute;
34
+	display: none;
35
+	top:0px;
36
+}
37
+
38
+div#h_block_1{
39
+	position: relative;
40
+	display: none;
41
+	width: 200px;
42
+	height: 250px;
43
+}
44
+div#h_block_search{
45
+	position: relative;
46
+	display: none;
47
+	width: 200px;
48
+	height: 50px;
49
+}
50
+div.h_line{
51
+	position: relative;
52
+	display: none;
53
+	width: 180px;
54
+	height: 0px;
55
+	margin: 0px 10px 0px 10px;
56
+	border-top: solid 2px #FFFFFF;
57
+}
58
+article.h_text_l{
59
+	position: relative;
60
+	display: none;
61
+	width: 150px;
62
+	height: 50px;
63
+	margin: 10px 10px 10px 30px;
64
+}
65
+span.h_text{
66
+	display: table-cell;
67
+	width: 180px;
68
+	height: 50px;
69
+	vertical-align: middle;
70
+	color: #ffffff;
71
+	font-size: 20px;
72
+}
73
+article.h_search{
74
+	position: relative;
75
+	display: none;
76
+	margin: 10px 0px 0px 10px;
77
+}
78
+
79
+a.h_link {
80
+	text-decoration: none;
81
+	color: black;
82
+}
83
+}
84
+
85
+/* ヘッダー レスポンシブ対応 */
86
+@media screen and (max-width: 768px) {
87
+
88
+	
89
+   /* ヘッダー */
90
+    .header {
91
+        display: flex;
92
+        width: 100%;
93
+        height: 56px;
94
+        background-color: #ffffff;
95
+	position: relative;
96
+	top: auto;
97
+	left: auto;
98
+	background-image: none;
99
+    margin: 0px 0px 0px 0px;
100
+        margin-bottom: 16px;
101
+    }
102
+
103
+    .headerLogo__image {
104
+        margin: 10px 6px;
105
+        width: 37px;
106
+        height: 32px;
107
+        object-fit: cover;
108
+    }
109
+
110
+    .headerTitle {
111
+        align-self: center;
112
+        color: #109033;
113
+        /* font-size: 4.0vw; */
114
+    }
115
+
116
+	.headerTitle__text {
117
+        font-size: 5.5vw;
118
+    margin-block-start: 0.67em;
119
+    margin-block-end: 0.67em;
120
+    margin-inline-start: 0px;
121
+    margin-inline-end: 0px;
122
+    font-weight: bold;
123
+	}
124
+
125
+    .headerSubTitle {
126
+        align-self: center;
127
+        padding-top: 8px;
128
+        padding-left: 8px;
129
+        color: #109033;
130
+        font-size: 2.4vw;
131
+    }
132
+
133
+
134
+    /*ハンバーガーアイコンの作成 */
135
+    #h-menu {
136
+        position: absolute;
137
+        display: block;
138
+        width: 55px;
139
+        height: 56px;
140
+        top: 0px;
141
+        right: 0px;
142
+        background-color: #109033; /* アイコンの線の色 */
143
+    }
144
+
145
+    #h-menu span {
146
+        display: block;
147
+        position: absolute;
148
+        width: 23px;
149
+        height: 2px;
150
+        top: 36px;
151
+        left: 17px;
152
+        background: #ffffff;
153
+        -webkit-transition: 0.3s ease-in-out;
154
+        -moz-transition: 0.3s ease-in-out;
155
+        transition: 0.3s ease-in-out;
156
+    }
157
+
158
+    #h-menu span:nth-child(1) {
159
+        top: 14px;
160
+    }
161
+
162
+    #h-menu span:nth-child(2) {
163
+        top: 22px;
164
+    }
165
+
166
+    #h-menu span:nth-child(3) {
167
+        top: 30px;
168
+    }
169
+
170
+    /* ハンバーガーアイコン下のテキスト */
171
+    #h-text {
172
+        position: absolute;
173
+        width: 32px;
174
+        font-size: 6px;
175
+        color: #ffffff;
176
+        text-align: center;
177
+        top: 34px;
178
+        left: 12px;
179
+    }
180
+
181
+    /* メニュー */
182
+    #h-nav {
183
+        background: #FAFAFA;
184
+        position: absolute;
185
+        z-index: 9;
186
+        /* top: 3.125rem; */
187
+        top: 56px;
188
+        right: 0;
189
+        overflow-x: hidden;
190
+        width: 0;
191
+        -webkit-transition: 0.5s;
192
+        -moz-transition: 0.5s;
193
+        transition: 0.5s;
194
+    }
195
+
196
+    /* メニューを開いた時 */
197
+    #h-nav.open-menu {
198
+        width: 75%;
199
+    }
200
+
201
+    div.h-menu span:nth-child(1) {
202
+        transform: rotate(45deg);
203
+        top: 20px !important;
204
+    }
205
+
206
+    div.h-menu span:nth-child(2) {
207
+        width: 0;
208
+        opacity: 0;
209
+    }
210
+
211
+    div.h-menu span:nth-child(3) {
212
+        transform: rotate(-45deg);
213
+        top: 20px !important;
214
+    }
215
+
216
+    /* ハンバーガーアイコン下のテキスト */
217
+    div.h-menu :nth-child(4) {
218
+        display: none;
219
+    }
220
+
221
+	div.h-menu_main_block {
222
+        position: relative;
223
+        display: block;
224
+        width: 90%;
225
+        margin: 20px auto;
226
+		margin-top: 0px;
227
+        /* font-size: larger; */
228
+    }
229
+
230
+    div.h-menu_main_block_top {
231
+        position: relative;
232
+        display: block;
233
+        width: 90%;
234
+        margin: 20px auto;
235
+        /* font-size: larger; */
236
+    }
237
+
238
+
239
+	div.h-menu_block_before::before{
240
+        content: '';
241
+        position: absolute;
242
+        right: 28px;
243
+        top: 50%;
244
+        margin-top: -8px;
245
+        width: 20px;
246
+        height: 20px;
247
+        border-top: 1px solid #888;
248
+        border-right: 1px solid #888;
249
+        transform: rotate(45deg);
250
+        z-index: 5;
251
+    }
252
+
253
+    div.h-menu_block {
254
+        position: relative;
255
+        display: block;
256
+        width: 100%;
257
+        height: 50px;
258
+        /* font-size: larger; */
259
+        
260
+    }
261
+
262
+    /* div.h-menu_block a { 
263
+        position: absolute;
264
+        display: block;
265
+        top: 0;
266
+        left: 0;
267
+        width: 100%;
268
+        height: 100%;
269
+    } */
270
+
271
+    div.h-menu_block_text {
272
+        position: relative;
273
+        display: inline-block;
274
+        width: 100%;
275
+        height: 50px;
276
+        background: #eee;
277
+        vertical-align: middle;
278
+        
279
+    }
280
+
281
+    div.h-menu_block_text_center {
282
+        margin-top: 20px;
283
+        margin-left: 20px;
284
+        color: black;
285
+    }
286
+
287
+    div.h-menu_block_left_start {
288
+        position: relative;
289
+        display: block;
290
+        width: calc(50% - 10px);
291
+        height: 50px;
292
+        float: left;
293
+        /* font-size: large; */
294
+    }
295
+
296
+	div.h-menu_block_left {
297
+        position: relative;
298
+        display: block;
299
+        width: calc(50% - 10px);
300
+        height: 50px;
301
+        margin-left: 20px;
302
+        float: left;
303
+        /* font-size: large; */
304
+    }
305
+
306
+    /* div.h-menu_block_left ::before {
307
+        content: '';
308
+        position: absolute;
309
+        right: 28px;
310
+        top: 50%;
311
+        margin-top: -8px;
312
+        width: 20px;
313
+        height: 20px;
314
+        border-top: 1px solid #AAA;
315
+        border-right: 1px solid #AAA;
316
+        transform: rotate(45deg);
317
+        
318
+    } */
319
+
320
+    div.h-menu_block_text_left_center {
321
+        margin-top: 10%;
322
+        margin-left: 15px;
323
+        
324
+    }
325
+
326
+    div.h-menu_block_clear {
327
+        display: block;
328
+        clear: both;
329
+    }
330
+
331
+    div.h-menu_lang {
332
+        position: relative;
333
+        display: block;
334
+        width: 100%;
335
+        height: 80px;
336
+    }
337
+    div.h-menu_block_lang {
338
+        position: relative;
339
+        display: inline-block;
340
+        width: 100%;
341
+        height: 80px;
342
+        background: #eee;
343
+        vertical-align: middle;
344
+    }
345
+    .h-menu_block_text_line {
346
+        height: 30px;
347
+    }
348
+    .h-menu_block_text_color_1{
349
+        position: relative;
350
+        display: inline; 
351
+        width: 30px;
352
+        /* height: 25px; */
353
+		padding: 0px 5px;
354
+		margin: 0px 3px;
355
+        text-align: center;
356
+        background: #D6D6D6;
357
+    }
358
+    .h-menu_block_text_color_2{
359
+        position: relative;
360
+        display: inline; 
361
+        width: 30px;
362
+        /* height: 25px; */
363
+		padding: 0px 5px;
364
+		margin: 0px 3px;
365
+        text-align: center;
366
+        background: #F7F3BC;
367
+    }
368
+    .h-menu_block_text_color_3{
369
+        position: relative;
370
+        display: inline; 
371
+        width: 30px;
372
+        /* height: 25px; */
373
+		padding: 0px 5px;
374
+		margin: 0px 3px;
375
+        text-align: center;
376
+        background: #DAEDD0;
377
+    }
378
+    .mobile_translation{
379
+        position: relative;
380
+        display: block;
381
+        top: -20px;
382
+        left: 78px;
383
+        height: 25px;
384
+    }
385
+
386
+    div.h-menu_search {
387
+        position: relative;
388
+        display: block;
389
+        width: 100%;
390
+        height: 50px;
391
+        margin-bottom: 20px;
392
+    }
393
+    div.h-menu_block_search {
394
+        position: relative;
395
+        display: inline-block;
396
+        width: 100%;
397
+        height: 45px;
398
+        vertical-align: middle;
399
+    }
400
+
401
+    .mobile_form_input{
402
+        width: 60%;
403
+        height: 40px;
404
+        margin: 0px;
405
+    }
406
+	input[type="submit"] {
407
+		appearance: none;
408
+		-webkit-appearance: none;
409
+		border-radius: 0px;
410
+	}
411
+
412
+	input[type="text"] {
413
+		appearance: none;
414
+		-webkit-appearance: none;
415
+		border-radius: 0px;
416
+	}	
417
+    .mobile_form_button{
418
+        display       : inline-block;
419
+        width: calc(40% - 15px);
420
+        height: 45px;
421
+        font-size     : large;        /* 文字サイズ */
422
+        text-align    : center;      /* 文字位置   */
423
+        cursor        : pointer;     /* カーソル   */
424
+        background    : #109033;     /* 背景色     */
425
+        color         : #ffffff;     /* 文字色     */
426
+        line-height   : 1em;         /* 1行の高さ  */
427
+        margin: 0px;
428
+        margin-left: -6px;
429
+        border: none;
430
+    }
431
+	.mobile_heigth {
432
+		  height: 0;
433
+	}
434
+
435
+.h-accordion__container {
436
+  margin: 0 auto;
437
+}
438
+
439
+.h-accordion__title {
440
+  position: relative;
441
+  cursor: pointer;
442
+  user-select: none;
443
+}
444
+
445
+/* .h-accordion__title::before, .h-accordion__title::after { */
446
+.h-accordion__title::after {
447
+        content: '';
448
+        position: absolute;
449
+        right: 28px;
450
+        top: 50%;
451
+        margin-top: -8px;
452
+        width: 20px;
453
+        height: 20px;
454
+        border-top: 1px solid #888;
455
+        border-right: 1px solid #888;
456
+        transform: rotate(45deg);
457
+}
458
+
459
+.h-accordion__title::after {
460
+  /* transform: rotate(90deg); */
461
+  transition-duration: 0.3s;
462
+}
463
+
464
+/* .h-accordion__title.h-is-active::before {
465
+  opacity: 0;
466
+} */
467
+
468
+.h-accordion__title.h-is-active::after {
469
+  transform: rotate(135deg);
470
+        top: 30%;
471
+}
472
+
473
+.h-accordion__content {
474
+  border-left: 1px solid transparent;
475
+  border-right: 1px solid transparent;
476
+  /* padding: 0 1.5em; */
477
+  padding-left: 0.5em;
478
+  line-height: 0;
479
+  height: 0;
480
+  overflow: hidden;
481
+  opacity: 0;
482
+  transition-duration: 0.3s;
483
+        /* background: #eee; */
484
+
485
+}
486
+
487
+.h-accordion__content.h-is-open {
488
+  line-height: normal;
489
+  /* numberに書き換える*/
490
+  height: auto;
491
+  opacity: 1;
492
+}
493
+
494
+	.h-menu_accordion_block_start{
495
+        position: relative;
496
+        display: block;
497
+        width: 100%;
498
+        height: 50px;
499
+		margin-top: 10px;
500
+		/* margin-bottom: 10px; */
501
+		padding-left: 1em;
502
+        /* background: #eee; */
503
+	}
504
+	.h-menu_accordion_block{
505
+        position: relative;
506
+        display: block;
507
+        width: 100%;
508
+        height: 50px;
509
+		/* margin-bottom: 10px; */
510
+		padding-left: 1em;
511
+        /* background: #eee; */
512
+	}
513
+
514
+	.h-menu_accordion_block_text{
515
+        position: relative;
516
+        display: block;
517
+		width: 80%;
518
+		padding-bottom: 10px;
519
+		border-bottom: solid 1px #ddd;
520
+	}
521
+    
522
+    .header_link {
523
+        color: #109033;
524
+        text-decoration: none;
525
+    }    
526
+}

+ 1451
- 0
css/header_pc.css
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 98
- 0
css/image.css Ver fichero

@@ -0,0 +1,98 @@
1
+@charset "utf-8";
2
+
3
+.image_left {
4
+    float: left;
5
+}
6
+
7
+.image_right {
8
+    float: right;
9
+}
10
+
11
+img.left {
12
+    float: left;
13
+    padding: 3px;
14
+    border: 1px solid #CCCCCC;
15
+    margin: 3px 10px 3px 0px;
16
+}
17
+
18
+img.right {
19
+    float: right;
20
+    padding: 3px;
21
+    border: 1px solid #CCCCCC;
22
+    margin: 3px 0px 3px 10px;
23
+}
24
+
25
+.template_image {
26
+    width: 100%;
27
+}
28
+
29
+.publicFacility_img {
30
+    width: 450px;
31
+}
32
+
33
+.canNotCollectGarbage_img {
34
+    width: 400px;
35
+}
36
+
37
+.kitagataRecycleMap {
38
+    text-align: center;
39
+    display: block;
40
+    padding: 3px;
41
+    border: 1px solid #CCCCCC;
42
+    margin-right: auto;
43
+    margin-left: auto;
44
+    width: 450px;
45
+    height: 355px;
46
+}
47
+
48
+.vacantHouse_img {
49
+    display: block;
50
+    margin-left: auto;
51
+    margin-right: auto;
52
+}
53
+
54
+.seryuuPeacePark_image_right1 {
55
+    margin-right: 60px;
56
+}
57
+
58
+.seryuuPeacePark_image_left1 {
59
+    margin-left: 60px;
60
+}
61
+
62
+.seryuuPeacePark_image_right2 {
63
+    margin-right: 22px;
64
+}
65
+
66
+.seryuuPeacePark_image_left2 {
67
+    margin-left: 22px;
68
+}
69
+
70
+.act_on_productivity_improvement_special_measures_law_img {
71
+    width: 600px;
72
+}
73
+
74
+.useStrict_img {
75
+    width: 450px;
76
+    height: 874px;
77
+}
78
+
79
+.urbanFacility_img {
80
+    width: 450px;
81
+    height: 934px;
82
+}
83
+
84
+.budget_img {
85
+    width: 452px;
86
+}
87
+
88
+.policyCouncil_imageWrapper {
89
+    display: flex;
90
+    width: 600px;
91
+    justify-content: center;
92
+    margin: 25px;
93
+}
94
+
95
+.policyCouncil_towRow_imageWrapper {
96
+    width: 325px;
97
+    justify-content: center;
98
+}

+ 99
- 0
css/image_mobile.css Ver fichero

@@ -0,0 +1,99 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .image_left {
5
+        float: none;
6
+    }
7
+
8
+    .image_right {
9
+        float: none;
10
+    }
11
+
12
+    img.left {
13
+        float: left;
14
+        padding: 3px;
15
+        border: 1px solid #CCCCCC;
16
+        margin: 3px 10px 3px 0px;
17
+    }
18
+
19
+    img.right {
20
+        float: right;
21
+        padding: 3px;
22
+        border: 1px solid #CCCCCC;
23
+        margin: 3px 0px 3px 10px;
24
+    }
25
+
26
+    .template_imageWrapper_mobile {
27
+        width: 100%;
28
+    }
29
+
30
+    .template_image_mobile {
31
+        width: 100%;
32
+    }
33
+
34
+    .publicFacility_img {
35
+        width: 204px;
36
+    }
37
+
38
+    .canNotCollectGarbage {
39
+        width: 100%;
40
+    }
41
+
42
+    .kitagataRecycleMap {
43
+        width: 100%;
44
+        height: auto;
45
+    }
46
+
47
+    .vacantHouse_img {
48
+        display: block;
49
+        margin-left: auto;
50
+        margin-right: auto;
51
+        width: 100%;
52
+    }
53
+
54
+    .act_on_productivity_improvement_special_measures_law_img {
55
+        width: 100%;
56
+    }
57
+
58
+    .useStrict_img {
59
+        width: 100%;
60
+        height: auto;
61
+    }
62
+
63
+    .urbanFacility_img {
64
+        width: 100%;
65
+        height: auto;
66
+    }
67
+
68
+    .elTAX_img {
69
+        width: 100%;
70
+        height: auto;
71
+    }
72
+
73
+    .waterTank_img {
74
+        float: none;
75
+        width: 100%;
76
+    }
77
+
78
+    .policyCouncil_imageWrapper {
79
+        display: flex;
80
+        width: 100%;
81
+        justify-content: center;
82
+        flex-wrap: wrap;
83
+        margin: 0;
84
+    }
85
+
86
+    .policyCouncil_towRow_imageWrapper {
87
+        width: 45%;
88
+        justify-content: center;
89
+        margin: 0;
90
+    }
91
+
92
+    .mayor_profile_img {
93
+        width: 50%;
94
+        /*position: absolute;*/
95
+        top: 26%;
96
+        right: 1%;
97
+        margin-bottom: 8px;
98
+    }
99
+}

BIN
css/img/aboutCoronavirus.png Ver fichero


BIN
css/img/backgroundm1.png Ver fichero


BIN
css/img/backgroundm2.png Ver fichero


BIN
css/img/backgroundm3.png Ver fichero


BIN
css/img/mayorRoom/Room_of_the_mayor.png Ver fichero


BIN
css/img/mayorRoom/emergency.png Ver fichero


BIN
css/img/mayorRoom/kawasemi-stools2.png Ver fichero


BIN
css/img/mayorRoom/kitagata_gikai02.png Ver fichero


BIN
css/img/mayorRoom/kouhoukitagata.png Ver fichero


BIN
css/img/sample/Calendar_banner.png Ver fichero


BIN
css/img/sample/DisasterPrevention.png Ver fichero


BIN
css/img/sample/Icon_awesome-female.png Ver fichero


BIN
css/img/sample/Icon_awesome-home.png Ver fichero


BIN
css/img/sample/Icon_awesome-male.png Ver fichero


BIN
css/img/sample/academy_concept.png Ver fichero


BIN
css/img/sample/background1.png Ver fichero


BIN
css/img/sample/background2.png Ver fichero


BIN
css/img/sample/background3.png Ver fichero


BIN
css/img/sample/corona_blueBanner.png Ver fichero


BIN
css/img/sample/corona_greenBanner.png Ver fichero


BIN
css/img/sample/corona_whiteBlueBanner.png Ver fichero


BIN
css/img/sample/corona_yellowBanner.png Ver fichero


BIN
css/img/sample/familyIcon.png Ver fichero


BIN
css/img/sample/header_logo.png Ver fichero


BIN
css/img/sample/hometownTax.png Ver fichero


BIN
css/img/sample/infoTitle_banner.png Ver fichero


BIN
css/img/sample/infoTitle_list.png Ver fichero


BIN
css/img/sample/kawasemiLetter.png Ver fichero


BIN
css/img/sample/kawasemi_backNumber.png Ver fichero


BIN
css/img/sample/kitagataTown_headerLogo.png Ver fichero


BIN
css/img/sample/kitagatabanner5.png Ver fichero


BIN
css/img/sample/kitagatakids_banner01.png Ver fichero


BIN
css/img/sample/kyouiku_iinkai_banner02.png Ver fichero


BIN
css/img/sample/logo_kitagata_green_S.png Ver fichero


BIN
css/img/sample/moveTokyo.png Ver fichero


BIN
css/img/sample/nuclearTown.png Ver fichero


BIN
css/img/sample/parliment.png Ver fichero


BIN
css/img/sample/publicKitagata.png Ver fichero


BIN
css/img/sample/publicSituation.png Ver fichero


BIN
css/img/sample/return_top.png Ver fichero


BIN
css/img/sample/seryuufes_2019.png Ver fichero


BIN
css/img/sample/townPresident.png Ver fichero


+ 11
- 0
css/inquiry_mobile.css Ver fichero

@@ -0,0 +1,11 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .form_textInput {
5
+        width: 100%;
6
+    }
7
+
8
+    .form_textareaInput {
9
+        width: 100%;
10
+    }
11
+}

+ 12
- 0
css/link.css Ver fichero

@@ -0,0 +1,12 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    .link_mobile {
5
+        word-break: break-all;
6
+    }
7
+
8
+    .link_nonDecoration {
9
+        color: #000000;
10
+        text-decoration: none;
11
+    }
12
+}

+ 11
- 1
css/map.css Ver fichero

@@ -5,4 +5,14 @@ div#map-canvas {
5 5
         padding: 0;
6 6
         height: 600px; /* 高さ */
7 7
         width: 640px;  /* 幅   */
8
-      }
8
+      }
9
+
10
+/* map-canvas レスポンシブ対応 */
11
+@media screen and (max-width: 768px) {
12
+  div#map-canvas {
13
+        margin: 0;
14
+        padding: 0;
15
+        height: 450px; /* 高さ */
16
+        width: 100%;  /* 幅   */
17
+      }
18
+}

+ 142
- 103
css/mayor.css Ver fichero

@@ -2,108 +2,147 @@
2 2
 
3 3
 /* template start */
4 4
 article#mayor_text {
5
-	position: absolute;
6
-	display: block;
7
-	margin: 0px 0px 0px 0px;
8
-}
9
-img#mayor_img{
10
-	position: absolute;
11
-	display: block;
12
-	top: 210px;
13
-	left: 400px;
14
-	margin: 0px 0px 0px 0px;
15
-}
16
-img#mayor_img_1{
17
-	position: absolute;
18
-	display: block;
19
-	top: 150px;
20
-	left: 400px;
21
-	margin: 0px 0px 0px 0px;
22
-}
23
-div#mayor_buttons{
24
-	position: relative;
25
-	display: block;
26
-	left: 10px;
27
-	width: 700px;
28
-	margin: 0px 0px 10px 0px;
29
-}
30
-div.mayor_button{
31
-	position: relative;
32
-	display: block;
33
-	margin: 0px 5px 0px 0px;
34
-}
35
-div#mayor_text_title{
36
-	position: relative;
37
-	display: block;
38
-	top: 10px;
39
-	left: 10px;
40
-	font-size: 30px;
41
-	line-height:120%;
42
-}
43
-article#mayor_text_1{
44
-	position: relative;
45
-	display: block;
46
-	top: 0px;
47
-	left: 20px;
48
-	width: 385px;
49
-	line-height:180%;
50
-	margin: 10px 0px 10px 0px;
51
-}
52
-article#mayor_text_2{
53
-	position: relative;
54
-	display: block;
55
-	top: 10px;
56
-	left: 20px;
57
-	width: 385px;
58
-	margin: 10px 0px 0px 0px;
59
-	line-height:180%;
60
-}
61
-
62
-span.mayor_text_line{
63
-	position: absolute;
64
-	display: block;
65
-	top: 570px;
66
-	left: 480px;
67
-}
68
-span.mayor_text_line_message{
69
-	position: absolute;
70
-	display: block;
71
-	top: 565px;
72
-	left: 480px;
73
-}
74
-span.mayor_text_line_message1{
75
-	position: absolute;
76
-	display: block;
77
-	top: 505px;
78
-	left: 480px;
79
-}
80
-span.mayor_text_line_message2{
81
-	position: absolute;
82
-	display: block;
83
-	top: 440px;
84
-	left: 440px;
85
-}
86
-span.mayor_text_line_message3{
87
-	position: absolute;
88
-	display: block;
89
-	top: 300px;
90
-	left: 420px;
91
-	width: 300px;
92
-}
93
-div.mayor_link{
94
-	border: 4px outset;
95
-	border-color: #97ce7c;
96
-	padding: 5px;
97
-}
98
-span.mayor_text_top{
99
-	position: relative;
100
-	display: block;
101
-	font-size: 30px;
102
-	line-height:120%;
103
-	margin: 10px 0px 0px 20px;
104
-	z-index: 10;
105
-}
106
-td.sel-yellow{
107
-	text-align:center;
5
+    position: absolute;
6
+    display: block;
7
+    margin: 0px 0px 0px 0px;
108 8
 }
9
+
10
+img#mayor_img {
11
+    position: absolute;
12
+    display: block;
13
+    top: 210px;
14
+    left: 400px;
15
+    margin: 0px 0px 0px 0px;
16
+}
17
+
18
+img#mayor_img_1 {
19
+    position: absolute;
20
+    display: block;
21
+    top: 150px;
22
+    left: 400px;
23
+    margin: 0px 0px 0px 0px;
24
+}
25
+
26
+div#mayor_buttons {
27
+    position: relative;
28
+    display: block;
29
+    left: 10px;
30
+    width: 700px;
31
+    margin: 0px 0px 10px 0px;
32
+}
33
+
34
+div.mayor_button {
35
+    position: relative;
36
+    display: block;
37
+    margin: 0px 5px 0px 0px;
38
+}
39
+
40
+div#mayor_text_title {
41
+    position: relative;
42
+    display: block;
43
+    top: 10px;
44
+    left: 10px;
45
+    font-size: 30px;
46
+    line-height: 120%;
47
+}
48
+
49
+article#mayor_text_1 {
50
+    position: relative;
51
+    display: block;
52
+    top: 0px;
53
+    left: 20px;
54
+    width: 385px;
55
+    line-height: 180%;
56
+    margin: 10px 0px 10px 0px;
57
+}
58
+
59
+article#mayor_text_2 {
60
+    position: relative;
61
+    display: block;
62
+    top: 10px;
63
+    left: 20px;
64
+    width: 385px;
65
+    margin: 10px 0px 0px 0px;
66
+    line-height: 180%;
67
+}
68
+
69
+span.mayor_text_line {
70
+    position: absolute;
71
+    display: block;
72
+    top: 570px;
73
+    left: 480px;
74
+}
75
+
76
+span.mayor_text_line_message {
77
+    position: absolute;
78
+    display: block;
79
+    top: 565px;
80
+    left: 480px;
81
+}
82
+
83
+span.mayor_text_line_message1 {
84
+    position: absolute;
85
+    display: block;
86
+    top: 505px;
87
+    left: 480px;
88
+}
89
+
90
+span.mayor_text_line_message2 {
91
+    position: absolute;
92
+    display: block;
93
+    top: 440px;
94
+    left: 440px;
95
+}
96
+
97
+span.mayor_text_line_message3 {
98
+    position: absolute;
99
+    display: block;
100
+    top: 300px;
101
+    left: 420px;
102
+    width: 300px;
103
+}
104
+
105
+span.mayor_profile_text {
106
+    position: absolute;
107
+    display: block;
108
+    left: 440px;
109
+    top: 450px;
110
+}
111
+
112
+div.mayor_link {
113
+    border: 4px outset;
114
+    border-color: #97ce7c;
115
+    padding: 5px;
116
+}
117
+
118
+span.mayor_text_top {
119
+    position: relative;
120
+    display: block;
121
+    font-size: 30px;
122
+    line-height: 120%;
123
+    margin: 10px 0px 0px 20px;
124
+    z-index: 10;
125
+}
126
+
127
+article.mayor_text_content {
128
+    position: relative;
129
+    display: block;
130
+    left: 20px;
131
+    margin: 10px 0px 10px 0px;
132
+    width: 680px;
133
+    line-height: 180%;
134
+}
135
+
136
+td.sel-yellow {
137
+    text-align: center;
138
+}
139
+
140
+.profile_table_wrapper {
141
+    width: 380px;
142
+}
143
+
144
+.profile_table {
145
+    width: 100%;
146
+}
147
+
109 148
 /* template end */

+ 157
- 0
css/mayor_mobile.css Ver fichero

@@ -0,0 +1,157 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+    /* template start */
5
+    article#mayor_text {
6
+        position: absolute;
7
+        display: block;
8
+        margin: 0px 0px 0px 0px;
9
+    }
10
+
11
+    img#mayor_img {
12
+        position: relative;
13
+        display: block;
14
+        top: 0;
15
+        left: 0;
16
+        margin: 0px 0px 0px 0px;
17
+        width: 100%;
18
+    }
19
+
20
+    img#mayor_img_1 {
21
+        position: absolute;
22
+        display: block;
23
+        top: 150px;
24
+        left: 400px;
25
+        margin: 0px 0px 0px 0px;
26
+    }
27
+
28
+    div#mayor_buttons {
29
+        position: relative;
30
+        display: block;
31
+        left: 10px;
32
+        width: 100%;
33
+        margin: 0px 0px 10px 0px;
34
+    }
35
+
36
+    div.mayor_button {
37
+        position: relative;
38
+        display: block;
39
+        margin: 0px 5px 0px 0px;
40
+    }
41
+
42
+    div#mayor_text_title {
43
+        position: relative;
44
+        display: block;
45
+        top: 10px;
46
+        left: 10px;
47
+        font-size: 30px;
48
+        line-height: 120%;
49
+    }
50
+
51
+    article#mayor_text_1 {
52
+        position: relative;
53
+        display: block;
54
+        top: 0px;
55
+        left: 20px;
56
+        width: 385px;
57
+        line-height: 180%;
58
+        margin: 10px 0px 10px 0px;
59
+    }
60
+
61
+    article#mayor_text_2 {
62
+        position: relative;
63
+        display: block;
64
+        top: 0;
65
+        left: 0;
66
+        width: 94%;
67
+        margin: 0 10px;
68
+        line-height: 180%;
69
+    }
70
+
71
+    span.mayor_text_line {
72
+        position: absolute;
73
+        display: block;
74
+        top: 570px;
75
+        left: 480px;
76
+    }
77
+
78
+    span.mayor_text_line_message {
79
+        position: absolute;
80
+        display: block;
81
+        top: 565px;
82
+        left: 480px;
83
+    }
84
+
85
+    span.mayor_text_line_message1 {
86
+        position: absolute;
87
+        display: block;
88
+        top: 505px;
89
+        left: 480px;
90
+    }
91
+
92
+    span.mayor_text_line_message2 {
93
+        position: absolute;
94
+        display: block;
95
+        top: 440px;
96
+        left: 440px;
97
+    }
98
+
99
+    span.mayor_text_line_message3 {
100
+        position: absolute;
101
+        display: block;
102
+        top: 300px;
103
+        left: 420px;
104
+        width: 300px;
105
+    }
106
+
107
+    span.mayor_profile_text {
108
+        position: relative;
109
+        display: none;
110
+        left: 0;
111
+        top: 0;
112
+        text-align: center;
113
+    }
114
+
115
+    div.mayor_link {
116
+        border: 4px outset;
117
+        border-color: #97ce7c;
118
+        padding: 5px;
119
+    }
120
+
121
+    span.mayor_text_top {
122
+        position: relative;
123
+        display: block;
124
+        font-size: 30px;
125
+        line-height: 120%;
126
+        margin: 10px 0px 0px 20px;
127
+        z-index: 10;
128
+    }
129
+
130
+    article.mayor_text {
131
+        position: relative;
132
+        display: block;
133
+        /*left: 20px;*/
134
+        /*margin: 10px 0px 10px 0px;*/
135
+        width: 94%;
136
+        line-height: 180%;
137
+    }
138
+
139
+    td.sel-yellow {
140
+        text-align: center;
141
+    }
142
+
143
+    .profile_table_wrapper {
144
+        width: 100%;
145
+    }
146
+
147
+    .profile_table {
148
+        width: 100%;
149
+    }
150
+
151
+    .biography_table_wrapper {
152
+        width: 100%;
153
+    }
154
+
155
+    /* template end */
156
+
157
+}

+ 150
- 0
css/notices_mobile.css Ver fichero

@@ -0,0 +1,150 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+
5
+		span#template_article_block {
6
+		position: relative;
7
+		display: block;
8
+		width: calc(100% - 20px);
9
+		padding: 10px 10px 0px 0px;
10
+		margin: 0px 10px 0px 10px;
11
+	}
12
+
13
+	div.list_notices {
14
+		position: relative;
15
+		display: table;
16
+		height: auto;
17
+		table-layout: fixed;
18
+		width: auto;
19
+	}
20
+
21
+	span.list_notices_date {
22
+		position: relative;
23
+		display: table-cell;
24
+		top: 0px;
25
+		width: calc(100% - 20px);
26
+		height: auto;
27
+	}
28
+
29
+	span.list_notices_text {
30
+		position: relative;
31
+		display: table-cell;
32
+		top: -14px;
33
+		left: 15px;
34
+		width: 600px;
35
+		vertical-align: middle;
36
+	}
37
+}
38
+
39
+@media screen and (max-width: 425px) {
40
+	span#template_article_block {
41
+		position: relative;
42
+		display: block;
43
+		width: calc(100% - 20px);
44
+		padding: 10px 10px 0px 0px;
45
+		margin: 0px 10px 0px 10px;
46
+	}
47
+
48
+	div.list_notices {
49
+		position: relative;
50
+		display: table;
51
+		height: auto;
52
+		table-layout: fixed;
53
+		width: auto;
54
+	}
55
+
56
+	span.list_notices_date {
57
+		position: relative;
58
+		display: table-cell;
59
+		top: 0px;
60
+		width: calc(100% - 20px);
61
+		height: auto;
62
+	}
63
+
64
+	span.list_notices_text {
65
+		position: relative;
66
+		display: table-cell;
67
+		top: -5px;
68
+		left: 15px;
69
+		width: 240px;
70
+		vertical-align: middle;
71
+	}
72
+}
73
+
74
+@media screen and (max-width: 375px) {
75
+
76
+	/* template start */
77
+
78
+	span#template_article_block {
79
+		position: relative;
80
+		display: block;
81
+		width: calc(100% - 20px);
82
+		padding: 10px 10px 0px 0px;
83
+		margin: 0px 10px 0px 10px;
84
+	}
85
+
86
+	div.list_notices {
87
+		position: relative;
88
+		display: table;
89
+		height: auto;
90
+		table-layout: fixed;
91
+		width: auto;
92
+	}
93
+
94
+	span.list_notices_date {
95
+		position: relative;
96
+		display: table-cell;
97
+		top: 0px;
98
+		width: calc(100% - 20px);
99
+		height: auto;
100
+	}
101
+
102
+	span.list_notices_text {
103
+		position: relative;
104
+		display: table-cell;
105
+		top: -5px;
106
+		left: 15px;
107
+		width: 200px;
108
+		vertical-align: middle;
109
+	}
110
+}
111
+
112
+@media screen and (max-width: 320px) {
113
+
114
+	/* template start */
115
+
116
+	span#template_article_block {
117
+		position: relative;
118
+		display: block;
119
+		width: calc(100% - 20px);
120
+		padding: 10px 10px 0px 0px;
121
+		margin: 0px 10px 0px 10px;
122
+	}
123
+
124
+	div.list_notices {
125
+		position: relative;
126
+		display: table;
127
+		height: auto;
128
+		table-layout: fixed;
129
+		width: auto;
130
+	}
131
+
132
+	span.list_notices_date {
133
+		position: relative;
134
+		display: table-cell;
135
+		top: 0px;
136
+		width: calc(100% - 20px);
137
+		height: auto;
138
+	}
139
+
140
+	span.list_notices_text {
141
+		position: relative;
142
+		display: table-cell;
143
+		top: 0px;
144
+		left: 15px;
145
+		width: 145px;
146
+		vertical-align: middle;
147
+	}
148
+}
149
+
150
+/* template end */

+ 0
- 0
css/pageview_mobile.css Ver fichero


BIN
css/pdf/2seibikeikakusyo_2021.pdf Ver fichero


+ 102
- 0
css/reset.css Ver fichero

@@ -0,0 +1,102 @@
1
+/*
2
+html5doctor.com Reset Stylesheet
3
+v1.6.1
4
+Last Updated: 2010-09-17
5
+Author: Richard Clark - http://richclarkdesign.com
6
+Twitter: @rich_clark
7
+*/
8
+
9
+html, body, div, span, object, iframe,
10
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11
+abbr, address, cite, code,
12
+del, dfn, em, img, ins, kbd, q, samp,
13
+small, strong, sub, sup, var,
14
+b, i,
15
+dl, dt, dd, ol, ul, li,
16
+fieldset, form, label, legend,
17
+table, caption, tbody, tfoot, thead, tr, th, td,
18
+article, aside, canvas, details, figcaption, figure,
19
+footer, header, hgroup, menu, nav, section, summary,
20
+time, mark, audio, video {
21
+    margin:0;
22
+    padding:0;
23
+    border:0;
24
+    outline:0;
25
+    font-size:100%;
26
+    vertical-align:baseline;
27
+    background:transparent;
28
+}
29
+
30
+body {
31
+    line-height:1;
32
+}
33
+
34
+article,aside,details,figcaption,figure,
35
+footer,header,hgroup,menu,nav,section {
36
+    display:block;
37
+}
38
+
39
+nav ul {
40
+    list-style:none;
41
+}
42
+
43
+blockquote, q {
44
+    quotes:none;
45
+}
46
+
47
+/*blockquote:before, blockquote:after,*/
48
+/*q:before, q:after {*/
49
+/*    content:'';*/
50
+/*    content:none;*/
51
+/*}*/
52
+
53
+a {
54
+    margin:0;
55
+    padding:0;
56
+    font-size:100%;
57
+    vertical-align:baseline;
58
+    background:transparent;
59
+}
60
+
61
+/* change colours to suit your needs */
62
+ins {
63
+    background-color:#ff9;
64
+    color:#000;
65
+    text-decoration:none;
66
+}
67
+
68
+/* change colours to suit your needs */
69
+mark {
70
+    background-color:#ff9;
71
+    color:#000;
72
+    font-style:italic;
73
+    font-weight:bold;
74
+}
75
+
76
+del {
77
+    text-decoration: line-through;
78
+}
79
+
80
+abbr[title], dfn[title] {
81
+    border-bottom:1px dotted;
82
+    cursor:help;
83
+}
84
+
85
+table {
86
+    border-collapse:collapse;
87
+    border-spacing:0;
88
+}
89
+
90
+/* change border colour to suit your needs */
91
+hr {
92
+    display:block;
93
+    height:1px;
94
+    border:0;
95
+    border-top:1px solid #cccccc;
96
+    margin:1em 0;
97
+    padding:0;
98
+}
99
+
100
+input, select {
101
+    vertical-align:middle;
102
+}

+ 141
- 93
css/school.css Ver fichero

@@ -2,81 +2,112 @@
2 2
 
3 3
 
4 4
 .condition_l {
5
-	float: left;
6
-	font-weight: normal;
7
-	width: 300px;
8
-	margin: 5px 0px 0px 0px;
9
-	font-size: 95%;
5
+    float: left;
6
+    font-weight: normal;
7
+    width: 300px;
8
+    margin: 5px 0px 0px 0px;
9
+    font-size: 95%;
10 10
 }
11
-.paragraphT10{
12
-	margin-top: 10px;
13
-	margin-left: 5px;
14
-	padding: 0;
11
+
12
+.paragraphT10 {
13
+    margin-top: 10px;
14
+    margin-left: 5px;
15
+    padding: 0;
16
+}
17
+
18
+.school_img {
19
+    width: 450px;
20
+}
21
+
22
+.publicFacility_textHeight {
23
+    height: 160px;
24
+}
25
+
26
+.library_imgBlock {
27
+    width: 450px;
28
+    height: 350px;
29
+}
30
+
31
+.library_img {
32
+    width: 100%;
15 33
 }
16 34
 
17 35
 #backtop {
18
-	text-align: right;
19
-	padding-right: 5px;
20
-	margin: 10px 0px;
21
-	font-size: 95%;
22
-	clear: both;
36
+    text-align: right;
37
+    padding-right: 5px;
38
+    margin: 10px 0px;
39
+    font-size: 95%;
40
+    clear: both;
23 41
 }
42
+
24 43
 ul {
25
-	line-height: 120%;
26
-	margin: 5px 0px 0px 30px;
44
+    line-height: 120%;
45
+    margin: 5px 0px 0px 30px;
27 46
 }
47
+
28 48
 ul#mass {
29
-	list-style-type: decimal;
30
-	margin: 5px 0px 0px 30px;
49
+    list-style-type: decimal;
50
+    margin: 5px 0px 0px 30px;
31 51
 }
52
+
32 53
 ul#life {
33
-	margin: 5px 0px 0px 40px;
54
+    margin: 5px 0px 0px 40px;
34 55
 }
56
+
35 57
 li {
36
-	display: list-item;
37
-	text-align: -webkit-match-parent;
58
+    display: list-item;
59
+    text-align: -webkit-match-parent;
38 60
 }
61
+
39 62
 #mass li {
40
-	list-style: decimal;
41
-	font-size: 95%;
42
-	font-weight: normal;
43
-	margin: 0px 0px 0px -5px;
44
-	_margin: 0px 0px 0px 5px;
45
-	margin-bottom: 5px;
63
+    list-style: decimal;
64
+    font-size: 95%;
65
+    font-weight: normal;
66
+    margin: 0px 0px 0px -5px;
67
+    _margin: 0px 0px 0px 5px;
68
+    margin-bottom: 5px;
46 69
 }
70
+
47 71
 #school_table {
48
-	margin-top: 3px;
72
+    margin-top: 3px;
49 73
 }
74
+
50 75
 table {
51
-	display: table;
52
-	border-collapse: separate;
53
-	border-spacing: 2px;
54
-	border-color: gray;
76
+    display: table;
77
+    border-collapse: separate;
78
+    border-spacing: 2px;
79
+    border-color: gray;
55 80
 }
81
+
56 82
 #school_table .bg3 {
57
-	background-color: #eeeedd;
83
+    background-color: #eeeedd;
58 84
 }
85
+
59 86
 #school_table .bg2 {
60
-	background-color: #eeeeee;
87
+    background-color: #eeeeee;
61 88
 }
89
+
62 90
 #school_table th.bg1 {
63
-	background-color: #ccddee;
64
-	font-weight: bold;
91
+    background-color: #ccddee;
92
+    font-weight: bold;
65 93
 }
94
+
66 95
 table#infokitagata th {
67
-	vertical-align: top;
68
-	text-align: left;
69
-	background-color: #add8e6;
96
+    vertical-align: top;
97
+    text-align: left;
98
+    background-color: #add8e6;
70 99
 }
100
+
71 101
 th {
72
-	border-top: 1px solid #ffffff;
73
-	border-left: 1px solid #ffffff;
74
-	text-align: left;
75
-	vertical-align: top;
76
-	font-weight: normal;
77
-	padding: 0.3em;
78
-	font-size: 95%;
102
+    border-top: 1px solid #ffffff;
103
+    border-left: 1px solid #ffffff;
104
+    text-align: left;
105
+    vertical-align: top;
106
+    font-weight: normal;
107
+    padding: 0.3em;
108
+    font-size: 95%;
79 109
 }
110
+
80 111
 /*
81 112
 table#infokitagata td {
82 113
 	vertical-align: top;
@@ -85,70 +116,87 @@ table#infokitagata td {
85 116
 }
86 117
 */
87 118
 .list_label {
88
-	width: 100px;
89
-	float: left;
119
+    width: 100px;
120
+    float: left;
90 121
 }
122
+
91 123
 .img_caption_l {
92
-	margin: 1px 10px 3px 2px;
93
-	width: 200px;
94
-	text-align: center;
95
-	font-size: 85%;
96
-	float: left;
124
+    margin: 1px 10px 3px 2px;
125
+    width: 200px;
126
+    text-align: center;
127
+    font-size: 85%;
128
+    float: left;
97 129
 }
130
+
98 131
 .img_caption_0 {
99
-	margin: 1px 10px 3px 2px;
100
-	width: 480px;
101
-	text-align: center;
102
-	font-size: 85%;
103
-	float: left;
132
+    margin: 1px 10px 3px 2px;
133
+    width: 480px;
134
+    text-align: center;
135
+    font-size: 85%;
136
+    float: left;
104 137
 }
138
+
105 139
 .img_caption_r {
106
-	margin: 1px 2px 3px 10px;
107
-	width: 200px;
108
-	text-align: center;
109
-	font-size: 85%;
110
-	float: right;
140
+    margin: 1px 2px 3px 10px;
141
+    width: 200px;
142
+    text-align: center;
143
+    font-size: 85%;
144
+    float: right;
111 145
 }
146
+
112 147
 img#left {
113
-	float: left;
114
-	padding: 3px;
115
-	border: 1px solid #CCCCCC;
116
-	margin: 3px 10px 3px 0px;
148
+    float: left;
149
+    padding: 3px;
150
+    border: 1px solid #CCCCCC;
151
+    margin: 3px 10px 3px 0px;
117 152
 }
153
+
118 154
 img#right {
119
-	float: right;
120
-	padding: 3px;
121
-	border: 1px solid #CCCCCC;
122
-	margin: 3px 0px 3px 10px;
155
+    float: right;
156
+    padding: 3px;
157
+    border: 1px solid #CCCCCC;
158
+    margin: 3px 0px 3px 10px;
123 159
 }
160
+
124 161
 h4#life {
125
-	clear: both;
126
-	margin: 10px 0px 5px 3px;
127
-	padding: 4px 0px 4px 20px;
128
-	_padding: 6px 0px 6px 22px;
129
-	font-size: 95%;
130
-	border: 1px solid #666699;
131
-	border-left: 4px solid #666699;
162
+    clear: both;
163
+    margin: 10px 0px 5px 3px;
164
+    padding: 4px 0px 4px 20px;
165
+    _padding: 6px 0px 6px 22px;
166
+    font-size: 95%;
167
+    border: 1px solid #666699;
168
+    border-left: 4px solid #666699;
132 169
 }
170
+
133 171
 img#center {
134
-	text-align: center;
135
-	display: block;
136
-	padding: 3px;
137
-	border: 1px solid #CCCCCC;
138
-	margin-right: auto;
139
-	margin-left: auto;
172
+    text-align: center;
173
+    display: block;
174
+    padding: 3px;
175
+    border: 1px solid #CCCCCC;
176
+    margin-right: auto;
177
+    margin-left: auto;
178
+}
179
+
180
+img.center {
181
+    text-align: center;
182
+    display: block;
183
+    padding: 3px;
184
+    border: 1px solid #CCCCCC;
185
+    margin-right: auto;
186
+    margin-left: auto;
140 187
 }
141 188
 
142 189
 img#lefticon {
143
-	float: left;
144
-	padding: 3px;
145
-	border: 1px solid #CCCCCC;
146
-	margin: 3px 10px 3px 40px;
190
+    float: left;
191
+    padding: 3px;
192
+    border: 1px solid #CCCCCC;
193
+    margin: 3px 10px 3px 40px;
147 194
 }
195
+
148 196
 .img_caption_licon {
149
-	margin: 1px 10px 3px 2px;
150
-	width: 130px;
151
-	text-align: center;
152
-	font-size: 85%;
153
-	float: left;
197
+    margin: 1px 10px 3px 2px;
198
+    width: 130px;
199
+    text-align: center;
200
+    font-size: 85%;
201
+    float: left;
154 202
 }

+ 31
- 0
css/school_mobile.css Ver fichero

@@ -0,0 +1,31 @@
1
+@media screen and (max-width: 768px) {
2
+    img.center {
3
+        text-align: center;
4
+        display: block;
5
+        padding: 3px;
6
+        border: 1px solid #CCCCCC;
7
+        margin-right: auto;
8
+        margin-left: auto;
9
+    }
10
+
11
+    .school_img_mobile {
12
+        margin-top: 10px;
13
+        margin-left: 5px;
14
+        padding: 0;
15
+        width: 215px;
16
+    }
17
+
18
+    .publicFacility_textHeight_mobile {
19
+        height: 175px;
20
+    }
21
+
22
+    .communityCenter_width_mobile {
23
+        width: 100%;
24
+    }
25
+
26
+    .library_imgBlock {
27
+        width: 100%;
28
+        height: auto;
29
+    }
30
+
31
+}

+ 295
- 256
css/second_body.css Ver fichero

@@ -1,270 +1,309 @@
1 1
 @charset "utf-8";
2 2
 
3 3
 /* space start */
4
-div#space{
5
-	position: absolute;
6
-	display: block;
7
-	top: 690px;
8
-	left: 40px;
9
-	width: 200px;
10
-	height: 410px;
11
-	margin: 0px 0px 0px 0px;
12
-	background-color: #ffffff;
13
-}
14
-	article#space{
15
-		position: relative;
16
-		display: block;
17
-		width: 180px;
18
-		height: 280px;
19
-		margin: 0px 0px 0px 0px;
20
-		padding: 10px 10px 10px 10px;
21
-	}
22
-	div#space_title{
23
-		position: relative;
24
-		display: block;
25
-		width: 180px;
26
-		height: 32px;
27
-		margin: 0px 0px 0px 0px;
28
-		background-image: url(img/shortbar.png);
29
-	}
30
-	div#space_title_block{
31
-		position: relative;
32
-		display: block;
33
-		width: 180px;
34
-		margin: 0px 0px 0px 10px;
35
-	}
36
-	span#space_title{
37
-		display: table-cell;
38
-		width: 180px;
39
-		height: 32px;
40
-		font-size: 18px;
41
-		color: #ffffff;
42
-		vertical-align: middle;
43
-	}
4
+div#space {
5
+    position: absolute;
6
+    display: block;
7
+    top: 690px;
8
+    left: 40px;
9
+    width: 200px;
10
+    height: 410px;
11
+    margin: 0px 0px 0px 0px;
12
+    background-color: #ffffff;
13
+}
14
+
15
+article#space {
16
+    position: relative;
17
+    display: block;
18
+    width: 180px;
19
+    height: 280px;
20
+    margin: 0px 0px 0px 0px;
21
+    padding: 10px 10px 10px 10px;
22
+}
23
+
24
+div#space_title {
25
+    position: relative;
26
+    display: block;
27
+    width: 180px;
28
+    height: 32px;
29
+    margin: 0px 0px 0px 0px;
30
+    background-image: url(img/shortbar.png);
31
+}
32
+
33
+div#space_title_block {
34
+    position: relative;
35
+    display: block;
36
+    width: 180px;
37
+    margin: 0px 0px 0px 10px;
38
+}
39
+
40
+span#space_title {
41
+    display: table-cell;
42
+    width: 180px;
43
+    height: 32px;
44
+    font-size: 18px;
45
+    color: #ffffff;
46
+    vertical-align: middle;
47
+}
48
+
44 49
 /* space end */
45 50
 
46 51
 /* template start */
47 52
 section#template {
48
-	position: relative;
49
-	display: block;
50
-	top: 0px;
51
-	left: 210px;
52
-	width: 710px;
53
-	min-height: 1020px;
54
-	margin: 10px 10px 10px 0px;
55
-	background-color: #ffffff;
56
-	/*background-image: url(img/topicbackground_secondfloor.png);*/
53
+    position: relative;
54
+    display: block;
55
+    top: 0px;
56
+    left: 210px;
57
+    width: 710px;
58
+    min-height: 1020px;
59
+    margin: 10px 10px 10px 0px;
60
+    background-color: #ffffff;
61
+    /*background-image: url(img/topicbackground_secondfloor.png);*/
57 62
 }
63
+
58 64
 .left {
59
-	float: left;
65
+    float: left;
60 66
 }
67
+
61 68
 .right {
62
-	float: right;
69
+    float: right;
63 70
 }
71
+
64 72
 .clear {
65
-	clear: both;
66
-}
67
-	/* breadcrumb start */
68
-	article#breadcrumb {
69
-		position: relative;
70
-		display: block;
71
-		left: 0px;
72
-		width: 690px;
73
-		height: 20px;
74
-		margin: 0px 0px 0px 0px;
75
-		padding: 10px 10px 0px 10px;
76
-	}
77
-	div#breadcrumb_title{
78
-		position: absolute;
79
-		display: block;
80
-		width: 690px;
81
-		height: 20px;
82
-		margin: 0px 0px 0px 0px;
83
-	}
84
-
85
-	div#breadcrumb_title_block{
86
-		position: relative;
87
-		display: block;
88
-		width: 690px;
89
-		margin: 0px 0px 0px 10px;
90
-	}
91
-	/* breadcrumb end */
92
-
93
-	/* template start */
94
-	article#template{
95
-		position: relative;
96
-		display: block;
97
-		width: 690px;
98
-		/*height: 460px;*/
99
-		margin: 0px 0px 0px 0px;
100
-		padding: 10px 10px 10px 10px;
101
-	}
102
-
103
-	div#template_title{
104
-		position: relative;
105
-		display: block;
106
-		width: 690px;
107
-		height: 32px;
108
-		margin: 0px 0px 0px 0px;
109
-		background-image: url(img/longbar_secondfloor.png);
110
-	}
111
-
112
-	div#template_title_block{
113
-		position: relative;
114
-		display: block;
115
-		width: 690px;
116
-		margin: 0px 0px 0px 10px;
117
-	}
118
-	span#template_title{
119
-		display: table-cell;
120
-		width: 690px;
121
-		height: 32px;
122
-		font-size: 18px;
123
-		color: #ffffff;
124
-		vertical-align: middle;
125
-		font-weight:bold;
126
-	}
127
-	/* template end */
128
-
129
-	/* template_list_title start */
130
-	article#template_list_title{
131
-		position: relative;
132
-		display: block;
133
-		width: 325px;
134
-		/*height: 460px;*/
135
-		margin: 0px 0px 0px 0px;
136
-		padding: 0px 10px 10px 10px;
137
-	}
138
-	div#template_title2{
139
-		position: relative;
140
-		display: block;
141
-		width: 325px;
142
-		height: 32px;
143
-		margin: 0px 0px 0px 0px;
144
-		background-color: #35b7ac;
145
-		/*background-image: url(img/longbar2_secondfloor.png);*/
146
-	}
147
-	div#template_title_koho{
148
-		position: relative;
149
-		display: block;
150
-		width: 325px;
151
-		height: 32px;
152
-		margin: 0px 0px 0px 0px;
153
-		/*background-color: #35b7ac;*/
154
-		background-image: url(img/longbar2_secondfloor.png);
155
-	}
156
-	span#template_title2{
157
-		display: table-cell;
158
-		width: 325px;
159
-		height: 32px;
160
-		font-size: 18px;
161
-		color: #FFFFFF;
162
-		vertical-align: middle;
163
-		/*font-weight:bold;*/
164
-		text-decoration: underline;
165
-	}
166
-	span#template_title_koho{
167
-		display: table-cell;
168
-		width: 325px;
169
-		height: 32px;
170
-		font-size: 18px;
171
-		color: #000000;
172
-		vertical-align: middle;
173
-		font-weight:bold;
174
-		/*stext-decoration: underline;*/
175
-	}
176
-	/* template_list_title end */
177
-	span.template_icon{
178
-		position: relative;
179
-		top: 6px;
180
-		width: 20px;
181
-		height: 20px;
182
-		font-size: 18px;
183
-		color: #FFFFFF;
184
-		vertical-align: middle;
185
-		/*font-weight:bold;*/
186
-		text-decoration: none;
187
-	}
188
-	span.template_list{
189
-		display: inline;
190
-		width: 325px;
191
-		font-size: 18px;
192
-		margin: 0px 0px 10px 0px;
193
-		color: #000000;
194
-		vertical-align: middle;
195
-	}
196
-	div.template_list{
197
-		display: block;
198
-		width: 325px;
199
-		font-size: 18px;
200
-		margin: 0px 0px 10px 0px;
201
-		color: #000000;
202
-		vertical-align: middle;
203
-	}
204
-	img.template_list{
205
-		position: relative;
206
-		display: block;
207
-		vertical-align: middle;
208
-	}
209
-	span.template_list_img{
210
-		display: block;
211
-		height: 15px;
212
-		font-size: 18px;
213
-		margin: 0px 5px 10px 0px;
214
-		color: #000000;
215
-		vertical-align: middle;
216
-	}
217
-	a.s_link{
218
-		color: #FFFFFF;
219
-	}
220
-	/* template start */
221
-	span#template_article_block {
222
-		position: relative;
223
-		display: block;
224
-		width: 690px;
225
-		margin: 10px 0px 10px 0px;
226
-	}
227
-	/* template end */
228
-	article#template_list_title3{
229
-		position: relative;
230
-		display: block;
231
-		width: 690px;
232
-		/*height: 460px;*/
233
-		margin: 0px 0px 0px 0px;
234
-		padding: 0px 10px 10px 10px;
235
-	}
236
-	div#template_title3{
237
-		position: relative;
238
-		display: block;
239
-		width: 690px;
240
-		height: 32px;
241
-		margin: 0px 0px 0px 0px;
242
-		background-color: #35b7ac;
243
-		/*background-image: url(img/longbar2_secondfloor.png);*/
244
-	}
245
-	span#template_title3{
246
-		display: table-cell;
247
-		width: 690px;
248
-		height: 32px;
249
-		font-size: 18px;
250
-		color: #FFFFFF;
251
-		vertical-align: middle;
252
-		/*font-weight:bold;*/
253
-		text-decoration: underline;
254
-	}
255
-	div.space250{
256
-		height:250px;
257
-	}
258
-	div.space200{
259
-		height:200px;
260
-	}
261
-	div.space100{
262
-		height:100px;
263
-	}
264
-	div.space10{
265
-		height:10px;
266
-	}
267
-	div.textmargin{
268
-		margin: 0px 0px 0px 15px;
269
-	}
73
+    clear: both;
74
+}
75
+
76
+/* breadcrumb start */
77
+article#breadcrumb {
78
+    position: relative;
79
+    display: block;
80
+    left: 0px;
81
+    width: 690px;
82
+    height: 20px;
83
+    margin: 0px 0px 0px 0px;
84
+    padding: 10px 10px 0px 10px;
85
+}
86
+
87
+div#breadcrumb_title {
88
+    position: absolute;
89
+    display: block;
90
+    width: 690px;
91
+    height: 20px;
92
+    margin: 0px 0px 0px 0px;
93
+}
94
+
95
+div#breadcrumb_title_block {
96
+    position: relative;
97
+    display: block;
98
+    width: 690px;
99
+    margin: 0px 0px 0px 10px;
100
+}
101
+
102
+/* breadcrumb end */
103
+
104
+/* template start */
105
+article#template {
106
+    position: relative;
107
+    display: block;
108
+    width: 690px;
109
+    /*height: 460px;*/
110
+    margin: 0px 0px 0px 0px;
111
+    padding: 10px 10px 10px 10px;
112
+}
113
+
114
+div#template_title {
115
+    position: relative;
116
+    display: block;
117
+    width: 690px;
118
+    height: 32px;
119
+    margin: 0px 0px 0px 0px;
120
+    background-image: url(img/longbar_secondfloor.png);
121
+}
122
+
123
+div#template_title_block {
124
+    position: relative;
125
+    display: block;
126
+    width: 690px;
127
+    margin: 0px 0px 0px 10px;
128
+}
129
+
130
+span#template_title {
131
+    display: table-cell;
132
+    width: 690px;
133
+    height: 32px;
134
+    font-size: 18px;
135
+    color: #ffffff;
136
+    vertical-align: middle;
137
+    font-weight: bold;
138
+}
139
+
140
+/* template end */
141
+
142
+/* template_list_title start */
143
+article#template_list_title {
144
+    position: relative;
145
+    display: block;
146
+    width: 325px;
147
+    /*height: 460px;*/
148
+    margin: 0px 0px 0px 0px;
149
+    padding: 0px 10px 10px 10px;
150
+}
151
+
152
+div#template_title2 {
153
+    position: relative;
154
+    display: block;
155
+    width: 325px;
156
+    height: 32px;
157
+    margin: 0px 0px 0px 0px;
158
+    background-color: #35b7ac;
159
+    /*background-image: url(img/longbar2_secondfloor.png);*/
160
+}
161
+
162
+div#template_title_koho {
163
+    position: relative;
164
+    display: block;
165
+    width: 325px;
166
+    height: 32px;
167
+    margin: 0px 0px 0px 0px;
168
+    /*background-color: #35b7ac;*/
169
+    background-image: url(img/longbar2_secondfloor.png);
170
+}
171
+
172
+span#template_title2 {
173
+    display: table-cell;
174
+    width: 325px;
175
+    height: 32px;
176
+    font-size: 18px;
177
+    color: #FFFFFF;
178
+    vertical-align: middle;
179
+    /*font-weight:bold;*/
180
+    text-decoration: underline;
181
+}
182
+
183
+span#template_title_koho {
184
+    display: table-cell;
185
+    width: 325px;
186
+    height: 32px;
187
+    font-size: 18px;
188
+    color: #000000;
189
+    vertical-align: middle;
190
+    font-weight: bold;
191
+    /*stext-decoration: underline;*/
192
+}
193
+
194
+/* template_list_title end */
195
+span.template_icon {
196
+    position: relative;
197
+    top: 6px;
198
+    width: 20px;
199
+    height: 20px;
200
+    font-size: 18px;
201
+    color: #FFFFFF;
202
+    vertical-align: middle;
203
+    /*font-weight:bold;*/
204
+    text-decoration: none;
205
+}
206
+
207
+span.template_list {
208
+    display: inline;
209
+    width: 325px;
210
+    font-size: 18px;
211
+    margin: 0px 0px 10px 0px;
212
+    color: #000000;
213
+    vertical-align: middle;
214
+}
215
+
216
+div.template_list {
217
+    display: block;
218
+    width: 325px;
219
+    font-size: 18px;
220
+    margin: 0px 0px 10px 0px;
221
+    color: #000000;
222
+    vertical-align: middle;
223
+}
224
+
225
+img.template_list {
226
+    position: relative;
227
+    display: block;
228
+    vertical-align: middle;
229
+}
230
+
231
+span.template_list_img {
232
+    display: block;
233
+    height: 15px;
234
+    font-size: 18px;
235
+    margin: 0px 5px 10px 0px;
236
+    color: #000000;
237
+    vertical-align: middle;
238
+}
239
+
240
+a.s_link {
241
+    color: #FFFFFF;
242
+}
243
+
244
+/* template start */
245
+span#template_article_block {
246
+    position: relative;
247
+    display: block;
248
+    width: 690px;
249
+    margin: 10px 0px 10px 0px;
250
+}
251
+
252
+/* template end */
253
+article#template_list_title3 {
254
+    position: relative;
255
+    display: block;
256
+    width: 690px;
257
+    /*height: 460px;*/
258
+    margin: 0px 0px 0px 0px;
259
+    padding: 0px 10px 10px 10px;
260
+}
261
+
262
+div#template_title3 {
263
+    position: relative;
264
+    display: block;
265
+    width: 690px;
266
+    height: 32px;
267
+    margin: 0px 0px 0px 0px;
268
+    background-color: #35b7ac;
269
+    /*background-image: url(img/longbar2_secondfloor.png);*/
270
+}
271
+
272
+span#template_title3 {
273
+    display: table-cell;
274
+    width: 690px;
275
+    height: 32px;
276
+    font-size: 18px;
277
+    color: #FFFFFF;
278
+    vertical-align: middle;
279
+    /*font-weight:bold;*/
280
+    text-decoration: underline;
281
+}
282
+
283
+@media screen and (max-width: 768px) {
284
+    span#template_title3 {
285
+        text-decoration: none;
286
+    }
287
+}
288
+
289
+div.space250 {
290
+    height: 250px;
291
+}
292
+
293
+div.space200 {
294
+    height: 200px;
295
+}
296
+
297
+div.space100 {
298
+    height: 100px;
299
+}
300
+
301
+div.space10 {
302
+    height: 10px;
303
+}
304
+
305
+div.textmargin {
306
+    margin: 0px 0px 0px 15px;
307
+}
308
+
270 309
 /* template end */

+ 641
- 0
css/second_body_mobile.css Ver fichero

@@ -0,0 +1,641 @@
1
+@charset "utf-8";
2
+
3
+/* space start */
4
+div#space {
5
+    position: absolute;
6
+    display: block;
7
+    top: 690px;
8
+    left: 40px;
9
+    width: 200px;
10
+    height: 410px;
11
+    margin: 0px 0px 0px 0px;
12
+    background-color: #ffffff;
13
+}
14
+
15
+article#space {
16
+    position: relative;
17
+    display: block;
18
+    width: 180px;
19
+    height: 280px;
20
+    margin: 0px 0px 0px 0px;
21
+    padding: 10px 10px 10px 10px;
22
+}
23
+
24
+div#space_title {
25
+    position: relative;
26
+    display: block;
27
+    width: 180px;
28
+    height: 32px;
29
+    margin: 0px 0px 0px 0px;
30
+    background-image: url(img/shortbar.png);
31
+}
32
+
33
+div#space_title_block {
34
+    position: relative;
35
+    display: block;
36
+    width: 180px;
37
+    margin: 0px 0px 0px 10px;
38
+}
39
+
40
+span#space_title {
41
+    display: table-cell;
42
+    width: 180px;
43
+    height: 32px;
44
+    font-size: 18px;
45
+    color: #ffffff;
46
+    vertical-align: middle;
47
+}
48
+
49
+/* space end */
50
+
51
+/* template start */
52
+section#template {
53
+    position: relative;
54
+    display: block;
55
+    top: 0px;
56
+    left: 210px;
57
+    width: 710px;
58
+    min-height: 1020px;
59
+    margin: 10px 10px 10px 0px;
60
+    background-color: #ffffff;
61
+    /*background-image: url(img/topicbackground_secondfloor.png);*/
62
+}
63
+
64
+.left {
65
+    float: left;
66
+}
67
+
68
+.left_mobile {
69
+    float: left;
70
+}
71
+
72
+.right {
73
+    float: right;
74
+}
75
+
76
+.right_mobile {
77
+    float: right;
78
+}
79
+
80
+.clear {
81
+    clear: both;
82
+}
83
+
84
+/* breadcrumb start */
85
+article#breadcrumb {
86
+    position: relative;
87
+    display: block;
88
+    left: 0px;
89
+    width: 690px;
90
+    height: 20px;
91
+    margin: 0px 0px 0px 0px;
92
+    padding: 10px 10px 0px 10px;
93
+}
94
+
95
+div#breadcrumb_title {
96
+    position: absolute;
97
+    display: block;
98
+    width: 690px;
99
+    height: 20px;
100
+    margin: 0px 0px 0px 0px;
101
+}
102
+
103
+div#breadcrumb_title_block {
104
+    position: relative;
105
+    display: block;
106
+    width: 690px;
107
+    margin: 0px 0px 0px 10px;
108
+}
109
+
110
+/* breadcrumb end */
111
+
112
+/* template start */
113
+article#template {
114
+    position: relative;
115
+    display: block;
116
+    width: 690px;
117
+    /*height: 460px;*/
118
+    margin: 0px 0px 0px 0px;
119
+    padding: 10px 10px 10px 10px;
120
+}
121
+
122
+div#template_title {
123
+    position: relative;
124
+    display: block;
125
+    width: 690px;
126
+    height: 32px;
127
+    margin: 0px 0px 0px 0px;
128
+    background-image: url(img/longbar_secondfloor.png);
129
+}
130
+
131
+div#template_title_block {
132
+    position: relative;
133
+    display: block;
134
+    width: 690px;
135
+    margin: 0px 0px 0px 10px;
136
+}
137
+
138
+span#template_title {
139
+    display: table-cell;
140
+    width: 690px;
141
+    height: 32px;
142
+    font-size: 18px;
143
+    color: #ffffff;
144
+    vertical-align: middle;
145
+    font-weight: bold;
146
+}
147
+
148
+/* template end */
149
+
150
+/* template_list_title start */
151
+article#template_list_title {
152
+    position: relative;
153
+    display: block;
154
+    width: 325px;
155
+    /*height: 460px;*/
156
+    margin: 0px 0px 0px 0px;
157
+    padding: 0px 10px 10px 10px;
158
+}
159
+
160
+div#template_title2 {
161
+    position: relative;
162
+    display: block;
163
+    width: 325px;
164
+    height: 32px;
165
+    margin: 0px 0px 0px 0px;
166
+    background-color: #35b7ac;
167
+    /*background-image: url(img/longbar2_secondfloor.png);*/
168
+}
169
+
170
+div#template_title_koho {
171
+    position: relative;
172
+    display: block;
173
+    width: 325px;
174
+    height: 32px;
175
+    margin: 0px 0px 0px 0px;
176
+    /*background-color: #35b7ac;*/
177
+    background-image: url(img/longbar2_secondfloor.png);
178
+}
179
+
180
+span#template_title2 {
181
+    display: table-cell;
182
+    width: 325px;
183
+    height: 32px;
184
+    font-size: 18px;
185
+    color: #FFFFFF;
186
+    vertical-align: middle;
187
+    /*font-weight:bold;*/
188
+    text-decoration: underline;
189
+}
190
+
191
+span#template_title_koho {
192
+    display: table-cell;
193
+    width: 325px;
194
+    height: 32px;
195
+    font-size: 18px;
196
+    color: #000000;
197
+    vertical-align: middle;
198
+    font-weight: bold;
199
+    /*stext-decoration: underline;*/
200
+}
201
+
202
+/* template_list_title end */
203
+span.template_icon {
204
+    position: relative;
205
+    top: 6px;
206
+    width: 20px;
207
+    height: 20px;
208
+    font-size: 18px;
209
+    color: #FFFFFF;
210
+    vertical-align: middle;
211
+    /*font-weight:bold;*/
212
+    text-decoration: none;
213
+}
214
+
215
+span.template_list {
216
+    display: inline;
217
+    width: 325px;
218
+    font-size: 18px;
219
+    margin: 0px 0px 10px 0px;
220
+    color: #000000;
221
+    vertical-align: middle;
222
+}
223
+
224
+div.template_list {
225
+    display: block;
226
+    width: 325px;
227
+    font-size: 18px;
228
+    margin: 0px 0px 10px 0px;
229
+    color: #000000;
230
+    vertical-align: middle;
231
+}
232
+
233
+img.template_list {
234
+    position: relative;
235
+    display: block;
236
+    vertical-align: middle;
237
+}
238
+
239
+span.template_list_img {
240
+    display: block;
241
+    height: 15px;
242
+    font-size: 18px;
243
+    margin: 0px 5px 10px 0px;
244
+    color: #000000;
245
+    vertical-align: middle;
246
+}
247
+
248
+a.s_link {
249
+    color: #FFFFFF;
250
+}
251
+
252
+/* template start */
253
+span#template_article_block {
254
+    position: relative;
255
+    display: block;
256
+    width: 690px;
257
+    margin: 10px 0px 10px 0px;
258
+}
259
+
260
+/* template end */
261
+article#template_list_title3 {
262
+    position: relative;
263
+    display: block;
264
+    width: 690px;
265
+    /*height: 460px;*/
266
+    margin: 0px 0px 0px 0px;
267
+    padding: 0px 10px 10px 10px;
268
+}
269
+
270
+div#template_title3 {
271
+    position: relative;
272
+    display: block;
273
+    width: 690px;
274
+    height: 32px;
275
+    margin: 0px 0px 0px 0px;
276
+    background-color: #35b7ac;
277
+    /*background-image: url(img/longbar2_secondfloor.png);*/
278
+}
279
+
280
+span#template_title3 {
281
+    display: table-cell;
282
+    width: 690px;
283
+    height: 32px;
284
+    font-size: 18px;
285
+    color: #FFFFFF;
286
+    vertical-align: middle;
287
+    /*font-weight:bold;*/
288
+    /*text-decoration: underline;*/
289
+}
290
+
291
+div.space250 {
292
+    height: 250px;
293
+}
294
+
295
+div.space200 {
296
+    height: 200px;
297
+}
298
+
299
+div.space100 {
300
+    height: 100px;
301
+}
302
+
303
+div.space10 {
304
+    height: 10px;
305
+}
306
+
307
+div.textmargin {
308
+    margin: 0px 0px 0px 15px;
309
+}
310
+
311
+/* template end */
312
+
313
+
314
+@media screen and (max-width: 768px) {
315
+    /* template start */
316
+    section#template {
317
+        position: relative;
318
+        display: block;
319
+        top: 0px;
320
+        left: 0px;
321
+        width: calc(100% - 20px);
322
+        min-height: auto;
323
+        margin: 10px 10px 10px 10px;
324
+        background-color: #ffffff;
325
+        /*background-image: url(img/topicbackground_secondfloor.png);*/
326
+    }
327
+
328
+    /* breadcrumb start */
329
+    article#breadcrumb {
330
+        position: relative;
331
+        display: block;
332
+        left: 0px;
333
+        width: calc(100% - 20px);
334
+        height: auto;
335
+        margin: 0;
336
+        padding: 10px 10px 0px 10px;
337
+    }
338
+
339
+    div#breadcrumb_title {
340
+        position: relative;
341
+        display: block;
342
+        width: calc(100% - 20px);
343
+        height: auto;
344
+        margin: 0;
345
+    }
346
+
347
+    div#breadcrumb_title_block {
348
+        position: relative;
349
+        display: block;
350
+        width: calc(100% - 20px);
351
+        margin: 0px 0px 0px 10px;
352
+    }
353
+
354
+    /* breadcrumb end */
355
+    /* template start */
356
+    article#template {
357
+        position: relative;
358
+        display: block;
359
+        width: calc(100% - 20px);
360
+        /*height: 460px;*/
361
+        margin: 0px 0px 0px 0px;
362
+        padding: 10px 10px 10px 10px;
363
+    }
364
+
365
+    div#template_title {
366
+        position: relative;
367
+        display: block;
368
+        width: calc(100% - 20px);
369
+        height: 32px;
370
+        margin: 0px 0px 0px 0px;
371
+        background-image: url(img/longbar_secondfloor.png);
372
+        background-size: cover;
373
+    }
374
+
375
+    div#template_title_block {
376
+        position: relative;
377
+        display: block;
378
+        width: calc(100% - 20px);
379
+        margin: 0px 0px 0px 10px;
380
+    }
381
+
382
+    span#template_title {
383
+        display: table-cell;
384
+        width: calc(100% - 20px);
385
+        height: 32px;
386
+        font-size: 18px;
387
+        color: #ffffff;
388
+        vertical-align: middle;
389
+        font-weight: bold;
390
+    }
391
+
392
+    /* template end */
393
+    /* template_list_title start */
394
+    article#template_list_title {
395
+        position: relative;
396
+        display: block;
397
+        width: calc(100% - 20px);
398
+        /*height: 460px;*/
399
+        margin: 0px 0px 0px 0px;
400
+        padding: 0px 10px 10px 10px;
401
+    }
402
+
403
+    div#template_title2 {
404
+        position: relative;
405
+        display: block;
406
+        width: calc(100% - 20px);
407
+        height: auto;
408
+        margin: 0px 0px 0px 0px;
409
+        background-color: #35b7ac;
410
+        /*background-image: url(img/longbar2_secondfloor.png);*/
411
+    }
412
+
413
+    div#template_title_koho {
414
+        position: relative;
415
+        display: block;
416
+        width: 325px;
417
+        height: 32px;
418
+        margin: 0px 0px 0px 0px;
419
+        /*background-color: #35b7ac;*/
420
+        background-image: url(img/longbar2_secondfloor.png);
421
+    }
422
+
423
+    span#template_title2 {
424
+        display: table-cell;
425
+        width: calc(100% - 20px);
426
+        height: auto;
427
+        padding: 5px 0px;
428
+        font-size: 18px;
429
+        color: #000000;
430
+        vertical-align: middle;
431
+        /*font-weight:bold;*/
432
+        text-decoration: underline;
433
+    }
434
+
435
+    span#template_title_koho {
436
+        display: table-cell;
437
+        width: 325px;
438
+        height: 32px;
439
+        font-size: 18px;
440
+        color: #000000;
441
+        vertical-align: middle;
442
+        font-weight: bold;
443
+        /*stext-decoration: underline;*/
444
+    }
445
+
446
+    /* template_list_title end */
447
+    span.template_icon {
448
+        position: relative;
449
+        top: 6px;
450
+        width: 20px;
451
+        height: 20px;
452
+        font-size: 18px;
453
+        color: #FFFFFF;
454
+        vertical-align: middle;
455
+        /*font-weight:bold;*/
456
+        text-decoration: none;
457
+    }
458
+
459
+    span.template_list {
460
+        display: inline;
461
+        width: calc(100% - 20px);
462
+        font-size: 18px;
463
+        margin: 0px 0px 10px 0px;
464
+        color: #000000;
465
+        vertical-align: middle;
466
+    }
467
+
468
+    div.template_list {
469
+        display: block;
470
+        width: calc(100% - 20px);
471
+        font-size: 18px;
472
+        margin: 0px 0px 10px 0px;
473
+        color: #000000;
474
+        vertical-align: middle;
475
+    }
476
+
477
+    img.template_list {
478
+        position: relative;
479
+        display: block;
480
+        vertical-align: middle;
481
+    }
482
+
483
+    span.template_list_img {
484
+        display: block;
485
+        height: 15px;
486
+        font-size: 18px;
487
+        margin: 0px 5px 10px 0px;
488
+        color: #000000;
489
+        vertical-align: middle;
490
+    }
491
+
492
+    a.s_link {
493
+        color: #FFFFFF;
494
+    }
495
+
496
+    /* template start */
497
+    span#template_article_block {
498
+        position: relative;
499
+        display: block;
500
+        width: calc(100% - 20px);
501
+        margin: 10px 0px 10px 0px;
502
+    }
503
+
504
+    /* template end */
505
+    article#template_list_title3 {
506
+        position: relative;
507
+        display: block;
508
+        width: calc(100% - 20px);
509
+        /*height: 460px;*/
510
+        margin: 0px 0px 0px 0px;
511
+        padding: 0px 10px 10px 10px;
512
+    }
513
+
514
+    div#template_title3 {
515
+        position: relative;
516
+        display: block;
517
+        width: calc(100% - 20px);
518
+        height: 32px;
519
+        margin: 0px 0px 0px 0px;
520
+        background-color: #35b7ac;
521
+        /*background-image: url(img/longbar2_secondfloor.png);*/
522
+    }
523
+
524
+    span#template_title3 {
525
+        display: table-cell;
526
+        width: calc(100% - 20px);
527
+        height: 32px;
528
+        font-size: 18px;
529
+        color: #FFFFFF;
530
+        vertical-align: middle;
531
+        /*font-weight:bold;*/
532
+        /*text-decoration: underline;*/
533
+    }
534
+
535
+    .left_mobile {
536
+        float: none;
537
+    }
538
+
539
+    .right_mobile {
540
+        float: none;
541
+    }
542
+
543
+    .accordion__container {
544
+        margin: 0 auto;
545
+    }
546
+
547
+    .accordion__title {
548
+        position: relative;
549
+        cursor: pointer;
550
+        user-select: none;
551
+    }
552
+
553
+    .accordion__title::before, .accordion__title::after {
554
+        content: '';
555
+        display: block;
556
+        background-color: #000;
557
+        position: absolute;
558
+        top: 50%;
559
+        width: 15px;
560
+        height: 2px;
561
+        right: 25px;
562
+    }
563
+
564
+    .accordion__title::after {
565
+        transform: rotate(90deg);
566
+        transition-duration: 0.3s;
567
+    }
568
+
569
+    .accordion__title.is-active::before {
570
+        opacity: 0;
571
+    }
572
+
573
+    .accordion__title.is-active::after {
574
+        transform: rotate(0);
575
+    }
576
+
577
+    .accordion__content {
578
+        border-left: 1px solid transparent;
579
+        border-right: 1px solid transparent;
580
+        padding: 0 1.5em;
581
+        line-height: 0;
582
+        height: 0;
583
+        overflow: hidden;
584
+        opacity: 0;
585
+        transition-duration: 0.3s;
586
+    }
587
+
588
+    .accordion__content.is-open {
589
+        line-height: normal;
590
+        /* numberに書き換える*/
591
+        height: auto;
592
+        opacity: 1;
593
+    }
594
+
595
+    article#template_list_title_2 {
596
+        position: relative;
597
+        display: block;
598
+        width: calc(100% - 20px);
599
+        /*height: 460px;*/
600
+        margin: 0px 0px 0px 0px;
601
+        padding: 0px 10px 10px 10px;
602
+    }
603
+
604
+    div#template_title_2 {
605
+        position: relative;
606
+        display: block;
607
+        width: calc(100% - 20px);
608
+        height: 32px;
609
+        margin: 0px 0px 0px 0px;
610
+        background-image: url(img/longbar2_secondfloor.png);
611
+    }
612
+
613
+    span#template_title_2 {
614
+        display: table-cell;
615
+        width: calc(100% - 20px);
616
+        height: 32px;
617
+        font-size: 18px;
618
+        color: #000000;
619
+        vertical-align: middle;
620
+        font-weight: bold;
621
+    }
622
+
623
+    div#template_title_block_2 {
624
+        position: relative;
625
+        display: block;
626
+        width: calc(100% - 20px);
627
+        margin: 0px 0px 0px 10px;
628
+    }
629
+
630
+    span#template_article_block_2 {
631
+        position: relative;
632
+        display: block;
633
+        width: calc(100% - 20px);
634
+        margin: 10px 0px 10px 10px;
635
+    }
636
+
637
+    .img__sp {
638
+        width: 100%;
639
+    }
640
+
641
+}

+ 529
- 0
css/second_header_mobile.css Ver fichero

@@ -0,0 +1,529 @@
1
+@charset "utf-8";
2
+
3
+/* ********************************************** 
4
+ * header定義 css
5
+ * 
6
+ * headerの大きさ・位置定義
7
+ * 
8
+ ********************************************** */
9
+
10
+/* 
11
+ * 2014/02/26
12
+ * header 大きさ定義
13
+ * 
14
+ */
15
+
16
+.header {
17
+	display: none;
18
+}
19
+
20
+@media screen and (max-width: 768px) {
21
+header {
22
+	position: absolute;
23
+	display: none;
24
+	top: 0px;
25
+	left: 0px;
26
+	width: 200px;
27
+	height: 600px;
28
+	margin: 80px 0px 0px 40px;
29
+	background-image: url(img/header_background.png);
30
+}
31
+
32
+div#header{
33
+	position: absolute;
34
+	display: none;
35
+	top:0px;
36
+}
37
+
38
+div#h_block_1{
39
+	position: relative;
40
+	display: none;
41
+	width: 200px;
42
+	height: 250px;
43
+}
44
+div#h_block_search{
45
+	position: relative;
46
+	display: none;
47
+	width: 200px;
48
+	height: 50px;
49
+}
50
+div.h_line{
51
+	position: relative;
52
+	display: none;
53
+	width: 180px;
54
+	height: 0px;
55
+	margin: 0px 10px 0px 10px;
56
+	border-top: solid 2px #FFFFFF;
57
+}
58
+article.h_text_l{
59
+	position: relative;
60
+	display: none;
61
+	width: 150px;
62
+	height: 50px;
63
+	margin: 10px 10px 10px 30px;
64
+}
65
+span.h_text{
66
+	display: table-cell;
67
+	width: 180px;
68
+	height: 50px;
69
+	vertical-align: middle;
70
+	color: #ffffff;
71
+	font-size: 20px;
72
+}
73
+article.h_search{
74
+	position: relative;
75
+	display: none;
76
+	margin: 10px 0px 0px 10px;
77
+}
78
+
79
+a.h_link {
80
+	text-decoration: none;
81
+	color: black;
82
+}
83
+}
84
+
85
+/* ヘッダー レスポンシブ対応 */
86
+@media screen and (max-width: 768px) {
87
+
88
+	
89
+   /* ヘッダー */
90
+    .header {
91
+        display: flex;
92
+        margin-bottom: 16px;
93
+        width: 100%;
94
+        height: 56px;
95
+        background-color: #ffffff;
96
+
97
+	position: relative;
98
+	top: auto;
99
+	left: auto;
100
+	margin: 0px 0px 0px 0px;
101
+	background-image: none;
102
+
103
+    }
104
+
105
+    .headerLogo__image {
106
+        margin: 10px 6px;
107
+        width: 37px;
108
+        height: 32px;
109
+        object-fit: cover;
110
+    }
111
+
112
+    .headerTitle {
113
+        align-self: center;
114
+        color: #109033;
115
+        /* font-size: 4.0vw; */
116
+    }
117
+
118
+	.headerTitle__text {
119
+        font-size: 5.5vw;
120
+    margin-block-start: 0.67em;
121
+    margin-block-end: 0.67em;
122
+    margin-inline-start: 0px;
123
+    margin-inline-end: 0px;
124
+    font-weight: bold;
125
+	}
126
+
127
+    .headerSubTitle {
128
+        align-self: center;
129
+        padding-top: 8px;
130
+        padding-left: 8px;
131
+        color: #109033;
132
+        font-size: 2.4vw;
133
+    }
134
+
135
+    .header_link {
136
+        color: #109033;
137
+        text-decoration: none;
138
+    }
139
+
140
+
141
+    /*ハンバーガーアイコンの作成 */
142
+    #h-menu {
143
+        position: absolute;
144
+        display: block;
145
+        width: 55px;
146
+        height: 56px;
147
+        top: 0px;
148
+        right: 0px;
149
+        background-color: #109033; /* アイコンの線の色 */
150
+    }
151
+
152
+    #h-menu span {
153
+        display: block;
154
+        position: absolute;
155
+        width: 23px;
156
+        height: 2px;
157
+        top: 36px;
158
+        left: 17px;
159
+        background: #ffffff;
160
+        -webkit-transition: 0.3s ease-in-out;
161
+        -moz-transition: 0.3s ease-in-out;
162
+        transition: 0.3s ease-in-out;
163
+    }
164
+
165
+    #h-menu span:nth-child(1) {
166
+        top: 14px;
167
+    }
168
+
169
+    #h-menu span:nth-child(2) {
170
+        top: 22px;
171
+    }
172
+
173
+    #h-menu span:nth-child(3) {
174
+        top: 30px;
175
+    }
176
+
177
+    /* ハンバーガーアイコン下のテキスト */
178
+    #h-text {
179
+        position: absolute;
180
+        width: 32px;
181
+        font-size: 6px;
182
+        color: #ffffff;
183
+        text-align: center;
184
+        top: 34px;
185
+        left: 12px;
186
+    }
187
+
188
+    /* メニュー */
189
+    #h-nav {
190
+        background: #FAFAFA;
191
+        position: absolute;
192
+        z-index: 9;
193
+        /* top: 3.125rem; */
194
+        top: 56px;
195
+        right: 0;
196
+        overflow-x: hidden;
197
+        width: 0;
198
+        -webkit-transition: 0.5s;
199
+        -moz-transition: 0.5s;
200
+        transition: 0.5s;
201
+    }
202
+
203
+    /* メニューを開いた時 */
204
+    #h-nav.open-menu {
205
+        width: 75%;
206
+    }
207
+
208
+    div.h-menu span:nth-child(1) {
209
+        transform: rotate(45deg);
210
+        top: 20px !important;
211
+    }
212
+
213
+    div.h-menu span:nth-child(2) {
214
+        width: 0;
215
+        opacity: 0;
216
+    }
217
+
218
+    div.h-menu span:nth-child(3) {
219
+        transform: rotate(-45deg);
220
+        top: 20px !important;
221
+    }
222
+
223
+    /* ハンバーガーアイコン下のテキスト */
224
+    div.h-menu :nth-child(4) {
225
+        display: none;
226
+    }
227
+
228
+	div.h-menu_main_block {
229
+        position: relative;
230
+        display: block;
231
+        width: 90%;
232
+        margin: 20px auto;
233
+		margin-top: 0px;
234
+        /* font-size: larger; */
235
+    }
236
+
237
+    div.h-menu_main_block_top {
238
+        position: relative;
239
+        display: block;
240
+        width: 90%;
241
+        margin: 20px auto;
242
+        /* font-size: larger; */
243
+    }
244
+
245
+
246
+	div.h-menu_block_before::before{
247
+        content: '';
248
+        position: absolute;
249
+        right: 28px;
250
+        top: 50%;
251
+        margin-top: -8px;
252
+        width: 20px;
253
+        height: 20px;
254
+        border-top: 1px solid #888;
255
+        border-right: 1px solid #888;
256
+        transform: rotate(45deg);
257
+        z-index: 5;
258
+    }
259
+
260
+    div.h-menu_block {
261
+        position: relative;
262
+        display: block;
263
+        width: 100%;
264
+        height: 50px;
265
+        /* font-size: larger; */
266
+        
267
+    }
268
+
269
+    /* div.h-menu_block a { 
270
+        position: absolute;
271
+        display: block;
272
+        top: 0;
273
+        left: 0;
274
+        width: 100%;
275
+        height: 100%;
276
+    } */
277
+
278
+    div.h-menu_block_text {
279
+        position: relative;
280
+        display: inline-block;
281
+        width: 100%;
282
+        height: 50px;
283
+        background: #eee;
284
+        vertical-align: middle;
285
+        
286
+    }
287
+
288
+    div.h-menu_block_text_center {
289
+        margin-top: 20px;
290
+        margin-left: 20px;
291
+        color: black;
292
+    }
293
+
294
+    div.h-menu_block_left_start {
295
+        position: relative;
296
+        display: block;
297
+        width: calc(50% - 10px);
298
+        height: 50px;
299
+        float: left;
300
+        /* font-size: large; */
301
+    }
302
+
303
+	div.h-menu_block_left {
304
+        position: relative;
305
+        display: block;
306
+        width: calc(50% - 10px);
307
+        height: 50px;
308
+        margin-left: 20px;
309
+        float: left;
310
+        /* font-size: large; */
311
+    }
312
+
313
+    /* div.h-menu_block_left ::before {
314
+        content: '';
315
+        position: absolute;
316
+        right: 28px;
317
+        top: 50%;
318
+        margin-top: -8px;
319
+        width: 20px;
320
+        height: 20px;
321
+        border-top: 1px solid #AAA;
322
+        border-right: 1px solid #AAA;
323
+        transform: rotate(45deg);
324
+        
325
+    } */
326
+
327
+    div.h-menu_block_text_left_center {
328
+        margin-top: 10%;
329
+        margin-left: 15px;
330
+        
331
+    }
332
+
333
+    div.h-menu_block_clear {
334
+        display: block;
335
+        clear: both;
336
+    }
337
+
338
+    div.h-menu_lang {
339
+        position: relative;
340
+        display: block;
341
+        width: 100%;
342
+        height: 80px;
343
+    }
344
+    div.h-menu_block_lang {
345
+        position: relative;
346
+        display: inline-block;
347
+        width: 100%;
348
+        height: 80px;
349
+        background: #eee;
350
+        vertical-align: middle;
351
+    }
352
+    .h-menu_block_text_line {
353
+        height: 30px;
354
+    }
355
+    .h-menu_block_text_color_1{
356
+        position: relative;
357
+        display: inline; 
358
+        width: 30px;
359
+        /* height: 25px; */
360
+		padding: 0px 5px;
361
+		margin: 0px 3px;
362
+        text-align: center;
363
+        background: #D6D6D6;
364
+    }
365
+    .h-menu_block_text_color_2{
366
+        position: relative;
367
+        display: inline; 
368
+        width: 30px;
369
+        /* height: 25px; */
370
+		padding: 0px 5px;
371
+		margin: 0px 3px;
372
+        text-align: center;
373
+        background: #F7F3BC;
374
+    }
375
+    .h-menu_block_text_color_3{
376
+        position: relative;
377
+        display: inline; 
378
+        width: 30px;
379
+        /* height: 25px; */
380
+		padding: 0px 5px;
381
+		margin: 0px 3px;
382
+        text-align: center;
383
+        background: #DAEDD0;
384
+    }
385
+    .mobile_translation{
386
+        position: relative;
387
+        display: block;
388
+        top: -20px;
389
+        left: 78px;
390
+        height: 25px;
391
+    }
392
+
393
+    div.h-menu_search {
394
+        position: relative;
395
+        display: block;
396
+        width: 100%;
397
+        height: 50px;
398
+        margin-bottom: 20px;
399
+    }
400
+    div.h-menu_block_search {
401
+        position: relative;
402
+        display: inline-block;
403
+        width: 100%;
404
+        height: 45px;
405
+        vertical-align: middle;
406
+    }
407
+
408
+    .mobile_form_input{
409
+        width: 60%;
410
+        height: 40px;
411
+        margin: 0px;
412
+    }
413
+	input[type="submit"] {
414
+		appearance: none;
415
+		-webkit-appearance: none;
416
+		border-radius: 0px;
417
+	}
418
+
419
+	input[type="text"] {
420
+		appearance: none;
421
+		-webkit-appearance: none;
422
+		border-radius: 0px;
423
+	}	
424
+    .mobile_form_button{
425
+        display       : inline-block;
426
+        width: calc(40% - 15px);
427
+        height: 45px;
428
+        font-size     : large;        /* 文字サイズ */
429
+        text-align    : center;      /* 文字位置   */
430
+        cursor        : pointer;     /* カーソル   */
431
+        background    : #109033;     /* 背景色     */
432
+        color         : #ffffff;     /* 文字色     */
433
+        line-height   : 1em;         /* 1行の高さ  */
434
+        margin: 0px;
435
+        margin-left: -6px;
436
+        border: none;
437
+    }
438
+	.mobile_heigth {
439
+		  height: 0;
440
+	}
441
+
442
+.h-accordion__container {
443
+  margin: 0 auto;
444
+}
445
+
446
+.h-accordion__title {
447
+  position: relative;
448
+  cursor: pointer;
449
+  user-select: none;
450
+}
451
+
452
+/* .h-accordion__title::before, .h-accordion__title::after { */
453
+.h-accordion__title::after {
454
+        content: '';
455
+        position: absolute;
456
+        right: 28px;
457
+        top: 50%;
458
+        margin-top: -8px;
459
+        width: 20px;
460
+        height: 20px;
461
+        border-top: 1px solid #888;
462
+        border-right: 1px solid #888;
463
+        transform: rotate(45deg);
464
+}
465
+
466
+.h-accordion__title::after {
467
+  /* transform: rotate(90deg); */
468
+  transition-duration: 0.3s;
469
+}
470
+
471
+/* .h-accordion__title.h-is-active::before {
472
+  opacity: 0;
473
+} */
474
+
475
+.h-accordion__title.h-is-active::after {
476
+  transform: rotate(135deg);
477
+        top: 30%;
478
+}
479
+
480
+.h-accordion__content {
481
+  border-left: 1px solid transparent;
482
+  border-right: 1px solid transparent;
483
+  /* padding: 0 1.5em; */
484
+  padding-left: 0.5em;
485
+  line-height: 0;
486
+  height: 0;
487
+  overflow: hidden;
488
+  opacity: 0;
489
+  transition-duration: 0.3s;
490
+        /* background: #eee; */
491
+
492
+}
493
+
494
+.h-accordion__content.h-is-open {
495
+  line-height: normal;
496
+  /* numberに書き換える*/
497
+  height: auto;
498
+  opacity: 1;
499
+}
500
+
501
+	.h-menu_accordion_block_start{
502
+        position: relative;
503
+        display: block;
504
+        width: 100%;
505
+        height: 50px;
506
+		margin-top: 10px;
507
+		/* margin-bottom: 10px; */
508
+		padding-left: 1em;
509
+        /* background: #eee; */
510
+	}
511
+	.h-menu_accordion_block{
512
+        position: relative;
513
+        display: block;
514
+        width: 100%;
515
+        height: 50px;
516
+		/* margin-bottom: 10px; */
517
+		padding-left: 1em;
518
+        /* background: #eee; */
519
+	}
520
+
521
+	.h-menu_accordion_block_text{
522
+        position: relative;
523
+        display: block;
524
+		width: 80%;
525
+		padding-bottom: 10px;
526
+		border-bottom: solid 1px #ddd;
527
+	}
528
+    
529
+}

+ 4
- 1
css/second_template.css Ver fichero

@@ -142,6 +142,7 @@ section#template {
142 142
 		color: #000000;
143 143
 		vertical-align: middle;
144 144
 		font-weight:bold;
145
+		text-decoration: none;
145 146
 	}
146 147
 	/* template_list_title end */
147 148
 	span.template_list{
@@ -178,5 +179,7 @@ section#template {
178 179
 	div.space260{
179 180
 		height:260px;
180 181
 	}
181
-
182
+	div.space420{
183
+		height:420px;
184
+	}
182 185
 /* template end */

+ 186
- 0
css/second_template_mobile.css Ver fichero

@@ -0,0 +1,186 @@
1
+@charset "utf-8";
2
+
3
+@media screen and (max-width: 768px) {
4
+/* space start */
5
+div#space{
6
+	position: absolute;
7
+	display: block;
8
+	top: 690px;
9
+	left: 40px;
10
+	width: 200px;
11
+	height: 410px;
12
+	margin: 0px 0px 0px 0px;
13
+	background-color: #ffffff;
14
+}
15
+	article#space{
16
+		position: relative;
17
+		display: block;
18
+		width: 180px;
19
+		height: 280px;
20
+		margin: 0px 0px 0px 0px;
21
+		padding: 10px 10px 10px 10px;
22
+	}
23
+	div#space_title{
24
+		position: relative;
25
+		display: block;
26
+		width: 180px;
27
+		height: 32px;
28
+		margin: 0px 0px 0px 0px;
29
+		background-image: url(img/shortbar.png);
30
+	}
31
+	div#space_title_block{
32
+		position: relative;
33
+		display: block;
34
+		width: 180px;
35
+		margin: 0px 0px 0px 10px;
36
+	}
37
+	span#space_title{
38
+		display: table-cell;
39
+		width: 180px;
40
+		height: 32px;
41
+		font-size: 18px;
42
+		color: #ffffff;
43
+		vertical-align: middle;
44
+	}
45
+/* space end */
46
+
47
+/* template start */
48
+section#template {
49
+	position: relative;
50
+	display: block;
51
+	top: 0px;
52
+	left: 10px;
53
+	width: calc(100% - 20px);
54
+	height: 1020px;
55
+	margin: 10px 10px 10px 0px;
56
+	background-color: #ffffff;
57
+	/*background-image: url(img/topicbackground_secondfloor.png);*/
58
+}
59
+	/* breadcrumb start */
60
+	article#breadcrumb {
61
+		position: relative;
62
+		display: block;
63
+		left: 0px;
64
+		width: calc(100% - 20px);
65
+		height: 20px;
66
+		margin: 0px 0px 0px 0px;
67
+		padding: 10px 10px 0px 10px;
68
+	}
69
+	div#breadcrumb_title{
70
+		position: absolute;
71
+		display: block;
72
+		width: calc(100% - 20px);
73
+		height: 20px;
74
+		margin: 0px 0px 0px 0px;
75
+	}
76
+
77
+	div#breadcrumb_title_block{
78
+		position: relative;
79
+		display: block;
80
+		width: calc(100% - 20px);
81
+		margin: 0px 0px 0px 10px;
82
+	}
83
+	/* breadcrumb end */
84
+
85
+	/* template start */
86
+	article#template{
87
+		position: relative;
88
+		display: block;
89
+		width: calc(100% - 20px);
90
+		/*height: 460px;*/
91
+		margin: 0px 0px 0px 0px;
92
+		padding: 10px 10px 10px 10px;
93
+	}
94
+
95
+	div#template_title{
96
+		position: relative;
97
+		display: block;
98
+		width: calc(100% - 10px);
99
+		height: 32px;
100
+		margin: 0px 0px 0px 0px;
101
+		background-image: url(img/longbar_secondfloor.png);
102
+	}
103
+
104
+	div#template_title_block{
105
+		position: relative;
106
+		display: block;
107
+		width: calc(100% - 20px);
108
+		margin: 0px 0px 0px 10px;
109
+	}
110
+	span#template_title{
111
+		display: table-cell;
112
+		width: calc(100% - 20px);
113
+		height: 32px;
114
+		font-size: 18px;
115
+		color: #ffffff;
116
+		vertical-align: middle;
117
+		font-weight:bold;
118
+	}
119
+	/* template end */
120
+
121
+	/* template_list_title start */
122
+	article#template_list_title{
123
+		position: relative;
124
+		display: block;
125
+		width: calc(100% - 20px);
126
+		/*height: 460px;*/
127
+		margin: 0px 0px 0px 0px;
128
+		padding: 0px 10px 10px 20px;
129
+	}
130
+	div#template_title2{
131
+		position: relative;
132
+		display: block;
133
+		width: calc(100% - 20px);
134
+		height: 32px;
135
+		margin: 0px 0px 0px 0px;
136
+		background-image: url(img/longbar2_secondfloor.png);
137
+	}
138
+	span#template_title2{
139
+		display: table-cell;
140
+		width: calc(100% - 20px);
141
+		height: 32px;
142
+		font-size: 18px;
143
+		color: #000000;
144
+		vertical-align: middle;
145
+		font-weight:bold;
146
+	}
147
+	/* template_list_title end */
148
+	span.template_list{
149
+		display: table-cell;
150
+		width: calc(100% - 20px);
151
+		height: 32px;
152
+		font-size: 18px;
153
+		color: #000000;
154
+		vertical-align: middle;
155
+	}
156
+	/* template start */
157
+	span#template_article_block {
158
+		position: relative;
159
+		display: block;
160
+		width: calc(100% - 20px);
161
+		margin: 10px 0px 10px 10px;
162
+	}
163
+	/* template end */
164
+	div.space250{
165
+		height:250px;
166
+	}
167
+	div.space200{
168
+		height:200px;
169
+	}
170
+	div.space100{
171
+		height:100px;
172
+	}
173
+	div.space10{
174
+		height:10px;
175
+	}
176
+	div.space210{
177
+		height:320px;
178
+	}
179
+	div.space260{
180
+		height:260px;
181
+	}
182
+	div.space420{
183
+		height:420px;
184
+	}
185
+}
186
+/* template end */

+ 1010
- 44
css/section_190212.css
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 171
- 0
css/section_mobile.css Ver fichero

@@ -0,0 +1,171 @@
1
+@charset "utf-8";
2
+
3
+/* ***********************************************
4
+ * コンテンツ定義 css
5
+ *
6
+ * コンテンツ一覧
7
+ * ページ操作コンテンツ
8
+ * 	住所
9
+ * 	背景色変更
10
+ * 	文字サイズ変更
11
+ * 	翻訳
12
+ * 	サイトマップ
13
+ * 	お問い合わせ
14
+ *
15
+ * コンテンツブロック
16
+ * 	スライド画像
17
+ * 	情報一覧
18
+ * 	記事一覧
19
+ * 		新着情報
20
+ *		イベント情報
21
+ * 		町からのお知らせ
22
+ * 		町の出来事
23
+ * 	北方町紹介
24
+ * 	ライフイベント
25
+ * 	町長の部屋
26
+ * 	緊急・災害情報
27
+ * 	カレンダー
28
+ * 	アクセスランキング
29
+ * 	広報1
30
+ * 	広報2
31
+ * 	広報3
32
+ * 	広報4
33
+ * 	facebook
34
+ * 	きたがたまなびすと
35
+ *
36
+ ********************************************** */
37
+
38
+/*
39
+ * 2014/02/26
40
+ * section タグ定義
41
+ * article タグ定義
42
+ *
43
+ * 2014/02/27
44
+ * article_list 記事一覧 タグ定義
45
+ *
46
+ * 2014/03/03
47
+ * コメントアウト編集
48
+ * コンテンツブロックに仕分け
49
+ *
50
+ */
51
+
52
+/* 一番上 ページ操作コンテンツ */
53
+
54
+@media screen and (max-width: 768px) {
55
+	section#operation {
56
+	position: relative;
57
+	display: none;
58
+	top: 0px;
59
+	left: 0px;
60
+	width: 920px;
61
+	height: 60px;
62
+	margin: 0px 10px 10px 0px;
63
+}
64
+a.i_link {
65
+	color: #000000;
66
+}
67
+	/* 住所 ここから */
68
+	address#operation_add{
69
+		position: relative;
70
+		display: none;
71
+		margin: 0px 0px 0px 0px;
72
+		padding: 3px 0px 0px 0px;
73
+		text-align: right;
74
+		font-size: 12px;
75
+	}
76
+	/* 住所 ここまで */
77
+
78
+	/* ボタンリスト ここから */
79
+	div#controle_panel{
80
+		position: relative;
81
+		display: none;
82
+		left: 130px;
83
+		top: 5px;
84
+	}
85
+
86
+	/* 背景色変更 ここから */
87
+	article#bgcolor{
88
+		position: relative;
89
+		display: none;
90
+		margin: 0px 10px 0px 10px;
91
+		float:left;
92
+	}
93
+	div#bgcolor_img{
94
+		position: relative;
95
+		display: none;
96
+		left:83px;
97
+		top:-33px;
98
+		height: 29px;
99
+	}
100
+		input#button1{
101
+			position: absolute;
102
+			display: none;
103
+			width: 29px;
104
+			height: 28px;
105
+		}
106
+		input#button2{
107
+			position: absolute;
108
+			display: none;
109
+			left: 34px;
110
+			width: 29px;
111
+			height: 28px;
112
+		}
113
+		input#button3{
114
+			position: absolute;
115
+			display: none;
116
+			left: 68px;
117
+			width: 29px;
118
+			height: 28px;
119
+		}
120
+	/* 背景色変更 ここまで */
121
+
122
+	/* 文字サイズ変更 ここから */
123
+	article#charsize{
124
+		position: relative;
125
+		display: none;
126
+		margin: 0px 10px 0px 10px;
127
+		float:left;
128
+	}
129
+	div#charsize_img{
130
+		position: relative;
131
+		display: none;
132
+		left:83px;
133
+		top:-32px;
134
+	}
135
+	/* 文字サイズ変更 ここまで */
136
+
137
+	/* 翻訳 ここから */
138
+	article#translation{
139
+		position: relative;
140
+		display: none;
141
+		margin: 0px 10px 0px 10px;
142
+		float:left;
143
+	}
144
+	/* 翻訳 ここまで */
145
+
146
+	/* サイトマップ ここから */
147
+	article#sitemap{
148
+		position: relative;
149
+		display: none;
150
+		margin: 0px 10px 0px 10px;
151
+		float:left;
152
+	}
153
+	/* サイトマップ ここまで */
154
+
155
+	/* お問い合わせ ここから */
156
+	article#contact{
157
+		position: relative;
158
+		display: none;
159
+		float:left;
160
+	}
161
+	/* お問い合わせ ここまで */
162
+
163
+	div#claer {
164
+		clear : both;
165
+	}
166
+	
167
+}
168
+/* 一番上 ページ操作コンテンツ */
169
+
170
+
171
+/* 各コンテンツブロック配置 */

+ 131
- 52
css/slideme.css Ver fichero

@@ -7,86 +7,165 @@
7 7
  */
8 8
 
9 9
 article#imgae {
10
-	position: absolute;
11
-	display: block;
12
-	top: 0px;
13
-	left: 0px;
14
-	width: 690px;
15
-	height: 230px;
16
-	margin: 10px 10px 10px 10px;
10
+    position: absolute;
11
+    display: block;
12
+    top: 0px;
13
+    left: 0px;
14
+    width: 690px;
15
+    height: 230px;
16
+    margin: 10px 10px 10px 10px;
17
+}
18
+
19
+/* スライド画像 レスポンシブ */
20
+@media screen and (max-width: 768px) {
21
+    article#imgae {
22
+        position: static;
23
+        width: auto;
24
+    }
17 25
 }
18 26
 
19 27
 div#slide {
20
-	position: absolute;
21
-	display: block;
22
-	top: 0px;
23
-	left: 0px;
24
-	width: 690px;
25
-	height: 210px;
26
-	overflow: hidden;
28
+    position: absolute;
29
+    display: block;
30
+    top: 0px;
31
+    left: 0px;
32
+    width: 690px;
33
+    height: 210px;
34
+    overflow: hidden;
27 35
 }
28 36
 
29 37
 div.item {
30
-	position: absolute;
31
-	display: block;
32
-	top: 0px;
33
-	left: 0px;
34
-	width: 690px;
35
-	height: 210px;
38
+    position: absolute;
39
+    display: block;
40
+    top: 0px;
41
+    left: 0px;
42
+    width: 690px;
43
+    height: 210px;
36 44
 }
37 45
 
38 46
 div#item_slide {
39
-	position: absolute;
40
-	display: block;
41
-	top: 210px;
42
-	left: 0px;
43
-	width: 690px;
44
-	height: 20px;
47
+    position: absolute;
48
+    display: block;
49
+    top: 210px;
50
+    left: 0px;
51
+    width: 690px;
52
+    height: 20px;
53
+}
54
+
55
+/* スライド削除 レスポンシブ */
56
+@media screen and (max-width: 768px) {
57
+    div#item_slide {
58
+        display: none;
59
+    }
45 60
 }
46 61
 
47 62
 div#item_slide_center {
48
-	width: 105px;
49
-	margin: 0 auto;
63
+    width: 105px;
64
+    margin: 0 auto;
50 65
 }
51 66
 
52 67
 div.itemnum {
53
-	position: relative;
54
-	top: 7px;
55
-	display: inline;
56
-	margin: 0 auto;
68
+    position: relative;
69
+    top: 7px;
70
+    display: inline;
71
+    margin: 0 auto;
57 72
 }
58 73
 
59 74
 li {
60
-	width: 2em;
61
-	cursor: pointer;
62
-	display: block;
63
-	line-height: 20px;
64
-	position: absolute;
65
-	top: 50%;
66
-	z-index: 10;
67
-	margin: -1em 0;
68
-	border-radius: 6px;
69
-	color: #fff;
70
-	text-align: center;
71
-	background: #393;
75
+    width: 2em;
76
+    cursor: pointer;
77
+    display: block;
78
+    line-height: 20px;
79
+    position: absolute;
80
+    top: 50%;
81
+    z-index: 10;
82
+    margin: -1em 0;
83
+    border-radius: 6px;
84
+    color: #fff;
85
+    text-align: center;
86
+    background: #393;
72 87
 }
73 88
 
74 89
 li.next {
75
-	right: -5px;
90
+    right: -5px;
76 91
 }
77 92
 
78 93
 li.prev {
79
-	left: -5px;
94
+    left: -5px;
80 95
 }
81 96
 
82 97
 div.positionabsolute {
83
-	font-size: xx-large;
84
-	line-height: 120%;
85
-	text-align: center;
86
-	color: white;
87
-	font-weight: bold;
98
+    font-size: xx-large;
99
+    line-height: 120%;
100
+    text-align: center;
101
+    color: white;
102
+    font-weight: bold;
88 103
 }
89 104
 
90 105
 div.positionabsolute a :hover {
91
-	color: white;
106
+    color: white;
107
+}
108
+
109
+.item__coronaTitle {
110
+    position: relative;
111
+    width: 690px;
112
+    height: 50px;
113
+    background-color: blue;
114
+}
115
+
116
+.second__coronavirusTitle {
117
+    position: relative;
118
+    width: 345px;
119
+    height: 80px;
120
+    float: left;
121
+    background-color: cornflowerblue;
122
+}
123
+
124
+.second__coronavirusText {
125
+    position: absolute;
126
+    top: -3px;
127
+    left: 12px;
128
+    color: black;
129
+    font-size: xx-large;
130
+    text-align: center;
131
+    font-weight: bold;
132
+}
133
+
134
+.second__vaccinationTitle {
135
+    position: relative;
136
+    width: 345px;
137
+    height: 160px;
138
+    float: left;
139
+    background-color: yellow;
140
+}
141
+
142
+
143
+/* レスポンシブ */
144
+@media screen and (max-width: 768px) {
145
+    div.item {
146
+        width: 335px;
147
+    }
148
+
149
+    .item__coronaTitle {
150
+        position: relative;
151
+        width: 315px;
152
+        height: 25px;
153
+        background-color: #436AD6;
154
+    }
155
+
156
+    .second__coronavirusTitle {
157
+        position: relative;
158
+        width: 155px;
159
+        height: 36px;
160
+        float: left;
161
+        background-color: cornflowerblue;
162
+    }
163
+
164
+    .second__vaccinationTitle {
165
+        position: relative;
166
+        width: 155px;
167
+        height: 160px;
168
+        float: left;
169
+        background-color: yellow;
170
+    }
92 171
 }

+ 631
- 0
css/style.css Ver fichero

@@ -0,0 +1,631 @@
1
+@media (max-width: 768px) {
2
+    body {
3
+        font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
4
+        background-color: #F7F3BC;
5
+    }
6
+
7
+    /* ヘッダー */
8
+    .header {
9
+        display: flex;
10
+        margin-bottom: 16px;
11
+        width: 100%;
12
+        background-color: #ffffff;
13
+    }
14
+
15
+    .headerLogo__image {
16
+        margin: 10px 6px;
17
+        width: 37px;
18
+        height: 32px;
19
+        object-fit: cover;
20
+    }
21
+
22
+    .headerTitle {
23
+        align-self: center;
24
+        color: #109033;
25
+        font-size: 7.5vw;
26
+    }
27
+
28
+    .headerSubTitle {
29
+        align-self: center;
30
+        padding-top: 8px;
31
+        padding-left: 8px;
32
+        color: #109033;
33
+        font-size: 3.8vw;
34
+    }
35
+
36
+    /* 新型コロナウィルス感染症について */
37
+    .coronaNotice {
38
+        position: relative;
39
+        margin: 0 20px 16px;
40
+        padding: 1px;
41
+        min-height: 120px;
42
+        width: 90%;
43
+        border-radius: 8px;
44
+        background-color: #ffffff;
45
+    }
46
+
47
+    .coronaNoticepadding {
48
+        display: block;
49
+        position: relative;
50
+        margin: 6px auto;
51
+        width: 94%;
52
+    }
53
+
54
+    .aboutCorona {
55
+        display: block;
56
+        position: relative;
57
+        width: 100%;
58
+    }
59
+
60
+    .kitagataTownSituation {
61
+        display: block;
62
+        position: relative;
63
+        top: -1%;
64
+        width: 50%;
65
+    }
66
+
67
+    .eventCancel {
68
+        display: block;
69
+        position: relative;
70
+        top: -1%;
71
+        width: 50%;
72
+    }
73
+
74
+    .coronaVaccination {
75
+        display: block;
76
+        position: absolute;
77
+        top: 24%;
78
+        left: 50%;
79
+        width: 50%;
80
+    }
81
+
82
+    .aboutCoronaImg {
83
+        width: 100%;
84
+    }
85
+
86
+    .kitagataTownSituationImg {
87
+        width: 100%;
88
+    }
89
+
90
+    .eventCancelImg {
91
+        width: 100%;
92
+    }
93
+
94
+    .coronaVaccinationImg {
95
+        width: 100%;
96
+    }
97
+
98
+    /* 災害情報 */
99
+    .disasterInfo {
100
+        display: flex;
101
+        margin: 0 20px 16px;
102
+        min-height: 32px;
103
+        width: 90%;
104
+        border-radius: 8px;
105
+        background-color: #ffffff;
106
+    }
107
+
108
+    .disasterInfoTitleWrap {
109
+        display: flex;
110
+        justify-content: center;
111
+        align-items: center;
112
+        width: 30%;
113
+    }
114
+
115
+    .disasterInfoTitle {
116
+        display: flex;
117
+        justify-content: center;
118
+        align-items: center;
119
+        border-radius: 2px;
120
+        padding: 0 4px;
121
+        height: 20px;
122
+        background-color: #38abd0;
123
+    }
124
+
125
+    .disasterInfoTitle__text {
126
+        font-size: 2.8vw;
127
+        color: #ffffff;
128
+    }
129
+
130
+    .disasterInfoDetail {
131
+        display: flex;
132
+        justify-content: center;
133
+        align-items: center;
134
+        margin-left: 8px;
135
+        font-size: 3.2vw;
136
+    }
137
+
138
+    /* 新着情報 */
139
+    .newInfo {
140
+        margin: 0 20px 16px;
141
+        min-height: 120px;
142
+        width: 90%;
143
+        border-radius: 8px;
144
+        background-color: #ffffff;
145
+    }
146
+
147
+    .newInfoTitle {
148
+        position: relative;
149
+        margin-bottom: 4px;
150
+        min-height: 22px;
151
+        border-radius: 8px 8px 0 0;
152
+        background-color: #FF6666;
153
+    }
154
+
155
+    .newInfoTitle__text {
156
+        padding: 6px 0 0 16px;
157
+        font-size: 3.2vw;
158
+    }
159
+
160
+    .newInfoText {
161
+        color: #ffffff;
162
+    }
163
+
164
+    .newInfoList {
165
+        margin-top: 3px;
166
+        font-size: 2vw;
167
+        color: #ffffff;
168
+    }
169
+
170
+    .newInfoTitle__list {
171
+        display: flex;
172
+        justify-content: center;
173
+        align-items: center;
174
+        position: absolute;
175
+        width: 70px;
176
+        top: 16%;
177
+        right: 5%;
178
+        background-color: #707070;
179
+    }
180
+
181
+    .newInfoTopic {
182
+        margin: 0 auto;
183
+        padding: 0 8px;
184
+        height: 120px;
185
+        width: 84%;
186
+        overflow: scroll;
187
+    }
188
+
189
+    .newInfoTopicWrap {
190
+        position: relative;
191
+        display: inline-block;
192
+        margin-bottom: 4px;
193
+    }
194
+
195
+    .newInfoTopicWrap__date {
196
+        margin-bottom: 2px;
197
+        font-size: 2.8vw;
198
+    }
199
+
200
+    .newInfoTopicWrap__date:before {
201
+
202
+    }
203
+
204
+    .newInfoTopicWrap__text {
205
+        margin-bottom: 4px;
206
+        font-size: 3.2vw;
207
+    }
208
+
209
+    /*  ライフイベント  */
210
+    .lifeEvent {
211
+        margin: 0 20px 16px;
212
+        padding-top: 1px;
213
+        min-height: 396px;
214
+        width: 90%;
215
+        border-radius: 8px;
216
+        background-color: #ffffff;
217
+    }
218
+
219
+    .lifeEventTitle {
220
+        display: flex;
221
+        flex-direction: column;
222
+        align-items: center;
223
+        margin: 16px 0 24px;
224
+    }
225
+
226
+    .lifeEventTitle__text {
227
+        position: relative;
228
+        font-size: 5.4vw;
229
+    }
230
+
231
+    .lifeEventTitle__text:before {
232
+        position: absolute;
233
+        bottom: -8px;
234
+        /*left: 20%;*/
235
+        width: 100%;
236
+        height: 2px;
237
+        background: #49A01E;
238
+        content: '';
239
+    }
240
+
241
+    .lifeEventContents {
242
+        display: flex;
243
+        flex-wrap: wrap;
244
+        justify-content: space-between;
245
+        margin: 0 auto;
246
+        width: 88%;
247
+    }
248
+
249
+    .lifeEventContent {
250
+        display: flex;
251
+        margin-bottom: 16px;
252
+        width: 50%;
253
+    }
254
+
255
+    .lifeEventName {
256
+        align-self: center;
257
+        margin-left: 4px;
258
+        font-size: 3.2vw;
259
+    }
260
+
261
+    .lifeEventNameException {
262
+        align-self: center;
263
+        margin-left: 4px;
264
+        font-size: 2.8vw;
265
+    }
266
+
267
+    /* 町長の部屋以下 */
268
+    .mayorRoom {
269
+        display: flex;
270
+        flex-wrap: wrap;
271
+        justify-content: center;
272
+        margin: 0 20px 16px;
273
+        padding-top: 1px;
274
+        min-height: 568px;
275
+        width: 90%;
276
+        border-radius: 8px;
277
+        background-color: #ffffff;
278
+    }
279
+
280
+    .mayorRoomContent {
281
+        margin: 16px 12px 8px;
282
+        width: 92%;
283
+    }
284
+
285
+    .parliamentContent {
286
+        margin: 0 auto 8px;
287
+        width: 92%;
288
+    }
289
+
290
+    .disasterPreventionContent {
291
+        margin: 0 auto 8px;
292
+        width: 92%;
293
+    }
294
+
295
+    .kouhouKitagataContent {
296
+        margin: 0 auto 8px;
297
+        width: 92%;
298
+    }
299
+
300
+    .kawasemiStoolsContent {
301
+        margin: 0 auto 16px;
302
+        width: 92%;
303
+    }
304
+
305
+    .mayorRoomImg {
306
+        width: 100%;
307
+    }
308
+
309
+    /*  きたがたまなびすと  */
310
+    .kitagatamanabisuto {
311
+        margin: 0 20px 16px;
312
+        padding-top: 1px;
313
+        min-height: 597px;
314
+        width: 90%;
315
+        border-radius: 8px;
316
+        background-color: #ffffff;
317
+    }
318
+
319
+    .kitagatamanabisutoContents {
320
+        display: flex;
321
+        flex-wrap: wrap;
322
+        justify-content: space-between;
323
+        margin: 16px 12px;
324
+        width: 92%;
325
+    }
326
+
327
+    .kitagatamanabisutoContent {
328
+        width: 47%;
329
+        margin-bottom: 16px;
330
+    }
331
+
332
+    .kitagatamanabisutoImg {
333
+        width: 100%;
334
+    }
335
+
336
+    /*  関連リンク */
337
+    .relatedLinks {
338
+        margin: 0 20px 16px;
339
+        padding-top: 1px;
340
+        min-height: 249px;
341
+        width: 90%;
342
+        border-radius: 8px;
343
+        background-color: #ffffff;
344
+    }
345
+
346
+    .relatedLinksTitle {
347
+        display: flex;
348
+        flex-direction: column;
349
+        align-items: center;
350
+        margin: 16px 0 24px;
351
+    }
352
+
353
+    .relatedLinksTitle__text {
354
+        position: relative;
355
+        font-size: 5.4vw;
356
+    }
357
+
358
+    .relatedLinksTitle__text:before {
359
+        position: absolute;
360
+        bottom: -8px;
361
+        /*left: 5%;*/
362
+        width: 100%;
363
+        height: 2px;
364
+        background: #49A01E;
365
+        content: '';
366
+    }
367
+
368
+    .relatedLinksContents {
369
+        display: flex;
370
+        flex-wrap: wrap;
371
+        justify-content: center;
372
+        margin: 0 20px;
373
+        width: 88%;
374
+    }
375
+
376
+    .relatedLinksContents__left {
377
+        margin-right: 4px;
378
+        margin-bottom: 4px;
379
+        width: 32%;
380
+    }
381
+
382
+    .relatedLinksContents__center {
383
+        margin-right: 4px;
384
+        margin-bottom: 4px;
385
+        width: 32%;
386
+    }
387
+
388
+    .relatedLinksContents__right {
389
+        margin-bottom: 4px;
390
+        width: 32%;
391
+    }
392
+
393
+    .relatedLinksImg {
394
+        min-height: 37px;
395
+        width: 100%;
396
+    }
397
+
398
+    /*  広告スペース */
399
+    .advertisementLink {
400
+        margin: 0 20px 16px;
401
+        padding-top: 1px;
402
+        min-height: 462px;
403
+        width: 90%;
404
+        border-radius: 8px;
405
+        background-color: #ffffff;
406
+    }
407
+
408
+    .advertisementLinkTitle {
409
+        display: flex;
410
+        flex-direction: column;
411
+        align-items: center;
412
+        margin: 16px 0 24px;
413
+    }
414
+
415
+    .advertisementLinkTitle__text {
416
+        position: relative;
417
+        font-size: 5.4vw;
418
+    }
419
+
420
+    .advertisementLinkTitle__text:before {
421
+        position: absolute;
422
+        bottom: -8px;
423
+        /*left: 12%;*/
424
+        width: 100%;
425
+        height: 2px;
426
+        background: #49A01E;
427
+        content: '';
428
+    }
429
+
430
+    .advertisementLinkContents {
431
+        display: flex;
432
+        flex-wrap: wrap;
433
+        justify-content: center;
434
+        margin: 0 20px;
435
+        width: 88%;
436
+    }
437
+
438
+    .advertisementLinkContents__left {
439
+        margin-right: 4px;
440
+        margin-bottom: 4px;
441
+        width: 32%;
442
+    }
443
+
444
+    .advertisementLinkContents__center {
445
+        margin-right: 4px;
446
+        margin-bottom: 4px;
447
+        width: 32%;
448
+    }
449
+
450
+    .advertisementLinkContents__right {
451
+        margin-bottom: 4px;
452
+        width: 32%;
453
+    }
454
+
455
+    .advertisementLinkImg {
456
+        width: 100%;
457
+    }
458
+
459
+    /*  町の人口 */
460
+    .people {
461
+        margin: 0 20px 16px;
462
+        padding-top: 1px;
463
+        min-height: 281px;
464
+        width: 90%;
465
+        border-radius: 8px;
466
+        background-color: #ffffff;
467
+    }
468
+
469
+    .peopleTitle {
470
+        display: flex;
471
+        flex-direction: column;
472
+        align-items: center;
473
+        margin: 18px 0 24px;
474
+    }
475
+
476
+    .peopleTitle__text {
477
+        position: relative;
478
+        font-size: 5.4vw;
479
+    }
480
+
481
+    .peopleTitle__text:before {
482
+        position: absolute;
483
+        bottom: -8px;
484
+        /*left: -3%;*/
485
+        width: 100%;
486
+        height: 2px;
487
+        background: #49A01E;
488
+        content: '';
489
+    }
490
+
491
+    .peopleContent {
492
+        display: flex;
493
+        align-items: center;
494
+        margin: 0 62px 12px;
495
+        width: 62%;
496
+    }
497
+
498
+    .peopleLastContent {
499
+        display: flex;
500
+        align-items: center;
501
+        margin: 0 62px 16px;
502
+        width: 62%;
503
+    }
504
+
505
+    .peopleImg {
506
+        width: 12%;
507
+    }
508
+
509
+    .people__img {
510
+        width: 100%;
511
+    }
512
+
513
+    .icon {
514
+        color: #565656;
515
+        font-size: 1.5em;
516
+    }
517
+
518
+    .people__unit {
519
+        margin-left: 8px;
520
+        width: 30%;
521
+        font-size: 3.2vw;
522
+    }
523
+
524
+    .people__population {
525
+        margin-bottom: 1px;
526
+        font-size: 4.8vw;
527
+        font-weight: bold;
528
+    }
529
+
530
+    .lastUpdate {
531
+        display: flex;
532
+        justify-content: flex-end;
533
+        margin-bottom: 16px;
534
+    }
535
+
536
+    .lastUpdate__text {
537
+        margin-right: 52px;
538
+        font-size: 3.2vw;
539
+    }
540
+
541
+    .peopleLink {
542
+        display: flex;
543
+        justify-content: space-evenly;
544
+        margin: 0 auto 16px;
545
+        width: 68%;
546
+    }
547
+
548
+    .peopleLinkText {
549
+        font-size: 3.8vw;
550
+        color: #707070;
551
+    }
552
+
553
+    /*  フッター  */
554
+    .footerTitle {
555
+        margin-bottom: 16px;
556
+    }
557
+
558
+    .footerTitleLogo {
559
+        display: flex;
560
+        justify-content: center;
561
+    }
562
+
563
+    .footerTitleLogo__img {
564
+        margin: 10px 6px;
565
+        width: 37px;
566
+        height: 32px;
567
+        object-fit: cover;
568
+    }
569
+
570
+    .footerTitleTownName {
571
+        display: flex;
572
+        justify-content: center;
573
+    }
574
+
575
+    .footerTitleLogo__text {
576
+        font-size: 5.4vw;
577
+        color: #109033;
578
+    }
579
+
580
+    .footerContent {
581
+        margin-bottom: 16px;
582
+    }
583
+
584
+    .footerTextWrap {
585
+        display: flex;
586
+        justify-content: center;
587
+        margin-bottom: 4px;
588
+    }
589
+
590
+    .footerLink {
591
+        margin-bottom: 16px;
592
+    }
593
+
594
+    .footerTextWrap__text {
595
+        font-size: 4vw;
596
+    }
597
+
598
+    .footerLinkWrap {
599
+        display: flex;
600
+        justify-content: center;
601
+        margin-bottom: 4px;
602
+    }
603
+
604
+    .footerLinkWrap__text {
605
+        display: block;
606
+        font-size: 10px;
607
+        transform: scale(0.8);
608
+        transform-origin: 0 0;
609
+    }
610
+
611
+    #backToButton {
612
+        position: fixed;
613
+        right: 30px;
614
+        bottom: 30px;
615
+        padding: 10px;
616
+        font-size: 86%;
617
+        text-decoration: none;
618
+        border-radius: 5px;
619
+        opacity: 0.0;
620
+        transition: ease .3s;
621
+    }
622
+
623
+    #backToButton.view {
624
+        opacity: 1.0;
625
+    }
626
+
627
+    .linkNone {
628
+        color: black;
629
+        text-decoration: none;
630
+    }
631
+}

+ 127
- 67
css/table.css Ver fichero

@@ -6,92 +6,152 @@
6 6
  * 
7 7
  ********************************************** */
8 8
 
9
-table.infokitagata{
10
-	font-size:85%;
11
-	background-color:#fff;
9
+table.infokitagata {
10
+    font-size: 85%;
11
+    background-color: #fff;
12 12
 }
13
-table.infokitagata caption{
14
-	vertical-align:top;
15
-	text-align:left;
16
-	background-color:#add8e6;
17
-	padding:3px;
18
-	border:2px solid #ffffff;
13
+
14
+table.infokitagata caption {
15
+    vertical-align: top;
16
+    text-align: left;
17
+    background-color: #add8e6;
18
+    padding: 3px;
19
+    border: 2px solid #ffffff;
19 20
 }
21
+
20 22
 table.infokitagata th {
21
-	vertical-align:top;
22
-	font-weight: normal;
23
-	text-align:left;
24
-	background-color:#add8e6;
23
+    vertical-align: top;
24
+    font-weight: normal;
25
+    text-align: left;
26
+    background-color: #add8e6;
27
+}
28
+
29
+table.infokitagata td {
30
+    vertical-align: top;
31
+    text-align: left;
32
+    background-color: #dcdcdc;
25 33
 }
26
-table.infokitagata td{
27
-	vertical-align:top;
28
-	text-align:left;
29
-	background-color:#dcdcdc;
34
+
35
+.childCareTime {
36
+    border: 0;
37
+    cellpadding: 3;
38
+    cellspacing: 2;
39
+    width: 650px;
30 40
 }
41
+
31 42
 strong#life {
32
-	border: 1px solid #999999;
33
-	padding: 2px;
34
-	line-height: 160%;
35
-	margin: 0px;
43
+    border: 1px solid #999999;
44
+    padding: 2px;
45
+    line-height: 160%;
46
+    margin: 0px;
47
+}
48
+
49
+strong.life {
50
+    border: 1px solid #999999;
51
+    padding: 2px;
52
+    line-height: 160%;
53
+    margin: 0px;
36 54
 }
55
+
37 56
 h4#life {
38
-	clear: both;
39
-	margin: 10px 0px 5px 3px;
40
-	padding: 4px 0px 4px 20px;
41
-	_padding: 6px 0px 6px 22px;
42
-	font-size: 95%;
43
-	border: 1px solid #666699;
44
-	border-left: 4px solid #666699;
57
+    clear: both;
58
+    margin: 10px 0px 5px 3px;
59
+    padding: 4px 50px 4px 20px;
60
+    _padding: 6px 50px 6px 22px;
61
+    font-size: 95%;
62
+    border: 1px solid #666699;
63
+    border-left: 4px solid #666699;
45 64
 }
65
+
46 66
 .left {
47
-	float: left;
67
+    float: left;
48 68
 }
69
+
49 70
 .right {
50
-	float: right;
71
+    float: right;
51 72
 }
52
-#right{
53
-	float: right;
54
-	padding: 3px;
55
-	border: 1px solid #CCCCCC;
56
-	margin: 3px 0px 3px 10px;
73
+
74
+#right {
75
+    float: right;
76
+    padding: 3px;
77
+    border: 1px solid #CCCCCC;
78
+    margin: 3px 0px 3px 10px;
57 79
 }
80
+
58 81
 .clear {
59
-	clear: both;
82
+    clear: both;
60 83
 }
84
+
61 85
 h2#ad {
62
-	height: 32px;
63
-	margin: 10px 0px 0px;
64
-	background-repeat: no-repeat;
65
-	padding: 6px 0px 0px 15px;
66
-	_padding: 8px 0px 0px 15px;
67
-	font-size: 95%;
68
-	clear: both;
86
+    height: 32px;
87
+    margin: 10px 0px 0px;
88
+    background-repeat: no-repeat;
89
+    padding: 6px 0px 0px 15px;
90
+    _padding: 8px 0px 0px 15px;
91
+    font-size: 95%;
92
+    clear: both;
69 93
 }
94
+
70 95
 p.attention_in {
71
-	margin-top: 10px;
72
-	margin-left: 5px;
73
-	padding: 5px;
74
-	border: 1px solid #FF9900;
96
+    margin-top: 10px;
97
+    margin-left: 5px;
98
+    padding: 5px;
99
+    border: 1px solid #FF9900;
75 100
 }
101
+
76 102
 h3#life {
77
-	height: 20px;
78
-	margin: 10px 0px 0px 2px;
79
-	padding: 4px 0px 1px 15px;
80
-	_padding: 6px 0px 2px 15px;
81
-	font-size: 95%;
82
-	border-left: 4px solid #6699CC;
83
-	background-color: #eee;
84
-	clear: both;
85
-	border-bottom: 1px solid #ccc;
86
-	border-right: 1px solid #ccc;
87
-}
88
-span.template_intent{
89
-	
90
-}
91
-
92
-.maginlist{
93
-	position: relative;
94
-	top:-18px;
95
-	left:33px;
96
-	width: 610px;
103
+    height: 20px;
104
+    margin: 10px 0px 0px 2px;
105
+    padding: 4px 0px 1px 15px;
106
+    _padding: 6px 0px 2px 15px;
107
+    font-size: 95%;
108
+    border-left: 4px solid #6699CC;
109
+    background-color: #eee;
110
+    clear: both;
111
+    border-bottom: 1px solid #ccc;
112
+    border-right: 1px solid #ccc;
113
+}
114
+
115
+h3.life {
116
+    height: 20px;
117
+    margin: 10px 0px 0px 2px;
118
+    padding: 4px 0px 1px 15px;
119
+    _padding: 6px 0px 2px 15px;
120
+    font-size: 95%;
121
+    border-left: 4px solid #6699CC;
122
+    background-color: #eee;
123
+    clear: both;
124
+    border-bottom: 1px solid #ccc;
125
+    border-right: 1px solid #ccc;
126
+}
127
+
128
+span.template_intent {
129
+
130
+}
131
+
132
+.maginlist {
133
+    position: relative;
134
+    top: -18px;
135
+    left: 33px;
136
+    width: 610px;
137
+}
138
+
139
+.townDevelopment_introductionWrapper_left {
140
+    margin: 10px 0 10px 20px;
141
+}
142
+
143
+.townDevelopment_introductionWrapper_right {
144
+    margin: 10px 0 10px 20px;
145
+}
146
+
147
+.publicShelter_table {
148
+    border: 0;
149
+    margin-left: 300px;
150
+    width: 51%;
151
+}
152
+
153
+.welfareShelter_table {
154
+    border: 0;
155
+    margin-left: 300px;
156
+    width: 51%;
97 157
 }

+ 74
- 0
css/table_mobile.css Ver fichero

@@ -0,0 +1,74 @@
1
+@charset "utf-8";
2
+
3
+/* **********************************************
4
+ * table_mobile定義 css
5
+ *
6
+ *
7
+ ********************************************** */
8
+
9
+@media screen and (max-width: 768px) {
10
+    .scroll_table {
11
+        overflow: auto;
12
+        /*white-space: nowrap;*/
13
+    }
14
+
15
+    /*.childCareTime {*/
16
+    /*    border: 0;*/
17
+    /*    cellpadding: 3;*/
18
+    /*    cellspacing: 2;*/
19
+    /*    width: 100%;*/
20
+    /*}*/
21
+    h3.life_mobile {
22
+        height: 36px;
23
+        margin: 10px 0px 0px 2px;
24
+        padding: 4px 0px 1px 15px;
25
+        _padding: 6px 0px 2px 15px;
26
+        font-size: 95%;
27
+        border-left: 4px solid #6699CC;
28
+        background-color: #eee;
29
+        clear: both;
30
+        border-bottom: 1px solid #ccc;
31
+        border-right: 1px solid #ccc;
32
+    }
33
+
34
+    strong.life_mobile {
35
+        padding: 0;
36
+    }
37
+
38
+    .townDevelopment_wrapper {
39
+        margin-left: 16px;
40
+        margin-bottom: 8px;
41
+    }
42
+
43
+    .townDevelopment_introductionWrapper_left {
44
+        margin: 0 0 0 8px;
45
+    }
46
+
47
+    .townDevelopment_introductionWrapper_right {
48
+        margin: 0 0 0 8px;
49
+    }
50
+
51
+    .townDevelopment_left {
52
+        float: none;
53
+    }
54
+
55
+    .townDevelopment_right {
56
+        float: none;
57
+    }
58
+
59
+    .publicShelter_table {
60
+        border: 0;
61
+        margin-left: 0;
62
+        width: 51%;
63
+    }
64
+
65
+    .welfareShelter_table {
66
+        border: 0;
67
+        margin-left: 45%;
68
+        width: 51%;
69
+    }
70
+
71
+    .ikiiki_table_th {
72
+        width: 36%;
73
+    }
74
+}

+ 0
- 0
css/third_template.css Ver fichero


Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio

Loading…
Cancelar
Guardar