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


/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：診療予約システム
'ﾓｼﾞｭｰﾙ名称  ：ハンバーカーメニュー　共通スタイルシート
'ﾓｼﾞｭｰﾙ内容　：ハンバーカーメニュー用　トングル
'html名称    :email-config.html reserve.html reserve-cancel,html
'
'
'
'***************************************************************************************************
'
'  ■ 　改修履歴　　■
'
'
'
'
'
'
'
'
'
'
*/




                  /****************************************************************
                  * 機　能： ハンバーガーメニューのスタイルシート
                  * 引　数：
                  * 戻り値：
                  ****************************************************************/
                  // html表示後にＵＲＬのパラメータを取得する
                  // パラメータの内容に従って処理する

                      /*ロゴの大きさを調整*/
                      #logo img {
                        max-width:100%;    /*   max-width:50%;   */
                      }

                      nav{
                       width: 100%;
                       height: 70px;
                       position: relative;
                  /*     background: #F6F6F6;        background: #F6F6F6; */
                      }

                      .drawer{
                       display: flex;
                       flex-direction: row;
                       align-items: center;
                       justify-content: space-between;
                      position: relative;
                       height: 70px;
                       padding: 0 1em;
                      }

                      /*ナビゲーション部分*/

                      .menu ul {
                        list-style: none;               /* リストマーカーを消す  */
                        padding: 0;                     /* 左余白(マーカー分)を調整  */
                        background: #fff2cc;            /* ここで背景色 リスト全体の背景色 2021/10/06  white; ｱｲﾎﾞﾘｰ系  #fff2cc; ｸﾞﾘｰ#f2f2f2;  */
                      }

                      .menu ul li a {
                        display:block;
                        font-weight:bold;
                        padding: 1em;
                        border-bottom: 1px dotted #CCC;     /* 境界線　ドット  */
                        color:#023764;                      /* 文字色   */
                        text-decoration:none;               /* テキストの装飾　*/
                      }

                      .menu ul li a:hover
                        {background-color:rgba(121,121,121,1);   /*  透過なし 1 {background-color:rgba(0,0,0,0.5); rgba(51,51,51,1) */
                        color:orange;}


                      .menu{
                        margin: 0 0 0 auto;  /* 2021/10/06 メニュー幅を小さく設定した場合　隠したメニューが表示されてしまうため要素全体を右寄せ */
                        max-width:500px;     /* メニュー幅調整  */
                        text-align:center;
                        background-color:rgba(255,255,255,1);    /*  透過なし 1 背景　白 background-color:rgba(255,255,255,0.5);  (255,255,255,1); */
                        transition: 0.5s ease;/*滑らかに表示*/
                    /*  PCの場合隠れている右メニューが見えるため  */
                        -webkit-transform: translateX(150%);    /*画面より100%外へ押し出し非表示にさせる*/  /* iPhoneやiPadなどiOSで動作するWEB webkit系ブラウザ  */

                    /*  transform: translateX(-100%);  */    /*  右から出す場合は、マイナス100%としてください  */

                      }

                      /*OPEN時の動き*/
                      .menu.open {
                         -webkit-transform: translateX(0%);
                         transform: translateX(0%);/*メニューを元の位置へ戻す*/

                      }



                      /*トグルボタンのスタイルを指定*/
                      .Toggle {
                          display: block;
                          position: fixed;    /* bodyに対しての絶対位置指定 */
                          width: 42px;
                          height: 42px;
                          cursor: pointer;   /* カーソル形状  */
                          z-index: 3;
                          right:15px;
                        }

                      .Toggle span {
                          display: block;
                          position: absolute;
                          width: 30px;                          /* Toggleの大きさ調整 */
                          border-bottom: solid 4px #3d77a8;       /* バーの色　border-bottom: solid 4px #333; border-bottom: solid 4px red;*/
                          -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
                          -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
                          transition: .35s ease-in-out;			/*変化の速度を指定*/

                      }
                       /*各ボーダー少しずつずらす  Toggleの大きさ調整した場合間隔も調整する　　　*/
                      .Toggle span:nth-child(1) {
                          top:5px;
                        }
                       .Toggle span:nth-child(2) {
                          top: 15px;
                      }
                       .Toggle span:nth-child(3) {
                          top: 25px;
                        }
                      .Toggle.active span:nth-child(1) {
                          top: 18px;
                      /* 1番目のspanをマイナス45度に */
                          -webkit-transform: rotate(-45deg);
                          -moz-transform: rotate(-45deg);
                          transform: rotate(-45deg);
                      }

                      /* 2番目と3番目のspanを45度に */
                      .Toggle.active span:nth-child(2),
                      .Toggle.active span:nth-child(3) {
                          top: 18px;
                          -webkit-transform: rotate(45deg);
                          -moz-transform: rotate(45deg);
                          transform: rotate(45deg);
                      }

                      /*  ------ここからPCモニターの記述-----------*/
                      @media screen and (min-width: 600px) {
                            /*ロゴの大きさを調整*/
                            #logo img {
                              max-width:100%;    /*   max-width:50%;   */
                            }

                            nav{
                             display: flex;
                            }

/*
                      .menu{
                        display: none;
                       }
                /*    ハンバーカーメニューは表示したままにする
                      .Toggle{
                       display: none;
                      }
                      .menu{
                      width: 100%;
                      font-size:0.9em;
                      background-color: transparent;
                      margin:0 10px;
                      -webkit-transform: translateX(0);
                      transform: translateX(0);
                      }
                      .menu ul{
                       height: 70px;
                       display: flex;
                       flex-wrap: wrap;
                       justify-content: flex-end;
                       align-items: center;
                      }
                      .menu ul li a{
                       padding: 0 1em;
                       border-bottom: none;
                      }
                      .menu ul li a:hover{
                      background-color:transparent;
                      }
                      }

            */

                          /*  画面サイズ別にmenuを必ず最調整する  */
                          .menu{
                               width: 100%;         /* 重要　これがないとPC画面でメニューが表示されている状態になる ?? */
                               margin: 0 0 0 auto;  /* メニュー幅を小さく設定した場合　隠したメニューが表示されてしまうため要素全体を右寄せ */
                               max-width:500px;     /* メニュー幅調整 600px; */

                              text-align:center;
                              background-color:rgba(255,255,255,1); */
                              transition: 0.5s ease;/*滑らかに表示*/
                              -webkit-transform: translateX(120%);/*画面より100%外へ押し出し非表示にさせる*/  /* iPhoneやiPadなどiOSで動作するWEB webkit系ブラウザ  */

                            /*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/

                          }

                          /*OPEN時の動き*/
                          .menu.open {
                               -webkit-transform: translateX(0%);
                               transform: translateX(0%);/*メニューを元の位置へ戻す*/

                          }


                    }     /* @media screen   */















</style>