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




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




/*  共通部分  */
html{ font-size: 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　*/
.font_size12 {font-size: 12px; }    /* Pタグのfont　*/

a {text-decoration: none; }     /* <a>タグのライン */
img { max-width: 100%; }
.logo{ 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%; }


/*  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: #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; }



/*  ※※※  設備のご案内　ヘッダー部  ※※※   */
#background_container {background-image: url(../content/facility-bg.png);
            height: 250px;
            margin-bottom: 10px;
            }
.facility-bg {
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            }


#facility-infomation { text-align:center; margin-top: 1%; }    /*  中央表示  */
.facility-page-title {margin: 0 0 ;
            padding-top: 140px;
            font-size: 24px;
            color: #fff; line-height: 1.0;
           }
#facility-infomation p { font-size: 0.8rem; margin: 10px 0 10px;
            color: #fff;
            }


/* ※※※   設備画像　  ※※※   */

.facility-item-img {
            max-width: 250px;
            max-height: 170px;

            background-color: #F5F6F8;
            background-size: contain;      /*  cover 画像の比率を保ったまま、表示領域を全部満たすようにして画像を表示 */
            background-position: center top;
            background-repeat: no-repeat;
            }

.facility-item-img img {
            max-width: auto;
            max-height: 170px;
            }



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

    #col1 { background-color:#92cb97 ; text-align: center; }
    #col2 { background-color:#92cb97 ; text-align: center; }
    #col3 { text-align: right; padding-right: 20%; }    /* 未対応? margin-right: 2px   padding       : 0px 2px ;  */
    #col4 { text-align: center; }





/****************************************************************************************/
/**********  【facility-gaidance.html】 のタブ                                   *********/
/**********                                                                     *********/
/**********   スマホ用スタイルシートでタブの大きさを調整する                        *********/



     /****************************************************************
     * ver1.0_ (2021.09.18)
     * ｽﾀｲﾙｼｰﾄ名称　：style_facility.css
     * 機　能　　　 ：タブメニューのスタイルシート
     * 改修履歴　　 ：
     ****************************************************************/
       /*tabの形状*/
       .tab{
         display: flex;
         flex-wrap: wrap;        /* 折り返し  */
         gap:0; /* 余白 */
         padding: 0 30px 0;              /* 親要素(ｸﾞﾘｯﾄﾞｺﾝﾃﾅ)と子要素(ｸﾞﾘｯﾄﾞｱｲﾃﾑ)隙間   */
       }


       .tab li a{
         display: block;
         background: #fff;       /* 187f52 ﾀﾞｰｸｸﾞﾘｰﾝ   #ddd     #5588b3 */
         margin:0 2px;           /* 上下　左右  */
         padding:0 20px 2px;     /* 階の横幅  */
         text-decoration: none;      /* テキストの装飾指定  下線等  */
         color: #000;
         border-right:  solid 1px #d9d9d9; /*右枠線*/

       }

       /*liにactiveクラスがついた時の形状*/
       .tab li.active a{
         color: #fff;
         background: #187f52;          /*  #fff  #5588b3ブルー系  */
         border-right:  solid 1px #d9d9d9; /*右枠線*/

       }


       /*エリアの表示非表示と形状*/
       .area {
         display: none;  /*はじめは非表示*/
         opacity: 0;   /*透過0    0.0～1.0 */
         background: #187f52;      /*  #fff  */
         padding:0 10px 10px;
       }
       /*エリアの設備画像場所 */
       .facility_infomation_area {
         opacity: 0;   /*透過0    0.0～1.0 */
         background: pink;      /*  #fff  */
         padding:0 10px 10px;
       }

       /* リアの ul マーカー種類  */
       #tab_container ul{
         list-style: none;            /* マーカーなし  */
        }

       /*areaにis-activeというクラスがついた時の形状*/
       .area.is-active {
           display: block;/*表示*/
           animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
           animation-duration: 2s;
           animation-fill-mode: forwards;
       }

       @keyframes displayAnime{
         from {
           opacity: 0;
         }
         to {
           opacity: 1;
         }
       }



       /*========= レイアウトのためのCSS ===============*/
/*
       body{
         background:#eee;
       }
*/

       /*  タブ全体の背景   */
       .tab_wrapper{
         width:100%;
         max-width: 1200px;
         margin:5px auto;
         background: #fff;         /* #fefefe   #fff */
       }

       .area h2{
         color: #fff;
         font-size:1rem;
         margin:0 0 10px 10px;     /* 上　右　下　左 */
         padding: 0;
       }

       .area ul{
         margin-top: -18px;       /* tabと明細の間を無くす */
       }

       .area li{
         color: #fff;
         padding: 3px 0 0;             /* 上の余白  */
         font-size: 0.8rem;
 /*        border-bottom: 1px solid #ddd;   下線無しにする　　*/
       }







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

          /* 画像及び説明文のコンテナー 縦配置  */
          .facility-container{
              display:grid;  grid-template-columns: 250px;
              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: #5588b3; color:#fff;margin: 1px; width: 220px; }
          .m-button:hover {
               box-shadow    : none;        /* カーソル時の影消去 */
               opacity       : 0.8;         /* カーソル時透明度 */
             }


           .wrapper3 {max-width:  1000px; margin: 0 auto; padding: 0 4%; }



           /*   タブ幅を狭くする      */

           /*tabの形状*/
           .tab{
             display: flex;
             flex-wrap: wrap;        /* 折り返し  */
             gap:0; /* 余白 */
             padding: 0 10px 0;      /* 調整  親要素(ｸﾞﾘｯﾄﾞｺﾝﾃﾅ)と子要素(ｸﾞﾘｯﾄﾞｱｲﾃﾑ)隙間   */
           }


           .tab li a{
             display: block;
             background: #fff;       /* 187f52 ﾀﾞｰｸｸﾞﾘｰﾝ   #ddd     #5588b3 */
             margin:0 2px;           /* 上下　左右  */
             padding:0 10px 2px;     /* 調整 tab1つ階の横幅  */
             text-decoration: none;      /* テキストの装飾指定  下線等  */
             color: #000;
             border-right:  solid 1px #d9d9d9; /*右枠線*/
           }


      }



          /*  ※ tablet.css 600px=約24cm   959 px ※  */
      @media (min-width:600px) and (max-width:759px) {
          /* 小幅が600以上　759px以下の場合に適用する  */

          /* 画像及び説明文のコンテナー レイアウト  CSS3  横配置　*/
          .facility-container{
            display:grid;  grid-template-columns: 250px 250px ;
            grid-column-gap: 14px;  justify-content: center;
             }

          .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; }
      */
            /*  【注意】このサイズでは横並びは形が崩れてしまう
             * 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) {
          /* 小幅が760px以上の場合に適用する */

          /* トップメニューのボタン のレイアウト FlexBox CSS3  横配置　*/
          .facility-container{
            display:grid;  grid-template-columns: 250px 250px 250px 250px ;
            grid-column-gap: 14px;  justify-content: center;
             }


          .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>