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




/***************************************************************************************************
'_ver1.0_ (2021.09.18)
' @(S)
'ﾌﾟﾛｼﾞｪｸﾄ名称：診療予約システム
'ﾓｼﾞｭｰﾙ名称  ：講習会   スタイルシート
'ﾓｼﾞｭｰﾙ内容　：講習会ご案内　共通ﾓｼﾞｭｰﾙ
'html名称    :short-course.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_size16 {font-size: 14px; }    /* Pタグのfont　*/
.font_size13 {font-size: 13px; }    /* 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%; }
/*  wrapper3 500px -->  400px */
.wrapper3 {max-width:  800px; margin: 0 auto; padding: 0 4%; }
/*  wrapper3 500px -->  400px */
.wrapper4 {max-width:  550px; margin: 0 auto; padding: 0 4%; }
/*  wrapper3 500px -->  400px */
.wrapper5 {max-width:  450px; 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: #5588b3; color:#fff;margin: 1px; width: 98%; }


/*  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; }
/*  pタグ　文章を中央揃え */
p.text-center {text-align: center; }
/*  listの内部番号エリアの非表示  */
.display-none { display: none; }




/* 入力フォーム */
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;
}

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: 6px 40px; background: #a4c1e5; color: #0; line-height: 1em; opacity: 0.9;  transition: .3s; box-shadow : 2px 2px 3px #666666; }
    .btn_confirm:hover , .btn_submit:hover .btn_nocheck: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: 6px 40px; background: #dae3f3; color: #0; line-height: 1em; opacity: 0.9;  transition: .3s; box-shadow : 2px 2px 3px #666666; }
    .btn_next:hover , .btn_return:hover {
      box-shadow    : none;        /* カーソル時の影消去 */
      opacity       : 1;           /* カーソル時透明度 */
      }

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





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

/*  ※※※  ヘッダー部  画像内のテキストスタイル　※※※   */
#course-infomation { text-align:center; margin-top: 1%; }    /*  中央表示  */
.course-page-title {margin: 0 0 ;
            padding-top: 140px;
            font-size: 24px;
            color: #fff; line-height: 1.0;
           }
#course-infomation p { font-size: 0.8rem; margin: 10px 0 10px;
            color: #fff;
            }


/* ※※※   講習会画像　  ※※※   */




	.course-item-img-container {
							display: flex;
							gap: 20px 10px;   /* 空白区切りでrow-gap 、column-gapの順 */
						  justify-content: center;
						  width: 98%;
						  margin: 0 auto;
						}



												.course-item-img img {
													margin: 0;
												            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 {margin:  0; }   /*　前後の調整　　 */

.topics-list1 li{padding-bottom: 10px; }   /*　改行幅の調整　OK　 */

.topics-list2 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;
}






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



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

      .reserve_course_table {
        border-collapse: collapse ;      /*  隣接するボーダーラインを重ねあわせて  border-collapse:collapse    離して表示  separate（初期値）*/
        text-align: center;
        padding:  0;
        border: 1px darkgray solid;      /* #a9a9a9   */

      }

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

      .reserve_course_table  thead  td  {
          padding: 0 0 ;                /*  セルの高さ調整  */
          background-color:  #5fa05e ;
          text-align: center;
          color: #fff;
          font-weight: normal;
      }

      .reserve_course_table  thead  th  {
          padding: 0 0 ;                /*  セルの高さ調整  */
          background-color:  #5fa05e ;
          text-align: center;
          color: #fff;
          font-weight: normal;          /*  規定値  文字=太字  */
      }


      table.reserve_course_table  tfoot  tr {
          background-color: #5fa05e;
      }
      table.reserve_course_table  tbody  tr {
          background-color: #5fa05e;

      }



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

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


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

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

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


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

       /* セルの上下部と右左側の非表示 */
       .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;
       }

       /* セルの上部の表示 */
       .td-cellborder-top {
           /*  テスト用  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-bottom {
           /*  テスト用  border: 3px solid red;   */
           border-top-style:none;
           border-left-style:none;
           border-right-style: none;
        /*   border-bottom-style: none;    / border-top:none;では消えない? */
       }








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

        .view_teiin {
        width: 50px !important;
        height: 35px  !important;
        }
        width: 35px !important;
        height: 35px !important;
        }
        */

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




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



     /****************************************************************
     * ver1.0_ (2022.02.03)
     * ｽﾀｲﾙｼｰﾄ名称　：style_course.css
     * 機　能　　　 ：タブメニューのスタイルシート
     * 改修履歴　　 ：
     ****************************************************************/
       /*tabの形状*/
       .tab{
         display: flex;
         flex-direction: column;  /* 縦並び   */
         padding: 0;              /* 調整  親要素(ｸﾞﾘｯﾄﾞｺﾝﾃﾅ)と子要素(ｸﾞﾘｯﾄﾞｱｲﾃﾑ)隙間   */
       }

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

       }

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

       }


       /*エリアの表示非表示と形状*/
       .area {
         display: none;  /*はじめは非表示*/
         opacity: 0;   /*透過0    0.0～1.0 */
         background: #187f52;      /*  #fff  */
         padding:0 10px 10px;
       }
       /*エリアの講習会画像場所 ??????   */
       .course_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 ===============*/

       /*  タブ全体の背景   */
       .tab_wrapper{
         width:100%;
         max-width: 400px;
         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: 0;       /* tabと明細の間を無くす  margin-top: -18px; */
       }

       .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以下の場合に適用する */

        /* 画像及び説明文のコンテナー 縦配置  */
        .course-container{
            display:grid;  grid-template-columns: 350px;
            justify-content: center;
         }


      }

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

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

      }


          /*  ※ desktop.css ※  */
      @media (min-width:760px) {
        /* 小幅が760px以上の場合に適用する */

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


      }




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

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










</style>