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




/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：安否確認システム
'ﾓｼﾞｭｰﾙ名称  ：安否確認メインメニュー    スタイルシート
'ﾓｼﾞｭｰﾙ内容  ：安否確認メインメニュー共通ﾓｼﾞｭｰﾙ
'html名称    :index.html
'            :
'
'
'***************************************************************************************************
'
'  ■  改修履歴  ■
' 2022/03/12 font-family追加
' 2022/03/12 画面　左右分割を廃止
'
' 2022/04/03 おたがいさま　スタイルシート変更
'            '#logo{ height=120px;  width: auto; margin: 0; }
'            .page-header{ display: flex; justify-content:space-between;    align-items:  center; }

'



'
'
'
'
'
'
'
'
'
'
'
'
*/




/*  共通部分  */
html{ font-size: 100%; }     /* ユーザー設定した文字サイズを正しく反映させる */
body {							/*  iPhone版Safariで文字サイズがおかしくなるとき  */
  -webkit-text-size-adjust: 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　*/

a {text-decoration: none; }     /* <a>タグのライン */
img { max-width: 100%; }
#logo{ height=120px;  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%; }
.wrapper2 {max-width:  800px; margin: 0 auto; padding: 0 4%; }
.wrapper3 {max-width:  600px; 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: #FFE200; color:#000;margin: 1px; width: 190px;
   border: 2px solid;
   border-color: #e3de00;
 }
.m-button:hover {
     box-shadow    : none;        /* カーソル時の影消去 */
     opacity       : 0.8;         /* カーソル時透明度 */
   }

.m-button2 {
   display: inline-block; border-radius: 5%; text-align: center; cursor: pointer; padding: 3px 10px; opacity: 1;transition: .3s;
   background: #FFF9B1; color:#000;margin: 1px; width: 190px;
   border: 2px solid;
   border-color: #e3de00;
 }
.m-button2:hover {
     box-shadow    : none;        /* カーソル時の影消去 */
     opacity       : 0.8;         /* カーソル時透明度 */
   }





/*  共通　お知らせ情報   */
#common-infomation p{ text-align:center; }    /*  中央表示  */
/*  pタグ　文章の先頭を揃える  txet-indent使う*/
p.indent-1 { padding-left:1em; text-indent:-1em; }
/*  liタグ　文章の先頭を揃える  txet-indent使う*/
li.indent-1 { padding-left:1em; text-indent:-1em; }

/* ※※※  リストのスタイル  ※※※ */
/*  マーカーを背景画像で表示している場合は、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{
      min-width:250px;
      max-width:400px;
      border-collapse:collapse ;
      border-color:#b2b2b2;
    }

  /* td .col1 ではCSS効かない  */
    td.col1 { background-color:#92cb97 ; text-align: center; }
    td.col2 { background-color:#92cb97 ; text-align: center; }
    td.col3 { text-align: right; padding-right: 20%; }    /* 未対応? margin-right: 2px   padding       : 0px 2px ;  */
    td.col4 { text-align: center; }



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

        /*

        .top_menu-Position-group{ max-width: 500px; position: absolute;  }
        .top_menu-Position-group2-1{ max-width: 500px; position: absolute;  }

        */

        /* トップメニューのボタン 縦配置  */
        #menu_container{display:grid; flex-direction:column; grid-row-gap: 2px; 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: #FFE200; color:#000;margin: 1px; width: 220px;
           border: 2px solid;
           border-color: #e3de00;
         }
        .m-button:hover {
             box-shadow    : none;        /* カーソル時の影消去 */
             opacity       : 0.8;         /* カーソル時透明度 */
         }

        .m-button2 {display: inline-block; border-radius: 5%; text-align: center; cursor: pointer; padding: 6px 10px; opacity: 1;transition: .3s;
           background: #FFF9B1; color:#000;margin: 1px; width: 220px;
           border: 2px solid;
           border-color: #e3de00;
         }
        .m-button2:hover {
             box-shadow    : none;        /* カーソル時の影消去 */
             opacity       : 0.8;         /* カーソル時透明度 */
         }



    }



        /*  ※ tablet.css 600px=約24cm   959 px ※  */
    @media (min-width:600px) and (max-width:759px) {
        /* 小幅が320px以下の場合に適用する  */
        /* トップメニューのボタン */
        /*  div#sidebar{with:160px;}  */

        /* トップメニューのボタン のレイアウト FlexBox CSS3  横配置　*/
        #menu_container{
          display:grid;  grid-template-columns: 200px 200px ;
          gap: 2px 20px;  justify-content: center;
        }

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


          /*  【注意】このサイズでは横並びは形が崩れてしまう
           * 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) {
      /* 小幅が960px以上の場合に適用する */
      /* トップメニューのボタン */
      /* div#sidebar{with:25%;} */


      /* トップメニューのボタン のレイアウト FlexBox CSS3  横配置　*/
      #menu_container{
        display:grid;  grid-template-columns: 200px 200px 200px 200px ;
        grid-column-gap: 20px; grid-row-gap: 2px;  justify-content: center;
      }

			/* レイアウト Grid   縦配置　*/
      .top_menu-Position-group{display:grid; flex-direction:row; }



  /*
        / Flexboxで横並びにする  /
        .top-memu-contents{display: flex; justify-content: space-between; margin-bottom: 50px}

        / 記事部分　　画面幅が変わっても伸縮するようにする  /
        article {width: 45%; }
        / サイドバー部分　　画面幅が変わっても伸縮するようにする  /
        aside {width: 45%; }
  */




  }





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

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










</style>