@charset "UTF-8";
/* abc.css */
/* - - - * - - - - * - - - - * - - - - * - - - - *
 * 制作開始：H25.11.11 (月)
 * 前々更新：H26.01.13 (月) H28.05.08 (日)
 * 前回更新：R02.05.29 (金) R02.10.10 (土)
 * 最終更新：R05.01.29 (日) R05.02.03 (金)
 * - - - * - - - - * - - - - * - - - - * - - - - *
 */
/* 上・右・下・左 ◆ 上・左右・下 ◆ 上下・左右 */
/* ******************************************** */

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #bef;
  font-size: 1em;
  font-family: sans-serif;
}

/* * * * * html 5 fix * * * * * * * * */
section,
article,
header,
footer,
nav,
aside       { display: block; }

a:link      { color: #000; text-decoration: none; }
a:visited   { color: #333; text-decoration: none; }
a:hover     { color: #f00; text-decoration: underline; }

.clear      { clear: both; }
.center     { text-align: center; }

/* ▼ #wrapper  - * - - - - * - - - - * - - - - */
#wrapper {
  width: 90%;                 /* ★R02.06.11 (木) 87% ★R02.05.29 (金) 900px */
  max-width: 1000px;
  margin: 1.2em auto 1.2em;
  background-color: #fff;
  border: 1px solid #0ad;
}

/* ▼ #header部 - * - - - - * - - - - * - - - - */
#header {
  margin: 0 0 15px 0;
  background-color: #eff;
  border-bottom: 1px solid #ccc;
}

/* ▼ 見出し  - - * - - - - * - - - - * - - - - */
h1 {
  padding: 30px 0 0 0;
  font-size: 2em;
  font-weight: normal;
  letter-spacing: 18px;
  text-align: center;
  color: #0ad;
}
.ruby {                   /* ▼ - - 削除予定 - - */
    font-size:15px;
    vertical-align: 20px;
    font-family: Century, Osaka, sans-serif;
    letter-spacing: 3px;
}

/* ------ ▼ナビ・メニュー用 ★R02.05.30 (土) ----------- */
#menu {
  display: block;
  width: auto;
  margin: 0px;
  padding: 3px 0 2px 0px;
  background-color: #eef;
}
#menu ul {
  margin: 0;
  padding: 0 0 1px 0;
}
#menu li {
  display: inline;
  list-style-type: none;
  padding: 0 3px 0 10px;
  font-size: 80%;
  font-weight: 700;
  color: #333;
}
#menu a {
  color: #888;
  text-decoration: none;
}
#menu a:hover {
  color: #333;
}
#menu li.here {          /* メニュー自己定位 */
	color:#b12;
	background-color:#bef;
	padding: 5px 10px 2px 13px;
	border-left: 3px #f00 solid;
}

/* ----- ▼ハンバーガーメニュー用 ★R02.05.30 (土) ------ */
.menu-box {
  display: none;              /* ★R02.06.02 (火) */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2px 0 5px 8px;     /* ★ 10px★ */
  background-color: rgba(187, 238, 255, 1);     /* ★R02.06.02 (火) #bef */
  z-index: 100;
  box-sizing: border-box;
}
.menu-box .menu-btn {
  width: 100%;
  background-color: #bef;     /* ★R02.06.01 (月)#fff #333 */
}
.menu-box ul {
  display: none;
  width: 100%;
  list-style-type: none;
  background-color: #bef;     /* ★R02.06.01 (月) #ccc */
}
.menu-box li {
	margin: 5px 1px 5px 8px;
}
.menu-box li.here {           /* メニュー.here */
	color:#b12;
	background-color:#bef;
	margin: 3px 1px 3px 5px;
	border-left: 3px #f00 solid;
}
.menu-box ul li a {
  display: block;
  border-bottom: 1px solid #333;   /* ★R02.06.01 (月) #fff */
  padding: 0.3em 0.6em;
}
.menu-box ul li:last-child a {
  border-bottom: none;
}
.menu-btn:before {
  content: '\2630';           /* ★R02.06.01 (月) \2630 \2CB7 \2CB6 */
  font-weight: 700;
  margin-top: 5px;
  padding: 1px 3px 1px 3px;   /* ★R05.02.05 (日) 2px 5px 1px 5px */
  color: #666;                /* ★R05.02.05 (日) #00f */
  font-size: 1.0rem;
  border: 1px #666 solid;     /* ★R05.02.05 (日) #00f */
}
.menu-btn.active:before {
  content: '\2716';           /* ★R02.06.01 (月) \2715 \2716 */
}
/* ------------- ▲ハンバーガーメニュー用 --------------- */

/* - - - * - - - - * - - - - * - - - - * - - - - */
#container {
   width: 95%;               /* ★R02.06.04 (木) */
}
#contents {
    margin: 0 0 1em 5px;
    position: relative;
/* 	display:flex;
	flex-direction: column; */
}
/* * * * * ▼見出し * * * * * * * * * */
h2, h3, h3.p-area, h3.m-area, h3.enta  {
    width: 97%;             /* ★R02.06.14 (日) 必要 */
    max-width: 95%;         /* ★R02.06.14 (日) 必要 */
    display: block;
    margin: 25px 10px 20px 5px;
    padding: 3px 0 0 10px;
    background-color: #bfe;
    color: #666;
    font-style: normal;
    font-weight: bold;
    line-height: 140%;
    border-left: 5px solid #88e;
    border-bottom: 1px solid #88f;
}
h2 {
    font-size: 1.3em;
}
h3 {
    font-size: 1.1em;
}
/* * * ▼エンタメなど * * * * */
h3.enta {
    width: 97%;
    padding: 3px 0 0 5px;
    background-color: #cff;
    font-size: 1.2em;
}



/* - - - * - - - - * - - - - * - - - - * - - - - *
 * ▼ --- 【gallery】用 ----------------  ▼
 * - - - * - - - - * - - - - * - - - - * - - - - */
/* ////// ★R05.01.28 (土) ///////////////////// */
@media (min-width: 680px) {

/* ★R02.05.29 (金) 508px */
#m-box {
	float: right;
	width: 58%;
	margin-left: 3px;
	padding-left: 5px;
	border-left: 1px solid #cccccc;
	}
#m-box h3.m-area {
    max-width: 92%;         /* 右部350px */
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.0em;
	}

/* - - - * - - - - * - - - - * - - - - * - - - - */
/* ★R02.05.29 (金) 345px */
#p-box {
	float: left;
	width: 38%;
	margin-left: 1px;
	padding-left: 0px;
	}

#p-box h3.p-area {
    max-width: 97%;         /* 左部225px */
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.0em;
	}
}

/* - - ▲ ★R05.01.29 (日)  - - - - - - - - - - - - - - - */

/* - - ▼▼▼ - -【レスポンシブ】- - ▼▼▼ - - - - - - - */
@media (max-width: 679px) {
  #wrapper {
    width: 98%;
    padding: 1px;
/*    border: 1px solid #f00;   【確認用】 */
    }
  h3.p-area, h3.m-area {
    margin: 15px 3px 15px 3px;
    padding: 3px 0 0 5px;
    background-color: #bfe;
    color: #666;
    font-size: 0.9em;
    line-height: 110%;
    border-left: 3px solid #88e;
    border-bottom: 1px solid #88f;
    }

  #contents {
    margin: 0 0 1em 5px;
    position: relative;
	display:flex;
	flex-direction: column-reverse;   /* ▼flex */
	}
  #t-box {         /* ★R05.01.30 (月) */
	order: 1;
	}

  #m-box {
	order: 2;
/*	width: 58%; */
	margin-left: 3px;
	padding-left: 5px;
/*	border-left: 1px solid #cccccc; */
	}
  #m-box h3.m-area {
    max-width: 92%;         /* 右部350px */
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.0em;
	}
  #p-box {
	order: 3;
/*	width: 38%; */
	margin-left: 1px;
	padding-left: 0px;
	}

  #p-box h3.p-area {
    max-width: 97%;         /* 左部225px */
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.0em;
	}

}

/* - - ▼▼▼ - -【レスポンシブ】- - ▼▼▼ - - - - - - - */
@media (max-width: 599px) {
  #wrapper {
    width: 98%;
    padding: 1px;
/*   border: 3px solid #f00;     【確認用】 */
    }
  #header {
    margin: 0 0 5px 0;
    padding: 10px 0 0 0;
    background-color: #eff;
    border-bottom: 1px solid #fff;
    }
  h1 {
    padding: 15px 0 0 0;
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: 10px;
    text-align: center;
    color: #0ad;
    }
  .ruby {
    font-size:10px;          /* ★R02.06.04 (木) 変更 15px */
    vertical-align: 20px;    /* ★H30.07.05 (木) 追加 */
    font-family: Century, Osaka, sans-serif;
    letter-spacing: 3px;     /* ★H30.07.05 (木) 変更 1px */
    }
  #container {
    width: 99%;                /* ★R02.06.14 (日) */
    }
  #menu {
    display: none;            /* ★R02.06.04 (木) */
    margin: 0;
    padding: 0;
    background-color: #fff;
    }
  .menu-box {
    display: block;
    }
  h3.p-area, h3.m-area {
    margin: 15px 3px 15px 3px;
    padding: 3px 0 0 5px;
    background-color: #bfe;
    color: #666;
    font-size: 0.82em;
    line-height: 120%;
    border-left: 3px solid #88e;
    border-bottom: 1px solid #88f;
    }
}
/* - - ▲▲▲ - -【レスポンシブ】- - ▲▲▲ - - - - - - - */

/* * * * * 文字 * * * * * * */
#contents p { font-size: 0.8em; }

#contents p.bun {
    font-size: 1em;
    margin: 5px 20px 5px 30px;
}

/* * パン屑リスト ▼arrow → 矢印マーク挿入 * * */
#contents .pankuzu {
   color: #aaa;
}
#contents .pankuzu:before {
    color: #f00;
    content: '\25b8';      /* マーク挿入 */
    margin-left: 5px;
}
#contents .arrow:before {
    color: #f00;
    content: '\25b8';      /* マーク挿入 */
    margin-left: 12px;
    letter-spacing: -0.5em;
}
@media (max-width: 679px) {       /* 【レスポ】★R05.02.03 (金) */
  #contents .arrow {
    font-size: 1.5em;
	}
}
/* * * * * ▼ #footer内の指定 * * * * * * * * * */
#footer {
    clear: both;
    margin-bottom: 0.5em;
    padding: 0.5em 0 0.5em;
    background-color: #eee; font-size: 0.8em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#footer p {
    text-align: center;
}
/* - - - * - - - - * - - - - * - - - - * - - - - */
/* ==== ▼ pagetop ★R02.06.01 (月) ===================== */
#pagetop{
    position: fixed;
    right: 5%;
    bottom: 5%;
    opacity: 0;
    -ms-filter: "alpha( opacity=0 )";
    zoom:1;
    z-index: 9999;
}
#pagetop a{
    display: block;
    padding: 10px;   /* 20px */
    background: #1bc;  /* #1EA6BB */
    color:#fff;
    text-decoration: none;
}
/* ====================================================== */