/* button 

http://www.webdesignerwall.com/demo/css-buttons.html

usage:

html ex:
<div>
  <input class="btn pink" type="btn" value="Input Element" /> 
  <button class="btn pink">btn Tag</btn>
  <span class="btn pink">Span</span> 
  <div class="btn pink">Div</div> 
  <p class="btn pink">P Tag</p> 
  <h3 class="btn pink">H3</h3> 
</div>

color:
  black, gray, orange, red, blue, rosy, green, pink

style
  round, square

size:
  medium, big, exbig

---------------------------------------------- */
.btn { display: inline-block; zoom: 1; display: inline; vertical-align: baseline; margin: 1px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Arial, Helvetica, sans-serif; padding: .4em .5em .275em; text-shadow: 0 -1px 1px rgba(0, 0, 0, .3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); /* white */
  color: #606060; border: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }
.btn:hover { text-decoration: none; /* white */
  background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }
.round { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.square { -webkit-border-radius: 0em; -moz-border-radius: 0em; border-radius: 0em; }
.medium { font-size: 20px; padding: .4em 1.5em .42em; }
.big { font-weight: bold; font-size: 24px; padding: .5em 2em .55em; }
.exbig { font-weight: bold; font-size: 30px; padding: .5em 2em .55em; }
.wide { font-size: 20px; padding: .4em 1.5em .42em; width: 94%; margin: 0 3% 0 3%; display: inline; }
/* color styles 
---------------------------------------------- */
/* commit */
.commit { color: #fff; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); }
.commit:hover { color: #eee; background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); }
/* black */
.black { color: #fff; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); }
.black:hover { color: #fff; background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); }
/* gray */
.gray { color: #fff; border: solid 1px #555; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); }
.gray:hover { color: #fff; background: #616161; background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); background: -moz-linear-gradient(top, #757575, #4b4b4b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b'); }
/* white */
.white { color: #606060; border: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }
.white:hover { color: #606060; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }
/* orange */
.orange { color: #fff; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); }
.orange:hover { color: #fff; background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); }
/* red */
.red { color: #fff; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); }
.red:hover { color: #eee; background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); }
/* blue */
.blue { color: #fff; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); }
.blue:hover { color: #fff; background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); }
/* rosy */
.rosy { color: #fff; border: solid 1px #b73948; background: #da5867; background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); background: -moz-linear-gradient(top, #f16c7c, #bf404f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f'); }
.rosy:hover { color: #fff; background: #ba4b58; background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)); background: -moz-linear-gradient(top, #cf5d6a, #a53845); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845'); }
/* green */
.green { color: #fff; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); }
.green:hover { color: #fff; background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); background: -moz-linear-gradient(top, #6b9d28, #436b0c); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); }
/* pink */
.pink { color: #000; border: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)); background: -moz-linear-gradient(top, #feb1d3, #f171ab); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab'); }
.pink:hover { color: #000; background: #d57ea5; background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); background: -moz-linear-gradient(top, #f4aacb, #e86ca4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4'); }
h1, h2, h3, h4, h5, h6, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
.clear { clear: both; }
.toroku_lp { text-align: center; padding-top: 20px; padding-bottom: 20px; background: transparent; }
.toroku_lp img { width: 90%; padding: 0; }
/*-----------------------------
ダウンロードボタン
-----------------------------*/
.download_button { height: 30px; width: 40%; margin: 0 auto; background-color: #962929; background: -webkit-gradient(linear, left top, left bottom, from(#fa2e2e), to(#962929)); background: -moz-linear-gradient(top, #fa2e2e, #962929); border: solid 1px #962929; border-radius: 10px; box-shadow: 0 -1px 2px #ff7c7c inset; }
.download_button a { text-decoration: none; text-align: center; display: block; color: #fff; font-weight: bold; line-height: 30px; text-shadow: 0 2px 0 #962929; }
/*-----------------------------
退会確認ボタン
-----------------------------*/
.taikai_no { height: 30px; width: 50%; margin: 0 auto; background-color: #091980; background: -webkit-gradient(linear, left top, left bottom, from(#8edef8), to(#091980)); background: -moz-linear-gradient(top, #8edef8, #091980); border: solid 1px #091980; border-radius: 10px; box-shadow: 0 -1px 2px #509aff inset; }
.taikai_no a { text-decoration: none; text-align: center; display: block; color: #fff; font-weight: bold; line-height: 30px; text-shadow: 0 2px 0 #091980; }
.taikai_yes { height: 30px; width: 50%; margin: 0 auto; background-color: #850404; background: -webkit-gradient(linear, left top, left bottom, from(#f69c66), to(#850404)); background: -moz-linear-gradient(top, #f69c66, #850404); border: solid 1px #850404; border-radius: 10px; box-shadow: 0 -1px 2px #ff5050 inset; }
.taikai_yes a { text-decoration: none; text-align: center; display: block; color: #fff; font-weight: bold; line-height: 30px; text-shadow: 0 2px 0 #850404; }
/*動画チェキ*/
.toroku22 { /*background: #ffffff; background: -webkit-gradient(linear, left top, left bottom, from(#c3f0ff), to(#8be2fe)); background: -moz-linear-gradient(top, #c3f0ff, #8be2fe);*/
  text-align: center; padding-top: 20px; padding-bottom: 20px; }
.toroku22 img { width: 85%; padding: 0; }
.toroku22 a { color: #ffd500; font-size: 30px; font-weight: bold; }
.list_more22 img { width: 90%; }
.manage_body { padding: 10px; }
.content_title { font-size: 1.2rem; padding: 10px 0; }
/* TABLE detail START */
table.manage_detail { width: 320px; border: 1px #A3A3A3 solid; border-collapse: collapse; border-spacing: 0; }
table.manage_detail th { padding: 5px; border: #A3A3A3 solid; border-width: 0 0 1px 1px; background: #E3E3E3; font-weight: bold; line-height: 120%; text-align: right; white-space: nowrap; }
table.manage_detail th.error { padding: 5px; border: #A3A3A3 solid; border-width: 0 0 1px 1px; background: #FF6666; font-weight: bold; line-height: 120%; text-align: right; white-space: nowrap; }
table.manage_detail td { padding: 5px; border: 1px #A3A3A3 solid; border-width: 0 0 1px 1px; }
table.manage_detail td.inner { text-align: center; padding: 0; border: none; white-space: nowrap; }
/* TABLE detail END */
/* TABLE LIST START */
table.manage_list { width: 320px; border-color: #A3A3A3; border-style: solid; border-width: 1px; border-collapse: collapse; border-spacing: 0; }
table.manage_list th { padding: 3px; background: #e3e3e3; font-weight: normal; line-height: 120%; text-align: center; white-space: nowrap; border-color: #A3A3A3; border-style: solid; border-width: 1px; text-decoration: none; }
table.manage_list th a:link, a:visited { text-decoration: none; }
table.manage_list tr:hover td { background: #efefef; }
table.manage_list td { padding: 3px; border-color: #A3A3A3; border-style: solid; border-width: 1px; }
/* TABLE LIST END */
div.pagination { padding: 3px; margin: 15px; text-align: center; }
div.pagination a { border: 1px solid #dedfde; margin-right: 3px; padding: 6px 9px; background-color: #ffffff; background-position: bottom; text-decoration: none; color: #962929; }
div.pagination span { margin-right: 3px; padding: 6px 9px; background-position: bottom; background-color: #ffffff; border: 1px solid #dedfde; background-image: none; background-color: #962929; color: #fff; }
div.pagination a:hover, div.meneame a:active { border: 1px solid #000; background-image: none; background-color: #962929; color: #fff; }
/**************************/
/* PHP Rails scaffold.css */
/**************************/
/*
http://predic8.com/iphone-css-layout-theme.htm
http://connecre.com/connelog/connelog00000172.php
*/
/* HTML BASIC START */
body { margin: 0; padding: 0
}
a: { text-decoration: none; }
.b { font-weight: bold; }
.cWhite { color: #fff; }
.cBlue { color: #00adee; }
.m0 { margin: 0; }
.m5 { margin: 5px; }
.m10 { margin: 10px; }
.mT5 { margin-top: 5px; }
.mT10 { margin-top: 10px; }
.mB5 { margin-bottom: 5px; }
.mB10 { margin-bottom: 10px; }
.mL5 { margin-left: 5px; }
.mL10 { margin-left: 10px; }
.mR5 { margin-right: 5px; }
.mR10 { margin-right: 10px; }
.p0 { padding: 0; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.pT5 { padding-top: 5px; }
.pT10 { padding-top: 10px; }
.pB5 { padding-bottom: 5px; }
.pB10 { padding-bottom: 10px; }
.pL5 { padding-left: 5px; }
.pL10 { padding-left: 10px; }
.pR5 { padding-right: 5px; }
.pR10 { padding-right: 10px; }
.nb { white-space: nowrap; }
.aL { text-align: left; }
.aC { text-align: center; }
.aR { text-align: right; }
/* HTML BASIC END */
* { word-break: break-all; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(255, 255, 0, 0.4); -webkit-text-size-adjust: none; }
body { color: #333333; font-size: 15px; line-height: 1.3; font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3"; /* iPhoneバンドル */
  -webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
}

/* clearfix */ :after { display: block; clear: both; }
em { color: #db0000; }
p { margin: 0 0 10px 0; padding: 0; }
form { margin-top: 0px; margin-bottom: 0px; }
h1 { background: -webkit-gradient(linear, left top, left bottom, from(#ffe1ec), to(#f7a9c5)); background: -moz-linear-gradient(top, #ffe1ec, #f7a9c5); /*
  clear:both; margin:0 0 7px; padding:7px 0 5px 7px; box-shadow: 1px 1px 2px #BCBBBB; -webkit-box-shadow: 1px 1px 2px #962929; -moz-box-shadow: 1px 1px 2px #962929; background: linear-gradient(#b4bfce, #6d83a1) repeat scroll 0 0 transparent;
*/
  margin: 0 0 15px 0; height: 34px; font-size: 18px; text-shadow: 0px 1px 1px #e0467d; border-bottom: 1px solid #e0467d; color: white; padding: 9px 0 0 0; text-align: center; }
h2 { text-align: left; font-size: 17px; margin-left: 12px; padding: 10px 0; margin: 0; }
.btn-left { white-space: nowrap; position: absolute; top: 0; left: 0; padding: 7px; }
.btn-left a { background: -moz-linear-gradient(#da5672, #ff95ab); background: -webkit-gradient(linear, 0 0%, 0 100%, from(#da5672), to(#ff95ab)); box-shadow: 1px 1px 1px 0px #ff8ca4 inset; text-shadow: 0px -1px 1px #b93c57; border: 1px solid #b93c57; border-radius: 4px; font: bold 12px Arial; text-align: center; line-height: 28px; color: white; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: white; padding: 8px 5px; text-decoration: none; min-width: 30px; width: auto !important; width: 30px; }
.btn-right { white-space: nowrap; position: absolute; top: 0; right: 0; padding: 7px; }
.btn-right a { background: -moz-linear-gradient(#e66a6a, #f39797); background: -webkit-gradient(linear, 0 0%, 0 100%, from(#e66a6a), to(#f39797)); box-shadow: 1px 1px 1px 0px #db5e5e inset; text-shadow: 0px -1px 1px #9b5353; border: 1px solid #932121; border-radius: 4px; font: bold 12px Arial; text-align: center; line-height: 28px; color: white; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: white; padding: 8px 5px; text-decoration: none; min-width: 30px; }
input[type="checkbox"], input[type="radio"], select { display: inline; vertical-align: baseline; margin-right: 5px; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; }
input[type="text"], input[type="password"] { color: #5a5c63; font-size: 100%; width: 100%; padding: 3px; }
select { color: #5a5c63; font-size: 100%; padding: 3px; }
textarea { color: #5a5c63; font-size: 100%; width: 100%; height: 100px; padding: 3px; margin-bottom: 10px; }
#footer { text-align: center; }
table.detail { border-spacing: 0 3px; width: 100%; padding: 0 10px 0 10px; empty-cells: show; }
table.detail th { text-align: left; border-color: #878787; border-style: solid; border-width: 1px 0 1px 1px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding: 0 10px 0 10px; background-color: #fff; padding: 10px; }
table.detail td { border-color: #878787; border-style: solid; border-width: 1px 1px 1px 0; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background-color: #fff; }
table.detail input[type="text"], table.detail input[type="password"] { border: 0; }
/* TABLE LIST START */
table.list { width: 100%; border-color: #A3A3A3; border-style: solid; border-width: 0px 1px 1px 1px; border-collapse: collapse; border-spacing: 0; font-size: 70%; }
table.list th { padding: 1px; border-top: 2px #627EB7 solid; border-bottom: 2px #000000 solid; border-left: 1px #FFFFFF solid; background: #e3e3e3; font-weight: normal; line-height: 120%; text-align: center; white-space: nowrap; }
table.list th a:link { text-decoration: none; }
table.list th a:visited { text-decoration: none; }
table.list tr:hover td { background: #f5d4cc; /*  color: #FFFFFF; */
}
table.list td { padding: 1px; border: 1px #eeeeee solid; border-width: 0 0 1px 1px; }
table.list td.manage { padding: 1px; /*
  border: 1px #A3A3A3 solid; border-width: 0 0 1px 1px;
*/
  white-space: nowrap; }
/* TABLE LIST END */
/* TABLE LIST_IMAGE START */
table.list_image { border-collapse: collapse; border-spacing: 0; font-size: 85%; }
table.list_image th { padding: 5px; /*
  border-bottom: 1px #aaaaaa solid;
*/
  font-weight: normal; line-height: 120%; text-align: center; }
table.list_image tr:hover td.item { background: #f5d4cc; }
table.list_image td.item { padding: 5px; }
table.list_image td.manage { padding: 5px; border-top: 1px #A3A3A3 solid; text-align: center; }
/* TABLE LIST_IMAGE END */
/* LIST LINK START */
ul.link { font-size: 12pt; padding: 0; height: auto; width: auto; list-style: none; }
.link li { /*
  border-color:#878787; border-style:solid; border-width:0 0 1px 0; background-color: white; font-weight: bold; 
*/
}
ul.link li.arrow, ul.link li.icon_arrow { background-image: url("/images/sp/arrow.png"); background-position: right center; background-repeat: no-repeat; }
ul.link li.arrow a, ul.link li.arrow a:active { background: none; padding: 12px 15px; display: block; width: auto; text-decoration: none; color: black; }
ul.link li.icon_arrow a, ul.link li.icon_arrow a:active { background: none; padding: 5px 15px; display: block; width: auto; text-decoration: none; color: black; }
ul.link li.arrow_blue { background-image: url("/images/sp/arrow_blue.png"); background-position: right center; background-repeat: no-repeat; }
/*
blue from(#058cf5), to(#015fe6)
red from(#ff3333), to(#990000)
*/
/*
ul.link li.arrow a:hover,
ul.link li.icon_arrow a:hover{ background: url("/images/sp/arrow.png") right center no-repeat, -webkit-gradient(linear, 0 0%, 0 100%, from(#058CF5), to(#015FE6)); background: url("/images/sp/arrow.png") right center no-repeat, -moz-linear-gradient(#058CF5, #015FE6); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#058CF5', endColorstr='#015FE6'); color: white; text-shadow: 0px -1px 1px #000; background: url("/images/sp/arrow.png") right center no-repeat,
}
/*
ul.link li.arrow.blue a:hover{ background: url("/images/sp/arrow.png") right center no-repeat, -webkit-gradient(linear, 0 0%, 0 100%, from(#00adee), to(#0078a5)); background: url("/images/sp/arrow.png") right center no-repeat, -moz-linear-gradient(#00adee, #0078a5); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); color: white;

  text-shadow: 0px -1px 1px #000; background: url("/images/sp/arrow.png") right center no-repeat,
}
*/
ul.link li span.right { position: absolute; right: 45px; text-align: right; color: #385487; font-weight: normal; }
ul.link li.title { padding: 12px 15px; display: block; width: auto; text-decoration: none; }
ul.link li img.icon { background: none; padding: 0 10px 0 0; width: 35px; height: 35px; text-decoration: none; vertical-align: -12px; }
/* LIST LINK END */
/* LIST TEXT START */
ul.text { font-size: 12pt; padding: 0; height: auto; width: auto; list-style: none; }
ul.text li { border-color: #878787; border-style: solid; border-width: 1px 0 1px 0; margin-bottom: -2px; }
ul.text li span.right { position: absolute; right: 45px; text-align: right; color: #385487; font-weight: normal; }
/* LIST TEXT END */
/* LIST RADIUS START */
ul.radius { font-size: 12px; padding: 0; line-height: 1.5; height: auto; width: auto; list-style: none; }
.radius2 { font-size: 12px; padding: 10px; line-height: 1.5; }
ul.radius li { padding: 10px; margin: 10px; border-style: solid; border-width: 1px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; }
ul.radius li span.right { position: absolute; right: 45px; text-align: right; color: #385487; font-weight: normal; }
/* LIST RADIUS END */
#top { width: 100%; height: auto; background: none; margin: 0; padding: 0; border: none; }
#top_button { width: 100%; height: 30px; background: #444; display: table; table-layout: fixed; }
#top_button li { display: table-cell; height: 30px; box-sizing: border-box; text-align: center; line-height: 30px; background: #962929; background: -webkit-gradient(linear, left top, left bottom, from(#d73b3b), color-stop(0.7, #7c2222), to(#962929)); background: -moz-linear-gradient(top, #d73b3b, #7c2222 70%, #962929); border: solid 1px #444; }
#top_button li img { vertical-align: text-bottom; }
#top_button li a { display: block; font-size: 12px; color: #fff; font-weight: bold; text-decoration: none; }
#top_menu { width: 100%; padding: 10px 0; background: #7f7f7f; }
#top_menu li { width: 25%; float: left; text-align: center; }
#top_menu li img { width: 95%; }
.naiyo { font-size: 14px; line-height: 16px; }
/*ul.link li.arrow2{ background-image: url("/images/sp/arrow.png"); background-position: right center; background-repeat: no-repeat; }*/
ul.link li.arrow2 a, ul.link li.arrow2 a:active { background-image: url("/images/sp/arrow.png"); background-position: right center; background-repeat: no-repeat; padding: 10px; display: block; width: auto; text-decoration: none; color: #FFF; }
/*-----------------------
ランキング
-----------------------*/
.rank1, .rank2, .rank3 { padding: 1px 0; font-size: 16px; font-weight: bold; }
.ranking a { text-decoration: none; }
.rank_thum { width: 100%; max-width: 100px; }
.rank1 { color: #c8a826; text-shadow: 1px 1px 0 #604807; background: -webkit-gradient(linear, left top, left bottom, from(#e2db93), color-stop(0.3, #fdfad5), color-stop(0.4, #ffffff), color-stop(0.55, #f2ecaa), color-stop(0.7, #f2ecaa), to(#e2df8e)); background: -moz-linear-gradient(top, #e2db93, #fdfad5 30%, #ffffff 40%, #f2ecaa 55%, #f2ecaa 70%, #e2df8e); border: solid 1px #74744d; border-radius: 3px; }
.rank2 { color: #b3b3b3; text-shadow: 1px 1px 0 #505050; background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), color-stop(0.3, #f6f6f6), color-stop(0.4, #ffffff), color-stop(0.55, #f0f0f0), color-stop(0.7, #f0f0f0), to(#cecece)); background: -moz-linear-gradient(top, #d6d6d6, #f6f6f6 30%, #ffffff 40%, #f0f0f0 55%, #f0f0f0 70%, #cecece); border: solid 1px #717171; border-radius: 3px; }
.rank3 { color: #af6719; text-shadow: 1px 1px 0 #603107; background: -webkit-gradient(linear, left top, left bottom, from(#e2b893), color-stop(0.3, #fdecd5), color-stop(0.4, #ffffff), color-stop(0.55, #f2d8aa), color-stop(0.7, #f2d8aa), to(#e2b58e)); background: -moz-linear-gradient(top, #e2b893, #fdecd5 30%, #ffffff 40%, #f2d8aa 55%, #f2d8aa 70%, #e2b58e); border: solid 1px #745e4d; border-radius: 3px; }
.rank_title { width: 100px; display: block; padding: 10px 0 0 0; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*-----------------------
ジャンル
-----------------------*/
ul.genre li { width: 50%; float: left; font-size: 11px; box-sizing: border-box; }
ul.genre li:nth-child(2n) { border-left: solid 1px #d5d5d5; }
/*-----------------------
コミック詳細ページ
-----------------------*/
.book_info { width: 95%; margin-top: 20px; margin-left: auto; margin-right: auto; }
.book_image { width: 100px; }
.book_info table { border-collapse: collapse; width: 100%; }
.book_info table tr { border-bottom: solid 1px #bdbdbd; }
.book_info table th { height: 30px; width: 60px; padding-right: 5px; }
table.book_info table { font-size: 14px; }
.series { width: 95%; border: solid 1px #8fca00; border-radius: 3px; margin: 15px auto; }
h2.series_title { background-color: #8fca00; color: #fff; padding: 5px 0 5px 10px; margin: 0 auto; }
p.outline { padding: 5px 10px 5px 10px; }
.series_list { background: #fcdce8; padding: 10px; border-bottom: solid 1px #d5d5d5; }
.series_list td::after { content:""; display: block; clear: both; }
.series_list_name  { }
.series_list_point  { text-align: right; }
/*-----------------------------
一覧ページ
-----------------------------*/
.ichiran_list { width: 100%; padding: 3px 0; background: #e49898; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6)); background: -moz-linear-gradient(top, #ffffff, #e6e6e6); padding: 7px 0; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #b0b0b0; }
/*-----------------------------
ダウンロードページ
-----------------------------*/
.book_info .download_info { font-size: 13px; }
.book_info .download_info th { font-weight: bold; color: #8fca00; width: 60px; }
.attention { width: 90%; border: solid 2px #8fca00; border-radius: 3px; padding: 5px; margin: 10px auto 10px auto; }
.download_back { border-top: solid 1px #8fca00; border-bottom: solid 1px #8fca00; background: #ffedf3; }
.download_back a { text-decoration: none; display: block; color: #8fca00; padding: 8px; }
.download_back a:link, .download_back a:vitited { color: #962929; }
/*---------------------------
__footer
---------------------------*/
#footer { padding: 5px 0 5px 0; color: #404759; font-weight: bold; background-color: #e6e6e6; }
#footer-base { margin: 0; padding: 2px 0; text-align: center; background-color: #f7a9c5; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; font-size: 13px; }
#footer-base #footer-nav { display: table; height: 14px; margin: 3px auto 3px; padding: 5px; width: 97%; background-color: #ffffff; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #a9d2f5; border-bottom-color: #a9d2f5; color: #a9d2f5; }
#footer-base small { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
/*動画チェキ*/
.container { background: #ffebf9; }
#header22 { width: 100%; height: auto; position: relative; }
h1#top22 { height: auto; margin: 0; padding: 10px; background: none; color: #ffffff; font-size: 25px; border: none; text-align: left; }
h1#top22 img { max-width: 300px; display: block;  margin: auto;  height: auto; }
.header22_b { margin: 0; padding: 0; list-style: none; height: 65px; position: absolute; bottom: 12px; right: 7px; }
.header22_b li { margin-left: 5px; float: left; }
h3.title_22, h2.title_22 { color: #ffffff; background: #8fca00; padding: 5px 0 5px 10px; text-shadow: 1px 1px 0 #5d8400; border-top: solid 1px #5d8400; border-bottom: solid 1px #5d8400; }
.title_img { margin: 0; padding: 0; }
.title_img img { width: 100%; }
ul.link li.list_22 { margin-bottom: 0; background: none;  border: none; }
.genre { border-top: solid 1px #bababa; }
ul.genre li.list_22 { background: -webkit-linear-gradient(top, #fbfbfb, #eeeeee); background: -moz-linear-gradient(top, #fbfbfb, #eeeeee); background: linear-gradient(top, #fbfbfb, #eeeeee); border-bottom: solid 1px #bababa; }
ul.genre li.list_22:nth-child(2n+1) { border-right: solid 1px #bababa; }
ul.link li.list_22 a, ul.link li.list_22 table { color: #585858; }
ul.link li.list_22 .list_title { color: #ffffff; }
ul.link li.list_more22 { background: rgba(255, 255, 255, 0.5); color: #2e2e2e; border: none; padding: 0; }
ul.link li.list_more22 a { color: #585858; }
#menu .list_28 { background: #ffcbdf; border-bottom: solid 1px #727272; }
#container_lp { background-image: url(/images/back.png); background-repeat: repeat; background-size: 45px 45px; }
h1#top26 { width: 100%; height: auto; margin: 0; padding: 0; background: none; border: none;  text-align: left; }
h1#top26 img { width: 100%; }
.container { background: #f0f7ff; }
#menu .list_28 { background: #0077b3; border-bottom: solid 1px #ffffff; }
#footer-base { background-color: #ffffff; }
ul.link li.list_22 { border-bottom: solid 1px #000; }
.title_img { background: #1f3666; padding: 10px 0; text-align: center; color: #fff; }
h3.title_22, h2.title_22 { background: #1f3666; }
#top_button { width: 100%; height: 25px; list-style: none; margin: 0; padding: 0; display: table; table-layout: fixed; }
#top_button li { display: table-cell; height: 25px; box-sizing: border-box; text-align: center; line-height: 25px; background: #c2c2c2; background: -webkit-gradient(linear, left top, left bottom, from(#82d0f9), color-stop(0.7, #4ba6d5), to(#8ed2f6)); background: -moz-linear-gradient(top, #82d0f9, #4ba6d5 70%, #8ed2f6); border: solid 1px #283873; }
#top_button li a { display: block; font-size: 12px; color: #ffffff; text-shadow: 0 1px 0 #5e5e5e; font-weight: bold; text-decoration: none; }
.list_22 td { padding: 5px; }
.list_thum { overflow: hidden; position: relative; width: 100px; height: 100px; margin: auto; border-radius: 20px; }
.list_thum img { position: absolute; top:25%; left: 0; width: 100%; transform: scale(2.5); display: block; }
.form_search { padding: 10px; }
.form_search input:nth-child(1) { width: 79%; margin-right: 1% }
.form_search input:nth-child(2) { width: 20%; vertical-align: bottom; }
.qa { margin: 10px 0 !important; line-height: 1.5; }
.qa h3 { padding: 5px 0px 5px 5px; margin: 10px 0px 10px 0px; }
@media (min-width: 480px) {
  body , .container { width: 375px; margin: auto; }
}