@charset "utf-8";

/* ユニバーサルセレクタでデフォルトの余白をリセット */
* {
	margin: 0;
	padding: 0;
}

#body {
}

#basewrapper {
	margin: 0 auto;
	padding: 0;
	width: 975px;
	height: 840px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	background : url(../images/background-side_2.gif) repeat-y center center;
	background-size: 100% auto;
}

#header {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 101px;
	background : url(../images/hokekyo15.png) no-repeat center center;
    background-position: center top;
	background-size: 100% auto;
}
#headerline {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 5px;
	background : url(../images/header_line.gif) repeat-x center center;
    background-position: center top;
}
#hokekyoline {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 18px;
	background : url(../images/hokekyo053.png) repeat-x center center;
    background-position: center top;
    text-align: right;
}
#wrapper {
	width: 960px;
	margin: 5px auto;
	margin-bottom: 25px;
	padding: 0;
	background : url(../cgi-local/count.cgi?width=10&name=hokekyo&type=0&subname=main) no-repeat;
    background-position: left top;
}

#whatis_main {
	margin: 5px auto;
	margin-right: 10px;
	padding-bottom: 100px;
	background : url(../cgi-local/count.cgi?width=10&name=hokekyo&type=0&subname=main) no-repeat;
    background-position: right top;
}

/* サイト共通コンテナ */
.container {
	max-width: 950px;
	margin: 0 auto;
	padding: 0;
}

.site-header{
  position: fixed;
  top: 314px; /* 1509 - 882 */
  right: 0;
  width: 219px;
  height: 441px;
  background : url(../images/hokekyo01.gif);
  color: #fff;
}

header {
	margin-bottom: 10px;
}

.previous-button {
	width: 43px;
	height: 100%;
	float: left;
}

.next-button {
	width: 43px;
	height: 100%;
	float: left;
}

.page_change {
	margin-top: 70px;
}

#manga_turn {
	width: 864px;
    height: 641px;
	float: left;
}

#prevpage, #nextpage,
  #firstpage, #lastpage,
	#previssue, #nextissue {
	cursor: pointer;
}

bottom {
	content: "";
	display: block;
	clear: both;
}

/* -------------------------------------------------------------------------- */
@-webkit-keyframes mizuho_leftbtn {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes mizuho_leftbtn {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.gnavi button {
  overflow:auto;
  text-decoration:none;
  text-indent: -9999px;
  display: block;
}
.gnavi button#prevpage {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/prev_page_on.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#prevpage:hover, .gnavi button#prevpage:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/prev_page_on.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.gnavi button#firstpage {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/first_page.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#firstpage:hover, .gnavi button#firstpage:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/first_page.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.gnavi button#previssue {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/prev_issue.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#previssue:hover, .gnavi button#previssue:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/prev_issue.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.gnavi button#nextpage {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/next_page_on.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#nextpage:hover, .gnavi button#nextpage:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/next_page_on.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.gnavi button#lastpage {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/last_page.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#lastpage:hover, .gnavi button#lastpage:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/last_page.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.gnavi button#nextissue {
  width: 26px;
  height: 118px;
  padding-right: 0px;
  background-image: url(../images/next_issue.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.gnavi button#nextissue:hover, .gnavi button#nextissue:active {
  width: 26px;
  padding-right: 0px;
  background-image: url(../images/next_issue.png);
  background-size: 26px 118px;
  background-repeat: no-repeat;
  background-position: center center;
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  -webkit-animation-name: mizuho_leftbtn;
  animation-name: mizuho_leftbtn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* --- ----------------------------------------------------------------------- */

#char_size {
	margin-top: 5px;
	margin-right: 8px;
	font-size: 15px;
	float: right;
	color: #fff; 
}
#about_hokekyo {
	margin-top: 3px;
	margin-right: 17px;
	float: right;
	font-family: "Kaimin Sora Bold";
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	color: #fff; 
	float: right;
	clear: both;
}
#manga_title {
	margin-top: 8px;
	margin-right: 0px;
	float: right;
	font-family: "Kaimin Sora Bold";
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	margin-bottom:0.5em;
	color: #fff; 
	clear: both;
}
.scale_btn {
  filter:alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  float: right;
}
.scale_msg {
  margin-top: 5px;  
  float: right;
}
.scale_btn:hover, .scale_btn:active {
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
}
.whatis_button {
  position: relative;
  z-index: 3;
  width: 150px;
  display: inline-block;
  vertical-align: bottom;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  /*display: inline-block;*/
  /*vertical-align: middle;*/
  margin: 1px 0px 0px 0px;
  padding: 2px 8px 2px 8px;
  cursor: pointer;
  background: #a86;
  text-decoration: none;
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-radius: 10px;
  opacity: 1.0;
  text-align: right;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.whatis_button:hover, .whatis_button:focus, .whatis_button:active {
  position: relative;
  z-index: 4;
  -webkit-transform: scale(1.2);
  transform: scale(1.6);
  opacity: 1.0;
}
.whatis_button img {
  margin-bottom: 2px;
  margin-left: 10px;
  vertical-align: bottom;
}

#whatis_body {
}
#whatis_basewrapper {
	margin: 0 auto;
	padding: 0;
	width: 975px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	background : url(../images/background-side_2.gif) repeat-y center center;
	background-size: 100% auto;
}

#whatis_header {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 101px;
	background : url(../images/hokekyo83.png) no-repeat center center;
    background-position: center top;
	background-size: 100% auto;
}
#whatis_wrapper {
	margin-top: 8px;
	margin-right: 0px;
	float: right;
	font-family: "UDDigiKyokasho R JIS2004";
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	margin-bottom:20px;
	padding: 0.5em;
	color: #000; 
	clear: both;
}
#whatis_wrapper2 {
	margin-top: 8px;
	margin-right: 0px;
	float: right;
	font-family: "UDDigiKyokasho R JIS2004";
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	margin-bottom:60px;
	padding: 0.5em;
	color: #000; 
	clear: both;
}
#manga_hokekyo {
	margin-top: 3px;
	margin-right: 5px;
	float: right;
	font-family: "Kaimin Sora Bold";
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	color: #fff; 
	float: right;
	clear: both;
}
.manga_hokekyo_button {
  position: relative;
  z-index: 3;
  width: 160px;
  display: inline-block;
  vertical-align: bottom;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  /*display: inline-block;*/
  /*vertical-align: middle;*/
  margin: 1px 0px 0px 0px;
  padding: 2px 8px 2px 8px;
  cursor: pointer;
  background: #a86;
  text-decoration: none;
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-radius: 10px;
  opacity: 1.0;
  text-align: right;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.manga_hokekyo_button:hover, .manga_hokekyo_button:focus, .manga_hokekyo_button:active {
  position: relative;
  z-index: 4;
  -webkit-transform: scale(1.2);
  transform: scale(1.6);
  opacity: 1.0;
}
.manga_hokekyo_button img {
  margin-bottom: 2px;
  margin-left: 10px;
  vertical-align: bottom;
}

/*
#footer {
    position: absolute;
	margin: 0 auto;
    margin-top: 668px;
	margin-left: 8px;
	padding: 0;
	width: 960px;
	height: 75px;
	background-color : #D5D7E1;
}
#whatis_footer {
    position: absolute;
    bottom: 0;
	margin: 0 auto;
	margin-left: 8px;
	padding: 0;
	width: 960px;
	height: 75px;
	background-color : #E1DDD5;
}
*/
/* -------------------------------------------------------------------------- */
#footer {
  position: absolute;
  text-align:center;
  margin: 0px auto;
  margin-top: 618px;
  margin-left: 8px;
  padding: 5px;
  width: 950px;
  height: 40px;
  font-size:14px;
  background-image: url(../images/bg_08.gif);
  background-repeat: repeat-x;
  background-position: left top;
  background-size:contain;                               /* 画像のサイズを指定    */
  width:950px;                                          /* 横幅のサイズを指定    */
  height:40px;                                           /* 縦幅のサイズを指定    */
}
#whatis_footer {
  position: absolute;
  bottom: 0;
  text-align:center;
  margin: 0px auto;
  margin-left: 8px;
  padding: 5px;
  width: 950px;
  height: 40px;
  font-size:14px;
  background-image: url(../images/bg_08.gif);
  background-repeat: repeat-x;
  background-position: left top;
  background-size:contain;                               /* 画像のサイズを指定    */
  width:950px;                                          /* 横幅のサイズを指定    */
  height:40px;                                           /* 縦幅のサイズを指定    */
}

p .link_action a:link {
 color: #41457D;
 text-decoration: underline;
}
p .link_action a:visited {
 color: #628069;
 text-decoration: underline;
}
p .link_action a:hover {
 color: #A074A6;
 text-decoration: underline;
}
p .link_action a:active {
 color: #4C5541;
 text-decoration: underline;
}