/* ==========================================================================

   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)

   ========================================================================== */



html,

button,

input,

select,

textarea {

    color: #222;

}



body {

  font-family: "メイリオ", Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;

    font-size: 1em;

    line-height: 1.4;

    background: url(../img/furley_bg02.png);

    /*background: url(http://subtlepatterns.com/patterns/solid.png);*/



}

/*テキストを選択した時の色*/

::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



::selection {

    background: #b3d4fc;

    text-shadow: none;

}



hr {

    display: block;

    margin: 1em 0;

    padding: 0;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

}



img {

    vertical-align: middle;

}



fieldset {

    margin: 0;

    padding: 0;

    border: 0;

}



textarea {

    resize: vertical;

}



.chromeframe {

    margin: 0.2em 0;

    padding: 0.2em 0;

    background: #ccc;

    color: #000;

}





/* ==========================================================================

   Author's custom styles

   ========================================================================== */



.w10{ width: 10%;}

.w20{ width: 20%;}

.w25{ width: 25%;}

.w30{ width: 30%;}

.w33{ width: 33%;}

.w40{ width: 40%;}

.w50{ width: 50%;}

.w60{ width: 60%;}

.w70{ width: 70%;}

.w80{ width: 80%;}

.w90{ width: 90%;}

.w100{ width: 100%;}





/* ==========================================================================

   Helper classes

   ========================================================================== */



.ir {

    overflow: hidden;

    border: 0;

    background-color: transparent;

    *text-indent: -9999px;

}



.ir:before {

    display: block;

    width: 0;

    height: 100%;

    content: "";

}



.visuallyhidden {

    position: absolute;

    overflow: hidden;

    clip: rect(0 0 0 0);

    margin: -1px;

    padding: 0;

    width: 1px;

    height: 1px;

    border: 0;

}



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    position: static;

    overflow: visible;

    clip: auto;

    margin: 0;

    width: auto;

    height: auto;

}



.invisible {

    visibility: hidden;

}



.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}



.clearfix:after {

    clear: both;

}



.clearfix {

    *zoom: 1;

}



/* ==========================================================================

   Print styles

   ========================================================================== */



@media print {

    * {

        background: transparent !important;

        box-shadow:none !important;

        color: #000 !important; /* Black prints faster: h5bp.com/s */

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    /*a[href]:after {

        content: " (" attr(href) ")";

    }



    abbr[title]:after {

        content: " (" attr(title) ")";

    }*/



    /*

     * Don't show links for images, or javascript/internal links

     */



    /*.ir a:after,

    a[href^="javascript:"]:after,

    a[href^="#"]:after {

        content: "";

    }

*/

    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    thead {

        display: table-header-group; /* h5bp.com/t */

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    img {

        max-width: 100% !important;

    }



    @page {

        margin: 0.5cm;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}

/*utility*/

.txt_small{

  font-size: 85%;

}



.txt_normal{

  font-size: 100%;

}



.txt_large{

  font-size: 120%;

}

.txt_xlarge{

  font-size: 150%;

}



.txt_r{

  text-align: right;

}



.txt_l{

  text-align: left;

}



.txt_c{

  text-align: center;

}

.txt_alert{

  color: #FF3300;

}

.line_150{

  line-height: 150%;

}

.line_180{

  line-height: 180%;

}

.line_200{

  line-height: 200%;

}

.line_250{

  line-height: 250%;

}

.flt{

  float: left;

}

.flr{

  float: right;

}

.mt10{ margin-top: 10px;}

.mb10{ margin-bottom: 10px;}

.ml10{ margin-left: 10px;}

.mr10{ margin-right: 10px;}



.list_details.notice_text{

  font-size: 70%;

  color:#666;

  text-align: left;

}



/*Book open btns toggle*/

.flash_box{

  display: none;

}

.pc .flash_box{

  display: block;

}



.pc .flashonly_notice{

  display: none;

}



.html5_box{

  display: block;

}



.appli_box{

  display: block;

}



/*subtitles*/

.book_title01{

font-size: 100%;

border-bottom:solid 1px #ccc ;

font-weight: normal;

margin-bottom: 10px;

text-indent: 5px;

}

  .book_title01 .small_title{

  font-size: 60%;

  width: 100%;

  display: block;

  text-indent: 0px;

  color: #666;

  }

  .book_title01 strong{

    max-height: 7em;

    overflow: hidden;

    display:block;

    text-indent:0px;

    word-wrap: break-word;

  }





.copyright_box{

  font-size: 75%;

  color: #666;

}



.subtitle01{

font-size: 160%;

line-height: 40px;

border-bottom:solid 1px #ccc ;

font-weight: normal;

margin-bottom:10px;

position: relative;

}



.subtitle02{

font-size: 120%;

line-height: 40px;

border-bottom:solid 1px #ccc ;

font-weight: normal;

margin-bottom: 10px;

}

.subtitle03{

font-size: 100%;

line-height: 35px;

border-bottom:solid 1px #ccc ;

font-weight: normal;

margin-bottom: 10px;

}

.subtitle04{

font-size: 100%;

line-height: 30px;

color: #666;

border-bottom:dashed 1px #ccc ;

font-weight: bold;

margin-bottom: 10px;

}





.subtitle{

  font-size: 60%;

  color: #666;

  margin-left: 25px;

}



/*メインレイアウト*/

.wrapper{

  float: left;

  width: 100%;

  text-align: center;

  padding-top: 20px;

}

.container{

  position: relative;

  width: 980px;

  margin: 0px auto;

  text-align: left;

  border-top:solid #666666 5px;

  background:url("../img/bg_grad01.png") repeat-x top #FCFCFC;



  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, .8); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

     -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, .8); /* FF3.5 - 3.6 */

          box-shadow: 0px 3px 5px rgba(0, 0, 0, .8); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

}



.header{

  float: left;

  width: 100%;

}



.contents{

  float: left;

  width: 950px;

  margin-top: 15px;

  margin-left: 15px;

  margin-bottom: 5px;

  min-height: 600px;

  }

  .pagelist .contents{

    margin-top: 0px;

  }



  /*IE6 only*/

  .lt-ie7 .contents{

    margin-left: 7px;

  }



.section01{

  float: left;

  width: 100%;

  margin-bottom: 20px;

}



/*list view*/

.listview01{

  list-style-type: none;

}

.listview01 li{

  float: left;

  width: 100%;

  margin-bottom: 20px;

}

.list_thum01{

  float: left;

  width: 160px;

  margin-right: 10px;

  line-height: 230px;

  text-align: center;

}



.list_thum02{

  float: left;

  width: 150px;

  margin-right: 10px;

}

.list_details{

  float: left;

  width: 100%;

}

  .list_details .btn_m{

    float: left;

    width: 100%;

    text-align: left;

  }





.list_txt{

  float: right;

  width: 240px;

  margin-left: 130px;

  padding: 10px 10px 0px 10px ;

  min-height: 200px;

  background:#E5E5E5;

  -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */

   -moz-border-radius: 5px; /* FF1-3.6 */

        border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */



  /* useful if you don't want a bg color from leaking outside the border: */

  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, .5); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

     -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, .5); /* FF3.5 - 3.6 */

          box-shadow: 0px 0px 2px rgba(0, 0, 0, .5); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

}



.list_txt01 {

  float: right;

  width: 240px;

  padding: 10px 10px 0px 10px ;

  min-height: 200px;

    position: relative;

    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);

    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.5);

    box-shadow: 0px 1px 3px rgba(0,0,0,.5);

    padding: 10px;

    /*background:url("http://subtlepatterns.com/patterns/tiny_grid.png") #FCFCFC;*/

    background:#DDDDDD;

    position:relative;

    border:1px solid #fff;

}





  .list_txt01 .inner{

    min-height: 120px;

  }





.list_txt02{

  float: right;

  width: 530px;

}

.side_contents01{

  float: left;

  width: 230px;

}

.list_details{

  font-size: 80%;

  text-align: center;

}



.list_details .btn01{

  float: left;

  width: 48%;

}

.list_details .btn02{

  float: right;

  width: 48%;

}

.list_details .btn03{

  float: left;

  width: 100%;

}

.list_txt01 .category_list01{

  min-height: 100px;

}

.category_list01{

  width:100%;

  float: left;

}

.category_list01 a{

  margin: 0px 5px;

}

.category_list01 dt{

    clear: both;

    color: #555;

    float: left;

    font-size: 90%;

    margin-bottom: 15px;

    width: 28%;

    font-weight: bold;

    /*text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */*/

}

.category_list01 dd{

    float: left;

    margin:0px 0px 15px 10px;

    width: 65%;

}

.list_detail{

  clear: both;

}



.main_contents{

  float: left;

  width: 100%;

}



.footer{

  clear: both;

  float: left;

  width: 100%;

  background: #efefef;

}



.footer_inner{

  border-top:solid 1px #ccc;

  clear: both;

  padding: 10px 0px 10px;

  font-size: 12px;

}

.footer_inner nav{

  float: left;

  width: 400px;

  margin: 10px;

  display: inline;

}

.footer_inner .copyright{

  float: right;

  text-align: right;

  width: 400px;

  margin: 10px;

  display: inline;

}





/*resposible*/

.breadcrumbs{

  font-size: 80%;

  margin: 9px 0px;

}

.book_detail{

  float: left;

  margin-bottom: 15px;

  margin-top: 20px;

  width: 100%;

  }

  .pagelist .book_detail{

    margin-top: 0px;



  }



p.photobox01{

  margin: 0px;

}



p.photobox01 img{

  border: solid 1px #ccc;

}



.app_download_box{

  background:url("../img/bg_grad01.png") repeat-x top #fff;

  clear: both;

  border: solid 1px #ccc;

  padding: 10px;

  margin-top: 10px;

  border-radius: 5px;

  position: relative;

}

  .app_title{

    float: left;

    font-size: 80%;

    line-height: 40px;

    margin-right: 10px;

    width: 280px;

  }

    .app_title img{

      width:40px;

      height:40px;

      padding-right: 5px;

    }



  .ban_holder01{

    list-style: none;

    float: left;

    width: 630px;

  }

  .ban_holder01 li{

    list-style: none;

    display: inline-block;

  }

  .lt-ie8 .ban_holder01 li{

    float: left;

    width: 25%;

    text-align: center;

  }

    .ban_holder01 li img{

      max-width: 100%;

      height: 40px;

    }



.detail_text01{

  padding: 10px;

  clear:both;

  background:url("../img/bg_grad01.png") repeat-x top #fff;

  border-radius: 5px;

  /* useful if you don't want a bg color from leaking outside the border: */

  position: relative;

  border: solid 1px #ccc;

}



.book_data{

  float: left;

  width: 100%;

  font-size: 80%;

  color: #888;

}

  .book_data dl{

    float: left;

  }

    .book_data dt{

    float: left;

    margin-right: 20px;

    }

    .book_data dd{

    float: left;

    margin-right: 20px;

    }





.operating_env{

      font-size: 85%;

    height: 250px;

    overflow-x: hidden;

    overflow-y: scroll;

    padding-right: 12px;

}

  .operating_env dl{

    margin-left: 10px;

    color: #777;

  }

  .operating_env dt{

    color: #555;

  }





.title_box01{

    left: 50%;

    margin-left: -305px;

    position: absolute;

    top: 45px;

    width: 505px;

}



.operating_env_wrap{

  float: left;

  width: 48%;

}

.copyright_box_wrap{

  float: right;

  width: 48%;

}



/*pagelist*/



a.current {

    font-weight: bold;

    text-decoration: underline;

}



.pagelist_wrap{

  float: left;

  width: 100% ;

  margin-bottom: 20px;

}

  .listbox01_left {

    float: left;

    height: auto !important;

    list-style-type: none;

    min-height: 160px;

    padding-bottom: 10px;

    width: 100%;

    margin-top: 20px;

  }

  .listbox01_left li {

      float: left;

      list-style-type: none;

      padding-bottom: 35px;

      text-align: center;

      width: 12.5%;

  }

  .listbox01_left li img, .listbox01_right li img {

    border: 1px solid #CCCCCC;

    max-width: 97px;

  }





.listbox01_right {

    float: left;

    height: auto !important;

    list-style-type: none;

    min-height: 250px;

    padding-bottom: 10px;

    width: 100%;

    margin-top: 20px;

  }

  .listbox01_right li {

      float: right;

      list-style-type: none;

      padding-bottom: 35px;

      text-align: center;

      width: 12.5%;

  }



.list_pager {

    list-style: none outside none;

    text-align: center;

}

.list_pager li {

    display: inline;

    margin-right: 0.5em;

}

.pagelist_link{

    clear: both;

    float: left;

    font-size: 80%;

    margin-top: 5px;

    text-align: right;

    width: 100%;

}

.small_txt{

  font-size: 80%;

}



/*lt IE 9 only*/

.lt-ie9 .container.localonly{

  border-left: solid 1px #ccc;

  border-right: solid 1px #ccc;

  border-bottom: solid 1px #ccc;



}