@charset "UTF-8";
/*　変数設定のみを行う
**************************/
/*　基本設定
**************************/
body {
  background-color: #ffffff;
  color: #222222;
  font-family: Verdana, Roboto, "Droid Sans", " 游ゴシック", YuGothic, " メイリオ", Meiryo, " ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }
  body * {
    line-height: 1.6; }
  body p {
    word-wrap: break-word; }
  body a {
    color: #222222;
    cursor: pointer; }
    body a:hover {
      color: #222222 !important;
      text-decoration: none !important; }
  body a:hover img {
    cursor: pointer;
    opacity: 0.8; }
  body h1, body h2, body h3, body h4, body h5, body h6 {
    font-weight: bold;
    line-height: 1.4;
    margin-top: 0; }
  body dt {
    font-weight: normal; }

.m_btn_ora10:hover, .m_btn_ora10:active, .m_btn_ora10:visited {
  color: #fff !important; }

label {
  font-weight: normal !important; }

/*　@mixin
**************************/
/*　テンプレート共通
**************************/
footer {
  font-size: 14px; }
  footer a {
    color: #222; }

.breadcrumb {
  margin: 0 !important; }

/*　画像
**************************/
img {
  max-width: 100%; }

/*　テキスト
**************************/
.text-sm {
  font-size: 12px; }

.text-memo {
  color: #626262; }

.text-emphasis {
  font-weight: bold; }

/*　リスト
**************************/
ul {
  padding: 0; }

ul.notice {
  margin-bottom: 0; }
  ul.notice li {
    color: #626262;
    list-style-type: none;
    padding-left: 1.5em;
    text-indent: -1.5em; }
    ul.notice li:before {
      content: '※';
      margin-right: 5px; }

/*　ボタン
**************************/
.btn {
  border-radius: 2px;
  white-space: normal; }

.btn-md {
  height: auto;
  padding: 10px 20px;
  width: 100%;
  font-size: 16px; }

.btn-normal {
  background: #fa6218;
  border: none;
  box-shadow: 0 4px 0 0 #c8580d;
  color: #fff; }
  .btn-normal:hover, .btn-normal:active {
    background: #e0630f;
    color: #fff !important; }

.sns-wrap {
  padding: 0 4% 30px; }

.sns-btn {
  border-collapse: separate;
  border-spacing: 20px 0;
  display: table;
  height: 40px;
  margin: 0 auto 15px;
  padding: 0; }
  .sns-btn li {
    display: table-cell;
    vertical-align: top; }
    .sns-btn li .wrap-twitter-icon, .sns-btn li .wrap-line-icon {
      border-radius: 2px;
      display: block; }
    .sns-btn li .wrap-twitter-icon {
      background: #1DA1F2; }
    .sns-btn li .wrap-line-icon {
      background: #00b900; }

.osouji2018 {
  color: #484848;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

/* 大枠レイアウト
**************************/
.content-wrap {
  padding: 0 16px 56px; }

.box-block {
  padding: 0 !important; }

/*　個別設定
**************************/
h1 {
  margin-bottom: 0;
  text-align: center; }

h2 {
  border-bottom: solid 2px #484848;
  border-top: solid 2px #484848;
  margin-bottom: 32px;
  padding: 16px;
  font-size: 22px; }

h3 {
  background: #fef5f0;
  font-weight: bold;
  margin-bottom: 30px;
  padding: 24px 16px;
  font-size: 18px; }

.wrap-main {
  background: linear-gradient(#e2e2e2, #fff);
  padding: 24px 16px 32px; }

.copy {
  background: #e56c22;
  border-radius: 20px;
  color: #fff;
  display: table;
  font-weight: bold;
  margin: 0 auto 20px;
  padding: 2px 12px;
  text-align: center;
  font-size: 18px; }
  @media screen and (max-width: 320px) {
    .copy {
      font-size: 16px; } }

.manga-wrap {
  padding: 0 0 35px; }
  .manga-wrap img {
    margin-bottom: 10px; }

.lead {
  margin-bottom: 0;
  font-size: 18px; }

.wrap-category {
  margin: 0 0 50px; }
  .wrap-category img {
    border-radius: 4px;
    margin-bottom: 5px;
    width: 100%; }
  .wrap-category .ttl-category {
    font-size: 16px;
    font-weight: 700;
    margin: 0; }
  .wrap-category .price {
    font-size: 14px; }

.voice {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 4px;
  padding: 16px; }
  .voice .ttl {
    font-weight: bold;
    margin-bottom: 10px; }

ul.check {
  padding: 0; }
  ul.check li {
    background: url(/images/featuredPage/osouji/2018/icon-check.svg) top left no-repeat;
    background-size: 20px auto;
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 28px; }
    ul.check li span {
      color: #484848;
      font-weight: bold; }

.balloon-wrap {
  margin: 15px 0 0;
  overflow: hidden;
  width: 100%; }
  .balloon-wrap .faceicon {
    float: left;
    margin: 10px -90px 0 0;
    width: 55px; }
  .balloon-wrap .balloon {
    width: 100%; }
    .balloon-wrap .balloon .says {
      background: #f1f1f1;
      border-radius: 12px;
      display: inline-block;
      margin: 0 0 0 70px;
      padding: 10px 15px;
      position: relative; }
      .balloon-wrap .balloon .says p {
        margin: 0;
        padding: 0; }
    .balloon-wrap .balloon :after {
      border: 10px solid transparent;
      border-right: 10px solid #f1f1f1;
      content: "";
      display: inline-block;
      left: -19px;
      position: absolute;
      top: 12px; }
    .balloon-wrap .balloon a {
      color: #222222;
      text-decoration: underline; }

.series-wrap {
  padding: 0 16px; }
  .series-wrap .illust-box {
    margin-bottom: 24px; }
    .series-wrap .illust-box img {
      margin-bottom: 8px; }