@charset "UTF-8";
<style type="text/css">



/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：診療予約システム
'ﾓｼﾞｭｰﾙ名称  ：診療予約受付    スタイルシート
'ﾓｼﾞｭｰﾙ内容　：診療予約受付共通ﾓｼﾞｭｰﾙ
'html名称    :reception.html       受付
'            :
'
'
'***************************************************************************************************
'
'  ■ 　改修履歴　　■
' 2022/03/12 iphone対応  font-family追加
' 2022/03/13 iphone対応  -webkit-text-size-adjust
'            input submit button   -webkit-appearance  ボタン形状の統一
' 2022/03/15 画面　左右分割を廃止
'
'
'
'
'
'
'
'
'
'
*/





/*  共通部分  */
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　*/
.font_size16 {font-size: 16px; }

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

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


/* 表示領域の設定  */
.wrapper  {max-width:  1200px; margin: 0 auto; padding: 0 4%;  box-sizing:border-box; }
.wrapper2 {max-width:  800px; margin: 0 auto; padding: 0; }
.wrapper3 {max-width:  600px; margin: 0 auto; padding: 0; }


/*  処理内容のタイトル表示領域　予約・取消・混雑状況　　　 角丸    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: #5588b3; color:#fff;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; }
/*  listの内部番号エリアの非表示  */
.display-none { display: none; }

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

/* 　入力フォームのタイトル編集    受付　初めて受診される方   */
/*  スマホ対応のため   width: 90%;  box-sizing: border-box 使用　padding with 長さ固定にしない  */
.reception-title-align{text-align: center; }
.visit-reception-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;
    line-height: 20px;
    margin-left: 2rem;
    display: block;
}
input[type="text"],
input[type="email"],
    textarea {
    background: rgba(242,242,242, 1);     /* #f2f2f2  */
    border: 1px #ccc solid;       /*  太さ1px 色(#0a0) 実線(solid)  */
    border-radius: 5px;
    border-bottom: 15px; padding-left: 10px; padding-top: 3px; padding-bottom: 2px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 200px;
    font-size: 0.8em;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
    font-size: 0.8em;
  }

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;
}




    /* 　送信ボタン　次のページ　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 20px; background: #a4c1e5; color: #0; line-height: 1em; opacity: 0.9;  transition: .3s; box-shadow : 2px 2px 3px #666666;
      }
    .btn_confirm:hover , .btn_nocheck:hover , .btn_submit:hover {
        box-shadow    : none;        /* カーソル時の影消去 */
        opacity       : 1;           /* カーソル時透明度 */
        border-color:  blue;
      }

    /*    透明度 ( 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;
}





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


      /* ********   予約状況テーブル   ******** */
      /* HTML5 ではwidth 属性 が<col>，<colgroup>，<hr>，<pre>，<table>，<td>，<th>などの要素が廃止 */

       /* 隣接する線を重ねて表示  ダメ  下はOK     *
       .reserve_infomationtable {
            border-collapse: collapse;
            border:3px solid red;
       }
      */

       /* 隣接する線を重ねて表示 */
       #top_reserve_table table {
       /*  わかりやすい様に重ねない  separate  重ねる border-collapse: collapse;  #b2b2b2; */
          border-collapse: collapse;
          border:1px solid #b2b2b2;
       }


      /* ********  表のヘッダー部の定義  *********** */
       /*  tr   td  th  それぞれスタイル設定しないとダメ  */
       .reserve_infomationtable  thead  tr  {
         padding: 0 0 ;                /*  セルの高さ調整  */
           background-color:   #7ad977 ;
           text-align: center;
           color: white;               /*  文字色         */
       }

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

       .reserve_infomationtable  thead  th  {
         padding: 0 0 ;                /*  セルの高さ調整  */
           background-color:   #7ad977 ;
           text-align: center;
           color: white;               /*  文字色         */
       }



       /* ********  表のアイテム部の定義  セルの設定  *********** */

       /* セルの上下部と右左側の非表示 */
       .td-cellborder-none {
           /*  テスト用  border: 3px solid red;   */
           border-top-style:none;        /* border-top:none;では消えない? */
           border-left-style:none;
           border-right-style: none;
           border-bottom-style: none;

       }

       /* セルの左側の表示 */
       .td-cellborder-right {
           /*  テスト用  border: 3px solid red;   */
           border-top-style:none;        /* border-top:none;では消えない? */
           border-left-style:none;
        /*  border-right-style: none;  */
           border-bottom-style: none;

       }



/* ※※※ スマホ　PC共通スタイルシート   ※※※ */
    /* Position-group3を中央配置 */
      .reception-memu-Position-group3{

          width: 80%;
          margin: 0 auto;
          max-width: 500px;
        }



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

    */

    /* トップメニューのボタン 縦配置  */
    .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;}  */

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


}





    /*  ※ desktop.css ※  */
@media (min-width:760px) {
    /* 小幅が960px以上の場合に適用する */
    /* トップメニューのボタン */
    /* div#sidebar{with:25%;} */

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



    }



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

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










</style>