﻿@charset "utf-8";
*{
    margin:0%;
    padding:0%;
}
body {
    font-family:sans-serif;
    height: 100%;
}
html {
    height: 100%;
}
p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
/*　▼1001px以上の広幅のための設定▼ */
@media(min-width: 1001px){
/* 背景レイアウト(abobe 1001px)
=========================================================== */
.ly_cont{
    position: relative;
    min-height: 100%;
    max-width: 100%;
    background-image: url(../img/bg1.gif);
    background-repeat: repeat-y;
    background-position-x: center;
    background-color: #cc9;
}
/* コンテンツエリア(above 1001px)
=========================================================== */
.bl_media{
    display: block;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    behavior: url(PIE.htc);
    }
.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    font-size: 16px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.content {
  padding-top: 0.5rem;
  padding-left:  2rem;
  padding-right: 2rem;
  padding-bottom: 0.5rem;
  display: block;
  margin-top: 0.5rem;
  border-bottom: 1px solid gray;
}
      }
/**** ▲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; /* 外側左右余白を調整して画面中央に */
        width: 70%;
          behavior: url(PIE.htc);
         }
.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    font-size: 16px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.content {
  padding-top: 0.5rem;
  padding-left:  1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  margin-top: 0.5rem;
  border-bottom: 1px solid gray;
}
}
/****　▲751px～1000pxの中くらいの幅のための設定▲ *****/
/****　▼750px以下の幅の狭い端末用の設定▼ ****/
@media(max-width: 750px){
/* 背景レイアウト(under751px)
    =========================================================== */
    .ly_cont{
    position: relative;
    min-height: 100%;
    max-width: 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 {
    position: relative;
        margin: 0 auto;
        width: 90%;
        behavior: url(PIE.htc);
          }

.bl_media
 img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
}
/* 本文幅指定(all)
=========================================================== */
.main{
    flex: 1 1 68.33333%;
    font-size: 16px;
    line-height: 1.75;
    padding-left: 1rem;
    padding-right: 1rem;
}
.content {
  padding-top: 0.5rem;
  padding-left:  1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  margin-top: 0.5rem;
  border-bottom: 1px solid gray;
}

/****　▲750px以下の幅の狭い端末用の設定▲ ****/

/* ヘッダー（ロゴ・タブ関連）
=========================================================== */
.header {
    padding-top: 10px;
    padding-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}
.header_logo {
    display: block;
    text-align: right;
    margin-right: 1px;
    margin-bottom: 15px;
    border-bottom: solid 5px #666600;
    background-color: #fff;
}
    /* メディアクエリ適用時　*/
    @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-top: 20px;
    padding-bottom: 20px;
    border-top: solid 5px #666600;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.footer__innner {text-align: center;
}

.footer-copylight{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 250px;
    margin-top: 0;
    margin-bottom: 15px;
}
/* 見出しの設定
=========================================================== */
h1{
    text-align:center;
    font-weight:normal;
    color:#444;
    }
h2{
    font-weight:normal;
    color:#444;
    }    
.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;
}
/* 文字の装飾
=========================================================== */
.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 {
    text-align: center;
}
.futoji {
    font-family: bold;
}

.text-left {
   text-align: left;  /* 文章を左寄せする(※) */
   float: left;     /* 左端に寄せて、後続を右側へ回り込ませる */
}
.text-right {
   text-align: right; /* 文章を右寄せする */
}

#gototop{
text-align:center;
padding: 5px;
}
/* ボタン
=========================================================== */
.form_btn_l {
    display: block;
    width: 235px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: rgb(153, 208, 91);
    border: 2px solid transparent;
    border-radius: 15px;
    box-shadow: 2px 2px 4px ;
    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_l:focus,
.form_btn_l:hover {
    background-color: rgb(82,132,49);
}

.form_btn_2 {
    display: block;
    width: 230px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: #ef7692;
    border: 2px solid transparent;
    box-shadow: 2px 2px 4px ;
    margin-top: 0.25rem;
    margin-left: 1rem;
    margin-bottom: 0.75rem;
    color: rgb(0, 0, 0);
    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_2:focus,
.form_btn_2:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.3);
}

.form_btn_newyear {
    display: block;
    width: 235px;
    max-width: 100%;
    padding: 2rem 0.25rem;
    background-color: rgb(255, 205, 205);
    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_l:focus,
.form_btn_l:hover {
    background-color: rgb(82,132,49);
}

.wait_box {
    display: block;
    width: 280px;
    max-width: 100%;
    padding: 0 0.25rem;
    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.25rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 2rem;
}
.result {
    display: block;
    width: 280px;
    max-width: 100%;
    padding: 0;
    margin-top: 0.25rem;
    margin-left:2rem;
    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.25rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 2rem;
}
/* 表・テーブル関連
=========================================================== */
/* セル幅を自動調整 */
table, th {
    display: flex;
    margin-right: 0 auto;
    word-break: break-all;
  }
  /* グレーの枠線ありのテーブル　   */
  .v-table {
      border: 2px solid #ddd;
      width: auto;
      max-width: 95%;
  }
  .v-table th {
      padding: 3px;
      border: 2px solid #ddd;
      font-weight: bold;
      font-size: 0.9em;
      text-align: center;
      vertical-align: middle;
      display:table-cell;
  }
  .v-table thead th date{
      width: 20%;}
  .v-table td{
      padding: 3px;
      font-size: 0.9em;
      border: 2px solid #ddd;
      display: table-cell;
  }
  
  /* 枠線なしのテーブル　   */
  .clear-table {
      border: 0;
      display: table;
      flex-flow: column nowrap;
      width: max-content;
      margin-left: auto;
      margin-right: auto;
      }
  .clear-table tr{
      vertical-align: text-top;
      text-align: left;
  }
  .clear-table th {
      font-weight: bold;
      white-space: nowrap;
      display: table-cell;
  }
  .clear-table td {
      width: auto !important;
      padding-left: 0.5rem;
      vertical-align: text-top;
      flex-wrap: wrap;
      display: table-cell;
  }


   /* グレーの横罫線テーブル　   */
   .b-table {
    border: 2px solid #ddd;
    width: 90%;
    flex-flow: column nowrap;
}
.b-table td{
    padding: 3px;
    font-size: 0.9em;
    border-width: 1px 0px; /* 上下だけ引く */
    display: table-cell;
}
.b-table th:last-child,
.b-table td:last-child{
    border-right: none;
    border-bottom: none;
}
.b-table tr:last-child td,
.b-table tr:last-child th{
    border-bottom: none;
    border-right: none;
}