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



/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：安否確認システム
'ﾓｼﾞｭｰﾙ名称  ：安否確認工事中    スタイルシート
'ﾓｼﾞｭｰﾙ内容　：安否確認工事中案内 共通ﾓｼﾞｭｰﾙ
'html名称    :infomation.html
'            :
'
'
'***************************************************************************************************
'
'  ■ 　改修履歴　　■
' 2022/03/12 iphone対応  font-family追加
' 2022/03/13 iphone対応  -webkit-text-size-adjust
'            input submit button   -webkit-appearance  ボタン形状の統一
' 2022/03/15 画面　左右分割を廃止
'
'
' 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 {color:#0bd; font-size:20px; line-height: 1.0; }
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;
 }


/* 表示領域の設定  */
.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%; }


/*  処理内容のタイトル表示領域　予約・取消・混雑状況　　　 角丸    text-align: center; 文字位置   cursor: pointer; カーソル  padding: 12px 28px; 余白  opacity: 1; 透明度  transition: .3s;   なめらか変化 */
.menu-status{display: inline-block;  text-align: left;  padding-top: 6px; padding-bottom: 6px ;padding-left: 10px ;opacity: 1;
   background: #e3de00; color:#000;margin: 1px; width: 98%; }



/*   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: 12px 10px; opacity: 1;transition: .3s;
   background: #5588b3; color:#fff;margin: 1px; width: 190px; }
.m-button: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; }
/*  pタグ　文章を中央揃え */
p.text-center {text-align: center; }
/*  listの内部番号エリアの非表示  */
.display-none { display: none; }

/*  コンボボックスのスタイル情報   フォントサイズの変更上手くいかない場合は、selectタグにcssのborderプロパイを追加  */
#boxlabel {width: 200px;  }

/*  コンボボックスのスタイル情報   境界線　大きさ　文字サイズ  */
.cmbbox select{
          border: 1px 　solid;     /*  太さ1px ) 実線(solid)  */
          border-color: #ccc;
          width: 200px; font-size: 1rem;
}




  /************************************************************************/
  /*         前週　次週のボタンに矢印を表示する                              */
  /*  FlexBoxで両端と均等配置                                              */
  /* テーブルの　<caption>　表との配置関係で タイトルに　ボタンを配置する　    */
  .reserve-week-container {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    padding-left: 1rem;          /* 左右矢印位置の調整 */
    padding-right: 1rem;
    padding-bottom: 0;
    margin-bottom: 10px;          /* 外枠線と重なるための調整 */
  }



    /*  くの字の矢印アイコン（角丸背景） 右ボタン 完成 2022/01/04 */

    .next-arrow{
        position: relative;
        display: inline-block;
        padding: 0 18PX 0 0;        /* 右側に16PX 空き */
        color: #000;
        vertical-align: middle;     /* 縦揃え */
        text-decoration: none;      /* テキストの装飾 下線等なし */
        font-size: 15px;
    }
    .next-arrow::before,
    .next-arrow::after{
        position: absolute;
        top: 0;
        bottom: 0;
        Right: 0;                   /* Light */
        margin: auto;
        content: "";
        vertical-align: middle;
    }

    .nextweek-btn::before{
        width: 16px;                /* 四角の大きさ  */
        height: 16px;
        -webkit-border-radius: 25%;   /* 角丸  */
        border-radius: 25%;
        background: #7a0;
    }
    .nextweek-btn::after{
        Right: 6px;               /* 右矢印 位置 3px微調整  */
        width: 5px;
        height: 5px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }





    /*  くの字の矢印アイコン（角丸背景） 右ボタン */

    .last-arrow{
        position: relative;
        display: inline-block;
        padding: 0 0 0 18px;
        color: #000;
        vertical-align: middle;
        text-decoration: none;
        font-size: 15px;
    }
    .last-arrow::before,
    .last-arrow::after{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: "";
        vertical-align: middle;
    }

    .lastweek-btn::before{
        width: 16px;
        height: 16px;
        -webkit-border-radius: 25%;
        border-radius: 25%;
        background: #7a0;
    }
    .lastweek-btn::after{
        left: 6px;                   /* 左矢印 位置 3px微調整  */
        width: 5px;
        height: 5px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(-135deg);     /* 左矢印 回転させる  */
        transform: rotate(-135deg);
    }




 /* ※※※  表のスタイル  ※※※ */

 /* ********************************************* */
 /* *********  【index.html】 の表　  ************ */
/* 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;  }    /* 未対応? margin-right: 2px   padding       : 0px 2px ;  */
  #col4 { text-align: center; }

/* ********************************************* */
/* *********  【reserve.html】 の表　************ */
/* HTML5 ではwidthが廃止   paddingでセルの高さ調整 */
    .reserve_table{ border-collapse:collapse ; text-align: center;     /*  隣接するボーダーラインを重ねあわせて  border-collapse:collapse */

    }

      /*  tr   td  th  それぞれスタイル設定しないとダメ  */
      .reserve_table  thead  tr  {
        padding: 0 0 ;                /*  セルの高さ調整  */
          background-color:  #EEFFCD ;
          text-align: center;
      }

      .reserve_table  thead  td  {
        padding: 0 0 ;                /*  セルの高さ調整  */
          background-color:  #EEFFCD ;
          text-align: center;
      }

      .reserve_table  thead  th  {
        padding: 0 0 ;                /*  セルの高さ調整  */
          background-color:  #EEFFCD ;
          text-align: center;
      }


      table.reserve_table  tfoot  tr {
          background-color: #EEFFCD;
      }
      table.reserve_table  tbody  tr {
          background-color: #FFE4E1;

      }



      /* @@@@@@@@@@@@@@@@  ここから下を使用している @@@@@@@@@@@@@@@@@@@@@@@@@@  */

        table.reserve_table tbody.tb-group1 td {
          padding: 0 0 ;                /*  セルの高さ調整  */
            background-color: #5fa05e;　　/* green  #7ad977   #EEFFCD*/
            text-align: center;
            color: white;               /*  文字色         */
        }


        table.reserve_table tbody.tb-group1 tr {
        /*  padding: 0 0 ;                /*  セルの高さ調整  */
            background-color: #5fa05e;
            text-align: center;
            color: white;               /*  文字色         */
        }

        table.reserve_table tbody.tb-group1 th {
            padding: 0 0 ;                /*  セルの高さ調整  */
            background-color: #5fa05e;
            text-align: center;
            font-weight: normal;
            color: white;               /*  文字色         */
        }



        table.reserve_table tbody.tb-group2 td {
        /*  padding: 0 0 ;                /*  セルの高さ調整 明細は使用しない　小さくなりボタン押せない */
            background-color:  white;
            text-align: center;
        }


        /*  空き状況テーブルの幅調整 押しずらいので調整
          ﾃｰﾌﾞﾙに2行追加する必要がある
          スマホがダメ　td に直接書く
        table-layout: fixed;        テーブル幅を固定させる
        word-wrap: break-word;      折り返して表示

        .view_am-pm {
        width: 50px !important;
        height: 30px  !important;
        }
        .yoyaku_sta {
        width: 30px !important;
        height: 30px !important;
        }
        */

        /*   backgroundカラーのみ有効
        table.reserve_table tbody.tb-group2 tr {
            background-color: red;
            text-align: center;
            /* background-color: #FFE4E1; *
        }
        */



              /****************************************************************************************/
              /**********  【reserve-timetable.html】 の表　                                   *********/
              /**********   HTML5 ではwidthが廃止   paddingでセルの高さ調整                     *********/
              /********** 予約時間テーブル全体を左側より60PXで配置                               *********/
                #top_reserve_timetable table{ margin-left: 60px; }


                .reserve_timetable{ border-collapse:collapse ; text-align: center; border: 1px solid green; }

                /*  tr   td  th  それぞれスタイル設定しないとダメ  */
                .reserve_timetable  thead  tr  {
                  padding: 0 0 ;                /*  セルの高さ調整  */
                    background-color:  #7ad977 ;
                    text-align: center;
                }

                .reserve_timetable  thead  td  {
                  padding: 0 0 ;                /*  セルの高さ調整  */
                    background-color:  #5fa05e ;
                    text-align: center;
                    color: white;               /*  文字色         */
                }

                .reserve_timetable  thead  th  {
                  padding: 0 0 ;                /*  セルの高さ調整  */
                    background-color:  #EEFFCD ;
                    text-align: center;
                }


                table.reserve_timetable  tfoot  tr {
                    background-color: #EEFFCD;
                }
                table.reserve_timetable  tbody  tr {
                /*    border-style: dotted solid;   /* 線種 上下線を破線にしたがきれいでない  中止 */
                  border-style: dashed　solid; /* 線種  「破線」(dashed)を引いた方が見やすい */
                 border-width: 1px; /* 線の太さ */
                 border-color: green; /* 線色 　green gray　　*/


                background-color: white;

                }



              /*****************************************************************************************/
              /***********        【reserve-timetable.html 固有スタイル】                  *************/
              /***********        【reserve-confirm.html   固有スタイル】                  *************/


              /* ***********  【引数の表示エリアー】　(確認画面) *********** */
              /*   配置方法   */
              .reserve-select-examin-view , .reserve-select-docter-view , .reserve-select-nenget-view, .reserve-select-time-view {
                  display: grid;         /* 横配置  */
                  grid-template-columns: 120px auto;
                  line-height: 1;
              }
              /*   配置方法   */
              .reserve-select-view {
                  display: flex;          /* 横配置  */
                  display: -webkit-box;
                  display: -ms-flexbox;
                  flex-wrap: wrap;
                  line-height: 1;         /* フォントサイズに応じて行高が決まる */
                  color: #023764 ;        /* 濃いblow #023764 */
              }


              /*   配置項目の幅比率 1対2   */
              .argument-view { font-weight: bold; }    /*  太字  */








/* ※※※  入力フォーム  ※※※ */

/* 　入力フォームのタイトル編集    ログイン　初めて受診される方   */
/*  スマホ対応のため   width: 90%;  box-sizing: border-box 使用　padding with 長さ固定にしない  */
.login-title-align{text-align: center; }
.visit-login-title { display: inline-block; font-size: 1.3em; align: center;  text-align: center;
  padding: 0.5em ; background: #ffd966; color: #0; line-height: 1em;
  width: 95%;  box-sizing: border-box; border: 1em;
}


/*  入力項目のプレースホルダーの色を変更 　IE11と古いEdgeにも対応する場合 */
/*　　特定のクラスを持つinput/textareaだけ * 例：<input type="text" class="ph-red"> */
::placeholder { color: #d9d9d9;　}
/* 旧Edge対応 */
::-ms-input-placeholder { color: #d9d9d9;　}
/* IE対応 */
:-ms-input-placeholder { color:  #d9d9d9;　}




/* フォーム */
form div {
    margin-bottom: 14px;
}
label {
    font-size: 1rem;
    margin-bottom: 3px; margin-left: 2rem;
  /*  display: block; */
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #ccc solid;       /*  太さ1px 色(#0a0) 実線(solid)  */
    border-radius: 5px;
    border-bottom: 10px; padding-left: 10px; padding-top: 3px; padding-bottom: 8px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 240px;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
		resize: none; /*--リサイズを無効--*/
}

input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;

    border: none;
    cursor: pointer;
    line-height: 1;
}
input[type="button"] {
    -webkit-appearance: none;
    border-radius: 0;
}






/*--focus--*/
textarea:focus {
/*  background-color: #febe3e;    /--背景色--*/
}






/* 　送信ボタン　次のページ　OKボタン等  */

/*    透明度 ( opacity: 0.9; )   影の設定 ( box-shadow : 2px 2px 3px #666666; )     外側の角を丸めま border-radius: 5%  */
.btn_confirm , .btn_nocheck , .btn_submit  { display: inline-block; border-radius: 5%; font-size: 10pt; text-align: center; width: 200px;
  border-color: #5588b3; border-style: solid;  border-width: 1px;
  cursor: pointer; padding: 8px 40px; background: #a4c1e5; color: #0; line-height: 1em; opacity: 0.9;  transition: .3s; box-shadow : 2px 2px 3px #666666; }
  .btn_confirm:hover , .no-check-button:hover , .btn_submit:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    opacity       : 1;           /* カーソル時透明度 */
    }

  /*    透明度 ( opacity: 0.9; )   影の設定 ( box-shadow : 2px 2px 3px #666666; )     外側の角を丸めま border-radius: 5%  */
  .btn_next , .btn_return { display: inline-block; border-radius: 5%; font-size: 10pt; text-align: center; width: 200px;
    border-color: #5588b3; border-style: solid;  border-width: 1px;
    cursor: pointer; padding: 8px 40px; background: #dae3f3; color: #0; line-height: 1em; opacity: 0.9;  transition: .3s; box-shadow : 2px 2px 3px #666666; }
    .next-button:hover , .btn_return:hover {
      box-shadow    : none;        /* カーソル時の影消去 */
      opacity       : 1;           /* カーソル時透明度 */
      }

/* 　送信ボタンを中央に配置  */
.input_wrap{ text-align: center;}



/* ※※※  サイドバーのタイトルに下線  ※※※ */
.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;
}







   /* ※※※  表のスタイル  ※※※ */
   /*
   #top_info_table table {background-color:#fffbe9; style="border-collapse:collapse; border-color:#b2b2b2; width: 120%; table-layout: fixed; }
   #top_info_table td {text-align:center; background-color:#ff6c94; width: 120%; }
  */





/* ※※※ スマホ　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;  }

    */

    .wrapper {max-width: 500px; margin: 0 auto; padding: 0 4%; box-sizing:border-box; }


    /* トップメニューのボタン 縦配置  */
    .top_menu-container{display:grid; flex-direction:column; justify-content: center; }


}

    /*  ※ tablet.css 600px=約24cm   959 px ※  */
@media (min-width:600px) and (max-width:759px) {





    /* 小幅が320px以下の場合に適用する  */
    /* トップメニューのボタン */
    /*  div#sidebar{with:160px;}  */


/*
    #toppage-info-Position{width: 260px; float: right; padding-bottom: 50px; }
#toppage-examination-Position{width: 260px; float: right; padding-bottom: 50px; }
*/
      /*  【注意】このサイズでは横並びは形が崩れてしまう
       * Flexboxで横並びにする *
      .top-reserve-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  横配置　*/
    .top_menu-container{display:grid; flex-direction:row; grid-template-columns: 200px 200px 200px 200px ; grid-column-gap: 14px; flex-wrap: wrap; justify-content: flex-start; align-content:flex-start; }
    /* トップメニューグループの配置　*/
    .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; }
*/






}




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

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






</style>