/*-----------
  Setting
-----------*/

/*　Reset　*/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background:transparent;
	font-weight: normal;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
ul, ol, li { list-style-type: none; }
table {
	border-collapse:collapse;
	border-spacing:0;
    font-size:inherit;
    font:100%;
}
input, select { vertical-align:middle; }

img { vertical-align:bottom; }
a img {
	border: none;
	max-width: 100%;
}
a:focus { outline:none;}
p { margin: 0; padding: 0; }

/*　Common Style　*/

ins { }
mark { }
del { text-decoration: line-through; }
blockquote {
	clear:both;
	padding: 30px 20px 0px 70px;
	margin-bottom: 20px;
	border-radius: 5px;
	background:url(img/icon/blockquote.png) 15px 20px no-repeat #F4F4F4;
}

.clear { clear:both; }
/* clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix { zoom: 1;}


/*-----------
  Main
-----------*/

body {
	background:#ffcc33;
	font: 15px/1 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	-webkit-text-size-adjust: none;
	padding: 0;
	margin: 0 auto;
}

a:hover { color:#00CC00; text-decoration:none }
a { color:#00CC00; text-decoration:underline }

.img-right { float:right; padding-left:20px; }
.img-left { float:left; padding-right:20px; }


/*-----------
  Footer
-----------*/

#footer { width:700px; padding-bottom:10px; margin:0 auto; font-size:80%; }
#footer a:hover { color:#000; text-decoration:none }
#footer a { color:#000; text-decoration:underline }

ul.ftr-li { padding-top:15px; }
ul.ftr-li li { float:left; padding:0 10px; margin-bottom:10px; border-right:1px solid #000; }
ul.ftr-li li:last-child { border:none; }

.ftr-cr { clear:both; text-align:center; padding:10px 0 25px; }

#pagetop a {
  position:fixed;
  right:20px;
  bottom:0px;
  background:#336605;
  /*opacity:0.6;*/
  border-radius:5px 5px 0 0;
  display:block;
  text-align:center;
  padding:10px 15px;
  font-weight:bold;
  color:#FFFFCC;
  text-decoration: none;
}
#pagetop a:hover { color:#FFFFCC; }

/*-----------
  Top Page
-----------*/

#booktop-wrap { width:700px; padding-top:50px; margin:0 auto; box-sizing:border-box; }

.book-top { }
.book-top_l { width:10%; height:30px; float:left; background:url("img/book-top.gif") left; }
.book-top_m { width:80%; height:30px; float:left; background:#336605; }
.book-top_r { width:10%; height:30px; float:left; background:url("img/book-top.gif") right; }

.book-main { clear:both; background:url("img/book-main_l.gif") left repeat-y #336605; }
.book-main_box { padding:0 70px 60px 80px; background:url("img/book-main_r.gif") right repeat-y; }

.book-main_box_logo { float:left; line-height:1;}
.book-main_box_logo-ttl { float:left; padding:20px 0 0 20px; }
.book-main_box_ttl { clear:both; padding-top:30px; line-height:2; color:#FFFFCC; font-size:115%; font-weight:bold; }
.book-main_box_copy { clear:both; padding:20px 0 0 0; line-height:2; color:#FFFFCC; }

.book-main_box_menu-ttl { clear:both; padding:30px 0 5px 0; color:#FFFFCC; border-bottom:1px solid #FFFFCC; }
ul.book-main_box_menu { }
ul.book-main_box_menu li { float:left; padding:0 20px; margin-top:12px; border-left:1px solid #FFFFCC; }
ul.book-main_box_menu li:first-child,
ul.book-main_box_menu li:nth-child(4) { clear:both; padding-left:0; border:none; }

.book-btm { clear:both; }
.book-btm_l { width:10%; height:40px; float:left; background:url("img/book-btm.gif") left; }
.book-btm_m { width:80%; height:40px; float:left; background:url("img/book-btm_m.gif"); }
.book-btm_r { width:10%; height:40px; float:left; background:url("img/book-btm.gif") right; }

/*-----------
  Page
-----------*/

/* Common */

#bookpg-wrap { margin-top:50px; box-sizing:border-box;  background:url("img/pg-bg.gif") bottom left no-repeat; }

.pg-top { width:700px; margin:0 auto; }
.pg-top_l { width:15%; height:20px; float:left; background:url("img/pg-top_l.gif") left no-repeat #FFF; }
.pg-top_m { width:70%; height:20px; float:left; background:#FFF; }
.pg-top_r { width:15%; height:20px; float:left; background:url("img/pg-top_r.gif") right no-repeat; }

.pg-main { width:700px; margin:0 auto; clear:both; background:url("img/pg-main_l.gif") left repeat-y #FFF; }
.pg-main_box { padding:10px 70px 60px 80px; background:url("img/pg-main_r.gif") right repeat-y; }

.pg-main_box_bread { font-size:70%; }
.pg-main_box_ttl { line-height:1.6; font-size:180%; font-weight:bold; border-bottom:1px dashed #000; padding:20px 0 15px 0; }
.pg-main_box_txt h2 { font-size:115%; padding-top:15px; font-weight:bold; color:#336605; }
.pg-main_box_txt p + h2,
.pg-main_box_txt ul + h2,
.pg-main_box_txt ol + h2 { padding-top:40px; }
.pg-main_box_txt h3 { padding-top:15px; font-weight:bold; border-bottom:1px solid #DDD; }
.pg-main_box_txt h4 { padding-top:15px; font-weight:bold; }
.pg-main_box_txt strong { font-weight:bold; background: linear-gradient(transparent 50%, yellow 50%); }
.pg-main_box_txt { line-height:2; padding-top:15px; }
.pg-main_box_txt p { padding-top:15px; }
.pg-main_box_txt img { max-width:100%; }

.pg-main_box_menu-ttl { clear:both; padding:30px 0 5px 0; border-bottom:1px solid #000; }
ul.pg-main_box_menu { line-height:1; }
ul.pg-main_box_menu li { float:left; padding:0 20px; margin-top:12px; border-left:1px solid #ddd; }
ul.pg-main_box_menu li:first-child,
ul.pg-main_box_menu li:nth-child(4) { clear:both; padding-left:0; border:none; }

.pg-btm { width:700px; margin:0 auto; clear:both; }
.pg-btm_l { width:15%; height:30px; float:left; background:url("img/pg-btm_l.gif") left; }
.pg-btm_m { width:70%; height:30px; float:left; background:url("img/pg-btm_m.gif"); }
.pg-btm_r { width:15%; height:30px; float:left; background:url("img/pg-btm_r.gif") right no-repeat; }


/*Book Page*/

ul.pg-main_box_txt_book li { float:left; padding:0 0 10px 20px; width:33%; box-sizing:border-box; text-align:center; }
ul.pg-main_box_txt_book li:first-child,
ul.pg-main_box_txt_book li:nth-child(3n+1) { clear:both; padding-left:0; }
ul.pg-main_box_txt_book li img { width:100%; }


/*----------------------------
  Responsive
----------------------------*/

@media screen and (max-width:720px){

/*-----------
  Main
-----------*/

.img-right { float:none; display:block; padding-bottom:20px; }
.img-left { float:none; padding-right:20px; }


/*-----------
  Footer
-----------*/

#footer { width:100%; font-size:70%; }


/*-----------
  Top Page
-----------*/

#booktop-wrap { width:100%; padding:5px 1px 0 5px; margin:0px; }

.book-main { }
.book-main_box { padding:0 40px 50px 40px; }

.book-main_box_logo { float:none; text-align:center; }
.book-main_box_logo-ttl { float:none; text-align:center; padding:0; width:100%; }
.book-main_box_logo-ttl img { width:100%; max-width:325px; }

ul.book-main_box_menu { }
ul.book-main_box_menu li { float:none; width:100%; padding:0; border:none; }

/*-----------
  Page
-----------*/

/* Common */

#bookpg-wrap { width:100%; padding:0; margin:5px 0 0 0; }

.pg-top { width:100%; }

.pg-main { width:100%; }
.pg-main_box { padding:10px 40px 50px 60px; }

.pg-main_box_ttl { font-size:140%; }
.pg-main_box_txt { font-size:100%; line-height:1.6; }
.pg-main_box_txt p { }

ul.pg-main_box_menu { }
ul.pg-main_box_menu li { float:none; width:100%; padding:0; border:none; }

.pg-btm { width:100%; }


}