html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font: 62.5%/2 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
  color: #555555;
  -webkit-text-size-adjust: 100%;
}

img {
  vertical-align: top;
  max-width: 100%;
}

sup {
  vertical-align: super;
  font-size: xx-small;
}

sub {
  vertical-align: sub;
  font-size: xx-small;
}

body > .outline {
  font-size: 1.4em;
}

.sub_part {
  color: #dddddd;
}

/*--------------------------------------
  パーツモジュール
--------------------------------------*/
/* 見出し
--------------------------------------*/
.mod-article > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-section > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-section > .mod-section > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-weight: bold;
  margin-bottom: 15px;
}

/* リンク
------------------------------------------------------- */
a {
  color: #5555dd;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
  cursor: pointer;
  color: #7f7fe6;
}
a:visited {
  color: #2a2ad5;
}
a[target="_blank"]:after {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px -20px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  vertical-align: middle;
}
a.pdf:after, ul.mod-list.-link > li.sub a.pdf:after {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px -70px no-repeat;
  display: inline-block;
  width: 12px;
  height: 13px;
  margin-left: 5px;
  vertical-align: middle;
}
a.noicon[target="_blank"]:after {
  content: none;
  display: inline-block;
  width: 0;
  background: transparent;
}

/* ボタン
------------------------------------------------------- */
.mod-button > a {
  display: block;
  margin: 0 !important;
}

/* リスト
------------------------------------------------------- */
ul.mod-list > li.sub, ol.mod-list > li.sub {
  padding-left: 1.5em;
}

ul.mod-list.-dot > li.sub {
  margin: 0.5em 0;
  list-style-type: none;
}
ul.mod-list.-dot > li.sub:before {
  content: '・';
  font-size: larger;
  font-weight: bold;
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
  margin-left: -1.5em;
  vertical-align: middle;
}

ul.mod-list.-note {
  color: #888888;
}
ul.mod-list.-note > li.sub {
  margin: 0.5em 0;
  list-style-type: none;
}
ul.mod-list.-note > li.sub:before {
  content: '※';
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
  margin-left: -1.5em;
  vertical-align: middle;
}

ol.mod-list.-num {
  counter-reset: olcount 0;
}
ol.mod-list.-num > li.sub {
  margin: 0.5em 0;
  list-style-type: none;
}
ol.mod-list.-num > li.sub:before {
  content: counter(olcount,decimal) ". ";
  counter-increment: olcount 1;
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
  margin-left: -1.5em;
}

ol.mod-list.-num.-note {
  counter-reset: olcount 0;
  color: #888888;
}
ol.mod-list.-num.-note > li.sub {
  margin: 0.5em 0;
  list-style-type: none;
}
ol.mod-list.-num.-note > li.sub:before {
  content: "※" counter(olcount,decimal) ". ";
  counter-increment: olcount 1;
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
  margin-left: -1.5em;
}

ul.mod-list.-link > li.sub {
  margin: 0.5em 0;
}
ul.mod-list.-link > li.sub a {
  margin-left: -10px;
}
ul.mod-list.-link > li.sub a:before {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') 0 -20px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
ul.mod-list.-link > li.sub.up {
  padding: 0 10px;
}
ul.mod-list.-link > li.sub.up a {
  margin: 0;
}
ul.mod-list.-link > li.sub.up a:before {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') 0 -60px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
ul.mod-list.-link > li.sub.down {
  padding: 0 10px;
}
ul.mod-list.-link > li.sub.down a {
  margin: 0;
}
ul.mod-list.-link > li.sub.down a:before {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px -30px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
ul.mod-list.-link > li.sub.prev {
  padding: 0 10px;
}
ul.mod-list.-link > li.sub.prev a {
  margin: 0;
}
ul.mod-list.-link > li.sub.prev a:before {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px -50px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
ul.mod-list.-link > li.sub.next {
  padding: 0 10px;
}
ul.mod-list.-link > li.sub.next a {
  margin: 0;
}
ul.mod-list.-link > li.sub.next a:before {
  content: none;
}
ul.mod-list.-link > li.sub.next a:after {
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') 0 -40px no-repeat;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

ul.mod-list.-date > li.sub {
  margin: 0.5em 0;
}
ul.mod-list.-date > li.sub > span.date {
  float: left;
  padding-right: 10px;
}
ul.mod-list.-date > li.sub > div {
  overflow: hidden;
}

ul.mod-list.-horizontal > li.sub,
ol.mod-list.-horizontal > li.sub,
ol.mod-list.-num.-note.-horizontal > li.sub {
  display: inline-block;
}

/* テキスト
--------------------------------------*/
p.mod-para {
  margin: 0 0 1em;
}
p.mod-para.-lead {
  margin: 0 0 1em;
  font-size: 1.14286em;
}

p.mod-caption {
  margin: 0.5em 0 0;
  font-size: 0.85714em;
  line-height: 1.5em;
}

.mod-bold {
  font-weight: bold;
}

.mod-strong {
  color: #aa0000;
  font-weight: bold;
}

.mod-accent {
  color: #BF62EB;
}

.mod-attention {
  color: #aa0000 !important;
}

/* セクション
------------------------------------------------------- */
.mod-article {
  margin-bottom: -50px;
}

.mod-section {
  margin: 0 0 50px 0;
}

/* 画像
------------------------------------------------------- */
p.mod-image {
  text-align: center;
}

> img {
  display: inline-block;
  border: none;
}

/* table
------------------------------------------------------- */
table.mod-table th, table.mod-table td {
  border: 1px solid #888888;
  padding: 5px 10px;
  background: white;
  line-height: 1.5em;
  color: #555555;
}
table.mod-table th {
  background: #dddddd;
  color: #555555;
}
table.mod-table thead th {
  background: #aaaaaa;
  color: #555555;
}

/* mod-dl
------------------------------------------------------- */
dl.mod-dl {
  margin-bottom: 20px;
}
dl.mod-dl > dd {
  color: #555555;
}
dl.mod-dl > dt {
  color: #555555;
}
dl.mod-dl.-block {
  border: 1px solid #888888;
}
dl.mod-dl.-block > dd {
  padding: 5px 10px;
  background: white;
  border-top: 1px dotted #888888;
  line-height: 1.5em;
}
dl.mod-dl.-block > dd + dt {
  border-top: 1px solid #888888;
}
dl.mod-dl.-block > dt {
  padding: 5px 10px;
  background: #dddddd;
  line-height: 1.5em;
}
dl.mod-dl.-block > dt + dd {
  border-top: 1px solid #888888;
}

/* margin
------------------------------------------------------- */
.st-rm {
  margin: 0 !important;
}

.st-rmTop {
  margin-top: 0 !important;
}

.st-rmBottom {
  margin-bottom: 0 !important;
}

.st-rmLeft {
  margin-left: 0 !important;
}

.st-rmRight {
  margin-right: 0 !important;
}

.st-addTopXS {
  margin-top: 3px !important;
}

.st-addTopSS {
  margin-top: 5px !important;
}

.st-addTopS {
  margin-top: 10px !important;
}

.st-addTopM {
  margin-top: 15px !important;
}

.st-addTopL {
  margin-top: 20px !important;
}

.st-addTopLL {
  margin-top: 30px !important;
}

.st-addTopXL {
  margin-top: 50px !important;
}

.st-addBottomXS {
  margin-bottom: 3px !important;
}

.st-addBottomSS {
  margin-bottom: 5px !important;
}

.st-addBottomS {
  margin-bottom: 10px !important;
}

.st-addBottomM {
  margin-bottom: 15px !important;
}

.st-addBottomL {
  margin-bottom: 20px !important;
}

.st-addBottomLL {
  margin-bottom: 30px !important;
}

.st-addBottomXL {
  margin-bottom: 50px !important;
}

.st-addLeftXS {
  margin-left: 3px !important;
}

.st-addLeftSS {
  margin-left: 5px !important;
}

.st-addLeftS {
  margin-left: 10px !important;
}

.st-addLeftM {
  margin-left: 15px !important;
}

.st-addLeftL {
  margin-left: 20px !important;
}

.st-addLeftLL {
  margin-left: 30px !important;
}

.st-addLeftXL {
  margin-left: 50px !important;
}

.st-addRightXS {
  margin-right: 3px !important;
}

.st-addRightSS {
  margin-right: 5px !important;
}

.st-addRightS {
  margin-right: 10px !important;
}

.st-addRightM {
  margin-right: 15px !important;
}

.st-addRightL {
  margin-right: 20px !important;
}

.st-addRightLL {
  margin-right: 30px !important;
}

.st-addRightXL {
  margin-right: 50px !important;
}

/* padding
------------------------------------------------------- */
.st-rmPad {
  padding: 0 !important;
}

.st-rmPadTop {
  padding-top: 0 !important;
}

.st-rmPadBottom {
  padding-bottom: 0 !important;
}

.st-rmPadLeft {
  padding-left: 0 !important;
}

.st-rmPadRight {
  padding-right: 0 !important;
}

.st-addPadTopXS {
  padding-top: 3px !important;
}

.st-addPadTopSS {
  padding-top: 5px !important;
}

.st-addPadTopS {
  padding-top: 10px !important;
}

.st-addPadTopM {
  padding-top: 15px !important;
}

.st-addPadTopL {
  padding-top: 20px !important;
}

.st-addPadTopLL {
  padding-top: 30px !important;
}

.st-addPadTopXL {
  padding-top: 50px !important;
}

.st-addPadBottomXS {
  padding-bottom: 3px !important;
}

.st-addPadBottomSS {
  padding-bottom: 5px !important;
}

.st-addPadBottomS {
  padding-bottom: 10px !important;
}

.st-addPadBottomM {
  padding-bottom: 15px !important;
}

.st-addPadBottomL {
  padding-bottom: 20px !important;
}

.st-addPadBottomLL {
  padding-bottom: 30px !important;
}

.st-addPadBottomXL {
  padding-bottom: 50px !important;
}

.st-addPadLeftXS {
  padding-left: 3px !important;
}

.st-addPadLeftSS {
  padding-left: 5px !important;
}

.st-addPadLeftS {
  padding-left: 10px !important;
}

.st-addPadLeftM {
  padding-left: 15px !important;
}

.st-addPadLeftL {
  padding-left: 20px !important;
}

.st-addPadLeftLL {
  padding-left: 30px !important;
}

.st-addPadLeftXL {
  padding-left: 50px !important;
}

.st-addPadRightXS {
  padding-right: 3px !important;
}

.st-addPadRightSS {
  padding-right: 5px !important;
}

.st-addPadRightS {
  padding-right: 10px !important;
}

.st-addPadRightM {
  padding-right: 15px !important;
}

.st-addPadRightL {
  padding-right: 20px !important;
}

.st-addPadRightLL {
  padding-right: 30px !important;
}

.st-addPadRightXL {
  padding-right: 50px !important;
}

/* position
------------------------------------------------------- */
.st-blockCenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

.st-blockLeft {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.st-blockRight {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.st-floatLeft {
  float: left  !important;
}

.st-floatRight {
  float: right !important;
}

.st-clearfix {
  *zoom: 1;
}
.st-clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.st-inlineCenter {
  text-align: center !important;
}

.st-inlineLeft {
  text-align: left   !important;
}

.st-inlineRight {
  text-align: right  !important;
}

/* 見出し
--------------------------------------*/
.mod-article {
  margin-bottom: 0;
}
.mod-article > .mod-headline {
  font-size: 1.42857em;
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-article > .mod-headline > .sub {
  padding-left: 10px;
}
.mod-article > .mod-section > .mod-headline {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: 1px solid #ccc;
}
.mod-article > .mod-section > .mod-headline > .sub {
  padding-left: 10px;
}
.mod-article > .mod-section > .mod-section > .mod-headline {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  border-width: 0 0 1px 0;
}
.mod-article > .mod-section > .mod-section > .mod-headline > .sub {
  border-left: 5px solid #ccc;
  padding-left: 5px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  border-width: 0 0 1px 0;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-headline > .sub {
  padding-left: 10px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: none;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline > .sub {
  border-left: 5px solid #ccc;
  padding-left: 5px;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: none;
}
.mod-article > .mod-section > .mod-section > .mod-section > .mod-section > .mod-section > .mod-headline > .sub {
  padding-left: 10px;
}

.mod-headline.lv1 {
  font-size: 1.42857em;
  font-weight: bold;
  margin-bottom: 15px;
}
.mod-headline.lv1 > .sub {
  padding-left: 10px;
}
.mod-headline.lv2 {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: 1px solid #ccc;
}
.mod-headline.lv2 > .sub {
  padding-left: 10px;
}
.mod-headline.lv3 {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  border-width: 0 0 1px 0;
}
.mod-headline.lv3 > .sub {
  border-width: 0 0 0 0;
  padding: 0 0 0 0;
  border-left: solid #ccc;
  padding-left: 5px;
}
.mod-headline.lv4 {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  border-width: 0 0 1px 0;
}
.mod-headline.lv4 > .sub {
  padding-left: 10px;
}
.mod-headline.lv5 {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: none;
}
.mod-headline.lv5 > .sub {
  border-width: 0 0 0 0;
  padding: 0 0 0 0;
  border-left: 5px solid #ccc;
  padding-left: 5px;
}
.mod-headline.lv6 {
  font-size: 1.14286em;
  font-weight: bold;
  margin-bottom: 15px;
  border: none;
}
.mod-headline.lv6 > .sub {
  padding-left: 10px;
}

/* ボタン
------------------------------------------------------- */
.mod-button {
  /*デフォルト*/
  display: inline-block;
  position: relative;
  border: 2px solid #bbb;
  margin-bottom: 10px;
}
.mod-button > a {
  display: block;
  padding: 5px 20px;
  background: #ddd;
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #555 !important;
  text-align: center;
}
.mod-button:after {
  content: "";
  display: block;
  border: 2px solid #bbb;
  width: 100%;
  height: 10px;
  background: #bbb;
  z-index: 1;
  position: absolute;
  bottom: -10px;
  left: -2px;
}
.mod-button:hover > a {
  background: #fff;
}
.mod-button:active {
  top: 5px;
}
.mod-button:active:after {
  bottom: -5px;
}

/* mod-frame
------------------------------------------------------- */
.mod-frame {
  padding: 0 10px;
}
.mod-frame .top {
  padding: 10px 0;
  position: relative;
}
.mod-frame .top:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: url(../images/frameT.png) repeat-x;
}
.mod-frame .top:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: url(../images/frameB.png) repeat-x;
}
.mod-frame .top .sideBG {
  position: relative;
  margin: 0 -10px;
  padding: 0 10px;
}
.mod-frame .top .sideBG:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  background: url(../images/frameL.png) repeat-y;
}
.mod-frame .top .sideBG:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  background: url(../images/frameR.png) repeat-y;
}
.mod-frame .top .topC {
  position: relative;
}
.mod-frame .top .topC:before {
  position: absolute;
  top: -10px;
  left: -10px;
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px -10px no-repeat;
  display: block;
  width: 10px;
  height: 10px;
}
.mod-frame .top .topC:after {
  position: absolute;
  top: -10px;
  right: -10px;
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') 0 -30px no-repeat;
  display: block;
  width: 10px;
  height: 10px;
}
.mod-frame .top .bottomC {
  position: relative;
}
.mod-frame .top .bottomC:before {
  position: absolute;
  bottom: -10px;
  left: -10px;
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') 0 0 no-repeat;
  display: block;
  width: 10px;
  height: 10px;
}
.mod-frame .top .bottomC:after {
  position: absolute;
  bottom: -10px;
  right: -10px;
  content: "";
  background: url('../../common/images/sprites/common.png?YCRE') -10px 0 no-repeat;
  display: block;
  width: 10px;
  height: 10px;
}
.mod-frame .top .body {
  padding: 10px 10px;
}

body > script + img {
  display: none;
}

#sns ul {
  letter-spacing: -.40em;
  /* 文字間を詰めて隙間を削除する */
}
#sns ul li {
  letter-spacing: normal;
  /* 文字間を通常に戻す */
  display: inline-block;
  width: 120px;
  height: 20px;
  overflow: hidden;
}

body {
  background: url(/ex/cardcomic/common/images/bg.png);
  -moz-background-size: 15px auto;
  -o-background-size: 15px auto;
  -webkit-background-size: 15px auto;
  background-size: 15px auto;
}

.outline .xy img {
  width: 100%;
}
.outline .o-body-inner {
  background: #bfbfbf;
  padding: 5px;
}
.outline .o-footer {
  background: #000;
  position: relative;
  z-index: 1;
}

.mod-section {
  margin-bottom: 0 !important;
}

.pagetop {
  text-align: right;
  position: relative;
  z-index: 0;
}
.pagetop img {
  max-width: 50%;
  margin: 10px 10px -8% 10px;
}

.anchor {
  text-align: center;
  letter-spacing: -.4em;
  margin: 0 -4px;
}
.anchor li {
  letter-spacing: 0;
  display: inline-block;
  width: 33%;
  border: 4px solid transparent;
  border-width: 0 4px 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.movieArea {
  border: 1px solid #000;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 4px;
  background: #fff;
}
.movieArea .items {
  margin-bottom: 20px;
}
.movieArea .items .item {
  display: none;
}
.movieArea .slider.responsive {
  padding: 1px;
  margin: 0px 32px 0px;
  background: #000;
}
.movieArea .slider.responsive .slick-slide img {
  border: 0px solid #FFF;
  display: block;
  width: 100%;
}
.movieArea .slider.responsive .slick-prev {
  left: 10px;
}
.movieArea .slider.responsive .slick-next {
  right: 10px;
}

#story {
  background: #000;
  color: #fff;
}
#story .mod-para {
  margin: 0 10px;
}

.o-footer #sns {
  padding: 10px 10px 0px 10px;
}
.o-footer .copyright {
  color: #fff;
  font-size: 10px;
  line-height: 1.6em;
  padding: 10px;
}

#illustrated .mod-section#a4 {
  display: none;
}