@charset "utf-8";

/* --------------------------------------------------------
	clear
--------------------------------------------------------- */
* {
  margin: 0; padding: 0; font-style: normal; background-repeat: no-repeat;
}

/*
h1, h2, h3, h4, div, p, ul, ol, li, dl, dt, dd, img {
  margin: 0px;
  padding: 0px;
  border: none;
  list-style-type: none;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
}
*/


body {
  -webkit-text-size-adjust:100%;
  font-size: 14px; color: #555; line-height: 1.8em;
  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "sans-serif", "ＭＳ Ｐゴシック";
}

p {
  padding: 10px 0;
}
img {
  border: none;
}
hr {
  clear: both; visibility: hidden; height: 0; margin: 0; padding: 0;
  border: 0;
}
ul {
  padding: 0 20px;
}
li {
  line-height: 1.6em;
  padding: 5px 0;
}
td {
  line-height: 1.4em;
}
em {
  font-style: normal; color: #eb4a4a; line-height: 135%;
}
ruby {
  ruby-align: distribute-space; ruby-overhang: auto; ruby-position: above;
  margin: 0;
}
a {
  color: #3080ab;
}
a:hover,
a:active {
  color: #fb4700;
}

.red {
  color: #FF3300;
}

input, select, textarea {
  padding: 5px;
  line-height: 1.4em;
}


@media screen and (max-width: 500px){
  * {
    margin: 0; padding: 0; font-size: 100%; -webkit-text-size-adjust: 100%;
  }
  body { font-size: 85%; }
  ruby rt {
    font-size: 60%;
  }
}


/* --------------------------------------------------------
  header
--------------------------------------------------------- */

#wrapper {
  width: 1050px; margin-left: auto; margin-right: auto;
  background-image: url(../../images/bg_main.jpg); background-repeat: repeat-y; background-position: center top;
  overflow: hidden;
}

#header {
  width: 100%; height: 255px;
  background-image: url(../../images/bg_head.jpg); background-repeat: no-repeat; background-position: center top;
}
#header h1 {
  text-align: right; padding: 5px;
  font-size: 12px; font-weight: normal; color: #FFF;
}

/*
#header #logo {
  padding-top: 10px; padding-left: 60px;
}
#header #logo A {
  width: 200px; height: 145px;
  font-size: 1px; text-indent: -9999px; display: block;
  background-image: url(../../images/logo.gif); text-decoration: none; overflow: hidden;
}
*/
#header #logo {
  padding-top: 10px; padding-left: 60px; margin-bottom: 70px;
}
#header #logo A {
  width: 344px; height: 66px;
  font-size: 1px; text-indent: -9999px; display: block;
  background-image: url(../../images/btn_logo.png); text-decoration: none; overflow: hidden;
  background-size: auto 100%;
}

ul#gnavi {
  padding-left: 60px;
  list-style-type: none;
}
ul#gnavi li {
  padding: 0;
}
ul#gnavi li a {
  width: 175px; height: 65px; margin-right: 10px;
  overflow: hidden; display: block; float: left;
  background: url(../../images/btn_gnavi.png); text-indent: -9999px; text-decoration: none;
}
ul#gnavi li.gn01 A {
  background-position: 0px 0px;
}
ul#gnavi li.gn02 A {
  background-position: -186px 0px;
}
ul#gnavi li.gn03 A {
  background-position: -372px 0px;
}
ul#gnavi li.gn04 A {
  background-position: -558px 0px;
}
ul#gnavi li.gn05 A {
  background-position: -744px 0px;
}
ul#gnavi li.gn01 A:hover {
  background-position: 0px -66px;
}
ul#gnavi li.gn02 A:hover {
  background-position: -186px -66px;
}
ul#gnavi li.gn03 A:hover {
  background-position: -372px -66px;
}
ul#gnavi li.gn04 A:hover {
  background-position: -558px -66px;
}
ul#gnavi li.gn05 A:hover {
  background-position: -744px -66px;
}

@media screen and (max-width: 500px){
  #wrapper {
    width: 100%; background-image: none;
  }
  #header {
    background-size: contain;
    height: 0; padding-top: 24.3%;
    top: 0px; left: 0px; position: relative;
  }
  #header h1 {
    background-color: #6c583f; text-align: left;
    top: 0px; left: 0px; position: absolute; z-index: -1;
  }
  #header #logo {
    top: 3px; left: -55px; position: absolute;
  }
  #header #logo A {
    width: 300px; height: 58px; background-size: contain;
    background-size: auto 100%;
  }
  ul#gnavi {
    width: 100%; padding: 0;
  }
  ul#gnavi li a {
    width: 100%; height: auto; line-height: 2.0em; margin: 0; padding-left: 40px;
    border: 1px solid #ccc; color:#111; position: relative;
    overflow: visible; text-indent: 0px; display: inline; font-size: 120%;
    /*
    background: -moz-linear-gradient(top,#FFF 0%,#EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    */
  }



ul#gnavi li a:before {        /*グレーのひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
    right: 55px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #333;
}
ul#gnavi li a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
    right: 58px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #eee;
}
ul#gnavi li a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #eee;
}



  ul#gnavi li.gn01 a {
      background: #eee;
      background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
      background-image: url(../../images/icon_pen.png);
  }
  ul#gnavi li.gn02 a {
      background: #eee;
      background-repeat: no-repeat; background-position: 5px center; background-size: auto 65%;
      background-image: url(../../images/icon_faq.png);
  }
  ul#gnavi li.gn03 a {
      background: #eee;
      background-repeat: no-repeat; background-position: 5px center; background-size: auto 65%;
      background-image: url(../../images/icon_book.png);
  }
  ul#gnavi li.gn04 a {
      background: #eee;
      background-repeat: no-repeat; background-position: 5px center; background-size: auto 70%;
      background-image: url(../../images/icon_brush.png);
  }
  ul#gnavi li.gn05 a {
      background: #eee;
      background-repeat: no-repeat; background-position: 5px center; background-size: auto 75%;
      background-image: url(../../images/icon_talk.png);
  }
}


.header__container {
  max-width: 1000px; margin: 2px auto;
}
.header__container {
  width: 100%; background: #ddd;
  padding: 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.is-fixed {
  position: fixed; z-index: 1;
  top: -2px; left: 50%;
  transform: translate(-50%, 0);

  background-color: rgba(255,255,255,0.9);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}


/* --------------------------------------------------------
  main
--------------------------------------------------------- */

#main {
  width: 1050px;
}
#main #search-box {
  width: 290px; height: 32px; padding-top: 8px; padding-left: 30px; float: left; background-color: #FFF;
  background-image: url(../../images/icon_search.jpg); background-repeat: no-repeat; background-position: left;
}
#main .ad-link {
  width: 470px; height: 40px; float: left; background-color: #FFF; line-height: 1.2em;
  /* text-align: left; font-size: 12px; */
}

#main.wide {
  width: 1050px; float: left;
  background-image: url(../../images/bg_main_wm.png); background-repeat: repeat-y;
}
#main.wide #contents {
  width: 990px; padding: 30px; clear: both;
  background-image: url(../../images/bg_main_wt.png); background-repeat: no-repeat; background-position: top;
}

@media screen and (max-width: 500px){
  #main {
    width: 100%;
  }
  #main.wide #contents {
    width: 100%; padding: 0;
  }
  #main #search-box {
    width: 90%; margin-bottom: 10px;
  }
}

/* --------------------------------------------------------
  main left
--------------------------------------------------------- */

#main #left{
  width: 790px; float: left;
  background-image: url(../../images/bg_main_m.jpg); background-repeat: repeat-y;
}
#main #left #contents {
  width: 730px; padding: 30px; clear: both;
  background-image: url(../../images/bg_main_t.jpg); background-repeat: no-repeat; background-position: top;
}

#main #left #contents .top-l {
  width: 480px; overflow: hidden; position: relative; float:left;
}

#main #left #contents p.pagetitle {
  padding: 10px; color: #FF3300; background-color: #ffffcc; border: double 1px #ffcc00;
  font-size: 14px; line-height: 1.6em;
}
#main #left #contents .top-r {
  width: 250px; float:left;
}
#main #left #contents .top-r IMG {
  width: 120px; float:left;
}
#main #left #contents .top-r P {
  width: 130px; float:left; font-size: 12px;
}
#main #left #contents .url {
  padding: 0 12px;
}
#main #left #contents .sections p.bnr {
  clear: both; text-align: left; margin: 0; padding: 0;
}

#main #contents h2,
#main #left #contents h2 {
  height: 38px; padding-top: 10px; padding-left: 55px; margin-bottom: 10px;
  font-size: 20px; font-weight: bold; color: #996600;
  background-image: url(../../images/bar_menu.gif); background-position: left; background-repeat: no-repeat;
}
#main #left #contents h3 {
  height: 26px; padding-left: 35px; margin-bottom: -5px; clear: both;
  font-size: 14px; line-height: 26px; font-weight: bold; color: #996600;
  background-image: url(../../images/icon_menu.gif); background-position: left; background-repeat: no-repeat;
}

#main #left #contents h3.bbs {
  background-image: url(../../images/icon_bbs.png);
  background-size: auto 100%;
}
#main #left #contents h3.talk {
  background-image: url(../../images/icon_talk.png);
  background-size: auto 100%;
}
#main #left #contents h3.novel {
  background-image: url(../../images/icon_novel.png);
  background-size: auto 100%;
}
#main #left #contents h3.novelfin {
  background-image: url(../../images/icon_novelfin.png);
}
#main #left #contents h3.brush {
  background-image: url(../../images/icon_brush.png);
  background-size: auto 100%;
}
#main #left #contents h3.cup{
  background-image: url(../../images/icon_cup.png);
  background-size: auto 100%;
}
#main #left #contents h3.faq {
  background-image: url(../../images/icon_faq.png);
  background-size: auto 100%;
}
#main #left #contents h3.gallary{
  background-image: url(../../images/icon_gallary.png);
  background-size: auto 100%;
}
#main #left #contents h3.jap {
  background-image: url(../../images/icon_jap.png);
  background-size: auto 100%;
}
#main #left #contents h3.pen {
  background-image: url(../../images/icon_pen.png);
  background-size: auto 100%;
}
#main #left #contents h3.pict{
  background-image: url(../../images/icon_pict.png);
  background-size: auto 100%;
}
#main #left #contents h3.prof {
  background-image: url(../../images/icon_prof.png);
  background-size: auto 100%;
}
#main #left #contents h3.rule{
  background-image: url(../../images/icon_rule.png);
  background-size: auto 100%;
}
#main #left #contents h3.home{
  background-image: url(../../images/icon_home.png);
  background-size: auto 100%;
}
#main #left #contents h3.print {
  background-image: url(../../images/icon_print.png);
  background-size: auto 100%;
}
#main #left #contents h3.movie {
  background-image: url(../../images/icon_movie.png);
  background-size: auto 100%;
}
#main #left #contents h3.kanri {
  background-image: url(../../images/icon_kanri.png);
  background-size: auto 100%;
}



#main #left #contents h3.novel1 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novel1.png);
}
#main #left #contents h3.novel2 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novel2.png);
}
#main #left #contents h3.novel3 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novel3.png);
}
#main #left #contents h3.novel4 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(/images/icon_novel4.png);
}
#main #left #contents h3.novel5 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(/images/icon_novel5.png);
}
#main #left #contents h3.novel6 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novel6.png);
}
#main #left #contents h3.novel7 {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novel7.png);
}
#main #left #contents h3.novelss {
  height: 55px; padding-left: 75px; clear: both;
  font-size: 25px; line-height: 55px; margin-bottom: -10px;
  background-image: url(../../images/icon_novelss.png);
}















#main #left #contents h4.novelgp{
  height: 18px; padding-top: 4px; padding-left: 35px; margin-top: -10px; margin-left: 20px; margin-bottom: 20px;
  font-size: 16px; font-weight: bold; color: #996600;
  background-image: url(../../images/icon_boushi.gif); background-position: left; background-repeat: no-repeat;
}
#main #left #contents .ad-link {
  width: 730px; height: 15px; margin-bottom: 10px; background-color: #FFF; clear: both;
}
#main #left #contents .ad-bnr {
  margin-bottom: 10px;
}
#main #left #contents .ad-fb {
  margin-top: 20px;
}

#main #left #contents .sections {
  margin-bottom: 15px; overflow: hidden; position: relative;
}
#main #left #contents .sections p {
  margin-bottom: 10px;
}

#main #left #contents .left-l {
  width: 380px; float: left;
}
#main #left #contents .left-r {
  width: 340px; float: right;
}

.ad-space-pc {
    display: inherit; visibility: visible;
}
.ad-space-sp {
    display: none; visibility: hidden;
}

@media screen and (max-width: 500px){
  #main #left,
  #main #left #contents {
    width: 100%; padding: 0; font-size: 100%; !important;
  }
  #main #left #contents .ad-bnr {
    width: 100%; height: auto;
  }
  .ad-link {
    display: none !important;
  }

  #main #contents h2,
  #main #left #contents h2 {
    width: auto; height: auto; padding: 0; font-size: 160%;
    background-image: none; background-color: #503420; padding: 10px; color: #fff;
  }
  #main #left #contents p.pagetitle {
    width: auto; height: auto; padding: 0; font-size: 100%;
    padding: 20px; background-image: none;
  }
  
  #main #left #contents .top-r {
    display: none; visibility: hidden;
  }

  #main #left #contents h3.novel1,
  #main #left #contents h3.novel2,
  #main #left #contents h3.novel3,
  #main #left #contents h3.novel4,
  #main #left #contents h3.novel5,
  #main #left #contents h3.novel6,
  #main #left #contents h3.novel7,
  #main #left #contents h3.novelss {
    height: 40px; line-height: 40px;
    font-size: 18px; padding-left: 55px;
    background-size: auto 100%;
  }

 .ad-space-pc {
   display: none; visibility: hidden;
 }
 .ad-space-sp {
   display: inherit; visibility: visible;
 }
}

/* ---- body no toko  ----*/
@media screen and (max-width: 500px){
  #main #left,
  #main #left #contents,
  #main #left #contents .top-l {
    width: 100%; float: none;
    background-image: none;
  }
}


/* --------------------------------------------------------
  main right
--------------------------------------------------------- */

#main #right{
  width: 250px; float: right;
}


#main #right h3 {
  width: 225px; height: auto;
  padding: 0; padding-left: 10px; margin: 0; line-height: 1.8em;
  font-size: 16px; color: #FFF; font-weight: normal;
  background-image: url(../../images/bar_submenu.jpg); background-repeat: no-repeat; background-position: top; clear: both;
}
#main #right h3.mid {
  font-size: 13px;
}


#main #right ul {
  margin: 0px; padding: 0;
}
#main #right ul#submenu {
  width: 220px; margin: 10px 0; padding: 0; padding-left: 10px;
}
#main #right ul#submenu li {
  width: 215px; list-style-type: none;
}
#main #right ul#submenu li a {
  text-decoration:none; display: block;
}
#main #right ul#submenu li a:hover {
  background-color: #FFFF9C;
}
#main #right ul#submenu li.selected a {
  color: #333; font-weight: bold; text-decoration:none;
}


#main #right ul#submenu ul {
  width: 190px; padding: 0; padding-left: 20px;
}
#main #right ul#submenu li.month {
  clear: both; margin-left: 10px;
  width: 210px; font-weight: bold;
}
#main #right ul#submenu li.month li {
  width: 18px; font-weight: normal;
  display: block; float: left; margin: 0 3px 3px 0; text-align: center;
}
#main #right ul#submenu li.month li A {
  padding-right: 10px; text-align: center;
}


#main #right p {
  padding-bottom: 10px; clear: both;
}
#main #right p.adlink {
  padding: 10px 0; clear: both;
}
#main #right .ad-box {
  background-color: #EFEFEF; text-align: center; font-size: 12px;
}
#main #right img {
  width: 230px; border: none; margin-bottom: 10px;
  -ms-interpolation-mode: bicubic;
}


#main #right #right-box {
  padding: 10px;
}
#sidemenu {
  width: 216px;
}
#sidemenu img {
  margin-bottom: 10px;
}


#main #right iframe.sidemenu {
  width: 232px; height: 260px;
}

#semiFixed {
  position: static;
}


@media screen and (max-width: 500px){
  #main #right{
    width: 100%;
  }
  #main #right h3{
    width: auto; height: auto; font-size: 120%; line-height: 1.8em; font-weight: normal;
    background-color: #52412f; padding: 0; padding-left: 10px;
    background-image: none;
  }


  #main #right ul#submenu,
  #main #right ul#submenu li {
    width: auto; font-size: 100%; margin: 0;
  }
  #main #right ul#submenu {
    width: auto; margin: 5px 0;
  }



  #sidemenu {
    width: auto; float: left;
  }

  #main #right #right-box {
    width: auto;
  }
  #main #right #right-box p {
    padding: 10px;
    width: auto;
  }
  #main #right #right-box img {
    width: 95vw; height: auto;
  }

  #main #right iframe.sidemenu {
    width: auto; height: auto;
  }
  #sidemenu {
    width: auto;
  }
  #sidemenu img {
    width: 100vw; height: auto;
  }
  #main #right .ad-box {
    background-color: #fff;
  }

  #semiFixed {
    position: static;
  }
}


/* --------------------------------------------------------
  footer
--------------------------------------------------------- */

#footer {
  width: 1030px; height: 35px; padding: 0 10px; padding-top: 55px; color: #FFF; font-size: 12px; clear: both;
  background-image: url(../../images/bg_foot.jpg); background-repeat: no-repeat; background-position: center top;
}
#footer.wide {
  background-image: url(../../images/bg_foot_wb.png);
}
#footer #footer-l {
  float: left; text-align: left;
}
#footer #footer-l  li {
  padding-right: 10px; 
  float: left; list-style-type: none;
}
#footer #footer-l li a {
  color: #FFF;
}
#footer address {
   text-align: right;
}
#footer #pageup {
  position: fixed; top:60%; right:0;
}
#footer #pageup a {
  width: 25px; height: 80px; overflow:hidden; display: block;
  background-image: url(../../images/btn_pageup.gif); text-indent: -9999px; text-decoration: none;
  background-repeat: no-repeat; background-position: center;
}
#footer #pagedown {
  position: fixed; top: 80%; right: 0;
}
#footer #pagedown a {
  width: 25px; height: 80px; overflow: hidden; display: block;
  background-image: url(../../images/btn_pagedown.gif); text-indent: -9999px; text-decoration: none;
  background-repeat: no-repeat; background-position: center;
}

@media screen and (max-width: 500px){
  #footer {
    width: 100%; height: auto; padding: 10px;
    background-color: #52412f; background-image: none;
  }
  #footer #pageup a,
  #footer #pagedown a {
    background-size: contain;
  }

  #footer #pagedown {
   position: static;
  }
  #footer #pagedown a {
   position: fixed; left: 0; bottom: 0;
   width: 100%; height: 20px; padding: 10px;
   text-align: center; color: #fff; font-size: 140%; display: block;
   background-image: none;
   background-color: #a7c443;
   filter:alpha(opacity=85); -moz-opacity:0.85; -khtml-opacity: 0.85; opacity:0.85;
   overflow: none; text-indent: 0;
  }
}


/* --------------------------------------------------------
  SNS botton
--------------------------------------------------------- */
#sns-pc { display: block; }
#sns-pc span { display: block; float: left;  margin: 10px 3px; }

#sns-sp { display: none; margin: 10px 0; }

@media screen and (max-width: 500px){
  #sns-pc { display: none; }
  #sns-sp { display: block; }
}

/* --------------------------------------------------------
  master mainte (regist.cgi)
--------------------------------------------------------- */

#ms-mainte {
  margin: 20px;
}
#ms-mainte input[type=checkbox] {
  width: 20px; height: 20px;
  vertical-align: middle;
}
#ms-mainte hr {
  visibility: visible;
  width: 100%; margin: 10px 0;
  border: 1px solid #ccc;
}