@charset "utf-8";

/* スマホ用 */

/* にゃカペラKOBE */
.NekoVideo {
    width: 92%;
    text-align: center;
    margin: auto;
    padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
    background: #ffffff;/*余白の背景色*/
    max-width:95%;
}

/* すべてのイメージ */
img {
    max-width:100%;
    height:auto;
    margin: 0;
    border-radius: 3px 3px 3px 3px;   
}

/* ３目ならべ */
img.ox {
    max-width:80%;
    height:auto;
    margin: 0;
    border-radius: 3px 3px 3px 3px;   
}

/* すべてのp */
p {
    margin-top: 0;
    margin-bottom: 0;
    /*border-style: solid;*/
    /*border-color: green;*/
}

/* すべてのリスト */
ul,ol {
    margin: 0;
    padding: 0;
    padding-left: 25px;
    /*border-style: solid;*/
    /*border-color: red;*/
}

/* すべての表 */
table {
    margin-top: 0;
    margin-bottom: 0;
}

/* ボディ */
.body {
  /*font-family: Meiryo,sans-serif;*/
  font-size: 16px;
  line-height: 140%; /* 行間設定 */
}
.body a {
   text-decoration: none;  /* 下線を表示しない */
}
.body a:link {
    color: green;
}
.body a:visited {
    color: green;
}

/* メニュー1（お知らせ・・・） */
table.menu1 {
   border-collapse: collapse;  /* 線を一重にする */
   border: 1px solid white;    /* 1ピクセルの白線を引く */
   /*color: white;*/
}

table.menu1 td {
   border: 1px solid white;  /* 1ピクセルの白線を引く */
   background-color: #689f38; /*緑系*/
   width: 15%;
   text-align: center;
   font-size: 14px;
   color: white;
}

/********************************************************************/
.menu1 a {
   display: block;         /* リンクをブロック化 */
   padding: 0.5em 0.5em;   /* 上下にパディングを取る */
   text-decoration: none;  /* リンクに下線を引かない */
   /*color: white;*/
}
/*
.menu1 a:hover {
    background-color: #4ecd00; ホバー時（緑系）スマホは、ホバー設定しない
}
*/
.menu1 a:link {
    color: white;
}
.menu1 a:visited {
    color: white;
}
/********************************************************************/

/* メニュー2（譲渡会情報・・・） */
table.menu2 {
   border-collapse: collapse;  /* 線を一重にする */
   border: 1px solid white;    /* 1ピクセルの白線を引く */
}

table.menu2 td {
   border: 1px solid white;  /* 1ピクセルの白線を引く */
   background-color: #f67800;
   width: 15%;
   text-align: center;
   font-size: 14px;
   color: white;
}

/********************************************************************/
.menu2 a {
   display: block;         /* リンクをブロック化 */
   padding: 0.5em 0.5em;   /* 上下にパディングを取る */
   text-decoration: none;  /* リンクに下線を引かない */
   /*color: white;*/
}
/*
.menu2 a:hover {
    background-color: #ff3300; ホバー時（オレンジ系）スマホは、ホバー設定しない
}
*/
.menu2 a:link {
    color: white;
}
.menu2 a:visited {
    color: white;
}
/********************************************************************/

/* フェイスブック */
table.facebook {
   border-collapse: collapse;  /* 線を一重にする */
   border: 1px solid white;    /* 1ピクセルの白線を引く */
}

table.facebook td {
   border: 1px solid white;  /* 1ピクセルの白線を引く */
   background-color: #ccffcc;
   width: 15%;
   /*text-align: center;*/
   /*margin: auto auto;*/
   font-size: 14px;
   /*color: white*/
}
.facebook a {
    display: block;         /* リンクをブロック化 */
    text-align: center;     /* 水平方向のセンタリング */
    text-decoration: none;  /* リンクに下線を引かない */
}
.facebook img {
    position:relative;
    top: 10%;
}

/*スマホは、ホバー設定しない
.facebook a:hover { 
    background-color: #ccffff;
}
*/
.facebook a:link {
    color: green;
}
.facebook a:visited {
    color: green;
}

/* ヘッダータイトル */
p.HTitle {
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    color: #3366ff;
    font-size: 1.3em;
    font-weight: bold;
    text-align: right;
    /*line-height: 105%;*/
}

/* 本文タイトル */
p.Title {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #3366ff; /* 協議会背景の青 */
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    line-height: 120%;
}

/* 見出し */
p.SubTitle {
    margin-top: 15px;
    margin-bottom: 0px;
    color: #4a64a0; /* フェイスブックの青 */
    font-size: 1.1em;
    font-weight: bold;
    /*text-align: center;*/
}

/* 少し行を空ける */
p.MiniSpace {
    margin-top: 10px;
    margin-bottom: 0;
}

/* 「このページのトップへ」 */
p.ToTop {
    margin-top: 10px;
    /*margin-bottom: 10px;*/
    color: gray;
    font-size: 0.75em;
    text-align: right;
}
.ToTop a:link {
    color: gray;
}
.ToTop a:visited {
    color: gray;
}

/* サイドバーのリンク部 */
.Link {
    font-size: 0.75em;
    text-align: center;
}
.Link p {
    margin-top: 10px;
}

/* 肉球リスト */
ul.NikukyuList {
     list-style-image: url("../images/icon/nikukyu.png");
     margin: 0;
     padding: 0;
     padding-left: 30px;
}


/* 構成団体 */
.members {
    position: relative;
    left: 2.5%;
    width: 97.5%;
}
.small {
   font-size: 0.8em;
}

.RoundRect {
    display: inline-block;
    width: 45%;  /* ボックス範囲 */
    /*height: 4em;*/
    margin: 2px;
    /*margin-top: 2px;*/
    /*margin-bottom: 2px;*/
    padding: 0.25em 0.25em;   /* 上下にパディングを取る */
    color: white;
    background-color: maroon; /*#ff3300;オレンジ系*/
    border-radius: 20px;  /* 角丸半径（すべての角に） */
    font-size: 0.95em;
    text-align: center;  /* テキスト中央寄せ */
}
.RoundRect a {
   display: block;         /* リンクをブロック化 */
   /*padding: 0.8em 0.8em;*/   /* 上下にパディングを取る */
   text-decoration: none;  /* リンクに下線を引かない */
   color: white;
   border-radius: 20px;  /* 角丸半径（すべての角に） */
}
.RoundRect a:hover { 
    background-color: maroon; /*スマホはホバー設定しない*/
}
.RoundRect a:link {
    color: white;
}
.RoundRect a:visited {
    color: white;
}


/** みにゃとのスロットマシーンのチェックボックスの装飾 **/
  input[type=checkbox] {
  display: none; /* checkboxを非表示にする */
  }
  .labelCheck {
    position: relative; /* ボックスの位置を指定する */
    padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
    margin-top: 10px;
    margin-bottom: 0;
  }
  .labelCheck:hover:after {
    border-color: #0171bd; /* ボックスの境界線を実線で指定する */
  }
  .labelCheck:after, .labelCheck:before{
    position: absolute; /* ボックスの位置を指定する */
    content: ""; /* ボックスのコンテンツ */
    display: block; /* ブロックレベル要素化する */
    top: 50%; /* 上部から配置の基準位置を決める */
  }
  .labelCheck:after {
    left: 15px; /* 左から配置の基準位置を決める */
    margin-top: -10px; /* チェック枠の位置 */
    width: 15px; /* ボックスの横幅を指定する */
    height: 15px; /* ボックスの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    border-radius: 6px; /* ボックスの角丸を指定する */
  }
  .labelCheck:before {
    left: 21px; /* 左から配置の基準位置を決める */
    margin-top: -7px; /*チェックマークの位置*/
    width: 5px; /* ボックスの横幅を指定する */
    height: 9px; /* ボックスの高さを指定する */
    border-right: 3px solid #0171bd; /* 境界線（右）のスタイルを指定する */
    border-bottom: 3px solid #0171bd; /* 境界線（下）のスタイルを指定する */
    transform: rotate(45deg); /* 要素を回転させる */
    opacity: 0; /* 要素を透過指定する */
  }
  input[type=checkbox]:checked + .labelCheck:before {
    opacity: 1; /* 要素を表示する */
  }
/* 少し行を空ける */
input.MiniSpace {
    margin-top: 10px;
    margin-bottom: 0;
}