@charset "utf-8";
*{
    margin:0%;
    padding:0%;
}
html {
    height: 100%;
    text-size-adjust: none;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
body {
    font-family:sans-serif;
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

p {
    padding-bottom: 0.25rem;
}
/*　▼1001px以上の広幅のための設定▼
=========================================================== */
@media(min-width: 1001px){

/*==背景の設定(abobe 1001px)== */
.ly_cont{
    min-height: 100%;
    max-width: 100%;    
    background-color: #cc9;  /* 背景色設定 */
    background-image: url(../img/bg1.gif); /* 背景色の前に置くサイドに影付きの白いシートのイメージ */
    background-repeat: repeat-y;  /* ↑のイメージを縦に繰り返す */
    background-position-x: center;
}
/* コンテンツエリア(above 1001px)
=========================================================== */
.bl_media{
    display: block;
    max-width: 700px;
    margin: 0 auto;
    behavior: url(PIE.htc);
    }
.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.content {
  font-size: 16px;
  padding-top: 0.5rem;
  padding-left:  1rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  display: block;
  margin-top: 0.5rem;
  -webkit-text-size-adjust: 100%;
}
    }
/**** ▲1001px以上の広幅のための設定▲ ****/

/****　▼751px～1000pxの中くらいの幅のための設定▼ *****/
@media(min-width: 751px) and (max-width: 1000px){
/* 背景レイアウト(751px～1000px)
=========================================================== */
.ly_cont{
    position: relative;
    min-height: 100%;
    max-width: 100%;
    /* 背景色・影・白色背景・影・背景色を割合で設定 */
    background: linear-gradient(90deg, #CCCC99 0%, #CCCC99 14%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.3) 15%, #FFF 15%, #FFF 85%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.3) 86%, #CCCC99 85%, #CCCC99 100%);}
/* コンテンツエリア(751px～1000px)
=========================================================== */
.bl_media{
      display:  block;
      margin: 0 auto; 
      max-width: 70%;
          behavior: url(PIE.htc);
         }
.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.content {
  font-size: 16px;
  padding-top: 0.5rem;
  padding-left:  1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  margin-top: 0.5rem;
  -webkit-text-size-adjust: 100%;
}
        }
/****　▲751px～1000pxの中くらいの幅のための設定▲ *****/
/****　▼750px以下の幅の狭い端末用の設定▼ ****/
@media(max-width: 750px){
/* 背景レイアウト(under751px)
    =========================================================== */
    .ly_cont{
    position: relative;
    min-height: 100%;
    max-width: 100%;    
    -webkit-text-size-adjust: 100%;
    /* 背景色・影・白色背景・影・背景色を割合で設定 */
    background: linear-gradient(90deg, #CCCC99 0%, #CCCC99 4.3%, rgba(0, 0, 0, 0.3) 4.3%, rgba(0, 0, 0, 0.6) 5%, #FFF 5%, #FFF 95%, rgba(0, 0, 0, 0.6) 95%, rgba(0, 0, 0, 0.3) 95.7%, #CCCC99 95.7%, #CCCC99 100%);
    }
/* コンテンツエリア(under751px)
=========================================================== */
.bl_media {
    margin-left:  auto; /* 外側左右余白を調整して画面中央に */
    margin-right: auto;
    max-width: 90%;
    behavior: url(PIE.htc);    
    -webkit-text-size-adjust: 100%;
          }

.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
/****　▲750px以下の幅の狭い端末用の設定▲ ****/

/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    line-height: 1.75;
    padding-left: 1rem;
    padding-right: 1rem;
}
.content {
  font-size: 16px;
  padding-top: 0.5rem;
  padding-left:  1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  margin-top: 0.5rem;
  margin-left: 0%;
  -webkit-text-size-adjust: 100%;
}
}
/* ヘッダー（ロゴ・タブ関連）
=========================================================== */
.header {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
}
.header_logo {
    display: block;
    text-align: right;
    padding-bottom: 15px;
    margin-bottom: 0px;
    border-bottom: solid 5px #663300;
}
.header_tab-navi__innner {
    display: table;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url(../img/bg2.gif);
    }
.header-nav__item {
        flex-grow: 1;
        text-align: center;
      }


.header_tab-navi
    ul{
        display: table;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
            }
.header_tab-navi
    li {
        display: table-cell;
        flex: 1;
        list-style-type: none;
        text-align: center;
        padding:0;
      }

    .header_tab-navi__link{
        display: block;
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        color: #630;
        text-decoration: none;
    }
.header_tab-navi
    li + li{
        border-left: solid 1px #CCCC99;
    }

    .header_tab-navi__link:focus,
    .header_tab-navi__link:hover{
        display: flex;
        justify-content: center;
        background-image: url(../img/bg3.gif);
        color: #fff;
        }
    .header_tab-navi__link--active{
        display: block;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        color: gray;
        justify-content: center;
        opacity: 0.8;
        }
    /* メディアクエリ適用時　*/
    @media screen and (max-width:768px){
        .tab-navigation{
            overflow-x: auto;
        }
        .tab-navigation__innner {
            flex-wrap: nowrap;
            justify-content: flex-start;
            margin-bottom: 0%;
            white-space: nowrap;
        }
}

/* フッター（リンク・コピーライト関連）
=========================================================== */
.footer {
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    align-items: center;
    border-top: solid 5px #663300;
    }
.footer__innner {
    text-align: center;
    font-size: 0.9em;
}
.header_tab-navi__innner {
    display: table;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url(../img/bg2.gif);
    }
.footer-copylight{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 250px;
    margin-bottom: 15px;
}
/* 見出しの設定
=========================================================== */
.main_title{
    padding-top: 1rem;
    margin-bottom: 10px;
    font-size: 22px;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
    letter-spacing: 0.3em;
}
.sub-title{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 20px;
    font-weight: bold;
}
.koumoku{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 18px;
    font-weight: bold;
}
/* 文字の装飾
=========================================================== */
.text-red{
    color: red;
}

.namisen {
    text-decoration:underline;
    text-decoration-style:wavy;
    }
    .under_line {
        text-decoration:underline;
        }
.under_line_red {
        text-decoration:underline;
        text-decoration-color:#FF0000;
        }
.under_line_double {
    text-decoration:underline;
    text-decoration-style:double;
    }
.center {    
  margin-left: auto;
  margin-right: auto;
}
.left {
    text-align: left; /* 文章を左寄せする(※) */
}
.right {
    text-align: right;
}
.futoji {
    font-family: bold;
}

.text-left {
   text-align: left;  /* 文章を左寄せする(※) */
   float: left;     /* 左端に寄せて、後続を右側へ回り込ませる */
}
.text-center {
   text-align: center;  /* 文字を中央に配置 */
}
.text-right {
   text-align: right; /* 文章を右寄せする */
}
/* ページに使うパーツ
=========================================================== */
/* 区切り線 */
hr {
    height: 1px;
    background-color: gray;
    width: 100%;
    border: none;
   }

.line{
border-top: 0.4rem solid maroon;
width: 100%;
font-size: 0%;
}

/* 表・テーブル関連
=========================================================== */
/* セル幅を自動調整 */
table, th {
  -webkit-text-size-adjust: 100%;
}
/* グレーの枠線ありのテーブル　   */
.v-table {
    border-bottom: 2px solid #ddd;
    border-right: 2px solid #ddd;
    width: auto !important;
    flex-flow: column nowrap;    
    box-sizing: border-box;
}
.v-table th {
    padding: 0px 10px;  
    border-left: 2px solid #ddd;
    border-top: 2px solid #ddd;
    display: table-cell;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}
.v-table thead th date{
    width: 20%;}
.v-table td{
    padding: 0px 10px;
    border-left: 2px solid #ddd;
    border-top: 2px solid #ddd;
    display: table-cell;
    border-collapse: collapse;
}

/* 枠線なしのテーブル　   */
.clear-table {
    border: 0;/* 枠線なし */
    width: auto !important;
    flex-flow: column nowrap;
    width:auto !important;
    box-sizing: border-box;
    }
/* tr 行の設定 */    
.clear-table tr{
    vertical-align: text-top;/* 縦の結合した時、テキストは一番上に来る */
    text-align: left;
}
/* th 見出しの設定 */
.clear-table th {
    padding:0% 3px;/* 外側余白。左右はゼロ、上下のみ設定 */
    font-weight: bold;/* 太字 */
    vertical-align: top;/* 複数行あったときは一番上に */
    white-space: nowrap;/* 自動改行しない */
}
/* td 各セルの設定 */
.clear-table td {
    padding-left: 0.5rem;/* 外側余白。左のみ0.5文字分 */
    vertical-align: middle;/* 複数行あったときは一番上に */
    flex-wrap: wrap;
    word-wrap: break-word;
    border-collapse: collapse;
}

/* ボタン
=========================================================== */
/* ボタン(大）width 245px　ボタン内の色は別途classで指定。*/
.btn_l{
	align-items: center;
	position: relative;
    width: 245px;  /* ボタンの幅 */
    padding: 0.75rem 0.25rem;  /* ボタン内文字の余白 */
    margin: 1rem;	 /* ボタン上側の余白 */
    margin-bottom: 0.5rem;	 /* ボタン下側の余白 */
    font-size: 2rem !important;/* フォントサイズ */
    font-weight: 900;/* フォントの太さ */
    letter-spacing: -1.5px;
    text-align: center;/* 文字の中央配置 */
	text-decoration: none; /* 文字装飾をしない */
	transition: 0.3s;/* 表示切替速度 */
    border-radius: 20px; /* ボタンの角丸 */
    box-shadow: 2px 2px 4px ; /* ボタンの影 */
    display: grid;
}
.btn_l a{     
	align-items: center;
	margin-bottom: 0.5rem;
    color: rgba(0, 0, 0, 1);
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 2rem !important;/* フォントサイズ */
    font-weight: 900;/* フォントの太さ */
    letter-spacing: -1.5px;
    text-align: center;/* 文字の中央配置 */
	text-decoration: none; /* 文字装飾をしない */
}

/* ボタン(中）width 180px　ボタン内の色は別途classで指定。
=========================================================== */
.btn_m{
	display: block;
	justify-content: center;
	align-items: center;
	position: relative;
    width: 180px;
    padding: 0.5rem 0.25rem;    
    margin: auto;
    font-size: 1.2rem !important;
    font-weight: 450;
    letter-spacing: -1.5px;
    text-align: center;
	text-decoration: none;
}
.btn_m a{
    color: rgba(0, 0, 0, 1);
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 1.2rem !important;
    font-weight: 900;
    letter-spacing: -1.5px;
    text-align: center;
	text-decoration: none;
}

/* ボタン色指定
=========================================================== */
.btn_blue{
	background-color: rgb(0, 180, 255);
    border: 2px solid transparent;
    margin:0.25rem ;
}
.btn_blue:focus,
.btn_blue:hover {
    background-color: #09c;
}

.btn_green {
	background-color: #9acd32;
    border: 2px solid transparent;    
	transition: 0.3s;
    border-radius: 10px;
    box-shadow: 2px 2px 4px ;
    margin:0.25rem ;
}
.btn_green:focus,
.btn_green:hover {
    background-color: #4d804d;
}

.btn_mizuiro {
	background-color: #89bac8;
    border: 2px solid transparent;    
	transition: 0.3s;
    border-radius: 10px;
    box-shadow: 2px 2px 4px ;
    margin:0.25rem ;
}
.btn_mizuiro:focus,
.btn_mizuiro:hover {
    background-color: #40555b44;
}

.btn_orange{
	background-color: orange;
    }
.btn_orange:focus,
.btn_orange:hover {
    background-color: #cd853f;
}


/* ボタン
=========================================================== */

.form_btn_concert {
    display: block;
    width: 235px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: #ef7692;
    border: 2px solid #FF0000 transparent;
    border-radius: 15px;
    box-shadow: 2px 2px 4px #FF0000 ;
    margin-top: 0.25rem;
    margin-left: 1rem;
    margin-bottom: 0.75rem;
    color: rgba(0, 0, 0, 1);
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 2rem;
}
.form_btn_concert:focus,
.form_btn_concert:hover {
    background-color: rgb(255, 205, 205);
    color: rgba(0, 0, 0, 0.3)
}
.form_btn_program {
    display: block;
    width: 180px;
    max-width: 100%;
    padding: 2.5rem 0rem;
    background-color: #d776efa1;
    border: 2px solid #7d6783a1 transparent;
    border-radius: 15px;
    box-shadow: 2px 2px 4px #7d6783a1 ;
    margin-top: 0.5rem;
    margin-left: 1rem;
    margin-bottom: 0;
    color: rgba(0, 0, 0, 1);
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 2rem;
}
.form_btn_program:focus,
.form_btn_program:hover {
    background-color: rgb(122, 107, 122);
    color: rgba(0, 0, 0, 0.3)
}
/* ボックス
=========================================================== */
/* ボックス（背景ピンク/コンサート用） */
.ly_concert {
    background: pink;
    border: 1px solid pink;
    padding: 0.5rem;
    border-radius: 15px;
    margin: 1rem;
    display: table;
}
/* ボックス（背景グリーン/交詢講座用） */
.ly_kouza {
    background: rgb(108, 245, 74);
    border: 1px solid rgb(108, 245, 74);
    padding: 0.5rem;
    border-radius: 15px;
    margin: 1rem;
    display: table;
}
.ly_kouza a{
	background-color: rgb(0, 180, 255);
    border: 2px solid transparent;
}
/*ボックス（枠線・背景なし）　*/
.box_no-line {
  padding-top: 0.5rem;
  padding-left:  0.5rem;
  padding-bottom: 0.5rem;
  display: inline-flex;
  margin: 0.5rem;
}
/*ボックス（二重枠線・背景なし）　*/
.box_line {
  padding-top: 0.5rem;
  padding-left:  0.5rem;
  padding-bottom: 0.1rem;
  display: table;
  margin: 0.5rem auto;
  border: gray double;
  width: auto;
}
/* ページの右側に位置するボックス　*/
.box_right_float {
    padding: 0.5rem;
    border: 2px solid #663300;
    width: auto;
    float: right;
    margin: 0 0 0.5rem 0.5rem;
    display: table;
    background-color: #FFF;
}

/* webinar資料バナー（アクアマリン・大） */
.form_btn_screen{
    display: block;
    width: 150px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: #66CDAA;
    border: 2px solid transparent;
    border-radius: 15px;
    box-shadow: 2px 2px 4px ;
    margin-top: 0.25em;
    margin-left: 1rem;
    color: #000;
    font-size: 1.75rem;
    font-weight: bold;
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 1.75rem;
	text-align: center;
    text-decoration: none;
}

.form_btn_screen:focus,
.form_btn_screen:hover {
    background-color: #8FBC8F;
}

/* webinar資料2バナー（ドジャーブルー・大） */
.form_btn_screen2{
    display: block;
    width: 150px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: #1E90FF;
    border: 2px solid transparent;
    border-radius: 15px;
    box-shadow: 2px 2px 4px ;
    margin-top: 0.25em;
    margin-left: 1rem;
    color: #000;
    font-size: 1.75rem;
    font-weight: bold;
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 1.75rem;
	text-align: center;
    text-decoration: none;
}

.form_btn_screen2:focus,
.form_btn_screen2:hover {
    background-color:#4682B4 ;
}