mobile-index

css/alone_mobile.css

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+
+.alone__Listen_to_the_parliament {
+    border: #0b0b0b solid 2px;
+    padding: 5px;
+    margin: 5px;
+    font-size: large;
+}
+
+
+@media screen and (max-width: 768px) {
+    .alone__Listen_to_the_parliament {
+        display: block;
+    }
+}
+
+
+

css/bannerInclude.css

@@ -1,9 +1,22 @@
 /* CSS Document */
 
-body#banner1{
-	width: 1000px;
+body#banner1 {
+    width: 1000px;
 }
-div.box{
-	margin-left: 110px;
-	margin-right:110px;
+
+.spaceImg {
+    width: 920px;
+    height: 32px;
 }
+
+/*@media screen and (max-width: 768px) {*/
+/*    .spaceImg {*/
+/*        display: none !important;*/
+/*    }*/
+/*}*/
+
+div.box {
+    margin-left: 110px;
+    margin-right: 110px;
+}
+

css/base.css

@@ -41,7 +41,15 @@
 html {
     width: 100%;
     margin: 0 auto;
-    background-color: #ffffff;
+    /* background-color: #ffffff; */
+}
+
+html#html-back{
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    -o-background-size: cover;
+    -moz-background-size: cover;
+    -webkit-background-size: cover;
 }
 
 body {
@@ -81,6 +89,13 @@ div#main {
     padding: 10px 40px 40px 40px;
 }
 
+@media screen and (max-width: 768px) {
+    div#main {
+        width: 100%;
+        padding: 0;
+    }
+}
+
 .gothic {
     font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 }

css/border.css

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

css/border_mobile.css

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

css/calender_mobile.css

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

css/culture_mobile.css

@@ -0,0 +1,44 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+    /* template start */
+    article#template_list_title_2{
+        position: relative;
+        display: block;
+        width: 690px;
+        /*height: 460px;*/
+        margin: 0px 0px 0px 0px;
+        padding: 0px 10px 10px 10px;
+    }
+    div#template_title_2{
+        position: relative;
+        display: block;
+        width: 690px;
+        height: 32px;
+        margin: 0px 0px 0px 0px;
+        background-image: url(img/longbar2_secondfloor.png);
+    }
+    span#template_title_2{
+        display: table-cell;
+        width: 690px;
+        height: 32px;
+        font-size: 18px;
+        color: #000000;
+        vertical-align: middle;
+        font-weight:bold;
+    }
+    div#template_title_block_2{
+        position: relative;
+        display: block;
+        width: 680px;
+        margin: 0px 0px 0px 10px;
+    }
+    span#template_article_block_2 {
+        position: relative;
+        display: block;
+        width: 660px;
+        margin: 10px 0px 10px 10px;
+    }
+    /* template end */
+
+}

css/footer.css

@@ -15,28 +15,93 @@
  */
 
 footer {
-	position: relative;
-	display: block;
-	width: 920px;
-	height: 110px;
-	bottom: 0px;
-	margin: 0px 10px 0px 0px;
-	padding: 0;
+    position: relative;
+    display: block;
+    width: 920px;
+    height: 110px;
+    bottom: 0px;
+    margin: 0px 10px 0px 0px;
+    padding: 0;
 }
 
-div.footer{
-	position: relative;
-	display: block;
-	width: 920px;
-	height: 80px;
+@media screen and (max-width: 768px) {
+    footer {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: 240px;
+        margin: 2px auto 0px;
+        padding: 0;
+    }
 }
 
-p.footer_text{
-	margin:2px auto;
-	text-align:center;
-	font-size:12px;
+div.footer {
+    position: relative;
+    display: block;
+    width: 920px;
+    height: 80px;
 }
 
-p.footer_text a{
-	text-decoration:none;
+@media screen and (max-width: 768px) {
+    .footer_img {
+        display: none;
+    }
 }
+
+p.footer_text {
+    margin: 16px auto;
+    text-align: center;
+    font-size: 12px;
+}
+
+@media screen and (max-width: 768px) {
+    p.footer_text {
+        font-size: 8px;
+    }
+}
+
+p.footer_text a {
+    text-decoration: none;
+}
+
+/* footer モバイル用にクラス定義*/
+div.footer_mobile {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    div.footer_mobile {
+        display: block;
+    }
+
+    div.footer_mobile_title {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        text-align: center;
+    }
+
+    img.footerImg__logo {
+        padding-left: 20px;
+    }
+
+    h1.footerMobile__text {
+        margin: 0 0 16px;
+        padding-left: 20px;
+        color: #109033;
+    }
+
+    div.footer_mobile_address {
+        position: relative;
+        display: block;
+        width: 100%;
+        text-align: center;
+        font-size: 15px;
+    }
+
+    .sp__brDisplay {
+        display: none;
+    }
+}
+
+/* footer ここまで */

css/footer_mobile.css

@@ -0,0 +1,119 @@
+@charset "utf-8";
+
+/* ********************************************** 
+ * footer定義 css
+ * 
+ * 画面の大きさ・位置定義
+ * 
+ * 
+ ********************************************** */
+
+/* 
+ * 2014/02/26
+ * footer 大きさ定義
+ * 
+ */
+
+footer {
+    position: relative;
+    display: block;
+    width: 920px;
+    height: 110px;
+    bottom: 0px;
+    margin: 0px 10px 0px 0px;
+    padding: 0;
+}
+
+@media screen and (max-width: 768px) {
+    footer {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: 240px;
+        margin: 2px auto 0px;
+        padding: 0;
+    }
+
+    .footer_pc {
+        display: none;
+    }
+}
+
+div.footer {
+    position: relative;
+    display: block;
+    width: 920px;
+    height: 80px;
+}
+
+@media screen and (max-width: 768px) {
+    .footer_img {
+        display: none;
+    }
+}
+
+p.footer_text {
+    margin: 16px auto;
+    text-align: center;
+    font-size: 12px;
+}
+
+@media screen and (max-width: 768px) {
+    p.footer_text {
+        font-size: 8px;
+    }
+}
+
+p.footer_text a {
+    text-decoration: none;
+}
+
+/* footer モバイル用にクラス定義*/
+div.footer_mobile {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    div.footer_mobile {
+        display: block;
+    }
+
+    div.footer_mobile_title {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        text-align: center;
+    }
+
+    span.footerTextWrap__text{
+        font-size: 4vw;
+    }
+
+    img.footerImg__logo {
+        margin: 10px 6px;
+        width: 37px;
+        height: 37px;
+        object-fit: cover;
+    }
+
+    h1.footerMobile__text {
+        margin: 0 0 16px;
+        padding-left: 20px;
+        color: #109033;
+    }
+
+    div.footer_mobile_address {
+        position: relative;
+        display: block;
+        width: 100%;
+        text-align: center;
+        font-size: 15px;
+    }
+
+    .sp__brDisplay {
+        display: none;
+    }
+    
+}
+
+/* footer ここまで */

css/googleMap.css

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

css/googleMap_mobile.css

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

css/header.css

@@ -13,62 +13,352 @@
  * 
  */
 
-header {
-	position: relative;
-	display: block;
-	width: 200px;
-	height: 600px;
-	margin: 10px 10px 10px 0px;
-	background-image: url(img/header_background.png);
+header.pc__header {
+    position: relative;
+    display: block;
+    width: 200px;
+    height: 600px;
+    margin: 10px 10px 10px 0px;
+    background-image: url(img/header_background.png);
 }
 
-div#header{
-	position: absolute;
-	display: block;
-	top:0px;
+div#header {
+    position: absolute;
+    display: block;
+    top: 0px;
 }
 
-div#h_block_1{
-	position: relative;
-	display: block;
-	width: 200px;
-	height: 250px;
+div#h_block_1 {
+    position: relative;
+    display: block;
+    width: 200px;
+    height: 250px;
 }
-div#h_block_search{
-	position: relative;
-	display: block;
-	width: 200px;
-	height: 50px;
+
+div#h_block_search {
+    position: relative;
+    display: block;
+    width: 200px;
+    height: 50px;
 }
-div.h_line{
-	position: relative;
-	display: block;
-	width: 180px;
-	height: 0px;
-	margin: 0px 10px 0px 10px;
-	border-top: solid 2px #FFFFFF;
+
+div.h_line {
+    position: relative;
+    display: block;
+    width: 180px;
+    height: 0px;
+    margin: 0px 10px 0px 10px;
+    border-top: solid 2px #FFFFFF;
 }
-article.h_text_l{
-	position: relative;
-	display: block;
-	width: 150px;
-	height: 50px;
-	margin: 10px 10px 10px 30px;
+
+article.h_text_l {
+    position: relative;
+    display: block;
+    width: 150px;
+    height: 50px;
+    margin: 10px 10px 10px 30px;
 }
-span.h_text{
-	display: table-cell;
-	width: 180px;
-	height: 50px;
-	vertical-align: middle;
-	color: #ffffff;
-	font-size: 20px;
+
+span.h_text {
+    display: table-cell;
+    width: 180px;
+    height: 50px;
+    vertical-align: middle;
+    color: #ffffff;
+    font-size: 20px;
 }
-article.h_search{
-	position: relative;
-	display: block;
-	margin: 10px 0px 0px 10px;
+
+article.h_search {
+    position: relative;
+    display: block;
+    margin: 10px 0px 0px 10px;
 }
 
 a.h_link {
-	text-decoration: none;
-}
+    text-decoration: none;
+}
+
+.sp__header {
+    display: none;
+}
+
+/*　ヘッダー　レスポンシブ対応　*/
+@media screen and (max-width: 768px) {
+    header.pc__header {
+        display: none;
+    }
+
+    .sp__header {
+        position: relative;
+        display: block;
+        width: 375px;
+        height: 56px;
+        background-color: #FFFFFF;
+    }
+
+    .sp__headerLogo {
+        padding: 10px 8px 8px 8px;
+        width: 80%;
+    }
+
+    .sp__headerLogoImg {
+        width: 100%;
+    }
+
+    /*ハンバーガーアイコンの作成　*/
+    #h-menu {
+        position: absolute;
+        display: block;
+        width: 55px;
+        height: 56px;
+        top: 0px;
+        right: 0px;
+        background-color: #109033; /* アイコンの線の色 */
+    }
+
+    #h-menu span {
+        display: block;
+        position: absolute;
+        width: 23px;
+        height: 2px;
+        top: 36px;
+        left: 17px;
+        background: #ffffff;
+        -webkit-transition: 0.3s ease-in-out;
+        -moz-transition: 0.3s ease-in-out;
+        transition: 0.3s ease-in-out;
+    }
+
+    #h-menu span:nth-child(1) {
+        top: 14px;
+    }
+
+    #h-menu span:nth-child(2) {
+        top: 22px;
+    }
+
+    #h-menu span:nth-child(3) {
+        top: 30px;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    #h-text {
+        position: absolute;
+        width: 32px;
+        font-size: 6px;
+        color: #ffffff;
+        text-align: center;
+        top: 34px;
+        left: 12px;
+    }
+
+    /* メニュー */
+    nav {
+        background: #fff;
+        position: absolute;
+        z-index: 9;
+        top: 3.125rem;
+        right: 0;
+        overflow-x: hidden;
+        width: 0;
+        -webkit-transition: 0.5s;
+        -moz-transition: 0.5s;
+        transition: 0.5s;
+    }
+
+    /* メニューを開いた時 */
+    nav.open-menu {
+        width: 100%;
+    }
+
+    div.h-menu span:nth-child(1) {
+        transform: rotate(45deg);
+        top: 20px !important;
+    }
+
+    div.h-menu span:nth-child(2) {
+        width: 0;
+        opacity: 0;
+    }
+
+    div.h-menu span:nth-child(3) {
+        transform: rotate(-45deg);
+        top: 20px !important;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    div.h-menu :nth-child(4) {
+        display: none;
+    }
+
+    div.h-menu_block {
+        position: relative;
+        display: block;
+        width: 90%;
+        height: 50px;
+        margin: 20px auto;
+        font-size: larger;
+        
+    }
+
+    div.h-menu_block_text ::before{
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #888;
+        border-right: 1px solid #888;
+        transform: rotate(45deg);
+        
+    }
+
+    /* div.h-menu_block a { 
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    } */
+
+    div.h-menu_block_text {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 50px;
+        background: #ccc;
+        vertical-align: middle;
+        
+    }
+
+    div.h-menu_block_text_center {
+        margin-top: 5%;
+        margin-left: 20px;
+        
+    }
+
+    div.h-menu_block_left {
+        position: relative;
+        display: block;
+        width: 42%;
+        height: 50px;
+        margin-left: 20px;
+        float: left;
+        /* font-size: large; */
+        
+    }
+
+    /* div.h-menu_block_left ::before {
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #AAA;
+        border-right: 1px solid #AAA;
+        transform: rotate(45deg);
+        
+    } */
+
+    div.h-menu_block_text_left_center {
+        margin-top: 10%;
+        margin-left: 15px;
+        
+    }
+
+    div.h-menu_block_clear {
+        display: block;
+        clear: both;
+    }
+
+    div.h-menu_lang {
+        position: relative;
+        display: block;
+        width: 90%;
+        height: 80px;
+        margin: 20px auto;
+    }
+    div.h-menu_block_lang {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 80px;
+        background: #ccc;
+        vertical-align: middle;
+    }
+    .h-menu_block_text_line {
+        height: 30px;
+    }
+    .h-menu_block_text_color_1{
+        position: relative;
+        display: inline-block; 
+        width: 40px;
+        /* height: 25px; */
+        text-align: center;
+        background: #D6D6D6;
+    }
+    .h-menu_block_text_color_2{
+        position: relative;
+        display: inline-block; 
+        width: 40px;
+        /* height: 25px; */
+        text-align: center;
+        background: #F7F3BC;
+    }
+    .h-menu_block_text_color_3{
+        position: relative;
+        display: inline-block; 
+        width: 40px;
+        /* height: 25px; */
+        text-align: center;
+        background: #DAEDD0;
+    }
+    .mobile_translation{
+        position: relative;
+        display: block;
+        top: -20px;
+        left: 78px;
+        height: 25px;
+    }
+
+    div.h-menu_search {
+        position: relative;
+        display: block;
+        width: 90%;
+        height: 50px;
+        margin-left: 20px;
+        margin-bottom: 20px;
+    }
+    div.h-menu_block_search {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 45px;
+        vertical-align: middle;
+    }
+
+    .mobile_form_input{
+        width: 60%;
+        height: 40px;
+        margin: 0px;
+    }
+    .mobile_form_button{
+        display       : inline-block;
+        width: 36%;
+        height: 45px;
+        font-size     : large;        /* 文字サイズ */
+        text-align    : center;      /* 文字位置   */
+        cursor        : pointer;     /* カーソル   */
+        background    : #109033;     /* 背景色     */
+        color         : #ffffff;     /* 文字色     */
+        line-height   : 1em;         /* 1行の高さ  */
+        margin: 0px;
+        margin-left: -6px;
+        border: none;
+    }
+}

css/header_mobile.css

@@ -0,0 +1,526 @@
+@charset "utf-8";
+
+/* ********************************************** 
+ * header定義 css
+ * 
+ * headerの大きさ・位置定義
+ * 
+ ********************************************** */
+
+/* 
+ * 2014/02/26
+ * header 大きさ定義
+ * 
+ */
+
+.header {
+	display: none;
+}
+
+@media screen and (max-width: 768px) {
+header {
+	position: absolute;
+	display: none;
+	top: 0px;
+	left: 0px;
+	width: 200px;
+	height: 600px;
+	margin: 80px 0px 0px 40px;
+	background-image: url(img/header_background.png);
+}
+
+div#header{
+	position: absolute;
+	display: none;
+	top:0px;
+}
+
+div#h_block_1{
+	position: relative;
+	display: none;
+	width: 200px;
+	height: 250px;
+}
+div#h_block_search{
+	position: relative;
+	display: none;
+	width: 200px;
+	height: 50px;
+}
+div.h_line{
+	position: relative;
+	display: none;
+	width: 180px;
+	height: 0px;
+	margin: 0px 10px 0px 10px;
+	border-top: solid 2px #FFFFFF;
+}
+article.h_text_l{
+	position: relative;
+	display: none;
+	width: 150px;
+	height: 50px;
+	margin: 10px 10px 10px 30px;
+}
+span.h_text{
+	display: table-cell;
+	width: 180px;
+	height: 50px;
+	vertical-align: middle;
+	color: #ffffff;
+	font-size: 20px;
+}
+article.h_search{
+	position: relative;
+	display: none;
+	margin: 10px 0px 0px 10px;
+}
+
+a.h_link {
+	text-decoration: none;
+	color: black;
+}
+}
+
+/*　ヘッダー　レスポンシブ対応　*/
+@media screen and (max-width: 768px) {
+
+	
+   /*　ヘッダー　*/
+    .header {
+        display: flex;
+        width: 100%;
+        height: 56px;
+        background-color: #ffffff;
+	position: relative;
+	top: auto;
+	left: auto;
+	background-image: none;
+    margin: 0px 0px 0px 0px;
+        margin-bottom: 16px;
+    }
+
+    .headerLogo__image {
+        margin: 10px 6px;
+        width: 37px;
+        height: 32px;
+        object-fit: cover;
+    }
+
+    .headerTitle {
+        align-self: center;
+        color: #109033;
+        /* font-size: 4.0vw; */
+    }
+
+	.headerTitle__text {
+        font-size: 5.5vw;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+	}
+
+    .headerSubTitle {
+        align-self: center;
+        padding-top: 8px;
+        padding-left: 8px;
+        color: #109033;
+        font-size: 2.4vw;
+    }
+
+
+    /*ハンバーガーアイコンの作成　*/
+    #h-menu {
+        position: absolute;
+        display: block;
+        width: 55px;
+        height: 56px;
+        top: 0px;
+        right: 0px;
+        background-color: #109033; /* アイコンの線の色 */
+    }
+
+    #h-menu span {
+        display: block;
+        position: absolute;
+        width: 23px;
+        height: 2px;
+        top: 36px;
+        left: 17px;
+        background: #ffffff;
+        -webkit-transition: 0.3s ease-in-out;
+        -moz-transition: 0.3s ease-in-out;
+        transition: 0.3s ease-in-out;
+    }
+
+    #h-menu span:nth-child(1) {
+        top: 14px;
+    }
+
+    #h-menu span:nth-child(2) {
+        top: 22px;
+    }
+
+    #h-menu span:nth-child(3) {
+        top: 30px;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    #h-text {
+        position: absolute;
+        width: 32px;
+        font-size: 6px;
+        color: #ffffff;
+        text-align: center;
+        top: 34px;
+        left: 12px;
+    }
+
+    /* メニュー */
+    #h-nav {
+        background: #FAFAFA;
+        position: absolute;
+        z-index: 9;
+        /* top: 3.125rem; */
+        top: 56px;
+        right: 0;
+        overflow-x: hidden;
+        width: 0;
+        -webkit-transition: 0.5s;
+        -moz-transition: 0.5s;
+        transition: 0.5s;
+    }
+
+    /* メニューを開いた時 */
+    #h-nav.open-menu {
+        width: 75%;
+    }
+
+    div.h-menu span:nth-child(1) {
+        transform: rotate(45deg);
+        top: 20px !important;
+    }
+
+    div.h-menu span:nth-child(2) {
+        width: 0;
+        opacity: 0;
+    }
+
+    div.h-menu span:nth-child(3) {
+        transform: rotate(-45deg);
+        top: 20px !important;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    div.h-menu :nth-child(4) {
+        display: none;
+    }
+
+	div.h-menu_main_block {
+        position: relative;
+        display: block;
+        width: 90%;
+        margin: 20px auto;
+		margin-top: 0px;
+        /* font-size: larger; */
+    }
+
+    div.h-menu_main_block_top {
+        position: relative;
+        display: block;
+        width: 90%;
+        margin: 20px auto;
+        /* font-size: larger; */
+    }
+
+
+	div.h-menu_block_before::before{
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #888;
+        border-right: 1px solid #888;
+        transform: rotate(45deg);
+        z-index: 5;
+    }
+
+    div.h-menu_block {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+        /* font-size: larger; */
+        
+    }
+
+    /* div.h-menu_block a { 
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    } */
+
+    div.h-menu_block_text {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 50px;
+        background: #eee;
+        vertical-align: middle;
+        
+    }
+
+    div.h-menu_block_text_center {
+        margin-top: 20px;
+        margin-left: 20px;
+        color: black;
+    }
+
+    div.h-menu_block_left_start {
+        position: relative;
+        display: block;
+        width: calc(50% - 10px);
+        height: 50px;
+        float: left;
+        /* font-size: large; */
+    }
+
+	div.h-menu_block_left {
+        position: relative;
+        display: block;
+        width: calc(50% - 10px);
+        height: 50px;
+        margin-left: 20px;
+        float: left;
+        /* font-size: large; */
+    }
+
+    /* div.h-menu_block_left ::before {
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #AAA;
+        border-right: 1px solid #AAA;
+        transform: rotate(45deg);
+        
+    } */
+
+    div.h-menu_block_text_left_center {
+        margin-top: 10%;
+        margin-left: 15px;
+        
+    }
+
+    div.h-menu_block_clear {
+        display: block;
+        clear: both;
+    }
+
+    div.h-menu_lang {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 80px;
+    }
+    div.h-menu_block_lang {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 80px;
+        background: #eee;
+        vertical-align: middle;
+    }
+    .h-menu_block_text_line {
+        height: 30px;
+    }
+    .h-menu_block_text_color_1{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #D6D6D6;
+    }
+    .h-menu_block_text_color_2{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #F7F3BC;
+    }
+    .h-menu_block_text_color_3{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #DAEDD0;
+    }
+    .mobile_translation{
+        position: relative;
+        display: block;
+        top: -20px;
+        left: 78px;
+        height: 25px;
+    }
+
+    div.h-menu_search {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+        margin-bottom: 20px;
+    }
+    div.h-menu_block_search {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 45px;
+        vertical-align: middle;
+    }
+
+    .mobile_form_input{
+        width: 60%;
+        height: 40px;
+        margin: 0px;
+    }
+	input[type="submit"] {
+		appearance: none;
+		-webkit-appearance: none;
+		border-radius: 0px;
+	}
+
+	input[type="text"] {
+		appearance: none;
+		-webkit-appearance: none;
+		border-radius: 0px;
+	}	
+    .mobile_form_button{
+        display       : inline-block;
+        width: calc(40% - 15px);
+        height: 45px;
+        font-size     : large;        /* 文字サイズ */
+        text-align    : center;      /* 文字位置   */
+        cursor        : pointer;     /* カーソル   */
+        background    : #109033;     /* 背景色     */
+        color         : #ffffff;     /* 文字色     */
+        line-height   : 1em;         /* 1行の高さ  */
+        margin: 0px;
+        margin-left: -6px;
+        border: none;
+    }
+	.mobile_heigth {
+		  height: 0;
+	}
+
+.h-accordion__container {
+  margin: 0 auto;
+}
+
+.h-accordion__title {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* .h-accordion__title::before, .h-accordion__title::after { */
+.h-accordion__title::after {
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #888;
+        border-right: 1px solid #888;
+        transform: rotate(45deg);
+}
+
+.h-accordion__title::after {
+  /* transform: rotate(90deg); */
+  transition-duration: 0.3s;
+}
+
+/* .h-accordion__title.h-is-active::before {
+  opacity: 0;
+} */
+
+.h-accordion__title.h-is-active::after {
+  transform: rotate(135deg);
+        top: 30%;
+}
+
+.h-accordion__content {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  /* padding: 0 1.5em; */
+  padding-left: 0.5em;
+  line-height: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition-duration: 0.3s;
+        /* background: #eee; */
+
+}
+
+.h-accordion__content.h-is-open {
+  line-height: normal;
+  /* numberに書き換える*/
+  height: auto;
+  opacity: 1;
+}
+
+	.h-menu_accordion_block_start{
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+		margin-top: 10px;
+		/* margin-bottom: 10px; */
+		padding-left: 1em;
+        /* background: #eee; */
+	}
+	.h-menu_accordion_block{
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+		/* margin-bottom: 10px; */
+		padding-left: 1em;
+        /* background: #eee; */
+	}
+
+	.h-menu_accordion_block_text{
+        position: relative;
+        display: block;
+		width: 80%;
+		padding-bottom: 10px;
+		border-bottom: solid 1px #ddd;
+	}
+    
+    .header_link {
+        color: #109033;
+        text-decoration: none;
+    }    
+}

css/image.css

@@ -0,0 +1,98 @@
+@charset "utf-8";
+
+.image_left {
+    float: left;
+}
+
+.image_right {
+    float: right;
+}
+
+img.left {
+    float: left;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 10px 3px 0px;
+}
+
+img.right {
+    float: right;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 0px 3px 10px;
+}
+
+.template_image {
+    width: 100%;
+}
+
+.publicFacility_img {
+    width: 450px;
+}
+
+.canNotCollectGarbage_img {
+    width: 400px;
+}
+
+.kitagataRecycleMap {
+    text-align: center;
+    display: block;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin-right: auto;
+    margin-left: auto;
+    width: 450px;
+    height: 355px;
+}
+
+.vacantHouse_img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.seryuuPeacePark_image_right1 {
+    margin-right: 60px;
+}
+
+.seryuuPeacePark_image_left1 {
+    margin-left: 60px;
+}
+
+.seryuuPeacePark_image_right2 {
+    margin-right: 22px;
+}
+
+.seryuuPeacePark_image_left2 {
+    margin-left: 22px;
+}
+
+.act_on_productivity_improvement_special_measures_law_img {
+    width: 600px;
+}
+
+.useStrict_img {
+    width: 450px;
+    height: 874px;
+}
+
+.urbanFacility_img {
+    width: 450px;
+    height: 934px;
+}
+
+.budget_img {
+    width: 452px;
+}
+
+.policyCouncil_imageWrapper {
+    display: flex;
+    width: 600px;
+    justify-content: center;
+    margin: 25px;
+}
+
+.policyCouncil_towRow_imageWrapper {
+    width: 325px;
+    justify-content: center;
+}

css/image_mobile.css

@@ -0,0 +1,99 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+    .image_left {
+        float: none;
+    }
+
+    .image_right {
+        float: none;
+    }
+
+    img.left {
+        float: left;
+        padding: 3px;
+        border: 1px solid #CCCCCC;
+        margin: 3px 10px 3px 0px;
+    }
+
+    img.right {
+        float: right;
+        padding: 3px;
+        border: 1px solid #CCCCCC;
+        margin: 3px 0px 3px 10px;
+    }
+
+    .template_imageWrapper_mobile {
+        width: 100%;
+    }
+
+    .template_image_mobile {
+        width: 100%;
+    }
+
+    .publicFacility_img {
+        width: 204px;
+    }
+
+    .canNotCollectGarbage {
+        width: 100%;
+    }
+
+    .kitagataRecycleMap {
+        width: 100%;
+        height: auto;
+    }
+
+    .vacantHouse_img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+    }
+
+    .act_on_productivity_improvement_special_measures_law_img {
+        width: 100%;
+    }
+
+    .useStrict_img {
+        width: 100%;
+        height: auto;
+    }
+
+    .urbanFacility_img {
+        width: 100%;
+        height: auto;
+    }
+
+    .elTAX_img {
+        width: 100%;
+        height: auto;
+    }
+
+    .waterTank_img {
+        float: none;
+        width: 100%;
+    }
+
+    .policyCouncil_imageWrapper {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin: 0;
+    }
+
+    .policyCouncil_towRow_imageWrapper {
+        width: 45%;
+        justify-content: center;
+        margin: 0;
+    }
+
+    .mayor_profile_img {
+        width: 50%;
+        /*position: absolute;*/
+        top: 26%;
+        right: 1%;
+        margin-bottom: 8px;
+    }
+}

css/inquiry_mobile.css

@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+    .form_textInput {
+        width: 100%;
+    }
+
+    .form_textareaInput {
+        width: 100%;
+    }
+}

css/link.css

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

css/map.css

@@ -5,4 +5,14 @@ div#map-canvas {
         padding: 0;
         height: 600px; /* 高さ */
         width: 640px;  /* 幅   */
-      }
+      }
+
+/*　map-canvas　レスポンシブ対応　*/
+@media screen and (max-width: 768px) {
+  div#map-canvas {
+        margin: 0;
+        padding: 0;
+        height: 450px; /* 高さ */
+        width: 100%;  /* 幅   */
+      }
+}

css/mayor.css

@@ -2,108 +2,147 @@
 
 /* template start */
 article#mayor_text {
-	position: absolute;
-	display: block;
-	margin: 0px 0px 0px 0px;
-}
-img#mayor_img{
-	position: absolute;
-	display: block;
-	top: 210px;
-	left: 400px;
-	margin: 0px 0px 0px 0px;
-}
-img#mayor_img_1{
-	position: absolute;
-	display: block;
-	top: 150px;
-	left: 400px;
-	margin: 0px 0px 0px 0px;
-}
-div#mayor_buttons{
-	position: relative;
-	display: block;
-	left: 10px;
-	width: 700px;
-	margin: 0px 0px 10px 0px;
-}
-div.mayor_button{
-	position: relative;
-	display: block;
-	margin: 0px 5px 0px 0px;
-}
-div#mayor_text_title{
-	position: relative;
-	display: block;
-	top: 10px;
-	left: 10px;
-	font-size: 30px;
-	line-height:120%;
-}
-article#mayor_text_1{
-	position: relative;
-	display: block;
-	top: 0px;
-	left: 20px;
-	width: 385px;
-	line-height:180%;
-	margin: 10px 0px 10px 0px;
-}
-article#mayor_text_2{
-	position: relative;
-	display: block;
-	top: 10px;
-	left: 20px;
-	width: 385px;
-	margin: 10px 0px 0px 0px;
-	line-height:180%;
-}
-
-span.mayor_text_line{
-	position: absolute;
-	display: block;
-	top: 570px;
-	left: 480px;
-}
-span.mayor_text_line_message{
-	position: absolute;
-	display: block;
-	top: 565px;
-	left: 480px;
-}
-span.mayor_text_line_message1{
-	position: absolute;
-	display: block;
-	top: 505px;
-	left: 480px;
-}
-span.mayor_text_line_message2{
-	position: absolute;
-	display: block;
-	top: 440px;
-	left: 440px;
-}
-span.mayor_text_line_message3{
-	position: absolute;
-	display: block;
-	top: 300px;
-	left: 420px;
-	width: 300px;
-}
-div.mayor_link{
-	border: 4px outset;
-	border-color: #97ce7c;
-	padding: 5px;
-}
-span.mayor_text_top{
-	position: relative;
-	display: block;
-	font-size: 30px;
-	line-height:120%;
-	margin: 10px 0px 0px 20px;
-	z-index: 10;
-}
-td.sel-yellow{
-	text-align:center;
+    position: absolute;
+    display: block;
+    margin: 0px 0px 0px 0px;
 }
+
+img#mayor_img {
+    position: absolute;
+    display: block;
+    top: 210px;
+    left: 400px;
+    margin: 0px 0px 0px 0px;
+}
+
+img#mayor_img_1 {
+    position: absolute;
+    display: block;
+    top: 150px;
+    left: 400px;
+    margin: 0px 0px 0px 0px;
+}
+
+div#mayor_buttons {
+    position: relative;
+    display: block;
+    left: 10px;
+    width: 700px;
+    margin: 0px 0px 10px 0px;
+}
+
+div.mayor_button {
+    position: relative;
+    display: block;
+    margin: 0px 5px 0px 0px;
+}
+
+div#mayor_text_title {
+    position: relative;
+    display: block;
+    top: 10px;
+    left: 10px;
+    font-size: 30px;
+    line-height: 120%;
+}
+
+article#mayor_text_1 {
+    position: relative;
+    display: block;
+    top: 0px;
+    left: 20px;
+    width: 385px;
+    line-height: 180%;
+    margin: 10px 0px 10px 0px;
+}
+
+article#mayor_text_2 {
+    position: relative;
+    display: block;
+    top: 10px;
+    left: 20px;
+    width: 385px;
+    margin: 10px 0px 0px 0px;
+    line-height: 180%;
+}
+
+span.mayor_text_line {
+    position: absolute;
+    display: block;
+    top: 570px;
+    left: 480px;
+}
+
+span.mayor_text_line_message {
+    position: absolute;
+    display: block;
+    top: 565px;
+    left: 480px;
+}
+
+span.mayor_text_line_message1 {
+    position: absolute;
+    display: block;
+    top: 505px;
+    left: 480px;
+}
+
+span.mayor_text_line_message2 {
+    position: absolute;
+    display: block;
+    top: 440px;
+    left: 440px;
+}
+
+span.mayor_text_line_message3 {
+    position: absolute;
+    display: block;
+    top: 300px;
+    left: 420px;
+    width: 300px;
+}
+
+span.mayor_profile_text {
+    position: absolute;
+    display: block;
+    left: 440px;
+    top: 450px;
+}
+
+div.mayor_link {
+    border: 4px outset;
+    border-color: #97ce7c;
+    padding: 5px;
+}
+
+span.mayor_text_top {
+    position: relative;
+    display: block;
+    font-size: 30px;
+    line-height: 120%;
+    margin: 10px 0px 0px 20px;
+    z-index: 10;
+}
+
+article.mayor_text_content {
+    position: relative;
+    display: block;
+    left: 20px;
+    margin: 10px 0px 10px 0px;
+    width: 680px;
+    line-height: 180%;
+}
+
+td.sel-yellow {
+    text-align: center;
+}
+
+.profile_table_wrapper {
+    width: 380px;
+}
+
+.profile_table {
+    width: 100%;
+}
+
 /* template end */

css/mayor_mobile.css

@@ -0,0 +1,157 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+    /* template start */
+    article#mayor_text {
+        position: absolute;
+        display: block;
+        margin: 0px 0px 0px 0px;
+    }
+
+    img#mayor_img {
+        position: relative;
+        display: block;
+        top: 0;
+        left: 0;
+        margin: 0px 0px 0px 0px;
+        width: 100%;
+    }
+
+    img#mayor_img_1 {
+        position: absolute;
+        display: block;
+        top: 150px;
+        left: 400px;
+        margin: 0px 0px 0px 0px;
+    }
+
+    div#mayor_buttons {
+        position: relative;
+        display: block;
+        left: 10px;
+        width: 100%;
+        margin: 0px 0px 10px 0px;
+    }
+
+    div.mayor_button {
+        position: relative;
+        display: block;
+        margin: 0px 5px 0px 0px;
+    }
+
+    div#mayor_text_title {
+        position: relative;
+        display: block;
+        top: 10px;
+        left: 10px;
+        font-size: 30px;
+        line-height: 120%;
+    }
+
+    article#mayor_text_1 {
+        position: relative;
+        display: block;
+        top: 0px;
+        left: 20px;
+        width: 385px;
+        line-height: 180%;
+        margin: 10px 0px 10px 0px;
+    }
+
+    article#mayor_text_2 {
+        position: relative;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 94%;
+        margin: 0 10px;
+        line-height: 180%;
+    }
+
+    span.mayor_text_line {
+        position: absolute;
+        display: block;
+        top: 570px;
+        left: 480px;
+    }
+
+    span.mayor_text_line_message {
+        position: absolute;
+        display: block;
+        top: 565px;
+        left: 480px;
+    }
+
+    span.mayor_text_line_message1 {
+        position: absolute;
+        display: block;
+        top: 505px;
+        left: 480px;
+    }
+
+    span.mayor_text_line_message2 {
+        position: absolute;
+        display: block;
+        top: 440px;
+        left: 440px;
+    }
+
+    span.mayor_text_line_message3 {
+        position: absolute;
+        display: block;
+        top: 300px;
+        left: 420px;
+        width: 300px;
+    }
+
+    span.mayor_profile_text {
+        position: relative;
+        display: none;
+        left: 0;
+        top: 0;
+        text-align: center;
+    }
+
+    div.mayor_link {
+        border: 4px outset;
+        border-color: #97ce7c;
+        padding: 5px;
+    }
+
+    span.mayor_text_top {
+        position: relative;
+        display: block;
+        font-size: 30px;
+        line-height: 120%;
+        margin: 10px 0px 0px 20px;
+        z-index: 10;
+    }
+
+    article.mayor_text {
+        position: relative;
+        display: block;
+        /*left: 20px;*/
+        /*margin: 10px 0px 10px 0px;*/
+        width: 94%;
+        line-height: 180%;
+    }
+
+    td.sel-yellow {
+        text-align: center;
+    }
+
+    .profile_table_wrapper {
+        width: 100%;
+    }
+
+    .profile_table {
+        width: 100%;
+    }
+
+    .biography_table_wrapper {
+        width: 100%;
+    }
+
+    /* template end */
+
+}

css/notices_mobile.css

@@ -0,0 +1,150 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+
+		span#template_article_block {
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		padding: 10px 10px 0px 0px;
+		margin: 0px 10px 0px 10px;
+	}
+
+	div.list_notices {
+		position: relative;
+		display: table;
+		height: auto;
+		table-layout: fixed;
+		width: auto;
+	}
+
+	span.list_notices_date {
+		position: relative;
+		display: table-cell;
+		top: 0px;
+		width: calc(100% - 20px);
+		height: auto;
+	}
+
+	span.list_notices_text {
+		position: relative;
+		display: table-cell;
+		top: -14px;
+		left: 15px;
+		width: 600px;
+		vertical-align: middle;
+	}
+}
+
+@media screen and (max-width: 425px) {
+	span#template_article_block {
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		padding: 10px 10px 0px 0px;
+		margin: 0px 10px 0px 10px;
+	}
+
+	div.list_notices {
+		position: relative;
+		display: table;
+		height: auto;
+		table-layout: fixed;
+		width: auto;
+	}
+
+	span.list_notices_date {
+		position: relative;
+		display: table-cell;
+		top: 0px;
+		width: calc(100% - 20px);
+		height: auto;
+	}
+
+	span.list_notices_text {
+		position: relative;
+		display: table-cell;
+		top: -5px;
+		left: 15px;
+		width: 240px;
+		vertical-align: middle;
+	}
+}
+
+@media screen and (max-width: 375px) {
+
+	/* template start */
+
+	span#template_article_block {
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		padding: 10px 10px 0px 0px;
+		margin: 0px 10px 0px 10px;
+	}
+
+	div.list_notices {
+		position: relative;
+		display: table;
+		height: auto;
+		table-layout: fixed;
+		width: auto;
+	}
+
+	span.list_notices_date {
+		position: relative;
+		display: table-cell;
+		top: 0px;
+		width: calc(100% - 20px);
+		height: auto;
+	}
+
+	span.list_notices_text {
+		position: relative;
+		display: table-cell;
+		top: -5px;
+		left: 15px;
+		width: 200px;
+		vertical-align: middle;
+	}
+}
+
+@media screen and (max-width: 320px) {
+
+	/* template start */
+
+	span#template_article_block {
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		padding: 10px 10px 0px 0px;
+		margin: 0px 10px 0px 10px;
+	}
+
+	div.list_notices {
+		position: relative;
+		display: table;
+		height: auto;
+		table-layout: fixed;
+		width: auto;
+	}
+
+	span.list_notices_date {
+		position: relative;
+		display: table-cell;
+		top: 0px;
+		width: calc(100% - 20px);
+		height: auto;
+	}
+
+	span.list_notices_text {
+		position: relative;
+		display: table-cell;
+		top: 0px;
+		left: 15px;
+		width: 145px;
+		vertical-align: middle;
+	}
+}
+
+/* template end */

css/reset.css

@@ -0,0 +1,102 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+/*blockquote:before, blockquote:after,*/
+/*q:before, q:after {*/
+/*    content:'';*/
+/*    content:none;*/
+/*}*/
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000;
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}

css/school.css

@@ -2,81 +2,112 @@
 
 
 .condition_l {
-	float: left;
-	font-weight: normal;
-	width: 300px;
-	margin: 5px 0px 0px 0px;
-	font-size: 95%;
+    float: left;
+    font-weight: normal;
+    width: 300px;
+    margin: 5px 0px 0px 0px;
+    font-size: 95%;
 }
-.paragraphT10{
-	margin-top: 10px;
-	margin-left: 5px;
-	padding: 0;
+
+.paragraphT10 {
+    margin-top: 10px;
+    margin-left: 5px;
+    padding: 0;
+}
+
+.school_img {
+    width: 450px;
+}
+
+.publicFacility_textHeight {
+    height: 160px;
+}
+
+.library_imgBlock {
+    width: 450px;
+    height: 350px;
+}
+
+.library_img {
+    width: 100%;
 }
 
 #backtop {
-	text-align: right;
-	padding-right: 5px;
-	margin: 10px 0px;
-	font-size: 95%;
-	clear: both;
+    text-align: right;
+    padding-right: 5px;
+    margin: 10px 0px;
+    font-size: 95%;
+    clear: both;
 }
+
 ul {
-	line-height: 120%;
-	margin: 5px 0px 0px 30px;
+    line-height: 120%;
+    margin: 5px 0px 0px 30px;
 }
+
 ul#mass {
-	list-style-type: decimal;
-	margin: 5px 0px 0px 30px;
+    list-style-type: decimal;
+    margin: 5px 0px 0px 30px;
 }
+
 ul#life {
-	margin: 5px 0px 0px 40px;
+    margin: 5px 0px 0px 40px;
 }
+
 li {
-	display: list-item;
-	text-align: -webkit-match-parent;
+    display: list-item;
+    text-align: -webkit-match-parent;
 }
+
 #mass li {
-	list-style: decimal;
-	font-size: 95%;
-	font-weight: normal;
-	margin: 0px 0px 0px -5px;
-	_margin: 0px 0px 0px 5px;
-	margin-bottom: 5px;
+    list-style: decimal;
+    font-size: 95%;
+    font-weight: normal;
+    margin: 0px 0px 0px -5px;
+    _margin: 0px 0px 0px 5px;
+    margin-bottom: 5px;
 }
+
 #school_table {
-	margin-top: 3px;
+    margin-top: 3px;
 }
+
 table {
-	display: table;
-	border-collapse: separate;
-	border-spacing: 2px;
-	border-color: gray;
+    display: table;
+    border-collapse: separate;
+    border-spacing: 2px;
+    border-color: gray;
 }
+
 #school_table .bg3 {
-	background-color: #eeeedd;
+    background-color: #eeeedd;
 }
+
 #school_table .bg2 {
-	background-color: #eeeeee;
+    background-color: #eeeeee;
 }
+
 #school_table th.bg1 {
-	background-color: #ccddee;
-	font-weight: bold;
+    background-color: #ccddee;
+    font-weight: bold;
 }
+
 table#infokitagata th {
-	vertical-align: top;
-	text-align: left;
-	background-color: #add8e6;
+    vertical-align: top;
+    text-align: left;
+    background-color: #add8e6;
 }
+
 th {
-	border-top: 1px solid #ffffff;
-	border-left: 1px solid #ffffff;
-	text-align: left;
-	vertical-align: top;
-	font-weight: normal;
-	padding: 0.3em;
-	font-size: 95%;
+    border-top: 1px solid #ffffff;
+    border-left: 1px solid #ffffff;
+    text-align: left;
+    vertical-align: top;
+    font-weight: normal;
+    padding: 0.3em;
+    font-size: 95%;
 }
+
 /*
 table#infokitagata td {
 	vertical-align: top;
@@ -85,70 +116,87 @@ table#infokitagata td {
 }
 */
 .list_label {
-	width: 100px;
-	float: left;
+    width: 100px;
+    float: left;
 }
+
 .img_caption_l {
-	margin: 1px 10px 3px 2px;
-	width: 200px;
-	text-align: center;
-	font-size: 85%;
-	float: left;
+    margin: 1px 10px 3px 2px;
+    width: 200px;
+    text-align: center;
+    font-size: 85%;
+    float: left;
 }
+
 .img_caption_0 {
-	margin: 1px 10px 3px 2px;
-	width: 480px;
-	text-align: center;
-	font-size: 85%;
-	float: left;
+    margin: 1px 10px 3px 2px;
+    width: 480px;
+    text-align: center;
+    font-size: 85%;
+    float: left;
 }
+
 .img_caption_r {
-	margin: 1px 2px 3px 10px;
-	width: 200px;
-	text-align: center;
-	font-size: 85%;
-	float: right;
+    margin: 1px 2px 3px 10px;
+    width: 200px;
+    text-align: center;
+    font-size: 85%;
+    float: right;
 }
+
 img#left {
-	float: left;
-	padding: 3px;
-	border: 1px solid #CCCCCC;
-	margin: 3px 10px 3px 0px;
+    float: left;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 10px 3px 0px;
 }
+
 img#right {
-	float: right;
-	padding: 3px;
-	border: 1px solid #CCCCCC;
-	margin: 3px 0px 3px 10px;
+    float: right;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 0px 3px 10px;
 }
+
 h4#life {
-	clear: both;
-	margin: 10px 0px 5px 3px;
-	padding: 4px 0px 4px 20px;
-	_padding: 6px 0px 6px 22px;
-	font-size: 95%;
-	border: 1px solid #666699;
-	border-left: 4px solid #666699;
+    clear: both;
+    margin: 10px 0px 5px 3px;
+    padding: 4px 0px 4px 20px;
+    _padding: 6px 0px 6px 22px;
+    font-size: 95%;
+    border: 1px solid #666699;
+    border-left: 4px solid #666699;
 }
+
 img#center {
-	text-align: center;
-	display: block;
-	padding: 3px;
-	border: 1px solid #CCCCCC;
-	margin-right: auto;
-	margin-left: auto;
+    text-align: center;
+    display: block;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+img.center {
+    text-align: center;
+    display: block;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin-right: auto;
+    margin-left: auto;
 }
 
 img#lefticon {
-	float: left;
-	padding: 3px;
-	border: 1px solid #CCCCCC;
-	margin: 3px 10px 3px 40px;
+    float: left;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 10px 3px 40px;
 }
+
 .img_caption_licon {
-	margin: 1px 10px 3px 2px;
-	width: 130px;
-	text-align: center;
-	font-size: 85%;
-	float: left;
+    margin: 1px 10px 3px 2px;
+    width: 130px;
+    text-align: center;
+    font-size: 85%;
+    float: left;
 }

css/school_mobile.css

@@ -0,0 +1,31 @@
+@media screen and (max-width: 768px) {
+    img.center {
+        text-align: center;
+        display: block;
+        padding: 3px;
+        border: 1px solid #CCCCCC;
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    .school_img_mobile {
+        margin-top: 10px;
+        margin-left: 5px;
+        padding: 0;
+        width: 215px;
+    }
+
+    .publicFacility_textHeight_mobile {
+        height: 175px;
+    }
+
+    .communityCenter_width_mobile {
+        width: 100%;
+    }
+
+    .library_imgBlock {
+        width: 100%;
+        height: auto;
+    }
+
+}

css/second_body.css

@@ -1,270 +1,309 @@
 @charset "utf-8";
 
 /* space start */
-div#space{
-	position: absolute;
-	display: block;
-	top: 690px;
-	left: 40px;
-	width: 200px;
-	height: 410px;
-	margin: 0px 0px 0px 0px;
-	background-color: #ffffff;
-}
-	article#space{
-		position: relative;
-		display: block;
-		width: 180px;
-		height: 280px;
-		margin: 0px 0px 0px 0px;
-		padding: 10px 10px 10px 10px;
-	}
-	div#space_title{
-		position: relative;
-		display: block;
-		width: 180px;
-		height: 32px;
-		margin: 0px 0px 0px 0px;
-		background-image: url(img/shortbar.png);
-	}
-	div#space_title_block{
-		position: relative;
-		display: block;
-		width: 180px;
-		margin: 0px 0px 0px 10px;
-	}
-	span#space_title{
-		display: table-cell;
-		width: 180px;
-		height: 32px;
-		font-size: 18px;
-		color: #ffffff;
-		vertical-align: middle;
-	}
+div#space {
+    position: absolute;
+    display: block;
+    top: 690px;
+    left: 40px;
+    width: 200px;
+    height: 410px;
+    margin: 0px 0px 0px 0px;
+    background-color: #ffffff;
+}
+
+article#space {
+    position: relative;
+    display: block;
+    width: 180px;
+    height: 280px;
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 10px 10px;
+}
+
+div#space_title {
+    position: relative;
+    display: block;
+    width: 180px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-image: url(img/shortbar.png);
+}
+
+div#space_title_block {
+    position: relative;
+    display: block;
+    width: 180px;
+    margin: 0px 0px 0px 10px;
+}
+
+span#space_title {
+    display: table-cell;
+    width: 180px;
+    height: 32px;
+    font-size: 18px;
+    color: #ffffff;
+    vertical-align: middle;
+}
+
 /* space end */
 
 /* template start */
 section#template {
-	position: relative;
-	display: block;
-	top: 0px;
-	left: 210px;
-	width: 710px;
-	min-height: 1020px;
-	margin: 10px 10px 10px 0px;
-	background-color: #ffffff;
-	/*background-image: url(img/topicbackground_secondfloor.png);*/
+    position: relative;
+    display: block;
+    top: 0px;
+    left: 210px;
+    width: 710px;
+    min-height: 1020px;
+    margin: 10px 10px 10px 0px;
+    background-color: #ffffff;
+    /*background-image: url(img/topicbackground_secondfloor.png);*/
 }
+
 .left {
-	float: left;
+    float: left;
 }
+
 .right {
-	float: right;
+    float: right;
 }
+
 .clear {
-	clear: both;
-}
-	/* breadcrumb start */
-	article#breadcrumb {
-		position: relative;
-		display: block;
-		left: 0px;
-		width: 690px;
-		height: 20px;
-		margin: 0px 0px 0px 0px;
-		padding: 10px 10px 0px 10px;
-	}
-	div#breadcrumb_title{
-		position: absolute;
-		display: block;
-		width: 690px;
-		height: 20px;
-		margin: 0px 0px 0px 0px;
-	}
-
-	div#breadcrumb_title_block{
-		position: relative;
-		display: block;
-		width: 690px;
-		margin: 0px 0px 0px 10px;
-	}
-	/* breadcrumb end */
-
-	/* template start */
-	article#template{
-		position: relative;
-		display: block;
-		width: 690px;
-		/*height: 460px;*/
-		margin: 0px 0px 0px 0px;
-		padding: 10px 10px 10px 10px;
-	}
-
-	div#template_title{
-		position: relative;
-		display: block;
-		width: 690px;
-		height: 32px;
-		margin: 0px 0px 0px 0px;
-		background-image: url(img/longbar_secondfloor.png);
-	}
-
-	div#template_title_block{
-		position: relative;
-		display: block;
-		width: 690px;
-		margin: 0px 0px 0px 10px;
-	}
-	span#template_title{
-		display: table-cell;
-		width: 690px;
-		height: 32px;
-		font-size: 18px;
-		color: #ffffff;
-		vertical-align: middle;
-		font-weight:bold;
-	}
-	/* template end */
-
-	/* template_list_title start */
-	article#template_list_title{
-		position: relative;
-		display: block;
-		width: 325px;
-		/*height: 460px;*/
-		margin: 0px 0px 0px 0px;
-		padding: 0px 10px 10px 10px;
-	}
-	div#template_title2{
-		position: relative;
-		display: block;
-		width: 325px;
-		height: 32px;
-		margin: 0px 0px 0px 0px;
-		background-color: #35b7ac;
-		/*background-image: url(img/longbar2_secondfloor.png);*/
-	}
-	div#template_title_koho{
-		position: relative;
-		display: block;
-		width: 325px;
-		height: 32px;
-		margin: 0px 0px 0px 0px;
-		/*background-color: #35b7ac;*/
-		background-image: url(img/longbar2_secondfloor.png);
-	}
-	span#template_title2{
-		display: table-cell;
-		width: 325px;
-		height: 32px;
-		font-size: 18px;
-		color: #FFFFFF;
-		vertical-align: middle;
-		/*font-weight:bold;*/
-		text-decoration: underline;
-	}
-	span#template_title_koho{
-		display: table-cell;
-		width: 325px;
-		height: 32px;
-		font-size: 18px;
-		color: #000000;
-		vertical-align: middle;
-		font-weight:bold;
-		/*stext-decoration: underline;*/
-	}
-	/* template_list_title end */
-	span.template_icon{
-		position: relative;
-		top: 6px;
-		width: 20px;
-		height: 20px;
-		font-size: 18px;
-		color: #FFFFFF;
-		vertical-align: middle;
-		/*font-weight:bold;*/
-		text-decoration: none;
-	}
-	span.template_list{
-		display: inline;
-		width: 325px;
-		font-size: 18px;
-		margin: 0px 0px 10px 0px;
-		color: #000000;
-		vertical-align: middle;
-	}
-	div.template_list{
-		display: block;
-		width: 325px;
-		font-size: 18px;
-		margin: 0px 0px 10px 0px;
-		color: #000000;
-		vertical-align: middle;
-	}
-	img.template_list{
-		position: relative;
-		display: block;
-		vertical-align: middle;
-	}
-	span.template_list_img{
-		display: block;
-		height: 15px;
-		font-size: 18px;
-		margin: 0px 5px 10px 0px;
-		color: #000000;
-		vertical-align: middle;
-	}
-	a.s_link{
-		color: #FFFFFF;
-	}
-	/* template start */
-	span#template_article_block {
-		position: relative;
-		display: block;
-		width: 690px;
-		margin: 10px 0px 10px 0px;
-	}
-	/* template end */
-	article#template_list_title3{
-		position: relative;
-		display: block;
-		width: 690px;
-		/*height: 460px;*/
-		margin: 0px 0px 0px 0px;
-		padding: 0px 10px 10px 10px;
-	}
-	div#template_title3{
-		position: relative;
-		display: block;
-		width: 690px;
-		height: 32px;
-		margin: 0px 0px 0px 0px;
-		background-color: #35b7ac;
-		/*background-image: url(img/longbar2_secondfloor.png);*/
-	}
-	span#template_title3{
-		display: table-cell;
-		width: 690px;
-		height: 32px;
-		font-size: 18px;
-		color: #FFFFFF;
-		vertical-align: middle;
-		/*font-weight:bold;*/
-		text-decoration: underline;
-	}
-	div.space250{
-		height:250px;
-	}
-	div.space200{
-		height:200px;
-	}
-	div.space100{
-		height:100px;
-	}
-	div.space10{
-		height:10px;
-	}
-	div.textmargin{
-		margin: 0px 0px 0px 15px;
-	}
+    clear: both;
+}
+
+/* breadcrumb start */
+article#breadcrumb {
+    position: relative;
+    display: block;
+    left: 0px;
+    width: 690px;
+    height: 20px;
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 0px 10px;
+}
+
+div#breadcrumb_title {
+    position: absolute;
+    display: block;
+    width: 690px;
+    height: 20px;
+    margin: 0px 0px 0px 0px;
+}
+
+div#breadcrumb_title_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 0px 0px 0px 10px;
+}
+
+/* breadcrumb end */
+
+/* template start */
+article#template {
+    position: relative;
+    display: block;
+    width: 690px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 10px 10px;
+}
+
+div#template_title {
+    position: relative;
+    display: block;
+    width: 690px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-image: url(img/longbar_secondfloor.png);
+}
+
+div#template_title_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 0px 0px 0px 10px;
+}
+
+span#template_title {
+    display: table-cell;
+    width: 690px;
+    height: 32px;
+    font-size: 18px;
+    color: #ffffff;
+    vertical-align: middle;
+    font-weight: bold;
+}
+
+/* template end */
+
+/* template_list_title start */
+article#template_list_title {
+    position: relative;
+    display: block;
+    width: 325px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 0px 10px 10px 10px;
+}
+
+div#template_title2 {
+    position: relative;
+    display: block;
+    width: 325px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-color: #35b7ac;
+    /*background-image: url(img/longbar2_secondfloor.png);*/
+}
+
+div#template_title_koho {
+    position: relative;
+    display: block;
+    width: 325px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    /*background-color: #35b7ac;*/
+    background-image: url(img/longbar2_secondfloor.png);
+}
+
+span#template_title2 {
+    display: table-cell;
+    width: 325px;
+    height: 32px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    text-decoration: underline;
+}
+
+span#template_title_koho {
+    display: table-cell;
+    width: 325px;
+    height: 32px;
+    font-size: 18px;
+    color: #000000;
+    vertical-align: middle;
+    font-weight: bold;
+    /*stext-decoration: underline;*/
+}
+
+/* template_list_title end */
+span.template_icon {
+    position: relative;
+    top: 6px;
+    width: 20px;
+    height: 20px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    text-decoration: none;
+}
+
+span.template_list {
+    display: inline;
+    width: 325px;
+    font-size: 18px;
+    margin: 0px 0px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+div.template_list {
+    display: block;
+    width: 325px;
+    font-size: 18px;
+    margin: 0px 0px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+img.template_list {
+    position: relative;
+    display: block;
+    vertical-align: middle;
+}
+
+span.template_list_img {
+    display: block;
+    height: 15px;
+    font-size: 18px;
+    margin: 0px 5px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+a.s_link {
+    color: #FFFFFF;
+}
+
+/* template start */
+span#template_article_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 10px 0px 10px 0px;
+}
+
+/* template end */
+article#template_list_title3 {
+    position: relative;
+    display: block;
+    width: 690px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 0px 10px 10px 10px;
+}
+
+div#template_title3 {
+    position: relative;
+    display: block;
+    width: 690px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-color: #35b7ac;
+    /*background-image: url(img/longbar2_secondfloor.png);*/
+}
+
+span#template_title3 {
+    display: table-cell;
+    width: 690px;
+    height: 32px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    text-decoration: underline;
+}
+
+@media screen and (max-width: 768px) {
+    span#template_title3 {
+        text-decoration: none;
+    }
+}
+
+div.space250 {
+    height: 250px;
+}
+
+div.space200 {
+    height: 200px;
+}
+
+div.space100 {
+    height: 100px;
+}
+
+div.space10 {
+    height: 10px;
+}
+
+div.textmargin {
+    margin: 0px 0px 0px 15px;
+}
+
 /* template end */

css/second_body_mobile.css

@@ -0,0 +1,641 @@
+@charset "utf-8";
+
+/* space start */
+div#space {
+    position: absolute;
+    display: block;
+    top: 690px;
+    left: 40px;
+    width: 200px;
+    height: 410px;
+    margin: 0px 0px 0px 0px;
+    background-color: #ffffff;
+}
+
+article#space {
+    position: relative;
+    display: block;
+    width: 180px;
+    height: 280px;
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 10px 10px;
+}
+
+div#space_title {
+    position: relative;
+    display: block;
+    width: 180px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-image: url(img/shortbar.png);
+}
+
+div#space_title_block {
+    position: relative;
+    display: block;
+    width: 180px;
+    margin: 0px 0px 0px 10px;
+}
+
+span#space_title {
+    display: table-cell;
+    width: 180px;
+    height: 32px;
+    font-size: 18px;
+    color: #ffffff;
+    vertical-align: middle;
+}
+
+/* space end */
+
+/* template start */
+section#template {
+    position: relative;
+    display: block;
+    top: 0px;
+    left: 210px;
+    width: 710px;
+    min-height: 1020px;
+    margin: 10px 10px 10px 0px;
+    background-color: #ffffff;
+    /*background-image: url(img/topicbackground_secondfloor.png);*/
+}
+
+.left {
+    float: left;
+}
+
+.left_mobile {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.right_mobile {
+    float: right;
+}
+
+.clear {
+    clear: both;
+}
+
+/* breadcrumb start */
+article#breadcrumb {
+    position: relative;
+    display: block;
+    left: 0px;
+    width: 690px;
+    height: 20px;
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 0px 10px;
+}
+
+div#breadcrumb_title {
+    position: absolute;
+    display: block;
+    width: 690px;
+    height: 20px;
+    margin: 0px 0px 0px 0px;
+}
+
+div#breadcrumb_title_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 0px 0px 0px 10px;
+}
+
+/* breadcrumb end */
+
+/* template start */
+article#template {
+    position: relative;
+    display: block;
+    width: 690px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 10px 10px 10px 10px;
+}
+
+div#template_title {
+    position: relative;
+    display: block;
+    width: 690px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-image: url(img/longbar_secondfloor.png);
+}
+
+div#template_title_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 0px 0px 0px 10px;
+}
+
+span#template_title {
+    display: table-cell;
+    width: 690px;
+    height: 32px;
+    font-size: 18px;
+    color: #ffffff;
+    vertical-align: middle;
+    font-weight: bold;
+}
+
+/* template end */
+
+/* template_list_title start */
+article#template_list_title {
+    position: relative;
+    display: block;
+    width: 325px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 0px 10px 10px 10px;
+}
+
+div#template_title2 {
+    position: relative;
+    display: block;
+    width: 325px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-color: #35b7ac;
+    /*background-image: url(img/longbar2_secondfloor.png);*/
+}
+
+div#template_title_koho {
+    position: relative;
+    display: block;
+    width: 325px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    /*background-color: #35b7ac;*/
+    background-image: url(img/longbar2_secondfloor.png);
+}
+
+span#template_title2 {
+    display: table-cell;
+    width: 325px;
+    height: 32px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    text-decoration: underline;
+}
+
+span#template_title_koho {
+    display: table-cell;
+    width: 325px;
+    height: 32px;
+    font-size: 18px;
+    color: #000000;
+    vertical-align: middle;
+    font-weight: bold;
+    /*stext-decoration: underline;*/
+}
+
+/* template_list_title end */
+span.template_icon {
+    position: relative;
+    top: 6px;
+    width: 20px;
+    height: 20px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    text-decoration: none;
+}
+
+span.template_list {
+    display: inline;
+    width: 325px;
+    font-size: 18px;
+    margin: 0px 0px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+div.template_list {
+    display: block;
+    width: 325px;
+    font-size: 18px;
+    margin: 0px 0px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+img.template_list {
+    position: relative;
+    display: block;
+    vertical-align: middle;
+}
+
+span.template_list_img {
+    display: block;
+    height: 15px;
+    font-size: 18px;
+    margin: 0px 5px 10px 0px;
+    color: #000000;
+    vertical-align: middle;
+}
+
+a.s_link {
+    color: #FFFFFF;
+}
+
+/* template start */
+span#template_article_block {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 10px 0px 10px 0px;
+}
+
+/* template end */
+article#template_list_title3 {
+    position: relative;
+    display: block;
+    width: 690px;
+    /*height: 460px;*/
+    margin: 0px 0px 0px 0px;
+    padding: 0px 10px 10px 10px;
+}
+
+div#template_title3 {
+    position: relative;
+    display: block;
+    width: 690px;
+    height: 32px;
+    margin: 0px 0px 0px 0px;
+    background-color: #35b7ac;
+    /*background-image: url(img/longbar2_secondfloor.png);*/
+}
+
+span#template_title3 {
+    display: table-cell;
+    width: 690px;
+    height: 32px;
+    font-size: 18px;
+    color: #FFFFFF;
+    vertical-align: middle;
+    /*font-weight:bold;*/
+    /*text-decoration: underline;*/
+}
+
+div.space250 {
+    height: 250px;
+}
+
+div.space200 {
+    height: 200px;
+}
+
+div.space100 {
+    height: 100px;
+}
+
+div.space10 {
+    height: 10px;
+}
+
+div.textmargin {
+    margin: 0px 0px 0px 15px;
+}
+
+/* template end */
+
+
+@media screen and (max-width: 768px) {
+    /* template start */
+    section#template {
+        position: relative;
+        display: block;
+        top: 0px;
+        left: 0px;
+        width: calc(100% - 20px);
+        min-height: auto;
+        margin: 10px 10px 10px 10px;
+        background-color: #ffffff;
+        /*background-image: url(img/topicbackground_secondfloor.png);*/
+    }
+
+    /* breadcrumb start */
+    article#breadcrumb {
+        position: relative;
+        display: block;
+        left: 0px;
+        width: calc(100% - 20px);
+        height: auto;
+        margin: 0;
+        padding: 10px 10px 0px 10px;
+    }
+
+    div#breadcrumb_title {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: auto;
+        margin: 0;
+    }
+
+    div#breadcrumb_title_block {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        margin: 0px 0px 0px 10px;
+    }
+
+    /* breadcrumb end */
+    /* template start */
+    article#template {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        /*height: 460px;*/
+        margin: 0px 0px 0px 0px;
+        padding: 10px 10px 10px 10px;
+    }
+
+    div#template_title {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: 32px;
+        margin: 0px 0px 0px 0px;
+        background-image: url(img/longbar_secondfloor.png);
+        background-size: cover;
+    }
+
+    div#template_title_block {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        margin: 0px 0px 0px 10px;
+    }
+
+    span#template_title {
+        display: table-cell;
+        width: calc(100% - 20px);
+        height: 32px;
+        font-size: 18px;
+        color: #ffffff;
+        vertical-align: middle;
+        font-weight: bold;
+    }
+
+    /* template end */
+    /* template_list_title start */
+    article#template_list_title {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        /*height: 460px;*/
+        margin: 0px 0px 0px 0px;
+        padding: 0px 10px 10px 10px;
+    }
+
+    div#template_title2 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: auto;
+        margin: 0px 0px 0px 0px;
+        background-color: #35b7ac;
+        /*background-image: url(img/longbar2_secondfloor.png);*/
+    }
+
+    div#template_title_koho {
+        position: relative;
+        display: block;
+        width: 325px;
+        height: 32px;
+        margin: 0px 0px 0px 0px;
+        /*background-color: #35b7ac;*/
+        background-image: url(img/longbar2_secondfloor.png);
+    }
+
+    span#template_title2 {
+        display: table-cell;
+        width: calc(100% - 20px);
+        height: auto;
+        padding: 5px 0px;
+        font-size: 18px;
+        color: #000000;
+        vertical-align: middle;
+        /*font-weight:bold;*/
+        text-decoration: underline;
+    }
+
+    span#template_title_koho {
+        display: table-cell;
+        width: 325px;
+        height: 32px;
+        font-size: 18px;
+        color: #000000;
+        vertical-align: middle;
+        font-weight: bold;
+        /*stext-decoration: underline;*/
+    }
+
+    /* template_list_title end */
+    span.template_icon {
+        position: relative;
+        top: 6px;
+        width: 20px;
+        height: 20px;
+        font-size: 18px;
+        color: #FFFFFF;
+        vertical-align: middle;
+        /*font-weight:bold;*/
+        text-decoration: none;
+    }
+
+    span.template_list {
+        display: inline;
+        width: calc(100% - 20px);
+        font-size: 18px;
+        margin: 0px 0px 10px 0px;
+        color: #000000;
+        vertical-align: middle;
+    }
+
+    div.template_list {
+        display: block;
+        width: calc(100% - 20px);
+        font-size: 18px;
+        margin: 0px 0px 10px 0px;
+        color: #000000;
+        vertical-align: middle;
+    }
+
+    img.template_list {
+        position: relative;
+        display: block;
+        vertical-align: middle;
+    }
+
+    span.template_list_img {
+        display: block;
+        height: 15px;
+        font-size: 18px;
+        margin: 0px 5px 10px 0px;
+        color: #000000;
+        vertical-align: middle;
+    }
+
+    a.s_link {
+        color: #FFFFFF;
+    }
+
+    /* template start */
+    span#template_article_block {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        margin: 10px 0px 10px 0px;
+    }
+
+    /* template end */
+    article#template_list_title3 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        /*height: 460px;*/
+        margin: 0px 0px 0px 0px;
+        padding: 0px 10px 10px 10px;
+    }
+
+    div#template_title3 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: 32px;
+        margin: 0px 0px 0px 0px;
+        background-color: #35b7ac;
+        /*background-image: url(img/longbar2_secondfloor.png);*/
+    }
+
+    span#template_title3 {
+        display: table-cell;
+        width: calc(100% - 20px);
+        height: 32px;
+        font-size: 18px;
+        color: #FFFFFF;
+        vertical-align: middle;
+        /*font-weight:bold;*/
+        /*text-decoration: underline;*/
+    }
+
+    .left_mobile {
+        float: none;
+    }
+
+    .right_mobile {
+        float: none;
+    }
+
+    .accordion__container {
+        margin: 0 auto;
+    }
+
+    .accordion__title {
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .accordion__title::before, .accordion__title::after {
+        content: '';
+        display: block;
+        background-color: #000;
+        position: absolute;
+        top: 50%;
+        width: 15px;
+        height: 2px;
+        right: 25px;
+    }
+
+    .accordion__title::after {
+        transform: rotate(90deg);
+        transition-duration: 0.3s;
+    }
+
+    .accordion__title.is-active::before {
+        opacity: 0;
+    }
+
+    .accordion__title.is-active::after {
+        transform: rotate(0);
+    }
+
+    .accordion__content {
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
+        padding: 0 1.5em;
+        line-height: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition-duration: 0.3s;
+    }
+
+    .accordion__content.is-open {
+        line-height: normal;
+        /* numberに書き換える*/
+        height: auto;
+        opacity: 1;
+    }
+
+    article#template_list_title_2 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        /*height: 460px;*/
+        margin: 0px 0px 0px 0px;
+        padding: 0px 10px 10px 10px;
+    }
+
+    div#template_title_2 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        height: 32px;
+        margin: 0px 0px 0px 0px;
+        background-image: url(img/longbar2_secondfloor.png);
+    }
+
+    span#template_title_2 {
+        display: table-cell;
+        width: calc(100% - 20px);
+        height: 32px;
+        font-size: 18px;
+        color: #000000;
+        vertical-align: middle;
+        font-weight: bold;
+    }
+
+    div#template_title_block_2 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        margin: 0px 0px 0px 10px;
+    }
+
+    span#template_article_block_2 {
+        position: relative;
+        display: block;
+        width: calc(100% - 20px);
+        margin: 10px 0px 10px 10px;
+    }
+
+    .img__sp {
+        width: 100%;
+    }
+
+}

css/second_header_mobile.css

@@ -0,0 +1,529 @@
+@charset "utf-8";
+
+/* ********************************************** 
+ * header定義 css
+ * 
+ * headerの大きさ・位置定義
+ * 
+ ********************************************** */
+
+/* 
+ * 2014/02/26
+ * header 大きさ定義
+ * 
+ */
+
+.header {
+	display: none;
+}
+
+@media screen and (max-width: 768px) {
+header {
+	position: absolute;
+	display: none;
+	top: 0px;
+	left: 0px;
+	width: 200px;
+	height: 600px;
+	margin: 80px 0px 0px 40px;
+	background-image: url(img/header_background.png);
+}
+
+div#header{
+	position: absolute;
+	display: none;
+	top:0px;
+}
+
+div#h_block_1{
+	position: relative;
+	display: none;
+	width: 200px;
+	height: 250px;
+}
+div#h_block_search{
+	position: relative;
+	display: none;
+	width: 200px;
+	height: 50px;
+}
+div.h_line{
+	position: relative;
+	display: none;
+	width: 180px;
+	height: 0px;
+	margin: 0px 10px 0px 10px;
+	border-top: solid 2px #FFFFFF;
+}
+article.h_text_l{
+	position: relative;
+	display: none;
+	width: 150px;
+	height: 50px;
+	margin: 10px 10px 10px 30px;
+}
+span.h_text{
+	display: table-cell;
+	width: 180px;
+	height: 50px;
+	vertical-align: middle;
+	color: #ffffff;
+	font-size: 20px;
+}
+article.h_search{
+	position: relative;
+	display: none;
+	margin: 10px 0px 0px 10px;
+}
+
+a.h_link {
+	text-decoration: none;
+	color: black;
+}
+}
+
+/*　ヘッダー　レスポンシブ対応　*/
+@media screen and (max-width: 768px) {
+
+	
+   /*　ヘッダー　*/
+    .header {
+        display: flex;
+        margin-bottom: 16px;
+        width: 100%;
+        height: 56px;
+        background-color: #ffffff;
+
+	position: relative;
+	top: auto;
+	left: auto;
+	margin: 0px 0px 0px 0px;
+	background-image: none;
+
+    }
+
+    .headerLogo__image {
+        margin: 10px 6px;
+        width: 37px;
+        height: 32px;
+        object-fit: cover;
+    }
+
+    .headerTitle {
+        align-self: center;
+        color: #109033;
+        /* font-size: 4.0vw; */
+    }
+
+	.headerTitle__text {
+        font-size: 5.5vw;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+	}
+
+    .headerSubTitle {
+        align-self: center;
+        padding-top: 8px;
+        padding-left: 8px;
+        color: #109033;
+        font-size: 2.4vw;
+    }
+
+    .header_link {
+        color: #109033;
+        text-decoration: none;
+    }
+
+
+    /*ハンバーガーアイコンの作成　*/
+    #h-menu {
+        position: absolute;
+        display: block;
+        width: 55px;
+        height: 56px;
+        top: 0px;
+        right: 0px;
+        background-color: #109033; /* アイコンの線の色 */
+    }
+
+    #h-menu span {
+        display: block;
+        position: absolute;
+        width: 23px;
+        height: 2px;
+        top: 36px;
+        left: 17px;
+        background: #ffffff;
+        -webkit-transition: 0.3s ease-in-out;
+        -moz-transition: 0.3s ease-in-out;
+        transition: 0.3s ease-in-out;
+    }
+
+    #h-menu span:nth-child(1) {
+        top: 14px;
+    }
+
+    #h-menu span:nth-child(2) {
+        top: 22px;
+    }
+
+    #h-menu span:nth-child(3) {
+        top: 30px;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    #h-text {
+        position: absolute;
+        width: 32px;
+        font-size: 6px;
+        color: #ffffff;
+        text-align: center;
+        top: 34px;
+        left: 12px;
+    }
+
+    /* メニュー */
+    #h-nav {
+        background: #FAFAFA;
+        position: absolute;
+        z-index: 9;
+        /* top: 3.125rem; */
+        top: 56px;
+        right: 0;
+        overflow-x: hidden;
+        width: 0;
+        -webkit-transition: 0.5s;
+        -moz-transition: 0.5s;
+        transition: 0.5s;
+    }
+
+    /* メニューを開いた時 */
+    #h-nav.open-menu {
+        width: 75%;
+    }
+
+    div.h-menu span:nth-child(1) {
+        transform: rotate(45deg);
+        top: 20px !important;
+    }
+
+    div.h-menu span:nth-child(2) {
+        width: 0;
+        opacity: 0;
+    }
+
+    div.h-menu span:nth-child(3) {
+        transform: rotate(-45deg);
+        top: 20px !important;
+    }
+
+    /* ハンバーガーアイコン下のテキスト */
+    div.h-menu :nth-child(4) {
+        display: none;
+    }
+
+	div.h-menu_main_block {
+        position: relative;
+        display: block;
+        width: 90%;
+        margin: 20px auto;
+		margin-top: 0px;
+        /* font-size: larger; */
+    }
+
+    div.h-menu_main_block_top {
+        position: relative;
+        display: block;
+        width: 90%;
+        margin: 20px auto;
+        /* font-size: larger; */
+    }
+
+
+	div.h-menu_block_before::before{
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #888;
+        border-right: 1px solid #888;
+        transform: rotate(45deg);
+        z-index: 5;
+    }
+
+    div.h-menu_block {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+        /* font-size: larger; */
+        
+    }
+
+    /* div.h-menu_block a { 
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    } */
+
+    div.h-menu_block_text {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 50px;
+        background: #eee;
+        vertical-align: middle;
+        
+    }
+
+    div.h-menu_block_text_center {
+        margin-top: 20px;
+        margin-left: 20px;
+        color: black;
+    }
+
+    div.h-menu_block_left_start {
+        position: relative;
+        display: block;
+        width: calc(50% - 10px);
+        height: 50px;
+        float: left;
+        /* font-size: large; */
+    }
+
+	div.h-menu_block_left {
+        position: relative;
+        display: block;
+        width: calc(50% - 10px);
+        height: 50px;
+        margin-left: 20px;
+        float: left;
+        /* font-size: large; */
+    }
+
+    /* div.h-menu_block_left ::before {
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #AAA;
+        border-right: 1px solid #AAA;
+        transform: rotate(45deg);
+        
+    } */
+
+    div.h-menu_block_text_left_center {
+        margin-top: 10%;
+        margin-left: 15px;
+        
+    }
+
+    div.h-menu_block_clear {
+        display: block;
+        clear: both;
+    }
+
+    div.h-menu_lang {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 80px;
+    }
+    div.h-menu_block_lang {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 80px;
+        background: #eee;
+        vertical-align: middle;
+    }
+    .h-menu_block_text_line {
+        height: 30px;
+    }
+    .h-menu_block_text_color_1{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #D6D6D6;
+    }
+    .h-menu_block_text_color_2{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #F7F3BC;
+    }
+    .h-menu_block_text_color_3{
+        position: relative;
+        display: inline; 
+        width: 30px;
+        /* height: 25px; */
+		padding: 0px 5px;
+		margin: 0px 3px;
+        text-align: center;
+        background: #DAEDD0;
+    }
+    .mobile_translation{
+        position: relative;
+        display: block;
+        top: -20px;
+        left: 78px;
+        height: 25px;
+    }
+
+    div.h-menu_search {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+        margin-bottom: 20px;
+    }
+    div.h-menu_block_search {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 45px;
+        vertical-align: middle;
+    }
+
+    .mobile_form_input{
+        width: 60%;
+        height: 40px;
+        margin: 0px;
+    }
+	input[type="submit"] {
+		appearance: none;
+		-webkit-appearance: none;
+		border-radius: 0px;
+	}
+
+	input[type="text"] {
+		appearance: none;
+		-webkit-appearance: none;
+		border-radius: 0px;
+	}	
+    .mobile_form_button{
+        display       : inline-block;
+        width: calc(40% - 15px);
+        height: 45px;
+        font-size     : large;        /* 文字サイズ */
+        text-align    : center;      /* 文字位置   */
+        cursor        : pointer;     /* カーソル   */
+        background    : #109033;     /* 背景色     */
+        color         : #ffffff;     /* 文字色     */
+        line-height   : 1em;         /* 1行の高さ  */
+        margin: 0px;
+        margin-left: -6px;
+        border: none;
+    }
+	.mobile_heigth {
+		  height: 0;
+	}
+
+.h-accordion__container {
+  margin: 0 auto;
+}
+
+.h-accordion__title {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* .h-accordion__title::before, .h-accordion__title::after { */
+.h-accordion__title::after {
+        content: '';
+        position: absolute;
+        right: 28px;
+        top: 50%;
+        margin-top: -8px;
+        width: 20px;
+        height: 20px;
+        border-top: 1px solid #888;
+        border-right: 1px solid #888;
+        transform: rotate(45deg);
+}
+
+.h-accordion__title::after {
+  /* transform: rotate(90deg); */
+  transition-duration: 0.3s;
+}
+
+/* .h-accordion__title.h-is-active::before {
+  opacity: 0;
+} */
+
+.h-accordion__title.h-is-active::after {
+  transform: rotate(135deg);
+        top: 30%;
+}
+
+.h-accordion__content {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  /* padding: 0 1.5em; */
+  padding-left: 0.5em;
+  line-height: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition-duration: 0.3s;
+        /* background: #eee; */
+
+}
+
+.h-accordion__content.h-is-open {
+  line-height: normal;
+  /* numberに書き換える*/
+  height: auto;
+  opacity: 1;
+}
+
+	.h-menu_accordion_block_start{
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+		margin-top: 10px;
+		/* margin-bottom: 10px; */
+		padding-left: 1em;
+        /* background: #eee; */
+	}
+	.h-menu_accordion_block{
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 50px;
+		/* margin-bottom: 10px; */
+		padding-left: 1em;
+        /* background: #eee; */
+	}
+
+	.h-menu_accordion_block_text{
+        position: relative;
+        display: block;
+		width: 80%;
+		padding-bottom: 10px;
+		border-bottom: solid 1px #ddd;
+	}
+    
+}

css/second_template.css

@@ -142,6 +142,7 @@ section#template {
 		color: #000000;
 		vertical-align: middle;
 		font-weight:bold;
+		text-decoration: none;
 	}
 	/* template_list_title end */
 	span.template_list{
@@ -178,5 +179,7 @@ section#template {
 	div.space260{
 		height:260px;
 	}
-
+	div.space420{
+		height:420px;
+	}
 /* template end */

css/second_template_mobile.css

@@ -0,0 +1,186 @@
+@charset "utf-8";
+
+@media screen and (max-width: 768px) {
+/* space start */
+div#space{
+	position: absolute;
+	display: block;
+	top: 690px;
+	left: 40px;
+	width: 200px;
+	height: 410px;
+	margin: 0px 0px 0px 0px;
+	background-color: #ffffff;
+}
+	article#space{
+		position: relative;
+		display: block;
+		width: 180px;
+		height: 280px;
+		margin: 0px 0px 0px 0px;
+		padding: 10px 10px 10px 10px;
+	}
+	div#space_title{
+		position: relative;
+		display: block;
+		width: 180px;
+		height: 32px;
+		margin: 0px 0px 0px 0px;
+		background-image: url(img/shortbar.png);
+	}
+	div#space_title_block{
+		position: relative;
+		display: block;
+		width: 180px;
+		margin: 0px 0px 0px 10px;
+	}
+	span#space_title{
+		display: table-cell;
+		width: 180px;
+		height: 32px;
+		font-size: 18px;
+		color: #ffffff;
+		vertical-align: middle;
+	}
+/* space end */
+
+/* template start */
+section#template {
+	position: relative;
+	display: block;
+	top: 0px;
+	left: 10px;
+	width: calc(100% - 20px);
+	height: 1020px;
+	margin: 10px 10px 10px 0px;
+	background-color: #ffffff;
+	/*background-image: url(img/topicbackground_secondfloor.png);*/
+}
+	/* breadcrumb start */
+	article#breadcrumb {
+		position: relative;
+		display: block;
+		left: 0px;
+		width: calc(100% - 20px);
+		height: 20px;
+		margin: 0px 0px 0px 0px;
+		padding: 10px 10px 0px 10px;
+	}
+	div#breadcrumb_title{
+		position: absolute;
+		display: block;
+		width: calc(100% - 20px);
+		height: 20px;
+		margin: 0px 0px 0px 0px;
+	}
+
+	div#breadcrumb_title_block{
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		margin: 0px 0px 0px 10px;
+	}
+	/* breadcrumb end */
+
+	/* template start */
+	article#template{
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		/*height: 460px;*/
+		margin: 0px 0px 0px 0px;
+		padding: 10px 10px 10px 10px;
+	}
+
+	div#template_title{
+		position: relative;
+		display: block;
+		width: calc(100% - 10px);
+		height: 32px;
+		margin: 0px 0px 0px 0px;
+		background-image: url(img/longbar_secondfloor.png);
+	}
+
+	div#template_title_block{
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		margin: 0px 0px 0px 10px;
+	}
+	span#template_title{
+		display: table-cell;
+		width: calc(100% - 20px);
+		height: 32px;
+		font-size: 18px;
+		color: #ffffff;
+		vertical-align: middle;
+		font-weight:bold;
+	}
+	/* template end */
+
+	/* template_list_title start */
+	article#template_list_title{
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		/*height: 460px;*/
+		margin: 0px 0px 0px 0px;
+		padding: 0px 10px 10px 20px;
+	}
+	div#template_title2{
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		height: 32px;
+		margin: 0px 0px 0px 0px;
+		background-image: url(img/longbar2_secondfloor.png);
+	}
+	span#template_title2{
+		display: table-cell;
+		width: calc(100% - 20px);
+		height: 32px;
+		font-size: 18px;
+		color: #000000;
+		vertical-align: middle;
+		font-weight:bold;
+	}
+	/* template_list_title end */
+	span.template_list{
+		display: table-cell;
+		width: calc(100% - 20px);
+		height: 32px;
+		font-size: 18px;
+		color: #000000;
+		vertical-align: middle;
+	}
+	/* template start */
+	span#template_article_block {
+		position: relative;
+		display: block;
+		width: calc(100% - 20px);
+		margin: 10px 0px 10px 10px;
+	}
+	/* template end */
+	div.space250{
+		height:250px;
+	}
+	div.space200{
+		height:200px;
+	}
+	div.space100{
+		height:100px;
+	}
+	div.space10{
+		height:10px;
+	}
+	div.space210{
+		height:320px;
+	}
+	div.space260{
+		height:260px;
+	}
+	div.space420{
+		height:420px;
+	}
+}
+/* template end */

css/section_mobile.css

@@ -0,0 +1,171 @@
+@charset "utf-8";
+
+/* ***********************************************
+ * コンテンツ定義 css
+ *
+ * コンテンツ一覧
+ * ページ操作コンテンツ
+ * 	住所
+ * 	背景色変更
+ * 	文字サイズ変更
+ * 	翻訳
+ * 	サイトマップ
+ * 	お問い合わせ
+ *
+ * コンテンツブロック
+ * 	スライド画像
+ * 	情報一覧
+ * 	記事一覧
+ * 		新着情報
+ *		イベント情報
+ * 		町からのお知らせ
+ * 		町の出来事
+ * 	北方町紹介
+ * 	ライフイベント
+ * 	町長の部屋
+ * 	緊急・災害情報
+ * 	カレンダー
+ * 	アクセスランキング
+ * 	広報1
+ * 	広報2
+ * 	広報3
+ * 	広報4
+ * 	facebook
+ * 	きたがたまなびすと
+ *
+ ********************************************** */
+
+/*
+ * 2014/02/26
+ * section タグ定義
+ * article タグ定義
+ *
+ * 2014/02/27
+ * article_list 記事一覧 タグ定義
+ *
+ * 2014/03/03
+ * コメントアウト編集
+ * コンテンツブロックに仕分け
+ *
+ */
+
+/* 一番上 ページ操作コンテンツ */
+
+@media screen and (max-width: 768px) {
+	section#operation {
+	position: relative;
+	display: none;
+	top: 0px;
+	left: 0px;
+	width: 920px;
+	height: 60px;
+	margin: 0px 10px 10px 0px;
+}
+a.i_link {
+	color: #000000;
+}
+	/* 住所 ここから */
+	address#operation_add{
+		position: relative;
+		display: none;
+		margin: 0px 0px 0px 0px;
+		padding: 3px 0px 0px 0px;
+		text-align: right;
+		font-size: 12px;
+	}
+	/* 住所 ここまで */
+
+	/* ボタンリスト ここから */
+	div#controle_panel{
+		position: relative;
+		display: none;
+		left: 130px;
+		top: 5px;
+	}
+
+	/* 背景色変更 ここから */
+	article#bgcolor{
+		position: relative;
+		display: none;
+		margin: 0px 10px 0px 10px;
+		float:left;
+	}
+	div#bgcolor_img{
+		position: relative;
+		display: none;
+		left:83px;
+		top:-33px;
+		height: 29px;
+	}
+		input#button1{
+			position: absolute;
+			display: none;
+			width: 29px;
+			height: 28px;
+		}
+		input#button2{
+			position: absolute;
+			display: none;
+			left: 34px;
+			width: 29px;
+			height: 28px;
+		}
+		input#button3{
+			position: absolute;
+			display: none;
+			left: 68px;
+			width: 29px;
+			height: 28px;
+		}
+	/* 背景色変更 ここまで */
+
+	/* 文字サイズ変更 ここから */
+	article#charsize{
+		position: relative;
+		display: none;
+		margin: 0px 10px 0px 10px;
+		float:left;
+	}
+	div#charsize_img{
+		position: relative;
+		display: none;
+		left:83px;
+		top:-32px;
+	}
+	/* 文字サイズ変更 ここまで */
+
+	/* 翻訳 ここから */
+	article#translation{
+		position: relative;
+		display: none;
+		margin: 0px 10px 0px 10px;
+		float:left;
+	}
+	/* 翻訳 ここまで */
+
+	/* サイトマップ ここから */
+	article#sitemap{
+		position: relative;
+		display: none;
+		margin: 0px 10px 0px 10px;
+		float:left;
+	}
+	/* サイトマップ ここまで */
+
+	/* お問い合わせ ここから */
+	article#contact{
+		position: relative;
+		display: none;
+		float:left;
+	}
+	/* お問い合わせ ここまで */
+
+	div#claer {
+		clear : both;
+	}
+	
+}
+/* 一番上 ページ操作コンテンツ */
+
+
+/* 各コンテンツブロック配置 */

css/slideme.css

@@ -7,86 +7,165 @@
  */
 
 article#imgae {
-	position: absolute;
-	display: block;
-	top: 0px;
-	left: 0px;
-	width: 690px;
-	height: 230px;
-	margin: 10px 10px 10px 10px;
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 0px;
+    width: 690px;
+    height: 230px;
+    margin: 10px 10px 10px 10px;
+}
+
+/* スライド画像　レスポンシブ */
+@media screen and (max-width: 768px) {
+    article#imgae {
+        position: static;
+        width: auto;
+    }
 }
 
 div#slide {
-	position: absolute;
-	display: block;
-	top: 0px;
-	left: 0px;
-	width: 690px;
-	height: 210px;
-	overflow: hidden;
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 0px;
+    width: 690px;
+    height: 210px;
+    overflow: hidden;
 }
 
 div.item {
-	position: absolute;
-	display: block;
-	top: 0px;
-	left: 0px;
-	width: 690px;
-	height: 210px;
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 0px;
+    width: 690px;
+    height: 210px;
 }
 
 div#item_slide {
-	position: absolute;
-	display: block;
-	top: 210px;
-	left: 0px;
-	width: 690px;
-	height: 20px;
+    position: absolute;
+    display: block;
+    top: 210px;
+    left: 0px;
+    width: 690px;
+    height: 20px;
+}
+
+/* スライド削除　レスポンシブ */
+@media screen and (max-width: 768px) {
+    div#item_slide {
+        display: none;
+    }
 }
 
 div#item_slide_center {
-	width: 105px;
-	margin: 0 auto;
+    width: 105px;
+    margin: 0 auto;
 }
 
 div.itemnum {
-	position: relative;
-	top: 7px;
-	display: inline;
-	margin: 0 auto;
+    position: relative;
+    top: 7px;
+    display: inline;
+    margin: 0 auto;
 }
 
 li {
-	width: 2em;
-	cursor: pointer;
-	display: block;
-	line-height: 20px;
-	position: absolute;
-	top: 50%;
-	z-index: 10;
-	margin: -1em 0;
-	border-radius: 6px;
-	color: #fff;
-	text-align: center;
-	background: #393;
+    width: 2em;
+    cursor: pointer;
+    display: block;
+    line-height: 20px;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    margin: -1em 0;
+    border-radius: 6px;
+    color: #fff;
+    text-align: center;
+    background: #393;
 }
 
 li.next {
-	right: -5px;
+    right: -5px;
 }
 
 li.prev {
-	left: -5px;
+    left: -5px;
 }
 
 div.positionabsolute {
-	font-size: xx-large;
-	line-height: 120%;
-	text-align: center;
-	color: white;
-	font-weight: bold;
+    font-size: xx-large;
+    line-height: 120%;
+    text-align: center;
+    color: white;
+    font-weight: bold;
 }
 
 div.positionabsolute a :hover {
-	color: white;
+    color: white;
+}
+
+.item__coronaTitle {
+    position: relative;
+    width: 690px;
+    height: 50px;
+    background-color: blue;
+}
+
+.second__coronavirusTitle {
+    position: relative;
+    width: 345px;
+    height: 80px;
+    float: left;
+    background-color: cornflowerblue;
+}
+
+.second__coronavirusText {
+    position: absolute;
+    top: -3px;
+    left: 12px;
+    color: black;
+    font-size: xx-large;
+    text-align: center;
+    font-weight: bold;
+}
+
+.second__vaccinationTitle {
+    position: relative;
+    width: 345px;
+    height: 160px;
+    float: left;
+    background-color: yellow;
+}
+
+
+/* レスポンシブ */
+@media screen and (max-width: 768px) {
+    div.item {
+        width: 335px;
+    }
+
+    .item__coronaTitle {
+        position: relative;
+        width: 315px;
+        height: 25px;
+        background-color: #436AD6;
+    }
+
+    .second__coronavirusTitle {
+        position: relative;
+        width: 155px;
+        height: 36px;
+        float: left;
+        background-color: cornflowerblue;
+    }
+
+    .second__vaccinationTitle {
+        position: relative;
+        width: 155px;
+        height: 160px;
+        float: left;
+        background-color: yellow;
+    }
 }

css/style.css

@@ -0,0 +1,631 @@
+@media (max-width: 768px) {
+    body {
+        font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+        background-color: #F7F3BC;
+    }
+
+    /*　ヘッダー　*/
+    .header {
+        display: flex;
+        margin-bottom: 16px;
+        width: 100%;
+        background-color: #ffffff;
+    }
+
+    .headerLogo__image {
+        margin: 10px 6px;
+        width: 37px;
+        height: 32px;
+        object-fit: cover;
+    }
+
+    .headerTitle {
+        align-self: center;
+        color: #109033;
+        font-size: 7.5vw;
+    }
+
+    .headerSubTitle {
+        align-self: center;
+        padding-top: 8px;
+        padding-left: 8px;
+        color: #109033;
+        font-size: 3.8vw;
+    }
+
+    /*　新型コロナウィルス感染症について　*/
+    .coronaNotice {
+        position: relative;
+        margin: 0 20px 16px;
+        padding: 1px;
+        min-height: 120px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .coronaNoticepadding {
+        display: block;
+        position: relative;
+        margin: 6px auto;
+        width: 94%;
+    }
+
+    .aboutCorona {
+        display: block;
+        position: relative;
+        width: 100%;
+    }
+
+    .kitagataTownSituation {
+        display: block;
+        position: relative;
+        top: -1%;
+        width: 50%;
+    }
+
+    .eventCancel {
+        display: block;
+        position: relative;
+        top: -1%;
+        width: 50%;
+    }
+
+    .coronaVaccination {
+        display: block;
+        position: absolute;
+        top: 24%;
+        left: 50%;
+        width: 50%;
+    }
+
+    .aboutCoronaImg {
+        width: 100%;
+    }
+
+    .kitagataTownSituationImg {
+        width: 100%;
+    }
+
+    .eventCancelImg {
+        width: 100%;
+    }
+
+    .coronaVaccinationImg {
+        width: 100%;
+    }
+
+    /* 災害情報 */
+    .disasterInfo {
+        display: flex;
+        margin: 0 20px 16px;
+        min-height: 32px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .disasterInfoTitleWrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 30%;
+    }
+
+    .disasterInfoTitle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 2px;
+        padding: 0 4px;
+        height: 20px;
+        background-color: #38abd0;
+    }
+
+    .disasterInfoTitle__text {
+        font-size: 2.8vw;
+        color: #ffffff;
+    }
+
+    .disasterInfoDetail {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 8px;
+        font-size: 3.2vw;
+    }
+
+    /* 新着情報 */
+    .newInfo {
+        margin: 0 20px 16px;
+        min-height: 120px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .newInfoTitle {
+        position: relative;
+        margin-bottom: 4px;
+        min-height: 22px;
+        border-radius: 8px 8px 0 0;
+        background-color: #FF6666;
+    }
+
+    .newInfoTitle__text {
+        padding: 6px 0 0 16px;
+        font-size: 3.2vw;
+    }
+
+    .newInfoText {
+        color: #ffffff;
+    }
+
+    .newInfoList {
+        margin-top: 3px;
+        font-size: 2vw;
+        color: #ffffff;
+    }
+
+    .newInfoTitle__list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        width: 70px;
+        top: 16%;
+        right: 5%;
+        background-color: #707070;
+    }
+
+    .newInfoTopic {
+        margin: 0 auto;
+        padding: 0 8px;
+        height: 120px;
+        width: 84%;
+        overflow: scroll;
+    }
+
+    .newInfoTopicWrap {
+        position: relative;
+        display: inline-block;
+        margin-bottom: 4px;
+    }
+
+    .newInfoTopicWrap__date {
+        margin-bottom: 2px;
+        font-size: 2.8vw;
+    }
+
+    .newInfoTopicWrap__date:before {
+
+    }
+
+    .newInfoTopicWrap__text {
+        margin-bottom: 4px;
+        font-size: 3.2vw;
+    }
+
+    /*  ライフイベント  */
+    .lifeEvent {
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 396px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .lifeEventTitle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 16px 0 24px;
+    }
+
+    .lifeEventTitle__text {
+        position: relative;
+        font-size: 5.4vw;
+    }
+
+    .lifeEventTitle__text:before {
+        position: absolute;
+        bottom: -8px;
+        /*left: 20%;*/
+        width: 100%;
+        height: 2px;
+        background: #49A01E;
+        content: '';
+    }
+
+    .lifeEventContents {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin: 0 auto;
+        width: 88%;
+    }
+
+    .lifeEventContent {
+        display: flex;
+        margin-bottom: 16px;
+        width: 50%;
+    }
+
+    .lifeEventName {
+        align-self: center;
+        margin-left: 4px;
+        font-size: 3.2vw;
+    }
+
+    .lifeEventNameException {
+        align-self: center;
+        margin-left: 4px;
+        font-size: 2.8vw;
+    }
+
+    /*　町長の部屋以下　*/
+    .mayorRoom {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 568px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .mayorRoomContent {
+        margin: 16px 12px 8px;
+        width: 92%;
+    }
+
+    .parliamentContent {
+        margin: 0 auto 8px;
+        width: 92%;
+    }
+
+    .disasterPreventionContent {
+        margin: 0 auto 8px;
+        width: 92%;
+    }
+
+    .kouhouKitagataContent {
+        margin: 0 auto 8px;
+        width: 92%;
+    }
+
+    .kawasemiStoolsContent {
+        margin: 0 auto 16px;
+        width: 92%;
+    }
+
+    .mayorRoomImg {
+        width: 100%;
+    }
+
+    /*  きたがたまなびすと  */
+    .kitagatamanabisuto {
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 597px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .kitagatamanabisutoContents {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin: 16px 12px;
+        width: 92%;
+    }
+
+    .kitagatamanabisutoContent {
+        width: 47%;
+        margin-bottom: 16px;
+    }
+
+    .kitagatamanabisutoImg {
+        width: 100%;
+    }
+
+    /*  関連リンク　*/
+    .relatedLinks {
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 249px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .relatedLinksTitle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 16px 0 24px;
+    }
+
+    .relatedLinksTitle__text {
+        position: relative;
+        font-size: 5.4vw;
+    }
+
+    .relatedLinksTitle__text:before {
+        position: absolute;
+        bottom: -8px;
+        /*left: 5%;*/
+        width: 100%;
+        height: 2px;
+        background: #49A01E;
+        content: '';
+    }
+
+    .relatedLinksContents {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 20px;
+        width: 88%;
+    }
+
+    .relatedLinksContents__left {
+        margin-right: 4px;
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .relatedLinksContents__center {
+        margin-right: 4px;
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .relatedLinksContents__right {
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .relatedLinksImg {
+        min-height: 37px;
+        width: 100%;
+    }
+
+    /*  広告スペース　*/
+    .advertisementLink {
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 462px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .advertisementLinkTitle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 16px 0 24px;
+    }
+
+    .advertisementLinkTitle__text {
+        position: relative;
+        font-size: 5.4vw;
+    }
+
+    .advertisementLinkTitle__text:before {
+        position: absolute;
+        bottom: -8px;
+        /*left: 12%;*/
+        width: 100%;
+        height: 2px;
+        background: #49A01E;
+        content: '';
+    }
+
+    .advertisementLinkContents {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 20px;
+        width: 88%;
+    }
+
+    .advertisementLinkContents__left {
+        margin-right: 4px;
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .advertisementLinkContents__center {
+        margin-right: 4px;
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .advertisementLinkContents__right {
+        margin-bottom: 4px;
+        width: 32%;
+    }
+
+    .advertisementLinkImg {
+        width: 100%;
+    }
+
+    /*  町の人口　*/
+    .people {
+        margin: 0 20px 16px;
+        padding-top: 1px;
+        min-height: 281px;
+        width: 90%;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+
+    .peopleTitle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 18px 0 24px;
+    }
+
+    .peopleTitle__text {
+        position: relative;
+        font-size: 5.4vw;
+    }
+
+    .peopleTitle__text:before {
+        position: absolute;
+        bottom: -8px;
+        /*left: -3%;*/
+        width: 100%;
+        height: 2px;
+        background: #49A01E;
+        content: '';
+    }
+
+    .peopleContent {
+        display: flex;
+        align-items: center;
+        margin: 0 62px 12px;
+        width: 62%;
+    }
+
+    .peopleLastContent {
+        display: flex;
+        align-items: center;
+        margin: 0 62px 16px;
+        width: 62%;
+    }
+
+    .peopleImg {
+        width: 12%;
+    }
+
+    .people__img {
+        width: 100%;
+    }
+
+    .icon {
+        color: #565656;
+        font-size: 1.5em;
+    }
+
+    .people__unit {
+        margin-left: 8px;
+        width: 30%;
+        font-size: 3.2vw;
+    }
+
+    .people__population {
+        margin-bottom: 1px;
+        font-size: 4.8vw;
+        font-weight: bold;
+    }
+
+    .lastUpdate {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 16px;
+    }
+
+    .lastUpdate__text {
+        margin-right: 52px;
+        font-size: 3.2vw;
+    }
+
+    .peopleLink {
+        display: flex;
+        justify-content: space-evenly;
+        margin: 0 auto 16px;
+        width: 68%;
+    }
+
+    .peopleLinkText {
+        font-size: 3.8vw;
+        color: #707070;
+    }
+
+    /*  フッター  */
+    .footerTitle {
+        margin-bottom: 16px;
+    }
+
+    .footerTitleLogo {
+        display: flex;
+        justify-content: center;
+    }
+
+    .footerTitleLogo__img {
+        margin: 10px 6px;
+        width: 37px;
+        height: 32px;
+        object-fit: cover;
+    }
+
+    .footerTitleTownName {
+        display: flex;
+        justify-content: center;
+    }
+
+    .footerTitleLogo__text {
+        font-size: 5.4vw;
+        color: #109033;
+    }
+
+    .footerContent {
+        margin-bottom: 16px;
+    }
+
+    .footerTextWrap {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 4px;
+    }
+
+    .footerLink {
+        margin-bottom: 16px;
+    }
+
+    .footerTextWrap__text {
+        font-size: 4vw;
+    }
+
+    .footerLinkWrap {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 4px;
+    }
+
+    .footerLinkWrap__text {
+        display: block;
+        font-size: 10px;
+        transform: scale(0.8);
+        transform-origin: 0 0;
+    }
+
+    #backToButton {
+        position: fixed;
+        right: 30px;
+        bottom: 30px;
+        padding: 10px;
+        font-size: 86%;
+        text-decoration: none;
+        border-radius: 5px;
+        opacity: 0.0;
+        transition: ease .3s;
+    }
+
+    #backToButton.view {
+        opacity: 1.0;
+    }
+
+    .linkNone {
+        color: black;
+        text-decoration: none;
+    }
+}

css/table.css

@@ -6,92 +6,152 @@
  * 
  ********************************************** */
 
-table.infokitagata{
-	font-size:85%;
-	background-color:#fff;
+table.infokitagata {
+    font-size: 85%;
+    background-color: #fff;
 }
-table.infokitagata caption{
-	vertical-align:top;
-	text-align:left;
-	background-color:#add8e6;
-	padding:3px;
-	border:2px solid #ffffff;
+
+table.infokitagata caption {
+    vertical-align: top;
+    text-align: left;
+    background-color: #add8e6;
+    padding: 3px;
+    border: 2px solid #ffffff;
 }
+
 table.infokitagata th {
-	vertical-align:top;
-	font-weight: normal;
-	text-align:left;
-	background-color:#add8e6;
+    vertical-align: top;
+    font-weight: normal;
+    text-align: left;
+    background-color: #add8e6;
+}
+
+table.infokitagata td {
+    vertical-align: top;
+    text-align: left;
+    background-color: #dcdcdc;
 }
-table.infokitagata td{
-	vertical-align:top;
-	text-align:left;
-	background-color:#dcdcdc;
+
+.childCareTime {
+    border: 0;
+    cellpadding: 3;
+    cellspacing: 2;
+    width: 650px;
 }
+
 strong#life {
-	border: 1px solid #999999;
-	padding: 2px;
-	line-height: 160%;
-	margin: 0px;
+    border: 1px solid #999999;
+    padding: 2px;
+    line-height: 160%;
+    margin: 0px;
+}
+
+strong.life {
+    border: 1px solid #999999;
+    padding: 2px;
+    line-height: 160%;
+    margin: 0px;
 }
+
 h4#life {
-	clear: both;
-	margin: 10px 0px 5px 3px;
-	padding: 4px 0px 4px 20px;
-	_padding: 6px 0px 6px 22px;
-	font-size: 95%;
-	border: 1px solid #666699;
-	border-left: 4px solid #666699;
+    clear: both;
+    margin: 10px 0px 5px 3px;
+    padding: 4px 50px 4px 20px;
+    _padding: 6px 50px 6px 22px;
+    font-size: 95%;
+    border: 1px solid #666699;
+    border-left: 4px solid #666699;
 }
+
 .left {
-	float: left;
+    float: left;
 }
+
 .right {
-	float: right;
+    float: right;
 }
-#right{
-	float: right;
-	padding: 3px;
-	border: 1px solid #CCCCCC;
-	margin: 3px 0px 3px 10px;
+
+#right {
+    float: right;
+    padding: 3px;
+    border: 1px solid #CCCCCC;
+    margin: 3px 0px 3px 10px;
 }
+
 .clear {
-	clear: both;
+    clear: both;
 }
+
 h2#ad {
-	height: 32px;
-	margin: 10px 0px 0px;
-	background-repeat: no-repeat;
-	padding: 6px 0px 0px 15px;
-	_padding: 8px 0px 0px 15px;
-	font-size: 95%;
-	clear: both;
+    height: 32px;
+    margin: 10px 0px 0px;
+    background-repeat: no-repeat;
+    padding: 6px 0px 0px 15px;
+    _padding: 8px 0px 0px 15px;
+    font-size: 95%;
+    clear: both;
 }
+
 p.attention_in {
-	margin-top: 10px;
-	margin-left: 5px;
-	padding: 5px;
-	border: 1px solid #FF9900;
+    margin-top: 10px;
+    margin-left: 5px;
+    padding: 5px;
+    border: 1px solid #FF9900;
 }
+
 h3#life {
-	height: 20px;
-	margin: 10px 0px 0px 2px;
-	padding: 4px 0px 1px 15px;
-	_padding: 6px 0px 2px 15px;
-	font-size: 95%;
-	border-left: 4px solid #6699CC;
-	background-color: #eee;
-	clear: both;
-	border-bottom: 1px solid #ccc;
-	border-right: 1px solid #ccc;
-}
-span.template_intent{
-	
-}
-
-.maginlist{
-	position: relative;
-	top:-18px;
-	left:33px;
-	width: 610px;
+    height: 20px;
+    margin: 10px 0px 0px 2px;
+    padding: 4px 0px 1px 15px;
+    _padding: 6px 0px 2px 15px;
+    font-size: 95%;
+    border-left: 4px solid #6699CC;
+    background-color: #eee;
+    clear: both;
+    border-bottom: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+}
+
+h3.life {
+    height: 20px;
+    margin: 10px 0px 0px 2px;
+    padding: 4px 0px 1px 15px;
+    _padding: 6px 0px 2px 15px;
+    font-size: 95%;
+    border-left: 4px solid #6699CC;
+    background-color: #eee;
+    clear: both;
+    border-bottom: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+}
+
+span.template_intent {
+
+}
+
+.maginlist {
+    position: relative;
+    top: -18px;
+    left: 33px;
+    width: 610px;
+}
+
+.townDevelopment_introductionWrapper_left {
+    margin: 10px 0 10px 20px;
+}
+
+.townDevelopment_introductionWrapper_right {
+    margin: 10px 0 10px 20px;
+}
+
+.publicShelter_table {
+    border: 0;
+    margin-left: 300px;
+    width: 51%;
+}
+
+.welfareShelter_table {
+    border: 0;
+    margin-left: 300px;
+    width: 51%;
 }

css/table_mobile.css

@@ -0,0 +1,74 @@
+@charset "utf-8";
+
+/* **********************************************
+ * table_mobile定義 css
+ *
+ *
+ ********************************************** */
+
+@media screen and (max-width: 768px) {
+    .scroll_table {
+        overflow: auto;
+        /*white-space: nowrap;*/
+    }
+
+    /*.childCareTime {*/
+    /*    border: 0;*/
+    /*    cellpadding: 3;*/
+    /*    cellspacing: 2;*/
+    /*    width: 100%;*/
+    /*}*/
+    h3.life_mobile {
+        height: 36px;
+        margin: 10px 0px 0px 2px;
+        padding: 4px 0px 1px 15px;
+        _padding: 6px 0px 2px 15px;
+        font-size: 95%;
+        border-left: 4px solid #6699CC;
+        background-color: #eee;
+        clear: both;
+        border-bottom: 1px solid #ccc;
+        border-right: 1px solid #ccc;
+    }
+
+    strong.life_mobile {
+        padding: 0;
+    }
+
+    .townDevelopment_wrapper {
+        margin-left: 16px;
+        margin-bottom: 8px;
+    }
+
+    .townDevelopment_introductionWrapper_left {
+        margin: 0 0 0 8px;
+    }
+
+    .townDevelopment_introductionWrapper_right {
+        margin: 0 0 0 8px;
+    }
+
+    .townDevelopment_left {
+        float: none;
+    }
+
+    .townDevelopment_right {
+        float: none;
+    }
+
+    .publicShelter_table {
+        border: 0;
+        margin-left: 0;
+        width: 51%;
+    }
+
+    .welfareShelter_table {
+        border: 0;
+        margin-left: 45%;
+        width: 51%;
+    }
+
+    .ikiiki_table_th {
+        width: 36%;
+    }
+}