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


/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：診療予約システム
'ﾓｼﾞｭｰﾙ名称  ：ハンバーカーメニュー　共通スタイルシート
'ﾓｼﾞｭｰﾙ内容　：ハンバーカーメニュー用　トングル
'html名称    :Reserve.asp Reserve-cancel.asp
'
'
'
'***************************************************************************************************
'
'  ■ 　改修履歴　　■
' 2022/04/07  Navの高さ　height: 80px  -->  90px
'
'
'
'
'
'
'
'
'
*/



                  /****************************************************************
                  * ver1.0_ (2021.09.18)
                  * ｽﾀｲﾙｼｰﾄ名称　：style_login.css
                  * 機　能　　　 ：ハンバーガーメニューのスタイルシート
                  * 改修履歴　　 ：
                  ****************************************************************/
                  //
                  //

                      /*ロゴの大きさを調整  これが無いと形が崩れる */
                      #logo img {
                        max-width:100%;    /*   max-width:50%;   */
                      }

                      nav{
                       width: 100%;
                       height: 90px;
                       position: relative;
                       z-index:9998;          /* 最全面に表示  */
                  /*     background: #F6F6F6;        background: #F6F6F6; */
                      }

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

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

                      .menu ul li a {
                        display:block;
                        font-weight:bold;
                        padding: 1em;
                        border-bottom: 1px dotted #CCC;     /* 境界線　ドット  */
                        color:#023764;                      /* 文字色  color:#333  */
                        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 {
                        position: relative;         /*ボタン内側の基点となるためrelativeを指定*/
                    /*    background:#D54884;         /* メニューボタンの背景色　赤 #D54884 -->  無  */
                        cursor: pointer;
                        width: 50px;                /* 50px  */
                        height:50px;
                        border-radius: 5px;
                      }

                      /*ボタン内側*/
                      .Toggle span{
                          display: inline-block;
                          transition: all .4s;/*アニメーションの設定*/
                          position: absolute;
                          left: 14px;
                          height: 2px;
                          border-radius: 5px;
                          background: #3d77a8;         /* #fff   ---> 赤  #D54884   */
                          width: 45%;
                        }

                      /*各ボーダー少しずつずらす  Toggleの大きさ調整した場合間隔も調整する　　　*/
                      .Toggle span:nth-of-type(1) {
                        top:13px;
                      }

                      .Toggle span:nth-of-type(2) {
                        top:19px;
                      }

                      .Toggle span:nth-of-type(3) {
                        top:25px;
                      }

                      .Toggle span:nth-of-type(3)::after {
                        content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
                        position: absolute;
                        top:5px;
                        left:-2px;
                        color: #3d77a8;         /* #fff   ---> 赤  #D54884   */
                        font-size: 0.6rem;
                        text-transform: uppercase;
                      }

                      /*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

                      .Toggle.active span:nth-of-type(1) {
                          top: 14px;
                          left: 18px;
                          transform: translateY(6px) rotate(-45deg);
                          width: 30%;
                      }

                      .Toggle.active span:nth-of-type(2) {
                        opacity: 0;
                      }

                      .Toggle.active span:nth-of-type(3){
                          top: 26px;
                          left: 18px;
                          transform: translateY(-6px) rotate(45deg);
                          width: 30%;
                      }

                      .Toggle.active span:nth-of-type(3)::after {
                        content:"Close";/*3つ目の要素のafterにClose表示を指定*/
                          transform: translateY(0) rotate(-45deg);
                        top:5px;
                        left:4px;
                      }



                      /*  ------ここからPCモニターの記述-----------*/

/*
                      @media screen and (min-width: 600px) {
                            /*ロゴの大きさを調整    *
                            #logo img {
                              max-width:100%;    /*   max-width:50%;   *
                            }

                            nav{
                             display: flex;
                            }

/*                 *******  ハンバーカーメニューは表示したままの状態にする  ********
                            .menu{
                              display: none;
                             }
                            header::after{
                                    display:none;
                                    }
                            nav{
                                    display: flex;
                                    }

                              .Toggle{
                               display: none;
                              }
                              .menu{
                               width: 100%;
                                background-color: transparent;
                                margin-top:0;
                               -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%外へ押し出し非表示にさせる
                                                PhoneやiPadなどiOSで動作するWEB webkit系ブラウザ  *

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

                          }

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

                          }


                    }     /* @media screen


    */












</style>