charset "Shift-JIS";
<style type="text/css">




/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：安否確認システム
'ﾓｼﾞｭｰﾙ名称  ：安否確認メインメニュー    スタイルシート
'ﾓｼﾞｭｰﾙ内容  ：安否確認メインメニュー共通ﾓｼﾞｭｰﾙ
'html名称    :index.html
'            :
'
'
'***************************************************************************************************
'
'  ■  改修履歴  ■
'
'
'
'
'
'
'
'
'
'
'
'
'
*/




/*  共通部分  */
html{ font-size: 100%; }     /* ユーザー設定した文字サイズを正しく反映させる */
body {
	background-color: #fff;					 /* ボディ部の背景色    #fffbe9; */
  	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	}
h1 {font-size: 20px; color: #0bd; line-height: 1.0; }
  /*.h1_margin {margin: 0 0 3px 5px;}    */      /* h1 の余白  line-height: 1.0;  でもOK */
h3 {font-size:18px; line-height: 1.0; }
p {font-size:16px; line-height: 1.0; /* 行間 */}
.font_size14 {font-size: 14px; }    /* Pタグのfont　*/
.font_size12 {font-size: 12px; }
.font_size16 {font-size: 16px; }

a {text-decoration: none; }     /* <a>タグのライン */
img { max-width: 100%; }
.logo{ width: auto; margin: 0; }
.menu-icon {margin-top:1.5rem;}   /* ﾊﾝﾊﾞｰｶﾞｰﾒﾆｭｰ  */

.page-header{
  display: flex; justify-content:space-between;
  align-items:  center;
 }

/*.page_header_logogroup{ background-color: #009bc6;}  */
.wrapper {max-width:  1000px; margin: 0 auto; padding: 0 4%; }
.wrapper3 {max-width:  800px; margin: 0 10px 0; padding: 0 4%; }
.wrapper4 {max-width:  550px; margin: 0 auto; padding: 0 4%; }
.wrapper5 {max-width:  450px; margin: 0 auto; padding: 0 4%; }



/*  TEST背景色   #9fb7d4  border-radius: 5%; 角丸    text-align: center; 文字位置   cursor: pointer; カーソル  padding: 12px 28px; 余白  opacity: 1; 透明度  transition: .3s;   なめらか変化 */
.m-button{display: inline-block; border-radius: 5%; text-align: center; cursor: pointer; padding: 3px 10px; opacity: 1;transition: .3s;
   background: #5588b3; color:#fff;margin: 1px; width: 190px; }
.m-button:hover {
     box-shadow    : none;        /* カーソル時の影消去 */
     opacity       : 0.8;         /* カーソル時透明度 */
   }



/* ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ */
                /*    お役立ち情報  選択ボタン    */

          .btn_info{
              width:250px;
              height:30px;
              line-height:30px;
          }
          .btn_info a{
              display:block;
              width:100%;
              height:100%;
              text-decoration: none;
              background:#FFFFFF;
              text-align:center;
              color:#000000;
              font-size:16px;
              font-weight:normal;
              box-shadow:3px 3px 0px 0px #D8D8D8 ;
          }
          .btn_info a:hover{
              background:#D8D8D8;
              color:#000000;
              margin-left:3px;
              margin-top:3px;
              box-shadow:none;
          }


    /* テキストやリストに添えるアイコンやサムネイルとして「画像」を表示させるなら「疑似要素」がおすすめです。
       今回はCSSの疑似要素::before・::afterを使って、要素の前後に画像を挿入する方法  */
          .moshimo-manual-container::before {
                content: url("images/info_icon2.png");    /*  info_icon.png  */
                vertical-align: middle;                   /*  垂直方向の位置  */
                padding-right: 8px;                       /*  文章との距離  */

          }

/* ※※※※※※※※※※※※※  お役立ち情報  選択ボタン  END  ※※※※※※※※※※※※※※※※※※※※※※※ */





/*  共通  お知らせ情報   */
#common-infomation p{ text-align:center; }    /*  中央表示  */
/*  pタグ　文章の先頭を揃える  txet-indent使う*/
p.indent-1 { padding-left:1em; text-indent:-1em; }
/*  listの内部番号エリアの非表示  */
.display-none { display: none; }


/*  ※※※  設備のご案内　ヘッダー部  ※※※   */
#background_container {background-image: url(../content/guidance-bg.png);
            height: 250px;
            margin-bottom: 10px;
            }
.guidance-bg {
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            }


#guidance-infomation { text-align:center; margin-top: 1%; }    /*  中央表示  */
.guidance-page-title {margin: 0 0 ;
            padding-top: 140px;
            font-size: 24px;
            color: #fff; line-height: 1.0;
           }
#guidance-infomation p { font-size: 0.8rem; margin: 10px 0 10px;
            color: #fff;
            }


/* ※※※   設備画像  サイズ共通  ※※※   */


.guidance-item-img {
            max-width: 250px;
            max-height: 150px;

            background-color: #F5F6F8;
            background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
            background-position: center top;
            background-repeat: no-repeat;
            }

.guidance-item-img img {
            max-width: auto;
            max-height: 150px;
            }



/* ※※※  リストのスタイル  ※※※ */
/*  マーカーを背景画像で表示している場合は、margin-bottom ではなく
padding-bottom で指定する（マーカーが欠けてしまうのを避けるた   リストulの上余白調整 margin-top:-1em; */
#toppage-topics ul { margin-top:-1em;  list-style-position: outside;  list-style-image: url(images/point_1A.png); }    /*　ﾘｽﾄﾏｰｶｰに画像　表示しない HTMLのStyleに変更　マーカーの表示位置 inside  */

.topics-list1 li{padding-bottom: 10px; }   /*　改行幅の調整　OK　 */
/* li{padding-bottom: 10px; }   OK   */

.topics-list2 li{padding-bottom: 10px; }   /*　改行幅の調整　OK　 */
/* li{padding-bottom: 10px; }   OK   */
#toppage-news ul {list-style-type: square; }    /*　ﾘｽﾄﾏｰｶｰ白丸 circle  四角 square  マーカー無 none　黒丸 disc規定値 */




/* ※※※  サイドバーのタイトルに下線  ※※※ */
.sub-title{padding-left: 20px ; padding-bottom: 8px ; border-bottom: 1px #0bd solid; }


/* 未完成　※※※  ページの先頭へのリンク設定   ※※※ */
#pagetop{ margin-top: 10px; margin-right: auto; margin-bottom: 0; margin-left: auto; text-align: right;
}

a.anchor{ display: block;  padding-top: 70px; margin-top: -70px;
}

/* ページの先頭へのリンク設定 */
#pagetop a{ display: block; margin-left: auto; width: 125px; height: 21px; overflow: hidden;
    background-image : url(image/returnTop_1A.png); background-position: top left;
    background-repeat: no-repeat; text-align: left; text-indent: -9999px;
}





   /* ※※※  表のスタイル  ※※※ */
   /* HTML5 ではwidth 属性 が<col>，<colgroup>，<hr>，<pre>，<table>，<td>，<th>などの要素が廃止 */
    .examination_table{  border-collapse:collapse ; border-color:#b2b2b2; }

    #col1 { background-color:#92cb97 ; text-align: center; }
    #col2 { background-color:#92cb97 ; text-align: center; }
    #col3 { text-align: right; padding-right: 20%; }    /* 未対応? margin-right: 2px   padding       : 0px 2px ;  */
    #col4 { text-align: center; }





/****************************************************************************************/
/**********  【guidance-gaidance.html】 のタブ                                   *********/
/**********                                                                     *********/
/**********   スマホ用スタイルシートでタブの大きさを調整する                        *********/



     /****************************************************************
     * ver1.0_ (2021.09.18)
     * ｽﾀｲﾙｼｰﾄ名称　：style_facility.css
     * 機　能　　　 ：タブメニューのスタイルシート
     * 改修履歴　　 ：
     ****************************************************************/
       /*tabの形状*/
       .tab{
         display: flex;
         flex-wrap: wrap;        /* 折り返し  */
         gap:0; /* 余白 */
         padding: 0 30px 0;              /* 親要素(ｸﾞﾘｯﾄﾞｺﾝﾃﾅ)と子要素(ｸﾞﾘｯﾄﾞｱｲﾃﾑ)隙間   */
       }


       .tab li a{
         display: block;
         background: #fff;       /* 187f52 ﾀﾞｰｸｸﾞﾘｰﾝ   #ddd     #5588b3 */
         margin:0 2px;           /* 上下　左右  */
         padding:0 20px 2px;     /* 階の横幅  */
         text-decoration: none;      /* テキストの装飾指定  下線等  */
         color: #000;
         border-right:  solid 1px #d9d9d9; /*右枠線*/

       }

       /*liにactiveクラスがついた時の形状*/
       .tab li.active a{
         color: #000;									 /* color: #fff;  */
         background: #ffe200;          /*  #fff  #5588b3ブルー系  #187f52 ｸﾞﾘｰﾝ系*/
         border-right:  solid 1px #d9d9d9; /*右枠線*/

       }


       /*エリアの表示非表示と形状*/
       .area {
         display: none;  /*はじめは非表示*/
         opacity: 0;   /*透過0    0.0〜1.0 */
         background: #ffe200;      /*  #fff #187f52 */
         padding:0 10px 10px;
				 margin: 0 0 30PX;         /* サブタイトルと明細との間隔調整   */
       }
       /*エリアの設備画像場所 */
       .facility_infomation_area {
         opacity: 0;   /*透過0    0.0〜1.0 */
         background: pink;      /*  #fff  */
         padding:0 10px 10px;
       }

       /* リアの ul マーカー種類  */
       #tab_container ul{
         list-style: none;            /* マーカーなし  */
        }

       /*areaにis-activeというクラスがついた時の形状*/
       .area.is-active {
           display: block;/*表示*/
           animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
           animation-duration: 2s;
           animation-fill-mode: forwards;
       }

       @keyframes displayAnime{
         from {
           opacity: 0;
         }
         to {
           opacity: 1;
         }
       }



       /*========= レイアウトのためのCSS ===============*/
/*
       body{
         background:#eee;
       }
*/

       /*  タブ全体の背景   */
       .tab_wrapper{
         width:100%;
         max-width: 1200px;
         margin:5px auto;
         background: #fff;         /* #fefefe   #fff */
       }

       .area h2{
         color: #fff;
         font-size:1rem;
         margin:0 0 10px 10px;     /* 上　右　下　左 */
         padding: 0;
       }

       .area ul{
         margin-top: -18px;       /* tabと明細の間を無くす */
				 text-align: center;
       }

       .area li{
         color: #000;            /* color: #fff;  */
         padding: 5px 0 0;             /* 上の余白  */
         font-size: 1rem;
 /*        border-bottom: 1px solid #ddd;   下線無しにする　　*/
       }






    /****************************************************************
    * ver1.0_ (2021.09.18)
    * ｽﾀｲﾙｼｰﾄ名称　：guidance.css　　共通タイルシート
    * 機　能　　　 ：大地震に備えましょうのスタイルシート　
    * 改修履歴　　 ：
    ****************************************************************/
    /* スマホは画像　テキストは縦並び　　PC タブレットは横並び   */
    /* PC タブレットは横並び配置を共通スタイルにする  */
	 		.guidance-item-style {
		 			display: flex; 					/* 横並び 規定値 */
		 			margin-bottom: 20px;    /* 上下間隔  GAP　ダメ*/
	 		}

			/* figure-image-s1 , guidance-right-s1の相対的大きさ  */
			/* 画像のスタイル　相対的大きさ  */
	 		.figure-image-s1 {
					 width: 45%;   /*  画像幅の指定 %指定で　画像とテキスト幅を揃える  */
					 max-width: 200px;
					 max-height: 150px;
					 margin: 0;
					 padding: 0;
					 overflow: hidden;
					 position: relative;

					 background-color: #F5F6F8;
					 background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
			 		 background-position: center top;
			 		 background-repeat: no-repeat;
		 	  }

				/*  画像とテキストの間隔調整   */
		 		.guidance-right-s1 {
						width: 55%;   /*  テキスト幅の指定 %指定で　画像とテキスト幅を揃える  */
			 			margin: 0 0 0 30px;
			 			padding: 0;
		 		}

				/* figure-image-s2 , guidance-right-s2の相対的大きさ  */
				/* 画像のスタイル　相対的大きさ  */
				.figure-image-s2 {
						width: 20%;   /*  画像幅の指定 %指定で　画像とテキスト幅を揃える  */
						max-width: 200px;
						max-height: 120px;
						margin: 0;
						padding: 0;
						overflow: hidden;
						position: relative;

						background-color: #F5F6F8;
						background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
						background-position: center top;
						background-repeat: no-repeat;
				 }

				 /*  画像とテキストの間隔調整  */
				 .guidance-right-s2 {
						 width: 80%;   /*  テキスト幅の指定 %指定で　画像とテキスト幅を揃える  */
						 margin: 0 0 0 30px;
						 padding: 0;
				 }

		 		/*  画像サイズ   */
		 		.guidance-item-img img {
						max-width: auto;
						max-height: 150PX;
				}

		 		/*  活動報告写真　画像サイズ 　複数枚あるため　最小サイズ指定   */

		 		.guidance-item7-img img {
						max-width: auto;
						min-width: 120PX;
						max-height: 100PX;
				}




		 		/*  タイトルの文字サイズ   */
		 		.guidance-title-s1 {
			 			margin: 0;
			 			padding: 0;
			 			font-weight: bold;
			 			font-size: 16px;
		 		}

				/*  タイトルの文字サイズ   */
				.guidance-title6-style {
						margin: 15px 0 5px;
						padding: 0;
						font-weight: bold;
						font-size: 16px;
				}

		 	 /*  テキストの行間調整  */
		 		.guidance-text-s1 {
			 			margin: 10px 0 0;
			 			padding: 0;
		 		}
		 	 /*  テキストの行間調整  */
			 	.guidance-text-s2 {
			 			margin: 8px 0 0;
			 			padding: 0;
		 		}

				.guidance-item7-img-container {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						grid-gap: 5px;
						margin: 0 auto;
						/*	ustify-itemsプロパティとalign-itemsプロパティの値をそれぞれ「center」にすることでコンテンツを画面中央  */
						/*	中央にならない  justify-content: center;  */
					  justify-items: center;
					  align-items: center;

					/*   flex 最後画像(行)　中央にならず少し左にズレる gridに変更　　
							display: flex;
							flex-direction: row;	/ 左から右　規定値  /
							flex-wrap: wrap;			/ 折り返し有り  /
							gap: 5px 10px;   / 縦　横　空白区切りでrow-gap 、column-gapの順 /

						  justify-content: center;
					  	width: 90%;
						  margin: 0 auto;

					*/
				}




/********************************************************/





				/* figure-image-s2 , guidance-right-s2の相対的大きさ  */
				/* 画像のスタイル　相対的大きさ  */
				.figure-image7-style {
						max-width: 150px;
						max-height: 100px;
						margin:  0 0 5px;
						padding: 0 0 25px;
						overflow: hidden;
						position: relative;

						background-color: #F5F6F8;
						background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
						background-position: center top;
						background-repeat: no-repeat;
				 }


















/* ※※※ スマホ  PC別のスタイルシート    注意 メディアクエリに未対応のIE8以下等は表示しない ※※※ */
          /*  ※ phone.css ※  */
      @media screen and (max-width:599px) {
          /* 小幅が599px以下の場合に適用する */

					 /* 画像及び説明文のコンテナー 縦配置  */
 	 				.container-Style2-grid{
 	 						display:grid;
 	 						justify-content: center;
 	 				 }



          /*  TEST背景色   #9fb7d4  border-radius: 5%; 角丸    text-align: center; 文字位置   cursor: pointer; カーソル  padding: 12px 28px; 余白  opacity: 1; 透明度  transition: .3s;   なめらか変化 */
          /*  スマホボタンを少し大きめに  padding  5px  */
          .m-button{display: inline-block; border-radius: 5%; text-align: center; cursor: pointer; padding: 6px 10px; opacity: 1;transition: .3s;
             background: #5588b3; color:#fff;margin: 1px; width: 220px; }
          .m-button:hover {
               box-shadow    : none;        /* カーソル時の影消去 */
               opacity       : 0.8;         /* カーソル時透明度 */
             }



           /*   タブ幅を狭くする      */

           /*tabの形状*/
           .tab{
             display: flex;
             flex-wrap: wrap;        /* 折り返し  */
             gap:0; /* 余白 */
             padding: 0 10px 0;      /* 調整  親要素(ｸﾞﾘｯﾄﾞｺﾝﾃﾅ)と子要素(ｸﾞﾘｯﾄﾞｱｲﾃﾑ)隙間   */
           }


           .tab li a{
             display: block;
             background: #fff;       /* 187f52 ﾀﾞｰｸｸﾞﾘｰﾝ   #ddd     #5588b3 */
             margin:0 2px;           /* 上下　左右  */
             padding:0 10px 2px;     /* 調整 tab1つ階の横幅  */
             text-decoration: none;      /* テキストの装飾指定  下線等  */
             color: #000;
             border-right:  solid 1px #d9d9d9; /*右枠線*/
           }



					 /*  スマホサイズｽﾀｲﾙｼｰﾄ   大地震に備えましょうのスタイルシート   */　
					 /* スマホは画像　テキストは縦並び　　PC タブレットは横並び   */
				 		.guidance-item-style {
					 			display: flex; 					/* Flex */
					 			margin-bottom: 20px;    /* 上下間隔  GAP　ダメ*/
					 			flex-direction:column;  /* 画像　ﾃｷｽﾄ　縦並びにする  */
					 		}

						 .figure-image-s1 {
						 		width: 45%;    画像幅の指定 %指定で　画像とテキスト幅を揃える  */
								max-width: 200px;
								max-height: 150px;
								margin: 0;
								padding: 0;
								overflow: hidden;
								position: relative;

								background-color: #F5F6F8;
								background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
								background-position: center top;
								background-repeat: no-repeat;
						 }

						 /*  画像とテキストの間隔調整  */
						  .guidance-right-s1 {
								 width: 55%;     テキスト幅の指定 %指定で　画像とテキスト幅を揃える  */
								 margin: 0 0 0 10px;
								 padding: 0;
						 }

						/* 活動報告画像　サイズ変更で横2列にする  */
		 				.guidance-item7-img-container {
		 						display: grid;
		 						grid-template-columns: 1fr 1fr;
		 						grid-gap: 5px;
		 						margin: 0 auto;
		 						/*	ustify-itemsプロパティとalign-itemsプロパティの値をそれぞれ「center」にすることでコンテンツを画面中央  */
		 						/*	中央にならない  justify-content: center;  */
		 					  justify-items: center;
		 					  align-items: center;

		 					/*   flex 最後画像(行)　中央にならず少し左にズレる gridに変更　　
		 							display: flex;
		 							flex-direction: row;	/ 左から右　規定値  /
		 							flex-wrap: wrap;			/ 折り返し有り  /
		 							gap: 5px 10px;   / 縦　横　空白区切りでrow-gap 、column-gapの順 /

		 						  justify-content: center;
		 					  	width: 90%;
		 						  margin: 0 auto;

		 					*/
		 				}



      }



          /*  ※ tablet.css 600px=約24cm   959 px ※  */
      @media (min-width:600px) and (max-width:759px) {
          /* 小幅が600以上　759px以下の場合に適用する  */

					/* 画像及び説明文のコンテナー 縦配置  */
	 				.container-Style2-grid{
	 						display:grid;
	 						justify-content: center;
	 				 }


          .top_menu-Position-group{display:grid; flex-direction:row; }






      /*
          #toppage-info-Position{width: 260px; float: right; padding-bottom: 50px; }
      #toppage-examination-Position{width: 260px; float: right; padding-bottom: 50px; }
      */
            /*  【注意】このサイズでは横並びは形が崩れてしまう
             * Flexboxで横並びにする *
            .top-memu-contents{display: flex; justify-content: space-between; margin-bottom: 50px}
            * 記事部分　　画面幅が変わっても伸縮するようにする  *
            article {width: 65%; }
            * サイドバー部分　　画面幅が変わっても伸縮するようにする  *
            aside {width: 30%; }
            */

      }


          /*  ※ desktop.css ※  */
      @media (min-width:760px) {
          /* 小幅が760px以上の場合に適用する */


					/* 画像及び説明文のコンテナー 縦配置  */
	 				.container-Style2-grid{
	 						display:grid;
	 						justify-content: center;
	 				 }

          .top_menu-Position-group{display:grid; flex-direction:row; }



      }






      /*   ■　フッター部　■  ﾊﾞｯｸｶﾗｰ#7acbe1  */
      footer{background-color: #e3de00; text-align: center;  }

      footer p{color: #000; font-size: 0.875rem; padding: 5px 0 ;}









</style>