@charset "UTF-8";
/*scssをインポート*/
/* 設定用。変数の宣言はここ*/
/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
/*----------------------------------------------------
	色の設定
----------------------------------------------------*/
/*----------------------------------------------------
	各種角丸
----------------------------------------------------*/
/*----------------------------------------------------
	...の省略設定
----------------------------------------------------*/
/* リセットCSS、フォントサイズ*/
/* Reset Style */
html {
  overflow-y: scroll; }

body {
  line-height: 1;
  color: #000; }

/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

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

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
body {
  font: 13px/1.231 arial,helvetica,clean,sans-serif;
  *font-size: small;
  *font: x-small; }

select, input, button, textarea {
  font: 99% arial,helvetica,clean,sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%; }

/* ミックスイン、@extend、CSS3など*/
.opacity {
  opacity: 0.55;
  -moz-opacity: 0.55;
  filter: alpha(opacity=55);
  -ms-filter: "alpha(opacity=55)"; }

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

.table_cell {
  display: table-cell;
  *display: inline;
  *zoom: 1;
  vertical-align: middle; }

.fr,
.imgR {
  float: right;
  margin-left: 10px; }

.fl,
.imgL {
  float: left;
  margin-right: 10px; }

.imgC,
.tC,
.btn {
  text-align: center; }

.imgC {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.tR,
.sign {
  text-align: right; }

.box_size {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

.ts_none {
  -webkit-text-shadow: none !important;
  -moz-text-shadow: none !important;
  -ms-text-shadow: none !important;
  -o-text-shadow: none !important;
  text-shadow: none !important; }

.bs_none {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important; }

/* clearfix */
.clearfix, .contents, .recommended_wrap .title_ph, .ad_box, .popular_info_wrap .title_ph, .bannerBox, footer, .contents_lc, .normal_columns_box, .future_gadget_box, .cc_box, .cc_panel001, .cc_panel002, .cc_panel003, .cc_panel004, .profile_box, .history_box, .character_box, .character_select_box, .mangainfo_box, .mangainfo_select_box, .simplyinfo .columns_box, .simplyinfo footer, .error .columns_box, .doraexhi_box {
  *zoom: 1; }
  .clearfix:after, .contents:after, .recommended_wrap .title_ph:after, .ad_box:after, .popular_info_wrap .title_ph:after, .bannerBox:after, footer:after, .contents_lc:after, .normal_columns_box:after, .future_gadget_box:after, .cc_box:after, .cc_panel001:after, .cc_panel002:after, .cc_panel003:after, .cc_panel004:after, .profile_box:after, .history_box:after, .character_box:after, .character_select_box:after, .mangainfo_box:after, .mangainfo_select_box:after, .simplyinfo .columns_box:after, .simplyinfo footer:after, .error .columns_box:after, .doraexhi_box:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

/* メインスタイル - layout.scssはメイン内でインポート*/
/*----------------------------------------------------
	element style
----------------------------------------------------*/
body {
  max-width: 100%;
  　　margin: 0 auto;
  font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  text-align: center;
  color: #000; }
  @media all and (max-width: 1024px) {
    body {
      max-width: 100%; } }
  @media all and (max-width: 640px) {
    body {
      max-width: 100%; } }
  @media all and (max-width: 320px) {
    body {
      max-width: 100%; } }

img {
  max-width: 100%; }

a {
  border: none;
  outline: none;
  cursor: pointer;
  color: #000;
  text-decoration: none; }
  a:hover {
    color: #00a8f4; }
  a:active {
    color: #e60000; }
  a:visited {
    color: #333; }

.fRight {
  float: right; }
  @media all and (max-width: 640px) {
    .fRight {
      float: none; } }

.fLeft {
  float: left; }
  @media all and (max-width: 640px) {
    .fLeft {
      float: none; } }

.disabled {
  pointer-events: none; }

.covered {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100%; }
  .covered img {
    width: 100%;
    height: 100%; }

.news_cathegory {
  position: relative;
  display: inline-block;
  height: 20px;
  line-height: 22px;
  padding: 0 1em;
  margin: 1em 1em 1em 0;
  background-color: #ff0000;
  border-radius: 3px;
  color: #fff;
  font-size: 80%;
  letter-spacing: 0.1em;
  text-decoration: none;
  font-weight: bolder; }

.termination {
  position: relative;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 1em;
  margin: 1em 1em 1em 0;
  border: 0.2em solid #ff0000;
  box-sizing: border-box;
  border-radius: 3px;
  color: #ff0000;
  font-size: 80%;
  letter-spacing: 0.1em;
  text-decoration: none;
  font-weight: bolder; }
  @media all and (max-width: 640px) {
    .termination {
      height: 20px;
      line-height: 20px;
      padding: 0 1em;
      margin: 1em 1em 1em 0;
      border: 0.2em solid #ff0000;
      border-radius: 3px;
      color: #ff0000;
      font-size: 80%;
      letter-spacing: 0.1em;
      text-decoration: none;
      font-weight: bolder; } }
  @media all and (max-width: 320px) {
    .termination {
      height: 20px;
      line-height: 20px;
      padding: 0 0.5em;
      margin: 1em 0em 0em 0;
      border: 0.2em solid #ff0000;
      border-radius: 3px;
      color: #ff0000;
      font-size: 70%;
      letter-spacing: 0.1em;
      text-decoration: none;
      font-weight: bolder; } }

.date {
  font-size: 90%; }

.nobita {
  background: #ffcc00; }

.tag ul {
  margin: 10px auto;
  list-style-type: none; }
.tag ul li {
  display: inline-block;
  margin: 0 0 .1em .3em;
  font-size: 85%;
  text-decoration: underline; }
.tag ul li a {
  display: block;
  padding-left: 18px;
  background: url("../images/tag_head.png") top left/14px 14px no-repeat; }
@media all and (max-width: 640px) {
  .tag ul {
    margin: 5px auto;
    list-style-type: none; }
  .tag ul li {
    display: inline-block;
    margin: 0 0 .1em .3em;
    font-size: 82%;
    text-decoration: underline; }
  .tag ul li a {
    display: block;
    padding-left: 10px;
    background: url("../images/tag_head.png") top left/10px 10px no-repeat; } }

.gn_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto;
  padding: 30px; }
  @media all and (max-width: 1024px) {
    .gn_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 0; } }
  @media all and (max-width: 640px) {
    .gn_box {
      width: 95%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto;
      box-sizing: border-box;
      padding: 2%; } }
  @media all and (max-width: 320px) {
    .gn_box {
      width: 85%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto;
      box-sizing: border-box; } }

.nopc {
  display: none; }
  @media all and (max-width: 1024px) {
    .nopc {
      display: none; } }
  @media all and (max-width: 640px) {
    .nopc {
      display: block; } }
  @media all and (max-width: 320px) {
    .nopc {
      display: block; } }

@media all and (max-width: 1024px) {
  .nosp {
    display: block; } }
@media all and (max-width: 640px) {
  .nosp {
    display: none; } }
@media all and (max-width: 320px) {
  .nosp {
    display: none; } }

#image-ad-area {
  display: none; }

.ad_box .figure-right {
  float: right;
  margin: 0px;
  background: white; }

/*----------------------------------------------------
	
----------------------------------------------------*/
.object-fit-img {
  object-fit: cover;
  object-position: center center;
  font-family: 'object-fit: cover; object-position: center center;'; }

.contents {
  width: 1000px;
  margin: 0 auto 50px;
  -webkit-border-bottom-right-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;
  text-align: center;
  border-left: 6px solid #eeeeee;
  border-right: 6px solid #eeeeee;
  border-bottom: 6px solid #eeeeee;
  background: #fff; }
  @media all and (max-width: 1024px) {
    .contents {
      margin: 0 auto;
      width: 85%;
      padding: 2%; } }
  @media all and (max-width: 640px) {
    .contents {
      margin: 0 auto;
      width: 85%;
      padding: 2%; } }
  @media all and (max-width: 320px) {
    .contents {
      margin: 0 auto;
      width: 85%;
      padding: 2%; } }

/*----------------------------------------------------
	右上SNSとの基本設定
----------------------------------------------------*/
.toolbox {
  width: 300px;
  position: absolute;
  right: 0%;
  top: 1%;
  /*----SNS----------------------------------------*/
  /*----検索窓- PC版---------------------------------------*/ }
  @media all and (max-width: 1024px) {
    .toolbox {
      width: 140px;
      padding: 10px; } }
  @media all and (max-width: 640px) {
    .toolbox {
      width: 140px;
      padding: 10px; } }
  @media all and (max-width: 320px) {
    .toolbox {
      width: 140px;
      padding: 10px; } }
  .toolbox .sns_area_header {
    width: 220px;
    height: 60px;
    padding: 10px;
    height: 20px;
    margin: 10px 0px 5px 5px; }
    .toolbox .sns_area_header ul {
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex; }
      .toolbox .sns_area_header ul li {
        list-style-type: none;
        width: calc(100%/5); }
        .toolbox .sns_area_header ul li img {
          height: 20px;
          width: auto; }
    @media all and (max-width: 1024px) {
      .toolbox .sns_area_header {
        width: 180px;
        height: 40px;
        padding: 10px;
        height: 20px;
        margin: 0px 30px 0 -55px; }
        .toolbox .sns_area_header ul {
          display: -webkit-box;
          /*--- Androidブラウザ用 ---*/
          display: -ms-flexbox;
          /*--- IE10 ---*/
          display: -webkit-flex;
          /*--- safari（PC）用 ---*/
          display: flex;
          -js-display: flex; }
          .toolbox .sns_area_header ul li {
            list-style-type: none;
            width: calc(100%/5); }
            .toolbox .sns_area_header ul li img {
              height: 20px;
              width: auto; } }
    @media all and (max-width: 640px) {
      .toolbox .sns_area_header {
        display: none; } }
    @media all and (max-width: 320px) {
      .toolbox .sns_area_header {
        display: none; } }
  .toolbox .search_area_PC {
    width: 220px;
    height: 60px;
    height: 30px;
    margin: 0px 0px 0 20px; }
    .toolbox .search_area_PC #searchform4 {
      width: 220px;
      background: url(../images/inputbg.png) left top no-repeat;
      display: block;
      height: 30px;
      position: relative; }
    .toolbox .search_area_PC #keywords4 {
      width: 150px;
      position: absolute;
      top: 3px;
      left: 12px;
      border: 1px solid #FFF;
      -webkit-appearance: none; }
    .toolbox .search_area_PC #searchBtn {
      width: 26px;
      height: auto;
      position: absolute;
      top: 3px;
      right: 10px; }
    @media all and (max-width: 1024px) {
      .toolbox .search_area_PC {
        width: 200px;
        height: 60px;
        height: 30px;
        margin: 0px 0px 0 -40px; }
        .toolbox .search_area_PC #searchform4 {
          width: 140px;
          background: url(../images/inputbg_tab.png) left top no-repeat;
          display: block;
          height: 30px;
          position: relative; }
        .toolbox .search_area_PC #keywords4 {
          width: 115px;
          position: absolute;
          top: 3px;
          left: 12px;
          border: 1px solid #FFF;
          -webkit-appearance: none; }
        .toolbox .search_area_PC #searchBtn {
          width: 26px;
          height: auto;
          position: absolute;
          top: 3px;
          right: -30px; } }
    @media all and (max-width: 640px) {
      .toolbox .search_area_PC {
        display: none; } }
    @media all and (max-width: 320px) {
      .toolbox .search_area_PC {
        display: none; } }

/*----検索窓 SP版---------------------------------------*/
@media all and (max-width: 640px) {
  .search_area_SP {
    width: 100%;
    text-align: right;
    margin-right: 15%; }
    .search_area_SP .search {
      width: 100%;
      margin: 0 auto; }
    .search_area_SP .stretch {
      width: 4em;
      padding: 5px 10px;
      transition: all .6s ease;
      font-size: 2em;
      background: #fff;
      border: none;
      border-radius: 3px;
      line-height: 1.3;
      position: relative;
      margin-right: 10px;
      font-size: 80%; }
    .search_area_SP .searchBtn {
      display: block;
      width: 26px;
      height: auto;
      position: absolute;
      top: 9px;
      right: 7px; }
    .search_area_SP .stretch:focus {
      width: 10em;
      background: #fff;
      margin-right: 15%; } }
@media all and (max-width: 320px) {
  .search_area_SP {
    width: 100%;
    text-align: right;
    margin-right: 15%; }
    .search_area_SP .search {
      width: 100%;
      margin: 0 auto; }
    .search_area_SP .stretch {
      width: 4em;
      padding: 5px 10px;
      transition: all .6s ease;
      font-size: 2em;
      background: #fff;
      border: none;
      border-radius: 3px;
      line-height: 1.3;
      position: relative;
      margin-right: 10px;
      font-size: 80%; }
    .search_area_SP .searchBtn {
      display: block;
      width: 26px;
      height: auto;
      position: absolute;
      top: 9px;
      right: 7px; }
    .search_area_SP .stretch:focus {
      width: 10em;
      background: #fff;
      margin-right: 15%; } }

/*----------------------------------------------------
	セクションの基本設定
----------------------------------------------------*/
section {
  position: relative;
  width: 95%;
  margin: 0 auto 30px;
  padding-top: 30px; }
  @media all and (max-width: 640px) {
    section {
      width: 100%; } }

/*----------------------------------------------------
	おすすめ情報の基本設定
----------------------------------------------------*/
.recommended_wrap {
  overflow: hidden;
  width: 100%;
  z-index: 1;
  margin: 0 auto; }
  @media all and (max-width: 1024px) {
    .recommended_wrap {
      display: block;
      overflow: hidden;
      padding-right: 6%;
      margin: 0 auto 5%; } }
  @media all and (max-width: 640px) {
    .recommended_wrap {
      display: block;
      overflow: hidden;
      margin: 0 auto 5%; } }
  .recommended_wrap .title_ph {
    width: 12%;
    margin: -10px 0 10px 25px; }
    @media all and (max-width: 1024px) {
      .recommended_wrap .title_ph {
        width: 20%;
        margin: -20px auto 10px; } }
    @media all and (max-width: 640px) {
      .recommended_wrap .title_ph {
        width: 40%;
        margin: -10px auto 5px; } }
  .recommended_wrap .ico_new {
    z-index: 999998;
    position: absolute;
    top: 110px;
    right: 0px; }
    .recommended_wrap .ico_new img {
      width: 90%; }
    @media all and (max-width: 1024px) {
      .recommended_wrap .ico_new {
        top: 130px;
        right: -5px; } }
    @media all and (max-width: 640px) {
      .recommended_wrap .ico_new {
        top: 93px;
        right: -10px; }
        .recommended_wrap .ico_new img {
          width: 70%; } }
    @media all and (max-width: 320px) {
      .recommended_wrap .ico_new {
        top: 83px;
        right: -10px; }
        .recommended_wrap .ico_new img {
          width: 60%; } }
  .recommended_wrap .item {
    position: relative;
    padding: 0.4em;
    margin: 0px 5px;
    border: thin solid #DBDBDB;
    background-color: white;
    text-align: left;
    line-height: 1.6em;
    border-radius: 10px;
    z-index: 1;
    overflow: hidden; }
    .recommended_wrap .item .tag {
      display: none; }
    .recommended_wrap .item p {
      /* config */
      line-height: 1.5;
      height: 2.9em;
      background-color: #fff;
      /* config end */
      position: relative;
      padding-right: 1em;
      overflow: hidden;
      margin-bottom: 0.4em; }
    .recommended_wrap .item .phbox {
      position: relative;
      height: 140px;
      width: 96%;
      padding: 2%;
      background-color: #eee;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
      border-radius: 10px; }
      .recommended_wrap .item .phbox img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto; }
    @media all and (max-width: 1024px) {
      .recommended_wrap .item {
        min-height: 17em;
        margin: 0px 5px 10px; }
        .recommended_wrap .item p {
          /* config */
          line-height: 1.6;
          height: 5em;
          background-color: #fff;
          /* config end */
          position: relative;
          padding-right: 1em;
          overflow: hidden; }
        .recommended_wrap .item .phbox {
          position: relative;
          height: 140px;
          width: 96%;
          padding: 2%;
          background: white;
          margin: 0 auto;
          text-align: center;
          overflow: hidden;
          border-radius: 10px;
          background-color: #eeeeee; }
          .recommended_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }
    @media all and (max-width: 640px) {
      .recommended_wrap .item {
        font-size: 90%;
        padding: 0.6em;
        margin: 0px 5px 10px;
        min-height: 15em; }
        .recommended_wrap .item p {
          /* config */
          line-height: 1.5;
          height: 5em;
          background-color: #fff;
          /* config end */
          position: relative;
          padding-right: 1em;
          overflow: hidden; }
        .recommended_wrap .item .phbox {
          position: relative;
          height: 110px;
          width: 96%;
          padding: 2%;
          margin: 0 auto;
          text-align: center;
          overflow: hidden;
          border-radius: 10px;
          background-color: #eee; }
          .recommended_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }
    @media all and (max-width: 320px) {
      .recommended_wrap .item {
        font-size: 90%;
        margin: 0px 5px 10px;
        min-height: 16em; }
        .recommended_wrap .item p {
          /* config */
          line-height: 1.5;
          font-size: 85%;
          height: 5em;
          background-color: #fff;
          /* config end */
          position: relative;
          padding-right: 1em;
          overflow: hidden; }
        .recommended_wrap .item .phbox {
          position: relative;
          height: 85px;
          width: 96%;
          padding: 2%;
          margin: 0 auto;
          text-align: center;
          overflow: hidden;
          border-radius: 10px; }
          .recommended_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }

/*----------------------------------------------------
	動画・広告部分の基本設定
----------------------------------------------------*/
/*--- 囲み全体の設定 ---*/
.ad_box {
  width: 93%;
  position: relative;
  margin: 0 auto 30px;
  text-align: left;
  /*--- おすすめ大バナー ---*/
  /*--- 動画コンテナの設定 ---*/
  /*--- 詳しくはこちら画像の設定 ---*/
  /*--- ad-box終わり ---*/ }
  @media all and (max-width: 1024px) {
    .ad_box {
      padding: 0;
      text-align: center;
      width: 100%;
      height: auto; } }
  @media all and (max-width: 640px) {
    .ad_box {
      width: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex;
      -webkit-flex-direction: column-reverse;
      flex-direction: column-reverse;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; } }
  .ad_box .ad_figure {
    position: relative;
    width: 48%;
    float: left;
    z-index: 20;
    margin: 0px 20px 0 0;
    padding: 0; }
    .ad_box .ad_figure img {
      margin: 0;
      padding: 0; }
    @media all and (max-width: 1024px) {
      .ad_box .ad_figure {
        width: 49%;
        text-align: left;
        margin: 0 auto;
        padding-bottom: 1%; }
        .ad_box .ad_figure img {
          width: 100%;
          height: auto;
          margin: 0; } }
    @media all and (max-width: 640px) {
      .ad_box .ad_figure {
        position: relative;
        width: 100%; } }
  .ad_box .video-container {
    position: relative;
    width: 48%;
    padding-top: 57.25%;
    float: right;
    margin: 0px 0 -280px 0; }
    .ad_box .video-container img {
      z-index: -99999999999;
      width: 1px;
      height: 1px; }
    .ad_box .video-container iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 57.25%; }
    @media all and (max-width: 1024px) {
      .ad_box .video-container {
        position: relative;
        width: 49%;
        padding-top: 65.75%;
        margin: 0px 0 -870px 0; }
        .ad_box .video-container img {
          z-index: -99999999999;
          width: 100%;
          height: 1%; }
        .ad_box .video-container iframe {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 30%; } }
    @media all and (max-width: 640px) {
      .ad_box .video-container {
        position: relative;
        width: 100%;
        padding-top: 10%;
        margin: 10px 0 -110px 0; }
        .ad_box .video-container img {
          z-index: -99999999999;
          width: 100%;
          height: auto; }
        .ad_box .video-container iframe {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 65.25%; } }
    @media all and (max-width: 320px) {
      .ad_box .video-container {
        position: relative;
        width: 100%;
        padding-top: 65.25%;
        margin: 10px 0 -240px 0; }
        .ad_box .video-container img {
          z-index: -99999999999;
          width: 100%;
          height: auto; }
        .ad_box .video-container iframe {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 40%; } }
  .ad_box .showdetail-container {
    z-index: 99999999999;
    position: relative;
    width: 48%;
    padding-top: 58.25%;
    float: right;
    margin: 0px 0 -280px 0; }
    .ad_box .showdetail-container .frame_blank {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 58.25%;
      background: url(../images/detail.png) no-repeat;
      background-size: cover;
      background-position: center center; }
      .ad_box .showdetail-container .frame_blank img {
        width: 100%;
        height: 100%; }
    @media all and (max-width: 1024px) {
      .ad_box .showdetail-container {
        position: relative;
        width: 49%;
        height: 58.25%;
        float: right;
        margin: 0px 0 -870px 0; }
        .ad_box .showdetail-container .frame_blank {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 59.25%;
          background-position: center center;
          background-size: cover; } }
    @media all and (max-width: 640px) {
      .ad_box .showdetail-container {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 5% auto;
        padding-top: 73.0%; }
        .ad_box .showdetail-container .frame_blank {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center center; } }
    @media all and (max-width: 320px) {
      .ad_box .showdetail-container {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 5% auto; }
        .ad_box .showdetail-container .frame_blank {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center center; } }

/*----------------------------------------------------
	情報カラムの基本設定
----------------------------------------------------*/
.info_box {
  display: -webkit-box;
  /*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: -webkit-flex;
  /*--- safari（PC）用 ---*/
  display: flex;
  -js-display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  height: auto;
  margin: 0 auto 30px;
  z-index: 1; }
  .info_box .item.is-empty {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: 0; }
  .info_box .ico_new {
    z-index: 999998;
    position: absolute;
    top: -20px;
    left: 10px; }
    .info_box .ico_new img {
      width: 80%; }
    @media all and (max-width: 640px) {
      .info_box .ico_new {
        position: absolute;
        top: -15px;
        left: 3px; }
        .info_box .ico_new img {
          width: 60%; } }
  .info_box .item {
    position: relative;
    width: calc(90% / 3);
    margin: 1% auto;
    padding: 0.7em;
    border: thin solid #DBDBDB;
    background-color: white;
    border-radius: 10px;
    text-align: left; }
    .info_box .item p {
      /* config */
      line-height: 1.5em;
      height: 3em;
      background-color: #fff;
      /* config end */
      position: relative;
      padding-right: 1em;
      overflow: hidden;
      margin-bottom: 0.5em; }
    .info_box .item p:before {
      content: "...";
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-block;
      width: 1em; }
    .info_box .item p:after {
      content: "";
      position: relative;
      right: -2em;
      float: right;
      width: 1em;
      height: 100%;
      background-color: inherit;
      margin-left: -1em; }
    .info_box .item .phbox {
      position: relative;
      height: 180px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
      border-radius: 10px; }
      .info_box .item .phbox img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto; }
  .info_box .extracut {
    position: relative;
    width: calc(90% / 3);
    margin: 0.5% auto 10px;
    padding-top: 3%;
    background-color: white;
    border-radius: 10px;
    text-align: center; }
    .info_box .extracut img {
      width: 80%;
      margin: 0 auto; }
  @media all and (max-width: 1024px) {
    .info_box .item {
      position: relative;
      width: calc(90% / 3);
      margin: 0.2em auto 0.8em;
      padding: 0.2em 0.4em;
      border: thin solid #DBDBDB;
      background-color: white;
      border-radius: 10px;
      text-align: left; }
      .info_box .item p {
        /* config */
        line-height: 1.5;
        height: 3em;
        /* config end */
        position: relative;
        padding-right: 1em;
        overflow: hidden;
        margin-bottom: 0.2em; }
      .info_box .item p:before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: 1em; }
      .info_box .item p:after {
        content: "";
        position: relative;
        right: -2em;
        float: right;
        width: 1em;
        height: 100%;
        background-color: inherit;
        margin-left: -1em; }
      .info_box .item .phbox {
        position: relative;
        height: 150px;
        width: 98%;
        background: white;
        margin: 2% auto 0%;
        text-align: center;
        overflow: hidden;
        border-radius: 10px;
        background-color: #eeeeee; }
        .info_box .item .phbox img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          margin: auto;
          border-radius: 10px; }
    .info_box .extracut {
      position: relative;
      width: calc(90% / 3);
      margin: 0.5% auto 10px;
      padding-top: 10%;
      background-color: white;
      border-radius: 10px;
      text-align: center; }
      .info_box .extracut img {
        width: 80%;
        margin: 0 auto; } }
  @media all and (max-width: 640px) {
    .info_box .item {
      width: calc(90% / 2);
      margin: 5px auto;
      padding: 5px;
      border: thin solid #DBDBDB;
      background-color: white; }
      .info_box .item .news_cathegory {
        position: relative;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 0.5em;
        margin: 1em 0em 1em 1em;
        background-color: #ff0000;
        box-sizing: border-box;
        border: 0.2em solid #ff0000;
        border-radius: 3px;
        color: #fff;
        font-size: 70%;
        letter-spacing: 0.1em;
        text-decoration: none; }
      .info_box .item .date {
        font-size: 80%; }
      .info_box .item p {
        /* config */
        font-size: 90%;
        line-height: 1.5em;
        height: 4.5em;
        background-color: #fff;
        width: 85%;
        margin-left: 0.5em;
        /* config end */
        position: relative;
        padding-right: 1em;
        overflow: hidden; }
      .info_box .item p:before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: 1em; }
      .info_box .item p:after {
        content: "";
        position: relative;
        right: -2em;
        float: right;
        width: 1em;
        height: 100%;
        background-color: inherit;
        margin-left: -1em; }
      .info_box .item .phbox {
        position: relative;
        width: 97%;
        height: 120px;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        border-radius: 10px;
        background-color: #eeeeee; }
        .info_box .item .phbox img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          margin: auto; }
    .info_box .extracut {
      position: relative;
      width: calc(90% / 2);
      margin: 0.5% auto 10px;
      padding-top: 18%;
      background-color: white;
      border-radius: 10px;
      text-align: center; }
      .info_box .extracut img {
        width: 100%;
        margin: 0 auto; } }
  @media all and (max-width: 320px) {
    .info_box .item {
      width: calc(85% / 2);
      margin: 1% 1% 1.5%;
      padding: 0.4em;
      border: thin solid #DBDBDB;
      background-color: white; }
      .info_box .item .news_cathegory {
        position: relative;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0em 0.5em 0.2em 0.5em;
        margin: 1em 0.3em 1em 0.7em;
        border: 0.2em solid #ff0000;
        background-color: #ff0000;
        border-radius: 3px;
        color: #fff;
        font-size: 50%;
        letter-spacing: 0.1em;
        text-decoration: none;
        vertical-align: middle; }
      .info_box .item .date {
        font-size: 60%; }
      .info_box .item p {
        /* config */
        font-size: 80%;
        line-height: 1.5em;
        height: 4.5em;
        background-color: #fff;
        width: 85%;
        margin-left: 0.5em;
        /* config end */
        position: relative;
        padding-right: 1em;
        overflow: hidden; }
      .info_box .item p:before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: 1em; }
      .info_box .item p:after {
        content: "";
        position: relative;
        right: -2em;
        float: right;
        width: 1em;
        height: 100%;
        background-color: inherit;
        margin-left: -1em; }
      .info_box .item .phbox {
        position: relative;
        width: auto;
        height: 75px;
        margin: 0.1% auto;
        text-align: center;
        overflow: hidden;
        border-radius: 10px; }
        .info_box .item .phbox img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          margin: auto; }
    .info_box .extracut {
      position: relative;
      width: calc(85% / 2);
      margin: 0.5% auto 10px;
      padding-top: 18%;
      background-color: white;
      border-radius: 10px;
      text-align: center; }
      .info_box .extracut img {
        width: 100%;
        margin: 0 auto; } }

/*----------------------------------------------------
	いま読まれている情報の基本設定
----------------------------------------------------*/
.popular_info_wrap {
  text-align: center;
  overflow: hidden;
  width: 90%;
  background: #eeeeee;
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto 30px; }
  .popular_info_wrap .title_ph {
    width: 20%;
    margin: 0px 0 10px 0px; }
  .popular_info_wrap .ico_new {
    z-index: 999998;
    position: absolute;
    top: 80px;
    right: 0px; }
    .popular_info_wrap .ico_new img {
      width: 90%; }
    @media all and (max-width: 640px) {
      .popular_info_wrap .ico_new {
        top: 25px;
        right: -10px; }
        .popular_info_wrap .ico_new img {
          width: 80%; } }
  .popular_info_wrap .item {
    width: 100%;
    padding: 10px;
    margin-right: 10px;
    background: white;
    text-align: left;
    border-radius: 10px; }
    .popular_info_wrap .item .news_cathegory {
      position: relative;
      display: inline-block;
      height: 16px;
      line-height: 18px;
      padding: 0 1em;
      margin: 0.5em 0.5em 0.5em 0;
      background-color: #ff0000;
      border-radius: 3px;
      color: #fff;
      font-size: 70%;
      letter-spacing: 0.1em;
      text-decoration: none;
      font-weight: bolder; }
    .popular_info_wrap .item .date {
      font-size: 80%; }
    .popular_info_wrap .item p {
      /* config */
      line-height: 1.6;
      height: 3em;
      background-color: #fff;
      /* config end */
      position: relative;
      padding-right: 1em;
      overflow: hidden; }
    .popular_info_wrap .item p:before {
      content: "...";
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-block;
      width: 1em; }
    .popular_info_wrap .item p:after {
      content: "";
      position: relative;
      right: -2em;
      float: right;
      width: 1em;
      height: 100%;
      background-color: inherit;
      margin-left: -1em; }
    .popular_info_wrap .item .phbox {
      position: relative;
      width: 94%;
      height: 120px;
      padding: 3%;
      background: #eeeeee;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 10px; }
      .popular_info_wrap .item .phbox img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto; }
    .popular_info_wrap .item .tag {
      display: none; }
  @media all and (max-width: 1024px) {
    .popular_info_wrap {
      width: 100%;
      background: #eeeeee;
      padding: 20px 0 20px 0;
      margin: 0 auto 30px; }
      .popular_info_wrap .title_ph {
        width: 30%;
        margin: 0px 0 10px 30px; }
      .popular_info_wrap .item {
        width: 100%;
        padding: 0.6em;
        margin-right: 10px;
        background: white;
        text-align: left;
        border-radius: 10px;
        font-size: 80%; }
        .popular_info_wrap .item .phbox {
          position: relative;
          width: auto;
          height: 140px;
          padding: 3%;
          background: #eeeeee;
          margin: 0 auto;
          overflow: hidden;
          border-radius: 10px; }
          .popular_info_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }
  @media all and (max-width: 640px) {
    .popular_info_wrap {
      width: 100%;
      background: #eeeeee;
      padding: 20px 0 20px 0; }
      .popular_info_wrap .title_ph {
        width: 40%;
        margin: 0px auto; }
      .popular_info_wrap .item {
        width: 100%;
        padding: 0.6em;
        margin-right: 10px;
        background: white;
        text-align: left;
        font-size: 80%;
        line-height: 1.1em;
        border-radius: 10px; }
        .popular_info_wrap .item .phbox {
          position: relative;
          width: auto;
          height: 100px;
          padding: 3%;
          background: #eeeeee;
          margin: 0 auto;
          overflow: hidden;
          border-radius: 10px; }
          .popular_info_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }
  @media all and (max-width: 320px) {
    .popular_info_wrap {
      width: 100%;
      background: #eeeeee;
      padding: 20px 0 20px 0; }
      .popular_info_wrap .title_ph {
        width: 40%;
        margin: 0px auto; }
      .popular_info_wrap .item {
        width: 100%;
        padding: 0.5em;
        margin-right: 10px;
        background: white;
        font-size: 80%;
        line-height: 1.1em;
        text-align: left;
        border-radius: 10px; }
        .popular_info_wrap .item .phbox {
          position: relative;
          width: auto;
          height: 80px;
          padding: 3%;
          background: #eeeeee;
          margin: 0 auto;
          overflow: hidden;
          border-radius: 10px; }
          .popular_info_wrap .item .phbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            margin: auto; } }

/*----------------------------------------------------
	SNSボックス・SPのみの基本設定
----------------------------------------------------*/
/*----SNS----------------------------------------*/
.sns_area_bottom {
  display: none; }
  @media all and (max-width: 1024px) {
    .sns_area_bottom {
      display: none; } }
  @media all and (max-width: 640px) {
    .sns_area_bottom {
      display: flex;
      width: 80%;
      padding: 10px;
      margin: 0px auto; }
      .sns_area_bottom ul {
        margin: 0px auto;
        display: table; }
        .sns_area_bottom ul li {
          list-style-type: none;
          width: calc(100%/5);
          display: table-cell;
          vertical-align: middle; }
          .sns_area_bottom ul li img {
            height: auto;
            width: 60%; } }
  @media all and (max-width: 320px) {
    .sns_area_bottom {
      display: flex;
      width: 80%;
      padding: 10px;
      margin: 0px auto; }
      .sns_area_bottom ul {
        margin: 0px auto;
        display: table; }
        .sns_area_bottom ul li {
          list-style-type: none;
          width: calc(100%/4);
          display: table-cell;
          vertical-align: middle; }
          .sns_area_bottom ul li img {
            height: auto;
            width: 60%; } }

/*----------------------------------------------------
	バナーボックスの基本設定
----------------------------------------------------*/
.bannerBox {
  width: 100%;
  margin: 0 auto 30px; }
  .bannerBox ul {
    display: block;
    width: 80%;
    margin: 0 auto; }
    .bannerBox ul li {
      width: 22%;
      list-style-type: none;
      float: left;
      margin: 0 1.5% 1%; }
      .bannerBox ul li img {
        border: thin solid #DBDBDB; }
  @media all and (max-width: 1024px) {
    .bannerBox ul {
      width: 90%;
      margin: 0 auto; }
      .bannerBox ul li {
        width: 30%;
        list-style-type: none;
        float: left;
        margin: 0 1.5% 1%; }
        .bannerBox ul li img {
          border: thin solid #DBDBDB; } }
  @media all and (max-width: 640px) {
    .bannerBox ul {
      width: 94%;
      margin: 0 auto; }
      .bannerBox ul li {
        width: 47%;
        list-style-type: none;
        float: left;
        margin: 0 3% 3% 0; }
        .bannerBox ul li img {
          border: thin solid #DBDBDB; } }
  @media all and (max-width: 320px) {
    .bannerBox ul {
      width: 100%;
      margin: 0 auto; }
      .bannerBox ul li {
        width: 47%;
        list-style-type: none;
        float: left;
        margin: 0 3% 3% 0; }
        .bannerBox ul li img {
          border: thin solid #DBDBDB; } }

   /*----------------------------------------------------
	藤子プロスタッフ募集中バナー
----------------------------------------------------*/
.fpro_recurit {
  width: 40%;
  display: block;
  margin: 0 auto 5%; }
  .fpro_recurit img {
    border: thin solid #DBDBDB; }
  @media all and (max-width: 1024px) {
    .fpro_recurit {
      width: 70%; } }
  @media all and (max-width: 640px) {
    .fpro_recurit {
      width: 90%; } }

   /*----------------------------------------------------
	藤子プロスタッフ募集中バナー
----------------------------------------------------*/
.fpro_recurit {
  width: 40%;
  display: block;
  margin: 0 auto 5%; }
  .fpro_recurit img {
    border: thin solid #DBDBDB; }
  @media all and (max-width: 1024px) {
    .fpro_recurit {
      width: 70%; } }
  @media all and (max-width: 640px) {
    .fpro_recurit {
      width: 90%; } }

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
footer {
  max-width: 100%; }
  footer .bigfooter {
    max-width: 970px;
    margin: 0 auto; }
    footer .bigfooter ul {
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex;
      margin-bottom: 24px;
      color: white;
      text-decoration: none; }
      footer .bigfooter ul a:link {
        color: white; }
      footer .bigfooter ul a:visited {
        color: white; }
      footer .bigfooter ul a:hover {
        color: #ffff66; }
      footer .bigfooter ul a:active {
        color: white; }
      footer .bigfooter ul li {
        width: calc(100% / 6);
        list-style-type: none;
        border-right: 1px dashed white; }
        footer .bigfooter ul li:last-child {
          border-right: none; }
        footer .bigfooter ul li img {
          width: 80%; }
        footer .bigfooter ul li p {
          font-size: 90%;
          line-height: 1.4em;
          color: white;
          text-align: left;
          margin: 0 24px 0 12px; }
          footer .bigfooter ul li p a {
            color: white;
            text-decoration: none; }
          footer .bigfooter ul li p span {
            font-size: 110%;
            line-height: 1.4em; }
    @media all and (max-width: 640px) {
      footer .bigfooter {
        display: none; } }
    @media all and (max-width: 640px) {
      footer .bigfooter {
        display: none; } }
  footer .deco-img {
    height: 140px;
    background-image: url(../images/decolationimg_footer_PC.png);
    background-repeat: no-repeat;
    background-size: 100%; }
  footer .copyright {
    text-align: center;
    font-size: 80%;
    line-height: 1.6em;
    padding: 2em;
    background-color: #fff; }
    footer .copyright p {
      margin-bottom: 1em;
      text-align: left; }
  @media all and (max-width: 1024px) {
    footer .deco-img {
      height: 110px;
      background-image: url(../images/decolationimg_footer_PC.png);
      background-repeat: no-repeat;
      background-position: -260px 0px;
      background-size: 150%; }
    footer .copyright {
      text-align: center;
      font-size: 80%;
      line-height: 1.6em;
      padding: 2em;
      background-color: #fff; }
      footer .copyright p {
        margin-bottom: 1em; } }
  @media all and (max-width: 640px) {
    footer .deco-img {
      height: 140px;
      background-image: url(../images/decolationimg_footer_SP.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0px 0px;
      margin-top: 20px; }
    footer .copyright {
      max-width: 100%;
      text-align: center;
      font-size: 70%;
      line-height: 1.6em;
      padding: 3em 1em;
      background-color: #fff; }
      footer .copyright p {
        text-align: center;
        margin-bottom: 1em; } }
  @media all and (max-width: 320px) {
    footer .deco-img {
      height: 120px;
      background-image: url(../images/decolationimg_footer_SP.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0px 0px;
      margin-top: 20px; }
    footer .copyright {
      text-align: center;
      font-size: 60%;
      line-height: 1.6em;
      padding: 3em 1em;
      background-color: #fff; }
      footer .copyright p {
        text-align: center;
        margin-bottom: 1em; } }

/*----------------------------------------------------
	ボタンエリアの基本設定
----------------------------------------------------*/
.btn_Area {
  width: 100%;
  margin: 2% auto; }

/*----------------------------------------------------
	ボタンの基本設定
----------------------------------------------------*/
.basic_btn {
  font-size: 100%;
  position: relative;
  display: block;
  padding: 12px 10px 10px 10px;
  margin: 0 auto 10%;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  transition: .3s; }
  .basic_btn:hover {
    transform: scale(1.1); }
  @media all and (max-width: 1024px) {
    .basic_btn {
      font-size: 100%;
      position: relative;
      display: block;
      padding: 12px 10px 10px 10px;
      margin: 0 auto;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      letter-spacing: 0.2em;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(167, 0, 0, 0.8);
      display: inline-block;
      transition: .3s; }
      .basic_btn:hover {
        transform: scale(1.1); } }
  @media all and (max-width: 640px) {
    .basic_btn {
      font-size: 100%;
      position: relative;
      display: block;
      padding: 12px 10px 10px 10px;
      margin: 0 auto;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      letter-spacing: 0.2em;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(167, 0, 0, 0.8);
      display: inline-block;
      transition: .3s; }
      .basic_btn:hover {
        transform: scale(1.1); } }
  @media all and (max-width: 320px) {
    .basic_btn {
      font-size: 100%;
      position: relative;
      display: block;
      padding: 12px 10px 10px 10px;
      margin: 0 auto;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      letter-spacing: 0.2em;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(167, 0, 0, 0.8);
      display: inline-block;
      transition: .3s; }
      .basic_btn:hover {
        transform: scale(1.1); } }

/* 購入ボタンの色設定 */
.buy {
  background: #e60000;
  box-shadow: 0 5px 0 #a70000;
  width: 60%; }
  @media all and (max-width: 1024px) {
    .buy {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .buy {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .buy {
      width: 95%; } }

/* 試し読みボタンの設定 */
.preview {
  background: #ff6600;
  box-shadow: 0 5px 0 #e23000;
  width: 60%; }
  @media all and (max-width: 1024px) {
    .preview {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .preview {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .preview {
      width: 95%; } }

/* 詳しく見るの設定 */
.showdetail {
  background: #ff338e;
  box-shadow: 0 5px 0 #db1f73;
  width: 60%; }
  @media all and (max-width: 1024px) {
    .showdetail {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .showdetail {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .showdetail {
      width: 95%; } }

/* 詳しく見るブルーの設定 */
.showdetail_blue {
  background: #0381ff;
  box-shadow: 0 5px 0 #0263b5;
  width: 60%; }
  @media all and (max-width: 1024px) {
    .showdetail_blue {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .showdetail_blue {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .showdetail_blue {
      width: 95%; } }

/* 詳しく見るレッドの設定 */
.showdetail_red {
  background: #d00707;
  box-shadow: 0 5px 0 #a00000;
  width: 60%; }
  @media all and (max-width: 1024px) {
    .showdetail_red {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .showdetail_red {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .showdetail_red {
      width: 95%; } }

/* ダウンロードの設定 */
.download {
  background: #ff6666;
  box-shadow: 0 5px 0 #cc6666;
  width: 94%;
  font-size: 120%; }
  @media all and (max-width: 1024px) {
    .download {
      width: 94%; } }
  @media all and (max-width: 640px) {
    .download {
      width: 95%;
      font-size: 100%; } }
  @media all and (max-width: 320px) {
    .download {
      width: 95%;
      font-size: 100%; } }

/* もっと読むボタンの設定 */
.loadmore {
  background: #00b8f6;
  box-shadow: 0 5px 0 #007dc4;
  font-size: 120%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  width: 60%;
  margin: 1% auto 8%; }
  @media all and (max-width: 1024px) {
    .loadmore {
      width: 60%; } }
  @media all and (max-width: 640px) {
    .loadmore {
      width: 85%; } }
  @media all and (max-width: 320px) {
    .loadmore {
      width: 85%; } }

/* 特設サイトの設定 */
.goLandingpage {
  background: #00cc33;
  box-shadow: 0 5px 0 #009933;
  font-size: 100%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  width: 60%; }
  @media all and (max-width: 1024px) {
    .goLandingpage {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .goLandingpage {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .goLandingpage {
      width: 95%; } }

/* 電子版を購入の設定 */
.getdigital {
  background: #e60000;
  box-shadow: 0 5px 0 #a70000;
  font-size: 100%;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  width: 60%; }
  @media all and (max-width: 1024px) {
    .getdigital {
      width: 100%; } }
  @media all and (max-width: 640px) {
    .getdigital {
      width: 95%; } }
  @media all and (max-width: 320px) {
    .getdigital {
      width: 95%; } }

/* ゲームスタートの設定 */
.gamestart {
  background: #ff0000;
  box-shadow: 0 5px 0 #cc0000;
  font-size: 150%;
  font-weight: bolder;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  width: 100%;
  padding: 5% 0 5%; }

	/*----------------------------------------------------
	下層カラム・ページのカテゴリタイトル画像設定
----------------------------------------------------*/
h2 {
  margin-top: 5%; }
  h2 img {
    width: 35%; }
  @media all and (max-width: 1024px) {
    h2 img {
      width: 45%; } }
  @media all and (max-width: 640px) {
    h2 {
      margin-top: 10%; }
      h2 img {
        width: 70%; } }
  @media all and (max-width: 320px) {
    h2 img {
      width: 70%; } }

.contents_lc {
  width: 1000px;
  margin: 0 auto 50px;
  /*----------------------------------------------------
  	カラム内SNS投稿ボタンの基本設定
  ----------------------------------------------------*/ }
  @media all and (max-width: 1024px) {
    .contents_lc {
      width: 94%; } }
  @media all and (max-width: 640px) {
    .contents_lc {
      width: 94%; } }
  @media all and (max-width: 320px) {
    .contents_lc {
      width: 94%; } }
  .contents_lc .sns_Area {
    width: 100%;
    margin-bottom: 20px; }
    .contents_lc .sns_Area ul {
      list-style-type: none; }
      .contents_lc .sns_Area ul li {
        display: inline-block;
        margin-right: 20px;
        vertical-align: middle; }
      .contents_lc .sns_Area ul .fb {
        margin-top: -1.6%; }
  .contents_lc .copyright_for_detail {
    font-size: 55%;
    line-height: 1.6em; }
  .contents_lc .basic_btn {
    margin: 0 5% 5% 0; }
    @media all and (max-width: 1024px) {
      .contents_lc .basic_btn {
        margin: 0 auto 5%; } }
    @media all and (max-width: 640px) {
      .contents_lc .basic_btn {
        margin: 0 auto 5%; } }
    @media all and (max-width: 320px) {
      .contents_lc .basic_btn {
        margin: 0 auto 5%; } }
  .contents_lc .tag ul {
    margin: 10px auto 60px;
    padding: 0;
    list-style: none; }
  .contents_lc .tag ul li {
    display: inline-block;
    margin: 0 0 .1em 1em;
    padding: 0; }
  .contents_lc .tag ul li a {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 1em;
    background-color: #00a8f4;
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
    background-image: none; }
  .contents_lc .tag ul li a::before {
    position: absolute;
    top: 0;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    border-color: transparent #00a8f4 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    -webkit-transition: .2s;
    transition: .2s; }
  .contents_lc .tag ul li a::after {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background-color: #fff;
    border-radius: 100%; }
  .contents_lc .tag ul li span {
    display: block;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .contents_lc .tag ul li a:hover {
    background-color: #E50000;
    color: #fff; }
  .contents_lc .tag ul li a:hover::before {
    border-right-color: #E50000; }

/*----------------------------------------------------
	汎用カラムの変数基本設定
----------------------------------------------------*/
/*----------------------------------------------------
	汎用カラム内／テキストデコレーション
----------------------------------------------------*/
.nc_txt_Large {
  font-size: 110%; }

.nc_txt_Small {
  font-size: 80%; }

.nc_txt_color_blue {
  color: #00b8f6; }

.nc_txt_color_pink {
  color: #ff7b84; }

.nc_txt_color_red {
  color: #dd0015; }

/*----------------------------------------------------
	汎用カラムの基本設定
----------------------------------------------------*/
.normal_columns_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px;
  padding: 3%; }
  @media all and (max-width: 1024px) {
    .normal_columns_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .normal_columns_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 130px; } }
  @media all and (max-width: 320px) {
    .normal_columns_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto 130px; } }

/*----------------------------------------------------
	汎用カラム・日付基本設定
----------------------------------------------------*/
.normal_columns_date {
  width: 780px;
  margin: 5% auto;
  padding: 1% 3%;
  background-color: #00a8f4;
  font-size: 16px;
  color: white;
  border-radius: 8px;
  text-align: right;
  float: right; }
  @media all and (max-width: 1024px) {
    .normal_columns_date {
      width: 96%;
      margin: -7% auto 0%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 80%;
      color: white;
      border-radius: 5px;
      text-align: right; } }
  @media all and (max-width: 640px) {
    .normal_columns_date {
      width: 96%;
      margin: -7% auto 0%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 80%;
      color: white;
      border-radius: 5px;
      text-align: right; } }
  @media all and (max-width: 320px) {
    .normal_columns_date {
      width: 80%;
      margin: 2%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 80%;
      color: white;
      border-radius: 5px;
      text-align: right;
      float: right; } }

/*----------------------------------------------------
	汎用カラム・デコレーション画像基本設定
----------------------------------------------------*/
.normal_columns_logo {
  position: relative;
  z-index: 30px; }
  .normal_columns_logo img {
    height: auto;
    width: 30%; }
  @media all and (max-width: 1024px) {
    .normal_columns_logo {
      position: relative;
      z-index: 30px;
      margin: 2% auto 10%; }
      .normal_columns_logo img {
        height: auto;
        width: 30%; } }
  @media all and (max-width: 640px) {
    .normal_columns_logo {
      position: relative;
      margin: 2% auto 10%;
      z-index: 30px; }
      .normal_columns_logo img {
        height: auto;
        width: 40%; } }
  @media all and (max-width: 320px) {
    .normal_columns_logo {
      position: relative;
      margin: 2% auto 10%;
      z-index: 30px; }
      .normal_columns_logo img {
        height: auto;
        width: 40%; } }

/*----------------------------------------------------
	汎用カラム・文章コンテンツと画像画像基本設定
----------------------------------------------------*/
/*文章コンテンツ全体*/
.normal_columns_contents {
  width: 760px;
  margin: 0 auto;
  padding: 5px 30px 5px 0px;
  font-size: 18px;
  float: right;
  text-align: left; }
  @media all and (max-width: 1024px) {
    .normal_columns_contents {
      width: 90%;
      margin: 0% auto;
      padding: 5%;
      font-size: 18px;
      text-align: left; } }
  @media all and (max-width: 640px) {
    .normal_columns_contents {
      width: 90%;
      margin: 0% auto;
      padding: 5%;
      font-size: 18px;
      text-align: left; } }

/*商品画像*/
.nc_main_ph {
  float: left;
  width: 200px; }
  .nc_main_ph img {
    width: 100%;
    margin-bottom: 6%; }
  @media all and (max-width: 1024px) {
    .nc_main_ph {
      float: left;
      width: 40%;
      margin: 0 auto; }
      .nc_main_ph img {
        width: 100%;
        margin-bottom: 6%; } }
  @media all and (max-width: 640px) {
    .nc_main_ph {
      float: none;
      width: 70%;
      margin: 0 auto; }
      .nc_main_ph img {
        width: 100%;
        margin-bottom: 5px; } }

/*----------------------------------------------------
	タイトルとサブタイトル全体
----------------------------------------------------*/
.nc_title {
  font-size: 150%;
  color: #00a8f4;
  margin-bottom: 10px;
  line-height: 1.2em; }
  @media all and (max-width: 1024px) {
    .nc_title {
      font-size: 130%;
      color: #00a8f4;
      margin-bottom: 30px;
      line-height: 1.2em; } }
  @media all and (max-width: 640px) {
    .nc_title {
      font-size: 110%;
      color: #00a8f4;
      margin-bottom: 10px;
      line-height: 1.2em; } }
  @media all and (max-width: 320px) {
    .nc_title {
      font-size: 110%;
      color: #00a8f4;
      margin-bottom: 30px;
      line-height: 1.2em; } }

.nc_title_sub {
  font-size: 90%;
  color: black;
  margin-bottom: 7px;
  line-height: 1.2em; }
  @media all and (max-width: 1024px) {
    .nc_title_sub {
      font-size: 80%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.4em; } }
  @media all and (max-width: 640px) {
    .nc_title_sub {
      font-size: 80%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.4em; } }
  @media all and (max-width: 320px) {
    .nc_title_sub {
      font-size: 80%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.2em; } }

/*----------------------------------------------------
	記事本文の設定
----------------------------------------------------*/
.nc_article {
  margin: 0 0 0 235px; }
  .nc_article p {
    margin-bottom: 15px;
    line-height: 1.6em;
    font-size: 90%; }
  .nc_article .tag {
    position: relative;
    margin: 0 0 0 62px; }
    .nc_article .tag ul::before {
      font-size: 70%;
      position: absolute;
      top: 50%;
      left: -60px;
      margin-top: -10px;
      content: "関連タグ："; }
  @media all and (max-width: 1024px) {
    .nc_article {
      margin: 0 0 0 45%; }
      .nc_article p {
        margin-bottom: 15px;
        line-height: 1.6em;
        font-size: 90%; }
      .nc_article .tag {
        position: relative;
        margin-left: 62px; }
        .nc_article .tag ul::before {
          font-size: 70%;
          position: absolute;
          top: 50%;
          left: -60px;
          margin-top: -10px;
          content: "関連タグ："; } }
  @media all and (max-width: 640px) {
    .nc_article {
      width: 100%;
      margin: 10% auto; }
      .nc_article p {
        margin-bottom: 15px;
        line-height: 1.5em;
        font-size: 70%; }
      .nc_article .tag {
        position: relative;
        margin: 10px 0 0 60px; }
        .nc_article .tag ul::before {
          font-size: 70%;
          position: absolute;
          top: -20%;
          left: -60px;
          margin-top: 10px;
          content: "関連タグ："; } }

/*----------------------------------------------------
	商品詳細の設定
----------------------------------------------------*/
.nc_spec {
  background: #EEEEEE;
  border-radius: 4px;
  padding: 3%;
  margin-top: 50px; }
  .nc_spec p {
    font-size: 70%;
    margin-bottom: 15px;
    line-height: 1.4em; }
    .nc_spec p:last-child {
      margin-bottom: 0; }
  @media all and (max-width: 1024px) {
    .nc_spec {
      background: #EEEEEE; }
      .nc_spec p {
        font-size: 70%;
        margin-bottom: 15px;
        line-height: 1.4em; }
        .nc_spec p:last-child {
          margin-bottom: 0; } }
  @media all and (max-width: 640px) {
    .nc_spec {
      background: #EEEEEE; }
      .nc_spec p {
        font-size: 70%;
        margin-bottom: 15px;
        line-height: 1.4em; }
        .nc_spec p:last-child {
          margin-bottom: 0; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	ひみつ道具カラムの変数基本設定
----------------------------------------------------*/
/*----------------------------------------------------
	ひみつ道具カラム内／テキストデコレーション
----------------------------------------------------*/
.fg_txt_Large {
  font-size: 110%; }

.fg_txt_Small {
  font-size: 80%; }

.fg_txt_color_blue {
  color: #00b8f6; }

.fg_txt_color_pink {
  color: #ff7b84; }

.fg_txt_color_red {
  color: #dd0015; }

/*----------------------------------------------------
	ひみつ道具カラムの基本設定
----------------------------------------------------*/
.future_gadget_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px;
  padding-bottom: 30px; }
  @media all and (max-width: 1024px) {
    .future_gadget_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .future_gadget_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto 10%; } }
  @media all and (max-width: 320px) {
    .future_gadget_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee; } }

/*----------------------------------------------------
	ひみつ道具カラム・日付基本設定
----------------------------------------------------*/
.future_gadget_date {
  width: 780px;
  margin: 30px;
  padding: 10px 30px 10px 0px;
  background-color: #00a8f4;
  font-size: 16px;
  color: white;
  border-radius: 8px;
  text-align: right;
  float: right;
  min-height: 1.3em; }
  @media all and (max-width: 1024px) {
    .future_gadget_date {
      width: 96%;
      margin: -7% auto 0%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 100%;
      color: white;
      border-radius: 5px;
      text-align: right; } }
  @media all and (max-width: 640px) {
    .future_gadget_date {
      width: 96%;
      margin: 3% auto 0%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 100%;
      color: white;
      border-radius: 5px;
      text-align: right; } }
  @media all and (max-width: 320px) {
    .future_gadget_date {
      width: 92%;
      margin: 2%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 80%;
      color: white;
      border-radius: 5px;
      text-align: right; } }

/*----------------------------------------------------
	ひみつ道具カラム・デコレーション画像基本設定
----------------------------------------------------*/
.future_gadget_img_top {
  position: absolute;
  top: -70px;
  left: 10px;
  z-index: 30px; }
  .future_gadget_img_top img {
    height: 100px;
    width: auto; }
  @media all and (max-width: 1024px) {
    .future_gadget_img_top {
      position: relative;
      margin: 0 auto;
      z-index: 30px; }
      .future_gadget_img_top img {
        height: 100px;
        width: auto; } }
  @media all and (max-width: 640px) {
    .future_gadget_img_top {
      display: none; } }
  @media all and (max-width: 320px) {
    .future_gadget_img_top {
      display: none; } }

.future_gadget_img_bottom {
  position: absolute;
  bottom: -80px;
  right: 20px;
  z-index: 30px; }
  .future_gadget_img_bottom img {
    height: 100px;
    width: auto; }
  @media all and (max-width: 1024px) {
    .future_gadget_img_bottom {
      position: absolute;
      margin: 0 auto;
      z-index: 30;
      bottom: -80px;
      right: 20px; }
      .future_gadget_img_bottom img {
        height: 100px;
        width: auto; } }
  @media all and (max-width: 640px) {
    .future_gadget_img_bottom {
      display: none; } }
  @media all and (max-width: 320px) {
    .future_gadget_img_bottom {
      display: none; } }

/*----------------------------------------------------
	ひみつ道具カラム・文章コンテンツと画像画像基本設定
----------------------------------------------------*/
/*文章コンテンツ全体*/
.future_gadget_contents {
  width: 760px;
  margin: 0 auto;
  padding: 5px 30px 5px 0px;
  font-size: 18px;
  float: right;
  text-align: left; }
  @media all and (max-width: 1024px) {
    .future_gadget_contents {
      width: 90%;
      margin: 0% auto;
      padding: 5%;
      font-size: 18px;
      text-align: left; } }
  @media all and (max-width: 640px) {
    .future_gadget_contents {
      width: 90%;
      margin: 0% auto;
      padding: 5%;
      font-size: 18px;
      text-align: left; } }

/*商品画像*/
.fg_main_ph {
  position: relative;
  float: left;
  width: 200px;
  z-index: 29; }
  .fg_main_ph img {
    width: 100%;
    margin-bottom: 5px; }
  @media all and (max-width: 1024px) {
    .fg_main_ph {
      float: left;
      width: 40%;
      margin: 0 auto; }
      .fg_main_ph img {
        width: 100%;
        margin-bottom: 5px; } }
  @media all and (max-width: 640px) {
    .fg_main_ph {
      float: none;
      width: 70%;
      margin: 0 auto; }
      .fg_main_ph img {
        width: 100%;
        margin-bottom: 5px; } }

/*----------------------------------------------------
	タイトルとサブタイトル全体
----------------------------------------------------*/
.fg_title {
  font-size: 150%;
  color: #00a8f4;
  margin-bottom: 10px;
  line-height: 1.2em; }
  @media all and (max-width: 1024px) {
    .fg_title {
      font-size: 130%;
      color: #00a8f4;
      margin-bottom: 30px;
      line-height: 1.2em; } }
  @media all and (max-width: 640px) {
    .fg_title {
      font-size: 110%;
      color: #00a8f4;
      margin-bottom: 10px;
      line-height: 1.2em; } }
  @media all and (max-width: 320px) {
    .fg_title {
      font-size: 100%;
      color: #00a8f4;
      margin-bottom: 30px;
      line-height: 1.2em; } }

.fg_title_sub {
  font-size: 90%;
  color: black;
  margin-bottom: 7px;
  line-height: 1.2em; }
  @media all and (max-width: 1024px) {
    .fg_title_sub {
      font-size: 80%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.4em; } }
  @media all and (max-width: 640px) {
    .fg_title_sub {
      font-size: 80%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.4em; } }
  @media all and (max-width: 320px) {
    .fg_title_sub {
      font-size: 70%;
      color: black;
      margin-bottom: 7px;
      line-height: 1.4em; } }

/*----------------------------------------------------
	記事本文の設定
----------------------------------------------------*/
.fg_article {
  margin: 0 0 0 235px; }
  .fg_article p {
    margin-bottom: 15px;
    line-height: 1.6em;
    font-size: 90%; }
  .fg_article .tag {
    position: relative;
    margin: 0 0 0 62px; }
    .fg_article .tag ul::before {
      font-size: 70%;
      position: absolute;
      top: 50%;
      left: -60px;
      margin-top: -10px;
      content: "関連タグ："; }
  @media all and (max-width: 1024px) {
    .fg_article {
      margin: 0 0 0 45%; }
      .fg_article p {
        margin-bottom: 15px;
        line-height: 1.6em;
        font-size: 90%; }
      .fg_article .tag {
        position: relative;
        margin-left: 62px; }
        .fg_article .tag ul::before {
          font-size: 70%;
          position: absolute;
          top: 50%;
          left: -60px;
          margin-top: -10px;
          content: "関連タグ："; } }
  @media all and (max-width: 640px) {
    .fg_article {
      width: 100%;
      margin: 10% auto; }
      .fg_article p {
        margin-bottom: 15px;
        line-height: 1.5em;
        font-size: 70%; }
      .fg_article .tag {
        position: relative;
        margin: 10px 0 0 60px; }
        .fg_article .tag ul::before {
          font-size: 70%;
          position: absolute;
          top: -20%;
          left: -60px;
          margin-top: 10px;
          content: "関連タグ："; } }
  @media all and (max-width: 320px) {
    .fg_article {
      width: 100%;
      margin: 10% auto; }
      .fg_article p {
        margin-bottom: 15px;
        line-height: 1.6em;
        font-size: 65%; }
      .fg_article .tag {
        position: relative;
        margin: 10px 0 0 60px; }
        .fg_article .tag ul::before {
          font-size: 70%;
          position: absolute;
          top: -20%;
          left: -60px;
          margin-top: 10px;
          content: "関連タグ："; } }

/*----------------------------------------------------
	商品詳細の設定
----------------------------------------------------*/
.fg_spec {
  background: #EEEEEE;
  border-radius: 4px;
  padding: 3%;
  margin-top: 50px;
  word-wrap: break-word;
  overflow-wrap: break-word; }
  .fg_spec p {
    font-size: 70%;
    margin-bottom: 15px;
    line-height: 1.4em; }
    .fg_spec p:last-child {
      margin-bottom: 0; }
  @media all and (max-width: 1024px) {
    .fg_spec {
      background: #EEEEEE; }
      .fg_spec p {
        font-size: 70%;
        margin-bottom: 15px;
        line-height: 1.4em; }
        .fg_spec p:last-child {
          margin-bottom: 0; } }
  @media all and (max-width: 640px) {
    .fg_spec {
      background: #EEEEEE; }
      .fg_spec p {
        font-size: 70%;
        margin-bottom: 15px;
        line-height: 1.4em; }
        .fg_spec p:last-child {
          margin-bottom: 0; } }

/*----------------------------------------------------
	コミックカラムの変数基本設定
----------------------------------------------------*/
/*----------------------------------------------------
	コミックカラム内／テキストデコレーション
----------------------------------------------------*/
.cc_txt_Large {
  font-size: 110%; }

.cc_txt_Small {
  font-size: 80%; }

.cc_txt_color_blue {
  color: #00b8f6; }

.cc_txt_color_pink {
  color: #ff7b84; }

.cc_txt_color_red {
  color: #dd0015; }

/*----------------------------------------------------
	コミックカラムの基本幅設定
----------------------------------------------------*/
.cc_box {
  position: relative;
  width: 900px;
  text-align: center;
  margin: 50px auto 120px;
  padding-bottom: 30px; }
  @media all and (max-width: 1024px) {
    .cc_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .cc_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 5% auto 130px; } }
  @media all and (max-width: 320px) {
    .cc_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 50px auto 130px; } }

/*----------------------------------------------------
	コミックカラムの1コマめ設定
----------------------------------------------------*/
.cc_panel001 {
  position: relative;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  border: #000 0.4em solid;
  margin: 0 auto 1em;
  background-image: url(../images/comic_columns/bg_dot_yellow.png);
  background-size: 5%; }
  @media all and (max-width: 1024px) {
    .cc_panel001 {
      position: relative;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      border: #000 0.4em solid;
      margin: 0 auto 1em;
      background-image: url(../images/comic_columns/bg_dot_yellow.png);
      background-size: 5%; } }
  @media all and (max-width: 640px) {
    .cc_panel001 {
      width: 100%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 0 auto 1em;
      background-image: url(../images/comic_columns/bg_dot_yellow.png);
      background-size: 5%; } }
  @media all and (max-width: 320px) {
    .cc_panel001 {
      width: 100%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 50px auto 130px; } }

/*----------------------------------------------------
	コミックカラムの2コマめ設定
----------------------------------------------------*/
.cc_panel002 {
  position: relative;
  width: 28.5%;
  text-align: left;
  box-sizing: border-box;
  border: #000 0.4em solid;
  background: #e3c7ff url(../images/comic_columns/bg_focusLine_white.png) no-repeat;
  background-position: 0x 0px;
  background-size: 250%;
  margin: 0 auto;
  height: 50em;
  float: left; }
  .cc_panel002 .copyright_for_detail {
    font-size: 70%;
    line-height: 1.5em;
    text-align: left; }
  @media all and (max-width: 1024px) {
    .cc_panel002 {
      position: relative;
      width: 28.5%;
      text-align: left;
      box-sizing: border-box;
      border: #000 0.4em solid;
      background: #e3c7ff url(../images/comic_columns/bg_focusLine_white.png) no-repeat;
      background-position: 0x 0px;
      background-size: 250%;
      margin: 0 auto;
      height: 50em;
      float: left; } }
  @media all and (max-width: 640px) {
    .cc_panel002 {
      width: 100%;
      height: auto;
      position: relative;
      text-align: center;
      margin: 0 auto 1em;
      background: #e3c7ff url(../images/comic_columns/bg_focusLine_white.png) no-repeat;
      background-position: center top;
      background-size: 100%; } }
  @media all and (max-width: 320px) {
    .cc_panel002 {
      width: 85%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 50px auto 130px; } }

/*----------------------------------------------------
	コミックカラムの3コマめ設定
----------------------------------------------------*/
.cc_panel003 {
  position: relative;
  width: 70%;
  text-align: left;
  box-sizing: border-box;
  border: #000 0.4em solid;
  background: #fff;
  margin: 0 auto 1em;
  height: 38em;
  float: right;
  /*----------------------------------------------------
  	コミックカラム内のタグ設定
  ----------------------------------------------------*/ }
  @media all and (max-width: 1024px) {
    .cc_panel003 {
      position: relative;
      width: 70%;
      text-align: left;
      box-sizing: border-box;
      border: #000 0.4em solid;
      background: #fff;
      margin: 0 auto 1em;
      height: 38em;
      float: right; }
      .cc_panel003 .basic_btn {
        width: 80%;
        margin-top: 0; } }
  @media all and (max-width: 640px) {
    .cc_panel003 {
      width: 100%;
      padding: 2.5%;
      height: auto;
      position: relative;
      text-align: center;
      margin: 0 auto 1em; } }
  @media all and (max-width: 320px) {
    .cc_panel003 {
      width: 100%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 50px auto 130px; } }
  .cc_panel003 .tag ul {
    margin: 0 auto 5%;
    padding: 0;
    list-style: none; }
  .cc_panel003 .tag ul li {
    display: inline-block;
    margin: 0 0 .1em 1em;
    padding: 0; }
  .cc_panel003 .tag ul li a {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 1em;
    background-color: #00a8f4;
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
    background-image: none; }
  .cc_panel003 .tag ul li a::before {
    position: absolute;
    top: 0;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    border-color: transparent #00a8f4 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    -webkit-transition: .2s;
    transition: .2s; }
  .cc_panel003 .tag ul li a::after {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background-color: #fff;
    border-radius: 100%; }
  .cc_panel003 .tag ul li span {
    display: block;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .cc_panel003 .tag ul li a:hover {
    background-color: #E50000;
    color: #fff; }
  .cc_panel003 .tag ul li a:hover::before {
    border-right-color: #E50000; }

/*----------------------------------------------------
	コミックカラムの4コマめ設定
----------------------------------------------------*/
.cc_panel004 {
  position: relative;
  width: 70%;
  text-align: left;
  box-sizing: border-box;
  border: #000 0.4em solid;
  background: #fff;
  margin: 0 auto;
  height: 11em;
  float: right;
  background-color: #b7ff9f; }
  @media all and (max-width: 1024px) {
    .cc_panel004 {
      position: relative;
      width: 70%;
      text-align: left;
      box-sizing: border-box;
      border: #000 0.4em solid;
      background: #fff;
      margin: 0 auto;
      height: 11em;
      float: right;
      background-color: #b7ff9f; } }
  @media all and (max-width: 640px) {
    .cc_panel004 {
      width: 100%;
      padding: 2.5%;
      height: auto;
      position: relative;
      text-align: center;
      margin: 0 auto; } }
  @media all and (max-width: 320px) {
    .cc_panel004 {
      width: 100%;
      padding: 2.5%;
      position: relative;
      text-align: center;
      margin: 50px auto 130px; } }

/*----------------------------------------------------
	コミックカラム・デコレーション画像基本設定
----------------------------------------------------*/
.cc_img_top {
  position: absolute;
  top: -30px;
  right: 40px;
  z-index: 30;
  width: 250px;
  height: 200px;
  background: url(../images/comic_columns/ph_nobita.png) no-repeat;
  background-size: 100%; }
  @media all and (max-width: 1024px) {
    .cc_img_top {
      position: absolute;
      top: -10px;
      right: 40px;
      z-index: 30;
      width: 250px;
      height: 200px;
      background: url(../images/comic_columns/ph_nobita.png) no-repeat;
      background-size: 100%; } }
  @media all and (max-width: 640px) {
    .cc_img_top {
      position: relative;
      margin: 0 0 -7% 28%;
      z-index: 30px; } }
  @media all and (max-width: 320px) {
    .cc_img_top {
      position: relative;
      margin: 0 auto;
      margin: 0 0 -7% 28%;
      z-index: 30px; } }

.cc_img_bottom {
  position: absolute;
  bottom: 0px;
  left: 20px;
  z-index: 30;
  width: 250px;
  height: 300px;
  background: url(../images/comic_columns/ph_doraemon.png) no-repeat;
  background-size: 70%; }
  @media all and (max-width: 1024px) {
    .cc_img_bottom {
      position: absolute;
      bottom: 0px;
      left: 0px;
      z-index: 30;
      width: 250px;
      height: 300px;
      background: url(../images/comic_columns/ph_doraemon.png) no-repeat;
      background-size: 70%; } }
  @media all and (max-width: 640px) {
    .cc_img_bottom {
      position: relative;
      bottom: 0px;
      left: 0px;
      z-index: 30;
      width: 250px;
      height: 300px;
      background: url(../images/comic_columns/ph_doraemon.png) no-repeat;
      background-size: 70%; } }
  @media all and (max-width: 320px) {
    .cc_img_bottom {
      position: absolute;
      left: 30%;
      z-index: 30px; }
      .cc_img_bottom img {
        height: 90px;
        width: auto; } }

/*----------------------------------------------------
	コミックカラム・日付基本設定
----------------------------------------------------*/
.cc_date {
  width: 95%;
  margin: 2% auto 2%;
  padding: 1%;
  background-color: #00a8f4;
  font-size: 16px;
  color: white;
  border-radius: 10px;
  text-align: left; }
  @media all and (max-width: 1024px) {
    .cc_date {
      width: 95%;
      margin: 2% auto 2%;
      padding: 1%;
      background-color: #00a8f4;
      font-size: 16px;
      color: white;
      border-radius: 10px;
      text-align: left; } }
  @media all and (max-width: 640px) {
    .cc_date {
      width: 96%;
      margin: 0 auto 3%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 100%;
      color: white;
      border-radius: 5px;
      text-align: center; } }
  @media all and (max-width: 320px) {
    .cc_date {
      width: 80%;
      margin: 2%;
      padding: 2%;
      background-color: #00a8f4;
      font-size: 80%;
      color: white;
      border-radius: 5px;
      text-align: right;
      float: right; } }

/*----------------------------------------------------
	タイトルとサブタイトル全体
----------------------------------------------------*/
.cc_title {
  font-size: 180%;
  color: #00a8f4;
  margin: 0 0 2% 2%;
  line-height: 1.2em;
  font-weight: 600; }
  @media all and (max-width: 1024px) {
    .cc_title {
      font-size: 180%;
      color: #00a8f4;
      line-height: 1.2em;
      width: 70%; } }
  @media all and (max-width: 640px) {
    .cc_title {
      font-size: 130%;
      color: #00a8f4;
      margin-bottom: 10px;
      line-height: 1.2em;
      width: 100%; } }
  @media all and (max-width: 320px) {
    .cc_title {
      font-size: 110%;
      color: #00a8f4;
      margin-bottom: 30px;
      line-height: 1.2em; } }
  .cc_title .cc_title_sub {
    font-size: 80%;
    color: black;
    margin-bottom: 7px;
    line-height: 1.2em;
    letter-spacing: 0.1em; }
    @media all and (max-width: 1024px) {
      .cc_title .cc_title_sub {
        font-size: 80%;
        width: 70%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.4em; } }
    @media all and (max-width: 640px) {
      .cc_title .cc_title_sub {
        font-size: 80%;
        color: black;
        margin: 0 auto 2%;
        line-height: 1.4em;
        width: 80%; } }
    @media all and (max-width: 320px) {
      .cc_title .cc_title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.2em; } }

/*----------------------------------------------------
	コミックカラム・文章コンテンツと画像画像基本設定
----------------------------------------------------*/
/*商品画像*/
.cc_main_ph {
  width: 80%;
  box-sizing: border-box;
  margin: 8% auto 0%;
  text-align: center; }
  .cc_main_ph img {
    margin-bottom: 5px;
    border: #000 0.1em solid; }
  @media all and (max-width: 1024px) {
    .cc_main_ph {
      width: 80%;
      box-sizing: border-box;
      margin: 0 auto;
      text-align: center; }
      .cc_main_ph img {
        width: 100%;
        margin: 10% auto; } }
  @media all and (max-width: 640px) {
    .cc_main_ph {
      float: none;
      width: 80%;
      margin: 5% auto; }
      .cc_main_ph img {
        width: 50%;
        margin: 0 auto 5%; } }

/*----------------------------------------------------
	記事本文の設定
----------------------------------------------------*/
.cc_article {
  width: 90%;
  margin: 5% auto 0; }
  .cc_article p {
    margin-bottom: 15px;
    line-height: 1.6em;
    font-size: 120%; }
  .cc_article .tag {
    position: relative;
    margin: 0 0 0 62px; }
    .cc_article .tag ul::before {
      font-size: 100%;
      position: absolute;
      top: 50%;
      left: -60px;
      margin: -8px 0 0 0;
      content: "関連タグ："; }
  @media all and (max-width: 1024px) {
    .cc_article {
      width: 90%;
      margin: 5% auto 0; }
      .cc_article p {
        margin-bottom: 15px;
        line-height: 1.6em;
        font-size: 110%; }
      .cc_article .tag {
        position: relative;
        margin-left: 62px; }
        .cc_article .tag ul::before {
          font-size: 90%;
          position: absolute;
          top: 50%;
          left: -60px;
          content: "関連タグ："; } }
  @media all and (max-width: 640px) {
    .cc_article {
      width: 90%;
      margin: 10% auto; }
      .cc_article p {
        margin-bottom: 10%;
        line-height: 1.5em;
        font-size: 100%;
        text-align: left; }
      .cc_article .tag {
        position: relative;
        margin: 0 0 8% 15%;
        width: 100%;
        text-align: left; }
        .cc_article .tag ul::before {
          font-size: 90%;
          position: absolute;
          top: -20%;
          left: -60px;
          margin-top: 2%;
          content: "関連タグ："; } }

/*----------------------------------------------------
	商品詳細の設定
----------------------------------------------------*/
.cc_spec {
  width: 90%;
  margin: 3% auto 0; }
  .cc_spec p {
    font-size: 100%;
    margin-bottom: 15px;
    line-height: 1.4em; }
    .cc_spec p:last-child {
      margin-bottom: 0; }
  @media all and (max-width: 1024px) {
    .cc_spec {
      width: 90%;
      margin: 3% auto 0; }
      .cc_spec p {
        font-size: 100%;
        margin-bottom: 15px;
        line-height: 1.4em; }
        .cc_spec p:last-child {
          margin-bottom: 0; } }
  @media all and (max-width: 640px) {
    .cc_spec p {
      font-size: 100%;
      margin-bottom: 15px;
      line-height: 1.4em; }
      .cc_spec p:last-child {
        margin-bottom: 0; } }

/*----------------------------------------------------
	検索結果のボックス基本設定
----------------------------------------------------*/
.result_default {
  /*----------------------------------------------------
  	検索結果のタイトル部分
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	タグリスト
  ----------------------------------------------------*/ }
  .result_default .result_title {
    width: 96%;
    background-color: #73c8ef;
    margin: 3% auto 0;
    padding: 1%;
    text-align: left;
    color: white;
    font-size: 140%; }
    .result_default .result_title span:after {
      content: " での記事一覧";
      font-size: 90%;
      letter-spacing: 0.05em; }
    @media all and (max-width: 1024px) {
      .result_default .result_title {
        padding: 1.5%; } }
  .result_default .tag_list {
    width: 98%;
    background-color: #f9f9f9;
    margin: 1% auto;
    padding: 0%;
    text-align: left; }
    @media all and (max-width: 1024px) {
      .result_default .tag_list {
        margin-bottom: 3em; } }
    .result_default .tag_list .tag ul {
      margin: 5% auto;
      padding: 0%;
      list-style: none; }
    .result_default .tag_list .tag ul li {
      display: inline-block;
      margin: 0 0 .1em 1em;
      padding: 0%; }
      .result_default .tag_list .tag ul li:first-child {
        background-color: #999999;
        padding: 0.5em;
        color: white;
        border-radius: 1em;
        text-decoration: none;
        font-weight: bolder; }
      @media all and (max-width: 1024px) {
        .result_default .tag_list .tag ul li {
          margin: 0 0 0.8em 2em; }
          .result_default .tag_list .tag ul li:first-child {
            background-color: #999999;
            padding: 0.5em;
            color: white;
            border-radius: 1em;
            text-decoration: none;
            font-size: 90%;
            margin-left: 0.2em; } }
    .result_default .tag_list .tag ul li a {
      position: relative;
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 1em;
      background-color: #00a8f4;
      border-radius: 0 3px 3px 0;
      color: #fff;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-decoration: none;
      -webkit-transition: .2s;
      transition: .2s;
      background-image: none; }
    .result_default .tag_list .tag ul li a::before {
      position: absolute;
      top: 0;
      left: -10px;
      content: '';
      width: 0;
      height: 0;
      border-color: transparent #00a8f4 transparent transparent;
      border-style: solid;
      border-width: 10px 10px 10px 0;
      -webkit-transition: .2s;
      transition: .2s; }
    .result_default .tag_list .tag ul li a::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      display: block;
      content: '';
      width: 5px;
      height: 5px;
      margin-top: -3px;
      background-color: #fff;
      border-radius: 100%; }
    .result_default .tag_list .tag ul li span {
      display: block;
      max-width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .result_default .tag_list .tag ul li a:hover {
      background-color: #E50000;
      color: #fff; }
    .result_default .tag_list .tag ul li a:hover::before {
      border-right-color: #E50000; }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	検索結果のボックス基本設定
----------------------------------------------------*/
.resultforgNAV {
  /*----------------------------------------------------
  	検索結果のタイトル部分
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	検索結果のタイトル部分〜画像
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	タグリスト
  ----------------------------------------------------*/ }
  .resultforgNAV .result_title_default {
    width: 96%;
    background-color: #73c8ef;
    margin: 3% auto 1%;
    padding: 1%;
    text-align: left;
    color: white;
    font-size: 140%; }
    .resultforgNAV .result_title_default span:after {
      content: " での記事一覧";
      font-size: 90%;
      letter-spacing: 0.05em; }
    @media all and (max-width: 1024px) {
      .resultforgNAV .result_title_default {
        padding: 1.5%; } }
  .resultforgNAV .result_title {
    width: 100%;
    margin: 3% auto; }
    .resultforgNAV .result_title img {
      width: auto;
      max-height: 100px; }
    @media all and (max-width: 1024px) {
      .resultforgNAV .result_title {
        width: 100%;
        margin: 3% auto; }
        .resultforgNAV .result_title img {
          width: auto;
          max-height: 80px; } }
    @media all and (max-width: 640px) {
      .resultforgNAV .result_title {
        width: 80%;
        margin: 3% auto; }
        .resultforgNAV .result_title img {
          width: auto;
          max-height: 80px; } }
  .resultforgNAV .tag_list {
    width: 96%;
    background-color: #f9f9f9;
    margin: 0 auto 30px;
    padding: 1%;
    text-align: left; }
    @media all and (max-width: 1024px) {
      .resultforgNAV .tag_list {
        margin-bottom: 3em; } }
    .resultforgNAV .tag_list .tag ul {
      margin: 10px auto 10px;
      padding: 0;
      list-style: none; }
    .resultforgNAV .tag_list .tag ul li {
      display: inline-block;
      margin: 0 0 0.5em 1em;
      padding: 0; }
      .resultforgNAV .tag_list .tag ul li:first-child {
        background-color: #999999;
        padding: 0.5em;
        color: white;
        border-radius: 1em;
        text-decoration: none;
        font-weight: bolder; }
      @media all and (max-width: 1024px) {
        .resultforgNAV .tag_list .tag ul li {
          margin: 0 0 0.8em 2em; }
          .resultforgNAV .tag_list .tag ul li:first-child {
            background-color: #999999;
            padding: 0.5em;
            color: white;
            border-radius: 1em;
            text-decoration: none;
            font-size: 90%;
            margin-left: 0.2em; } }
    .resultforgNAV .tag_list .tag ul li a {
      position: relative;
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 1em;
      background-color: #00a8f4;
      border-radius: 0 3px 3px 0;
      color: #fff;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-decoration: none;
      -webkit-transition: .2s;
      transition: .2s;
      background-image: none; }
    .resultforgNAV .tag_list .tag ul li a::before {
      position: absolute;
      top: 0;
      left: -10px;
      content: '';
      width: 0;
      height: 0;
      border-color: transparent #00a8f4 transparent transparent;
      border-style: solid;
      border-width: 10px 10px 10px 0;
      -webkit-transition: .2s;
      transition: .2s; }
    .resultforgNAV .tag_list .tag ul li a::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      display: block;
      content: '';
      width: 5px;
      height: 5px;
      margin-top: -3px;
      background-color: #fff;
      border-radius: 100%; }
    .resultforgNAV .tag_list .tag ul li span {
      display: block;
      max-width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .resultforgNAV .tag_list .tag ul li a:hover {
      background-color: #E50000;
      color: #fff; }
    .resultforgNAV .tag_list .tag ul li a:hover::before {
      border-right-color: #E50000; }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
.terms_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px;
  padding: 30px; }
  .terms_box .terms_title_img {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    margin-bottom: 30px; }
    .terms_box .terms_title_img img {
      width: 50%; }
  .terms_box h2 {
    font-size: 120%; }
  .terms_box .sec_box {
    padding: 7px;
    margin-bottom: 30px; }
  .terms_box .sec_title {
    background-color: #abe8fd;
    padding: 7px;
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 30px; }
  .terms_box p {
    margin-bottom: 30px;
    text-align: left;
    line-height: 1.6em; }
  .terms_box .border {
    border-bottom: thin dashed #000; }
  .terms_box .subtitle {
    width: 100%;
    font-size: 110%;
    font-weight: bold;
    padding: 0.4em 0.2em 0.2em 0.4em;
    text-align: left;
    line-height: 1.4em;
    display: block;
    background-color: #eeeeee; }
  .terms_box ul {
    text-align: left;
    margin-bottom: 2em;
    line-height: 1.6em; }
    .terms_box ul li {
      list-style-type: none;
      margin-left: 1em; }
    .terms_box ul .sub2 {
      border-bottom: thin solid #999;
      padding-bottom: 0.2em;
      margin: 0 0 0.8em 1.4em;
      list-style-type: square; }
  .terms_box .show_mailadd {
    width: 100%;
    margin: 1em 0 1em 2em;
    font-size: 120%;
    display: block;
    text-align: left; }
  @media all and (max-width: 1024px) {
    .terms_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 0; } }
  @media all and (max-width: 640px) {
    .terms_box {
      width: 95%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px;
      box-sizing: border-box;
      padding: 2%; }
      .terms_box .terms_title_img {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 30px; }
        .terms_box .terms_title_img img {
          width: 80%; }
      .terms_box .show_mailadd {
        width: 100%;
        margin: 1em auto;
        font-size: 110%;
        display: block;
        text-align: left; } }
  @media all and (max-width: 320px) {
    .terms_box {
      width: 85%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto 120px;
      box-sizing: border-box; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	カラム内SNS投稿ボタンの基本設定
----------------------------------------------------*/
.sns_Area {
  width: 100%;
  margin-bottom: 20px; }
  .sns_Area ul {
    list-style-type: none; }
    .sns_Area ul li {
      display: inline-block;
      margin-right: 20px; }

/*----------------------------------------------------
	テキストデコレーション
----------------------------------------------------*/
.profile_txt_Large {
  font-size: 120%; }

.profile_txt_Small {
  font-size: 90%; }

.profile_txt_color_blue {
  color: #00b8f6; }

/*----------------------------------------------------
	囲み基本設定
----------------------------------------------------*/
.profile_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px;
  padding-bottom: 30px; }
  @media all and (max-width: 1024px) {
    .profile_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .profile_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 320px) {
    .profile_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto 120px; } }

/*----------------------------------------------------
	プロフィール・受賞歴サブタイトル設定
----------------------------------------------------*/
.profile_subtitle {
  width: 90%;
  padding: 1%;
  margin: 2% auto;
  background-color: #00a8f4; }
  .profile_subtitle img {
    width: 20%; }
  @media all and (max-width: 1024px) {
    .profile_subtitle img {
      width: 30%; } }
  @media all and (max-width: 640px) {
    .profile_subtitle {
      margin: 5% auto; } }

/*----------------------------------------------------
	プロフィール画像設定
----------------------------------------------------*/
.profile_ph {
  width: 40%;
  margin: 0 auto; }
  @media all and (max-width: 1024px) {
    .profile_ph {
      width: 60%; } }
  @media all and (max-width: 640px) {
    .profile_ph {
      width: 80%;
      margin: 5% auto; } }

/*----------------------------------------------------
	プロフィールテキスト設定
----------------------------------------------------*/
.profile_txt {
  width: 70%;
  margin: 5% auto;
  font-size: 120%;
  line-height: 1.6em;
  text-align: left; }
  @media all and (max-width: 1024px) {
    .profile_txt {
      width: 70%; } }
  @media all and (max-width: 640px) {
    .profile_txt {
      width: 80%;
      margin: 5% auto; } }

/*----------------------------------------------------
	バナー設定
----------------------------------------------------*/
.profile_banner {
  width: 50%;
  margin: 2% auto 9%; }
  @media all and (max-width: 1024px) {
    .profile_banner {
      width: 70%;
      margin: 5% auto; } }
  @media all and (max-width: 640px) {
    .profile_banner {
      width: 100%; } }

/*----------------------------------------------------
	受賞歴設定
----------------------------------------------------*/
.awards_txt {
  width: 70%;
  margin: 5% auto;
  text-align: center;
  font-size: 120%;
  line-height: 1.6em; }
  .awards_txt p {
    margin-bottom: 2%; }
  @media all and (max-width: 1024px) {
    .awards_txt {
      width: 70%; } }
  @media all and (max-width: 640px) {
    .awards_txt {
      width: 80%;
      margin: 5% auto; } }

/*----------------------------------------------------
	年表の設定
----------------------------------------------------*/
.history_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px; }
  .history_box .histor_image {
    width: 100%;
    height: auto;
    vertical-align: top; }
  @media all and (max-width: 1024px) {
    .history_box {
      width: 95%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .history_box {
      width: 95%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 320px) {
    .history_box {
      width: 85%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto 120px; } }

/*----------------------------------------------------
	バナー設定
----------------------------------------------------*/
.history_banner {
  width: 50%;
  margin: 2% auto 9%; }
  @media all and (max-width: 1024px) {
    .history_banner {
      width: 70%;
      margin: 5% auto; } }
  @media all and (max-width: 640px) {
    .history_banner {
      width: 80%; } }

/*----------------------------------------------------
	タイムマシンの画像基本設定
----------------------------------------------------*/
.TM_img_top {
  position: absolute;
  top: -3%;
  left: 70%;
  z-index: 30px; }
  .TM_img_top img {
    height: auto;
    width: 75%; }
  @media all and (max-width: 1024px) {
    .TM_img_top {
      left: 70%;
      top: -2%;
      position: absolute;
      margin: 0 auto;
      z-index: 30px; }
      .TM_img_top img {
        height: auto;
        width: 75%; } }
  @media all and (max-width: 640px) {
    .TM_img_top {
      left: 45%;
      top: -1.2%;
      position: absolute;
      margin: 0 auto;
      z-index: 30px; }
      .TM_img_top img {
        height: auto;
        width: 75%; } }
  @media all and (max-width: 320px) {
    .TM_img_top {
      left: 25%;
      top: -1.2%;
      position: absolute;
      margin: 0 auto;
      z-index: 30px; }
      .TM_img_top img {
        height: auto;
        width: 75%; } }

.TM_img_bottom {
  position: absolute;
  bottom: 17%;
  left: -53%;
  z-index: 30px; }
  .TM_img_bottom img {
    height: auto;
    width: 35%; }
  @media all and (max-width: 1024px) {
    .TM_img_bottom {
      position: absolute;
      bottom: 17%;
      left: -53%;
      z-index: 30px; }
      .TM_img_bottom img {
        height: auto;
        width: 25%; } }
  @media all and (max-width: 640px) {
    .TM_img_bottom {
      position: absolute;
      margin: 0 auto;
      bottom: 4%;
      left: 10%;
      z-index: 30px; }
      .TM_img_bottom img {
        height: auto;
        width: 75%; } }
  @media all and (max-width: 320px) {
    .TM_img_bottom {
      position: absolute;
      margin: 0 auto;
      z-index: 30px;
      bottom: 4%;
      left: 10%; }
      .TM_img_bottom img {
        height: auto;
        width: 75%; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	カラム内SNS投稿ボタンの基本設定
----------------------------------------------------*/
.sns_Area {
  width: 30%;
  margin: 3% auto 1%; }
  .sns_Area ul {
    list-style-type: none; }
    .sns_Area ul li {
      display: inline-block;
      margin-right: 20px; }
  @media all and (max-width: 640px) {
    .sns_Area {
      text-align: center; } }

/*----------------------------------------------------
	サブタイトル画像設定
----------------------------------------------------*/
h3 {
  width: 50%;
  margin: 5% auto; }
  h3 img {
    width: 100%; }
  @media all and (max-width: 640px) {
    h3 {
      width: 80%;
      margin: 5% auto; }
      h3 img {
        width: 100%; } }

/*----------------------------------------------------
	カード画像設定
----------------------------------------------------*/
.card_list {
  width: 100%;
  margin: 0 auto; }
  .card_list ul {
    list-style: none; }
    .card_list ul li {
      width: 20%;
      margin: 0.2em 0.4em;
      display: inline-block; }
      .card_list ul li img {
        width: 100%; }
  @media all and (max-width: 1024px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 20%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }
  @media all and (max-width: 640px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 45%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }
  @media all and (max-width: 320px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 45%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }

/*----------------------------------------------------
	囲み基本設定
----------------------------------------------------*/
.character_box {
  position: relative;
  width: 100%;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 5% auto;
  padding-bottom: 30px; }
  .character_box ul {
    list-style: none; }
    .character_box ul li {
      width: 30%;
      margin: 0.2em 0.4em;
      display: inline-block; }
      .character_box ul li img {
        height: auto;
        vertical-align: top; }
      .character_box ul li .card_ph {
        width: 80%; }
      .character_box ul li .info_ph {
        width: 120%; }
      .character_box ul li .manga_ph {
        width: 80%; }
  @media all and (max-width: 1024px) {
    .character_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto; }
      .character_box ul {
        list-style: none; }
        .character_box ul li {
          width: 30%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .character_box ul li img {
            height: auto;
            vertical-align: top; }
          .character_box ul li .card_ph {
            width: 80%; }
          .character_box ul li .info_ph {
            width: 120%; }
          .character_box ul li .manga_ph {
            width: 80%; } }
  @media all and (max-width: 640px) {
    .character_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto; }
      .character_box ul {
        list-style: none;
        text-align: center; }
        .character_box ul li {
          width: 90%;
          margin: 0.2em 0.4em 2em; }
          .character_box ul li img {
            height: auto;
            vertical-align: top; }
          .character_box ul li .card_ph {
            width: 80%; }
          .character_box ul li .info_ph {
            width: 80%; }
          .character_box ul li .manga_ph {
            width: 80%; } }
  @media all and (max-width: 320px) {
    .character_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto; } }

/*----------------------------------------------------
	各キャラの背景
----------------------------------------------------*/
.bg_doraemon {
  background: #fff url(../images/characters/doraemon/doraemon/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_doraemon {
      background: #fff url(../images/characters/doraemon/doraemon/bg_detail.png) no-repeat center bottom;
      background-size: 200%; } }

.bg_nobita {
  background: #fff url(../images/characters/doraemon/nobita/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_nobita {
      background: #fff url(../images/characters/doraemon/nobita/bg_detail.png) no-repeat center bottom;
      background-size: 200%; } }

.bg_shizuka {
  background: #fff url(../images/characters/doraemon/shizuka/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_shizuka {
      background: #fff url(../images/characters/doraemon/shizuka/bg_detail.png) no-repeat center bottom;
      background-size: 200%; } }

.bg_gian {
  background: #fff url(../images/characters/doraemon/gian/bg_detail.png) no-repeat fixed right bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_gian {
      background: #fff url(../images/characters/doraemon/gian/bg_detail.png) no-repeat center bottom;
      background-size: 220%; } }

.bg_suneo {
  background: #fff url(../images/characters/doraemon/suneo/bg_detail.png) no-repeat fixed right bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_suneo {
      background: #fff url(../images/characters/doraemon/suneo/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_dekisugi {
  background: #fff url(../images/characters/doraemon/dekisugi/bg_detail.png) no-repeat fixed right bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_dekisugi {
      background: #fff url(../images/characters/doraemon/dekisugi/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_dorami {
  background: #fff url(../images/characters/doraemon/dorami/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_dorami {
      background: #fff url(../images/characters/doraemon/dorami/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_sewashi {
  background: #fff url(../images/characters/doraemon/sewashi/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_sewashi {
      background: #fff url(../images/characters/doraemon/sewashi/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_gico {
  background: #fff url(../images/characters/doraemon/gico/bg_detail.png) no-repeat fixed right bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_gico {
      background: #fff url(../images/characters/doraemon/gico/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_papa {
  background: #fff url(../images/characters/doraemon/papa/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_papa {
      background: #fff url(../images/characters/doraemon/papa/bg_detail.png) no-repeat center bottom;
      background-size: 180%; } }

.bg_mama {
  background: #fff url(../images/characters/doraemon/mama/bg_detail.png) no-repeat fixed right bottom;
  background-size: 70%; }
  @media all and (max-width: 640px) {
    .bg_mama {
      background: #fff url(../images/characters/doraemon/mama/bg_detail.png) no-repeat center bottom;
      background-size: 150%; } }

/*----------------------------------------------------
	キャラセレクトボックス
----------------------------------------------------*/
.character_select_box {
  position: relative;
  width: 80%;
  text-align: left;
  margin: 0 auto; }
  .character_select_box ul {
    list-style: none; }
    .character_select_box ul li {
      width: 10%;
      margin: 0.4em;
      border: 0.4em solid #eeeeee;
      box-sizing: border-box;
      display: inline-block; }
      .character_select_box ul li img {
        height: auto;
        vertical-align: top; }
  @media all and (max-width: 1024px) {
    .character_select_box {
      position: relative;
      width: 80%;
      text-align: left;
      margin: 0 auto; }
      .character_select_box ul {
        list-style: none; }
        .character_select_box ul li {
          width: 10%;
          margin: 0.4em;
          border: 0.4em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .character_select_box ul li img {
            height: auto;
            vertical-align: top; } }
  @media all and (max-width: 640px) {
    .character_select_box {
      position: relative;
      width: 95%;
      margin: 0 auto;
      text-align: center; }
      .character_select_box ul {
        list-style: none;
        margin: 0 auto; }
        .character_select_box ul li {
          width: 17%;
          margin: 0.5em;
          border: 0.2em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .character_select_box ul li img {
            height: auto;
            vertical-align: top; } }
  @media all and (max-width: 320px) {
    .character_select_box {
      position: relative;
      width: 95%;
      margin: 0 auto;
      text-align: center; }
      .character_select_box ul {
        list-style: none;
        margin: 0 auto; }
        .character_select_box ul li {
          width: 17%;
          margin: 0.5em;
          border: 0.2em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .character_select_box ul li img {
            height: auto;
            vertical-align: top; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	サブタイトル画像設定
----------------------------------------------------*/
h3 {
  width: 50%;
  margin: 5% auto; }
  h3 img {
    width: 100%; }
  @media all and (max-width: 640px) {
    h3 {
      width: 80%;
      margin: 5% auto; }
      h3 img {
        width: 100%; } }

/*----------------------------------------------------
	カード画像設定
----------------------------------------------------*/
.card_list {
  width: 100%;
  margin: 0 auto; }
  .card_list ul {
    list-style: none; }
    .card_list ul li {
      width: 20%;
      margin: 0.2em 0.4em;
      display: inline-block; }
      .card_list ul li img {
        width: 100%; }
  @media all and (max-width: 1024px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 20%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }
  @media all and (max-width: 640px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 45%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }
  @media all and (max-width: 320px) {
    .card_list {
      width: 100%;
      margin: 0 auto; }
      .card_list ul {
        list-style: none; }
        .card_list ul li {
          width: 45%;
          margin: 0.2em 0.4em;
          display: inline-block; }
          .card_list ul li img {
            width: 100%; } }

/*----------------------------------------------------
	囲み基本設定
----------------------------------------------------*/
.mangainfo_box {
  position: relative;
  width: 100%;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 5% auto;
  padding-bottom: 30px;
  text-align: left;
  /*----------------------------------------------------
  	カラム内SNS投稿ボタンの基本設定
  ----------------------------------------------------*/ }
  .mangainfo_box .basic_info {
    width: 80%;
    margin: 5% auto;
    vertical-align: top; }
    .mangainfo_box .basic_info .card_ph {
      width: 30%;
      display: inline-block; }
    .mangainfo_box .basic_info .txt_ph {
      width: 63%;
      display: inline-block;
      margin-left: 5%;
      vertical-align: top; }
  .mangainfo_box .manga_ph {
    width: 70%;
    margin: 5% auto; }
    .mangainfo_box .manga_ph img {
      width: 100%;
      height: auto; }
  .mangainfo_box .banner_ph {
    width: 40%;
    margin: 5% auto; }
    .mangainfo_box .banner_ph img {
      width: 100%;
      height: auto; }
  @media all and (max-width: 1024px) {
    .mangainfo_box {
      width: 95%;
      padding: 2.5%; }
      .mangainfo_box .basic_info {
        width: 80%;
        margin: 5% auto;
        vertical-align: top; }
        .mangainfo_box .basic_info .card_ph {
          width: 30%;
          display: inline-block; }
        .mangainfo_box .basic_info .txt_ph {
          width: 63%;
          display: inline-block;
          margin-left: 5%;
          vertical-align: top; }
      .mangainfo_box .manga_ph {
        width: 70%;
        margin: 5% auto; }
        .mangainfo_box .manga_ph img {
          width: 100%;
          height: auto; }
      .mangainfo_box .banner_ph {
        width: 40%;
        margin: 5% auto; }
        .mangainfo_box .banner_ph img {
          width: 100%;
          height: auto; } }
  @media all and (max-width: 640px) {
    .mangainfo_box {
      width: 95%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto; }
      .mangainfo_box .basic_info {
        width: 100%;
        margin: 5% auto;
        vertical-align: top; }
        .mangainfo_box .basic_info .card_ph {
          width: 50%;
          margin: 5% auto; }
        .mangainfo_box .basic_info .txt_ph {
          width: 100%;
          margin: 5% auto; }
      .mangainfo_box .manga_ph {
        width: 100%;
        margin: 10% auto; }
      .mangainfo_box .banner_ph {
        width: 80%;
        margin: 10% auto; }
        .mangainfo_box .banner_ph img {
          width: 100%;
          height: auto; } }
  @media all and (max-width: 320px) {
    .mangainfo_box {
      width: 85%;
      padding: 2.5%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 5% auto; } }
  .mangainfo_box .sns_Area {
    width: 30%;
    margin: 3% auto 1%; }
    .mangainfo_box .sns_Area ul {
      list-style-type: none; }
      .mangainfo_box .sns_Area ul li {
        display: inline-block;
        margin-right: 20px; }

/*----------------------------------------------------
	各キャラの背景
----------------------------------------------------*/
.bg_doraemon {
  background: #fff url(../images/manga_info/doraemon/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_doraemon {
      background: #fff url(../images/manga_info/doraemon/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_obakenoqtaro {
  background: #fff url(../images/manga_info/obakenoqtaro/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_obakenoqtaro {
      background: #fff url(../images/manga_info/obakenoqtaro/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_perman {
  background: #fff url(../images/manga_info/perman/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_perman {
      background: #fff url(../images/manga_info/perman/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_esper_mami {
  background: #fff url(../images/manga_info/esper_mami/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_esper_mami {
      background: #fff url(../images/manga_info/esper_mami/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_kiteretsu {
  background: #fff url(../images/manga_info/kiteretsu/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_kiteretsu {
      background: #fff url(../images/manga_info/kiteretsu/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_21emon {
  background: #fff url(../images/manga_info/21emon/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_21emon {
      background: #fff url(../images/manga_info/21emon/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_umehoshidenka {
  background: #fff url(../images/manga_info/umehoshidenka/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_umehoshidenka {
      background: #fff url(../images/manga_info/umehoshidenka/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_TPbon {
  background: #fff url(../images/manga_info/TPbon/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_TPbon {
      background: #fff url(../images/manga_info/TPbon/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_mojako {
  background: #fff url(../images/manga_info/mojako/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_mojako {
      background: #fff url(../images/manga_info/mojako/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_pokonyan {
  background: #fff url(../images/manga_info/pokonyan/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_pokonyan {
      background: #fff url(../images/manga_info/pokonyan/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_chinpui {
  background: #fff url(../images/manga_info/chinpui/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_chinpui {
      background: #fff url(../images/manga_info/chinpui/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_bakeru_kun {
  background: #fff url(../images/manga_info/bakeru_kun/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_bakeru_kun {
      background: #fff url(../images/manga_info/bakeru_kun/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_miracle_1 {
  background: #fff url(../images/manga_info/miracle_1/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_miracle_1 {
      background: #fff url(../images/manga_info/miracle_1/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_mikio_mikio {
  background: #fff url(../images/manga_info/mikio_mikio/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_mikio_mikio {
      background: #fff url(../images/manga_info/mikio_mikio/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

.bg_saenaishi {
  background: #fff url(../images/manga_info/saenaishi/bg_detail.png) repeat-x fixed center bottom;
  background-size: 60%; }
  @media all and (max-width: 640px) {
    .bg_saenaishi {
      background: #fff url(../images/manga_info/saenaishi/bg_detail.png) repeat-x center bottom;
      background-size: 120%; } }

/*----------------------------------------------------
	キャラセレクトボックス
----------------------------------------------------*/
.mangainfo_select_box {
  position: relative;
  width: 80%;
  text-align: left;
  margin: 0 auto; }
  .mangainfo_select_box ul {
    list-style: none; }
    .mangainfo_select_box ul li {
      width: 10%;
      margin: 0.4em;
      border: 0.4em solid #eeeeee;
      box-sizing: border-box;
      background-color: #fff;
      display: inline-block; }
      .mangainfo_select_box ul li img {
        height: auto;
        vertical-align: top; }
  @media all and (max-width: 1024px) {
    .mangainfo_select_box {
      position: relative;
      width: 80%;
      text-align: left;
      margin: 0 auto; }
      .mangainfo_select_box ul {
        list-style: none; }
        .mangainfo_select_box ul li {
          width: 10%;
          margin: 0.4em;
          border: 0.4em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .mangainfo_select_box ul li img {
            height: auto;
            vertical-align: top; } }
  @media all and (max-width: 640px) {
    .mangainfo_select_box {
      position: relative;
      width: 95%;
      margin: 0 auto;
      text-align: center; }
      .mangainfo_select_box ul {
        list-style: none;
        margin: 0 auto; }
        .mangainfo_select_box ul li {
          width: 17%;
          margin: 0.5em;
          border: 0.4em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .mangainfo_select_box ul li img {
            height: auto;
            vertical-align: top; } }
  @media all and (max-width: 320px) {
    .mangainfo_select_box {
      position: relative;
      width: 90%;
      margin: 0 auto;
      text-align: center; }
      .mangainfo_select_box ul {
        list-style: none;
        margin: 0 auto; }
        .mangainfo_select_box ul li {
          width: 17%;
          margin: 0.3em;
          border: 0.4em solid #eeeeee;
          box-sizing: border-box;
          display: inline-block; }
          .mangainfo_select_box ul li img {
            height: auto;
            vertical-align: top; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
.sitemap .sitemap_box {
  display: -webkit-box;
  /*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: -webkit-flex;
  /*--- safari（PC）用 ---*/
  display: flex;
  -js-display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto;
  margin: 0 auto 30px; }
  .sitemap .sitemap_box a:link {
    color: #000; }
  .sitemap .sitemap_box a:visited {
    color: #000; }
  .sitemap .sitemap_box a:hover {
    color: #e60000; }
  .sitemap .sitemap_box a:active {
    color: #e60000; }
  .sitemap .sitemap_box .item {
    position: relative;
    width: calc(100% / 4);
    margin: 0.5% auto 1%;
    padding: 0.5em;
    border-radius: 5%; }
    .sitemap .sitemap_box .item .category {
      width: 100%;
      font-size: 120%;
      font-weight: 400;
      margin-bottom: 0.7em;
      text-align: left;
      line-height: 1.6em;
      color: #00a8f4;
      border-bottom: 0.1em dashed #00a8f4; }
    .sitemap .sitemap_box .item p {
      font-size: 90%;
      line-height: 1.6em;
      color: #000;
      text-align: left; }
      .sitemap .sitemap_box .item p span {
        text-decoration: none; }
        .sitemap .sitemap_box .item p span:before {
          content: "●"; }
@media all and (max-width: 640px) {
  .sitemap .sitemap_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .sitemap .sitemap_box a:link {
      color: #000; }
    .sitemap .sitemap_box a:visited {
      color: #000; }
    .sitemap .sitemap_box a:hover {
      color: #e60000; }
    .sitemap .sitemap_box a:active {
      color: #e60000; }
    .sitemap .sitemap_box .item {
      position: relative;
      width: 95%;
      margin: 0.5% auto 1%;
      padding: 0.5em;
      border-radius: 5%; }
      .sitemap .sitemap_box .item .category {
        width: 100%;
        font-size: 100%;
        font-weight: 400;
        margin-bottom: 0.7em;
        text-align: left;
        line-height: 1.6em;
        color: #00a8f4;
        border-bottom: 0.1em dashed #00a8f4; }
      .sitemap .sitemap_box .item p {
        font-size: 100%;
        line-height: 1.6em;
        color: #000;
        text-align: left; }
        .sitemap .sitemap_box .item p span {
          text-decoration: none; }
          .sitemap .sitemap_box .item p span:before {
            content: "●"; } }
@media all and (max-width: 320px) {
  .sitemap .sitemap_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .sitemap .sitemap_box a:link {
      color: #000; }
    .sitemap .sitemap_box a:visited {
      color: #000; }
    .sitemap .sitemap_box a:hover {
      color: #e60000; }
    .sitemap .sitemap_box a:active {
      color: #e60000; }
    .sitemap .sitemap_box .item {
      position: relative;
      width: 95%;
      margin: 0.5% auto 1%;
      padding: 0.5em;
      border-radius: 5%; }
      .sitemap .sitemap_box .item .category {
        width: 100%;
        font-size: 100%;
        font-weight: 400;
        margin-bottom: 0.7em;
        text-align: left;
        line-height: 1.6em;
        color: #00a8f4;
        border-bottom: 0.1em dashed #00a8f4; }
      .sitemap .sitemap_box .item p {
        font-size: 100%;
        line-height: 1.6em;
        color: #000;
        text-align: left; }
        .sitemap .sitemap_box .item p span {
          text-decoration: none; }
          .sitemap .sitemap_box .item p span:before {
            content: "●"; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
.wallpaper .wallpaper_box {
  display: -webkit-box;
  /*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: -webkit-flex;
  /*--- safari（PC）用 ---*/
  display: flex;
  -js-display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto;
  margin: 0 auto 30px;
  padding-top: 5%; }
  .wallpaper .wallpaper_box a:link {
    color: #000; }
  .wallpaper .wallpaper_box a:visited {
    color: #000; }
  .wallpaper .wallpaper_box a:hover {
    color: #e60000; }
  .wallpaper .wallpaper_box a:active {
    color: #e60000; }
  .wallpaper .wallpaper_box .item {
    position: relative;
    width: calc(80% / 2);
    margin: 0.5% auto 4%;
    padding: 1%;
    border-radius: 5%;
    text-align: center; }
    .wallpaper .wallpaper_box .item img {
      width: 100%;
      border: 0.1em solid #cccccc; }
@media all and (max-width: 1024px) {
  .wallpaper .wallpaper_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px;
    padding-top: 5%; }
    .wallpaper .wallpaper_box a:link {
      color: #000; }
    .wallpaper .wallpaper_box a:visited {
      color: #000; }
    .wallpaper .wallpaper_box a:hover {
      color: #e60000; }
    .wallpaper .wallpaper_box a:active {
      color: #e60000; }
    .wallpaper .wallpaper_box .item {
      position: relative;
      width: calc(90% / 2);
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .wallpaper .wallpaper_box .item img {
        width: 100%;
        border: 0.1em solid #cccccc; } }
@media all and (max-width: 640px) {
  .wallpaper .wallpaper_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .wallpaper .wallpaper_box a:link {
      color: #000; }
    .wallpaper .wallpaper_box a:visited {
      color: #000; }
    .wallpaper .wallpaper_box a:hover {
      color: #e60000; }
    .wallpaper .wallpaper_box a:active {
      color: #e60000; }
    .wallpaper .wallpaper_box .item {
      position: relative;
      width: 80%;
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .wallpaper .wallpaper_box .item img {
        width: 50%;
        border: 0.1em solid #cccccc; } }
@media all and (max-width: 320px) {
  .wallpaper .wallpaper_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .wallpaper .wallpaper_box a:link {
      color: #000; }
    .wallpaper .wallpaper_box a:visited {
      color: #000; }
    .wallpaper .wallpaper_box a:hover {
      color: #e60000; }
    .wallpaper .wallpaper_box a:active {
      color: #e60000; }
    .wallpaper .wallpaper_box .item {
      position: relative;
      width: 80%;
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .wallpaper .wallpaper_box .item img {
        width: 50%;
        border: 0.1em solid #cccccc; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
.coloring .coloring_box {
  display: -webkit-box;
  /*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: -webkit-flex;
  /*--- safari（PC）用 ---*/
  display: flex;
  -js-display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto;
  margin: 0 auto 30px;
  padding-top: 5%; }
  .coloring .coloring_box a:link {
    color: #000; }
  .coloring .coloring_box a:visited {
    color: #000; }
  .coloring .coloring_box a:hover {
    color: #e60000; }
  .coloring .coloring_box a:active {
    color: #e60000; }
  .coloring .coloring_box .item {
    position: relative;
    width: calc(80% / 2);
    margin: 0.5% auto 4%;
    padding: 1%;
    border-radius: 5%;
    text-align: center; }
    .coloring .coloring_box .item img {
      width: 80%;
      border: 0.1em solid #cccccc; }
@media all and (max-width: 1024px) {
  .coloring .coloring_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px;
    padding-top: 5%; }
    .coloring .coloring_box a:link {
      color: #000; }
    .coloring .coloring_box a:visited {
      color: #000; }
    .coloring .coloring_box a:hover {
      color: #e60000; }
    .coloring .coloring_box a:active {
      color: #e60000; }
    .coloring .coloring_box .item {
      position: relative;
      width: calc(90% / 2);
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .coloring .coloring_box .item img {
        width: 100%;
        border: 0.1em solid #cccccc; } }
@media all and (max-width: 640px) {
  .coloring .coloring_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .coloring .coloring_box a:link {
      color: #000; }
    .coloring .coloring_box a:visited {
      color: #000; }
    .coloring .coloring_box a:hover {
      color: #e60000; }
    .coloring .coloring_box a:active {
      color: #e60000; }
    .coloring .coloring_box .item {
      position: relative;
      width: 80%;
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .coloring .coloring_box .item img {
        width: 70%;
        border: 0.1em solid #cccccc; } }
@media all and (max-width: 320px) {
  .coloring .coloring_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px; }
    .coloring .coloring_box a:link {
      color: #000; }
    .coloring .coloring_box a:visited {
      color: #000; }
    .coloring .coloring_box a:hover {
      color: #e60000; }
    .coloring .coloring_box a:active {
      color: #e60000; }
    .coloring .coloring_box .item {
      position: relative;
      width: 80%;
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .coloring .coloring_box .item img {
        width: 70%;
        border: 0.1em solid #cccccc; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	ひみつ道具カラムの変数基本設定
----------------------------------------------------*/
/*----------------------------------------------------
	ひみつ道具カラムの変数基本設定
----------------------------------------------------*/
.simplyinfo {
  /*----------------------------------------------------
  	テキストデコレーション
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	シンプルカラムの基本設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	シンプルカラム・日付基本設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	汎用カラム・デコレーション画像基本設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	ひみつ道具カラム・文章コンテンツと画像画像基本設定
  ----------------------------------------------------*/
  /*文章コンテンツ全体*/
  /*----------------------------------------------------
  	タイトルとサブタイトル全体
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	記事本文の設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	フッター
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	simplyinfoはここで閉じる↓
  ----------------------------------------------------*/ }
  .simplyinfo .txt_Large {
    font-size: 110%; }
  .simplyinfo .txt_Small {
    font-size: 80%; }
  .simplyinfo .txt_color_blue {
    color: #00b8f6; }
  .simplyinfo .txt_color_gray {
    color: #ff7b84; }
  .simplyinfo .columns_box {
    position: relative;
    width: 900px;
    border-radius: 20px;
    text-align: center;
    border: 6px solid #eeeeee;
    box-sizing: border-box;
    background: #fff;
    margin: 5% auto 0;
    padding: 10% auto; }
    @media all and (max-width: 1024px) {
      .simplyinfo .columns_box {
        width: 95%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; } }
    @media all and (max-width: 640px) {
      .simplyinfo .columns_box {
        width: 95%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; } }
    @media all and (max-width: 320px) {
      .simplyinfo .columns_box {
        width: 85%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; } }
  .simplyinfo .columns_date {
    width: 90%;
    margin: 5% auto 0;
    padding: 1%;
    background-color: #eeeeee;
    font-size: 16px;
    color: black;
    border-radius: 8px;
    text-align: right; }
    @media all and (max-width: 1024px) {
      .simplyinfo .columns_date {
        width: 96%;
        margin: -7% auto 0%;
        padding: 2%;
        font-size: 80%;
        border-radius: 5px;
        text-align: right; } }
    @media all and (max-width: 640px) {
      .simplyinfo .columns_date {
        width: 96%;
        margin: -7% auto 0%;
        padding: 2%;
        font-size: 80%;
        border-radius: 5px;
        text-align: right; } }
    @media all and (max-width: 320px) {
      .simplyinfo .columns_date {
        width: 80%;
        margin: 2%;
        padding: 2%;
        font-size: 80%;
        border-radius: 5px;
        text-align: right;
        float: right; } }
  .simplyinfo .columns_logo {
    position: relative;
    z-index: 30px;
    margin: 5% auto; }
    .simplyinfo .columns_logo img {
      height: auto;
      width: 30%; }
    @media all and (max-width: 1024px) {
      .simplyinfo .columns_logo {
        position: relative;
        z-index: 30px;
        margin: 2% auto 10%; }
        .simplyinfo .columns_logo img {
          height: auto;
          width: 30%; } }
    @media all and (max-width: 640px) {
      .simplyinfo .columns_logo {
        position: relative;
        margin: 2% auto 10%;
        z-index: 30px; }
        .simplyinfo .columns_logo img {
          height: auto;
          width: 40%; } }
    @media all and (max-width: 320px) {
      .simplyinfo .columns_logo {
        position: relative;
        margin: 2% auto 10%;
        z-index: 30px; }
        .simplyinfo .columns_logo img {
          height: auto;
          width: 40%; } }
  .simplyinfo .columns_contents {
    width: 60%;
    margin: 0 auto;
    padding: 5%;
    font-size: 18px; }
    @media all and (max-width: 1024px) {
      .simplyinfo .columns_contents {
        width: 60%;
        margin: 0% auto;
        padding: 5%;
        font-size: 18px; } }
    @media all and (max-width: 640px) {
      .simplyinfo .columns_contents {
        width: 90%;
        margin: 0% auto;
        padding: 5%;
        font-size: 18px; } }
  .simplyinfo .title {
    font-size: 110%;
    margin-bottom: 5%;
    line-height: 1.6em; }
    @media all and (max-width: 640px) {
      .simplyinfo .title {
        font-size: 110%;
        margin-bottom: 5%; } }
  .simplyinfo .title_sub {
    font-size: 90%;
    color: black;
    margin-bottom: 7px;
    line-height: 1.2em; }
    @media all and (max-width: 1024px) {
      .simplyinfo .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.4em; } }
    @media all and (max-width: 640px) {
      .simplyinfo .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.4em; } }
    @media all and (max-width: 320px) {
      .simplyinfo .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.2em; } }
  .simplyinfo .columns_article {
    margin: 0 auto;
    letter-spacing: 0.07em; }
    .simplyinfo .columns_article p {
      margin-bottom: 15px;
      line-height: 1.9em;
      font-size: 90%; }
    .simplyinfo .columns_article .goback {
      display: block;
      font-size: 80%;
      color: #4545c1; }
    @media all and (max-width: 1024px) {
      .simplyinfo .columns_article p {
        margin-bottom: 15px;
        line-height: 2em;
        font-size: 85%; } }
    @media all and (max-width: 640px) {
      .simplyinfo .columns_article {
        width: 100%;
        margin: 10% auto; }
        .simplyinfo .columns_article p {
          margin-bottom: 15px;
          line-height: 1.9em;
          font-size: 70%; } }
  .simplyinfo footer {
    max-width: 100%;
    text-align: center; }
    .simplyinfo footer .simply_copyright {
      font-size: 80%;
      line-height: 1.6em;
      padding: 2em;
      background-color: #eeeeee;
      text-align: center;
      margin: 0 auto; }
      .simplyinfo footer .simply_copyright p {
        margin-bottom: 1em; }
      @media all and (max-width: 1024px) {
        .simplyinfo footer .simply_copyright {
          font-size: 80%;
          line-height: 1.6em;
          padding: 2em; }
          .simplyinfo footer .simply_copyright p {
            margin-bottom: 1em; } }
      @media all and (max-width: 640px) {
        .simplyinfo footer .simply_copyright {
          max-width: 100%;
          font-size: 70%;
          line-height: 1.6em;
          padding: 3em 1em; }
          .simplyinfo footer .simply_copyright p {
            margin-bottom: 1em; } }
      @media all and (max-width: 320px) {
        .simplyinfo footer .simply_copyright {
          font-size: 60%;
          line-height: 1.6em;
          padding: 3em 1em; }
          .simplyinfo footer .simply_copyright p {
            margin-bottom: 1em; } }

/*----------------------------------------------------
	エラーページの変数基本設定
----------------------------------------------------*/
/*----------------------------------------------------
	エラーページの変数基本設定
----------------------------------------------------*/
.error {
  /*----------------------------------------------------
  	テキストデコレーション
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	エラーページの基本設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	ひみつ道具カラム・文章コンテンツと画像画像基本設定
  ----------------------------------------------------*/
  /*文章コンテンツ全体*/
  /*----------------------------------------------------
  	タイトルとサブタイトル全体
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	記事本文の設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	errorはここで閉じる↓
  ----------------------------------------------------*/ }
  .error .txt_Large {
    font-size: 110%; }
  .error .txt_Small {
    font-size: 80%; }
  .error .txt_color_blue {
    color: #00b8f6; }
  .error .columns_box {
    position: relative;
    width: 900px;
    border-radius: 20px;
    text-align: center;
    border: 6px solid #eeeeee;
    box-sizing: border-box;
    background: #fff;
    margin: 5% auto 10%;
    padding: 2%; }
    .error .columns_box img {
      width: 40%;
      margin: 10% auto; }
    @media all and (max-width: 1024px) {
      .error .columns_box {
        width: 95%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; } }
    @media all and (max-width: 640px) {
      .error .columns_box {
        width: 95%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; }
        .error .columns_box img {
          width: 70%;
          margin: 10% auto; } }
    @media all and (max-width: 320px) {
      .error .columns_box {
        width: 85%;
        padding: 2.5%;
        position: relative;
        border-radius: 20px;
        text-align: center;
        border: 6px solid #eeeeee; } }
  .error .columns_contents {
    width: 60%;
    margin: 0 auto;
    padding: 5%;
    font-size: 18px; }
    @media all and (max-width: 1024px) {
      .error .columns_contents {
        width: 60%;
        margin: 0% auto;
        padding: 5%;
        font-size: 18px; } }
    @media all and (max-width: 640px) {
      .error .columns_contents {
        width: 90%;
        margin: 0% auto;
        padding: 5%;
        font-size: 18px; } }
  .error .title {
    font-size: 110%;
    margin-bottom: 5%;
    line-height: 1.2em; }
    @media all and (max-width: 640px) {
      .error .title {
        font-size: 110%;
        margin-bottom: 5%; } }
  .error .title_sub {
    font-size: 90%;
    color: black;
    margin-bottom: 7px;
    line-height: 1.2em; }
    @media all and (max-width: 1024px) {
      .error .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.4em; } }
    @media all and (max-width: 640px) {
      .error .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.4em; } }
    @media all and (max-width: 320px) {
      .error .title_sub {
        font-size: 80%;
        color: black;
        margin-bottom: 7px;
        line-height: 1.2em; } }
  .error .columns_article {
    margin: 0 auto; }
    .error .columns_article p {
      margin-bottom: 15px;
      line-height: 1.6em;
      font-size: 90%; }
    @media all and (max-width: 1024px) {
      .error .columns_article p {
        margin-bottom: 15px;
        line-height: 1.6em;
        font-size: 90%; } }
    @media all and (max-width: 640px) {
      .error .columns_article {
        width: 100%;
        margin: 10% auto; }
        .error .columns_article p {
          margin-bottom: 15px;
          line-height: 1.5em;
          font-size: 70%; } }

/*----------------------------------------------------
	サブタイトル画像設定
----------------------------------------------------*/
h3 {
  width: 50%;
  margin: 5% auto; }
  h3 img {
    width: 100%; }
  @media all and (max-width: 640px) {
    h3 {
      width: 80%;
      margin: 5% auto; }
      h3 img {
        width: 100%; } }

/*----------------------------------------------------
	app_games基本設定
----------------------------------------------------*/
.apps_games {
  /*----------------------------------------------------
  	サブタイトル設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	囲み基本設定
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	apps_gamesここでおしまい
  ----------------------------------------------------*/ }
  .apps_games .title_enp {
    font-size: 130%;
    font-weight: bold;
    color: #ff6600;
    margin: 5% 0 0 0; }
  .apps_games .cathegory_box {
    width: 95%;
    border-radius: 20px;
    text-align: left;
    background: #00a4f0;
    margin: 5% auto;
    padding: 2%;
    font-size: 150%;
    color: #fff; }
    @media all and (max-width: 1024px) {
      .apps_games .cathegory_box {
        width: 95%;
        padding: 2.5%; } }
    @media all and (max-width: 640px) {
      .apps_games .cathegory_box {
        width: 95%;
        padding: 2.5%; } }
    @media all and (max-width: 320px) {
      .apps_games .cathegory_box {
        width: 85%; } }
  .apps_games .single--left {
    margin: 0 0 0 0; }

/*----------------------------------------------------
	ORのために下のマージンを開ける
----------------------------------------------------*/
.appgames_QR {
  margin-top: 5%; }

.static {
  /*----------------------------------------------------
  	囲み基本設定
  ----------------------------------------------------*/ }
  .static .static_box {
    display: -webkit-box;
    /*--- Androidブラウザ用 ---*/
    display: -ms-flexbox;
    /*--- IE10 ---*/
    display: -webkit-flex;
    /*--- safari（PC）用 ---*/
    display: flex;
    -js-display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 0 auto 30px;
    padding-top: 5%; }
    .static .static_box a:link {
      color: #000; }
    .static .static_box a:visited {
      color: #000; }
    .static .static_box a:hover {
      color: #e60000; }
    .static .static_box a:active {
      color: #e60000; }
    .static .static_box .item {
      position: relative;
      width: calc(80% / 2);
      margin: 0.5% auto 4%;
      padding: 1%;
      border-radius: 5%;
      text-align: center; }
      .static .static_box .item img {
        width: 100%;
        border: 0.1em solid #cccccc; }
  @media all and (max-width: 1024px) {
    .static .static_box {
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      height: auto;
      margin: 0 auto 30px;
      padding-top: 5%; }
      .static .static_box a:link {
        color: #000; }
      .static .static_box a:visited {
        color: #000; }
      .static .static_box a:hover {
        color: #e60000; }
      .static .static_box a:active {
        color: #e60000; }
      .static .static_box .item {
        position: relative;
        width: calc(90% / 2);
        margin: 0.5% auto 4%;
        padding: 1%;
        border-radius: 5%;
        text-align: center; }
        .static .static_box .item img {
          width: 100%;
          border: 0.1em solid #cccccc; } }
  @media all and (max-width: 640px) {
    .static .static_box {
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      height: auto;
      margin: 0 auto 30px; }
      .static .static_box a:link {
        color: #000; }
      .static .static_box a:visited {
        color: #000; }
      .static .static_box a:hover {
        color: #e60000; }
      .static .static_box a:active {
        color: #e60000; }
      .static .static_box .item {
        position: relative;
        width: 80%;
        margin: 0.5% auto 4%;
        padding: 1%;
        border-radius: 5%;
        text-align: center; }
        .static .static_box .item img {
          width: 100%;
          border: 0.1em solid #cccccc; } }
  @media all and (max-width: 320px) {
    .static .static_box {
      display: -webkit-box;
      /*--- Androidブラウザ用 ---*/
      display: -ms-flexbox;
      /*--- IE10 ---*/
      display: -webkit-flex;
      /*--- safari（PC）用 ---*/
      display: flex;
      -js-display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      height: auto;
      margin: 0 auto 30px; }
      .static .static_box a:link {
        color: #000; }
      .static .static_box a:visited {
        color: #000; }
      .static .static_box a:hover {
        color: #e60000; }
      .static .static_box a:active {
        color: #e60000; }
      .static .static_box .item {
        position: relative;
        width: 80%;
        margin: 0.5% auto 4%;
        padding: 1%;
        border-radius: 5%;
        text-align: center; }
        .static .static_box .item img {
          width: 100%;
          border: 0.1em solid #cccccc; } }
  .static .cathegory_box {
    width: 95%;
    border-radius: 20px;
    text-align: left;
    background: #00a4f0;
    margin: 5% auto 8%;
    padding: 1% 0 1% 3%;
    font-size: 150%;
    color: #fff; }
    @media all and (max-width: 1024px) {
      .static .cathegory_box {
        width: 95%;
        padding: 2.5%; } }
    @media all and (max-width: 640px) {
      .static .cathegory_box {
        width: 95%;
        padding: 2.5%; } }
    @media all and (max-width: 320px) {
      .static .cathegory_box {
        width: 85%; } }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	メイン画像の設定
----------------------------------------------------*/
.doraexhi_box {
  position: relative;
  width: 900px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #eeeeee;
  box-sizing: border-box;
  background: #fff;
  margin: 50px auto 120px; }
  .doraexhi_box .doraexhi_image {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin: 0 auto 10%; }
  @media all and (max-width: 1024px) {
    .doraexhi_box {
      width: 95%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; } }
  @media all and (max-width: 640px) {
    .doraexhi_box {
      width: 90%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 10% auto 120px; }
      .doraexhi_box .doraexhi_image {
        max-width: 100%;
        height: auto;
        vertical-align: top;
        margin: 0 auto 10%; }
      .doraexhi_box .doraexhi_wd80 {
        width: 80%; } }
  @media all and (max-width: 320px) {
    .doraexhi_box {
      width: 90%;
      position: relative;
      border-radius: 20px;
      text-align: center;
      border: 6px solid #eeeeee;
      margin: 50px auto 120px; }
      .doraexhi_box .doraexhi_image {
        max-width: 100%;
        height: auto;
        vertical-align: top;
        margin: 0 auto 10%; } }

/*----------------------------------------------------
	SNS投稿ボタンの基本設定
----------------------------------------------------*/
.dora_exhi_sns_Area {
  width: 80%;
  margin: 5% auto; }
  .dora_exhi_sns_Area ul {
    list-style-type: none; }
    .dora_exhi_sns_Area ul li {
      display: inline-block;
      margin-right: 2%;
      vertical-align: middle; }
    .dora_exhi_sns_Area ul .fb {
      margin-top: -1.6%; }

/*----------------------------------------------------
	タグの基本設定
----------------------------------------------------*/
.dora_exhi_tag {
  margin: 3% auto;
  width: 80%; }
  .dora_exhi_tag ul {
    margin: 5% auto;
    padding: 0;
    list-style: none; }
  .dora_exhi_tag ul li {
    display: inline-block;
    margin: 0 0 .1em 1em;
    padding: 0; }
  .dora_exhi_tag ul li a {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 1em;
    background-color: #00a8f4;
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
    background-image: none; }
  .dora_exhi_tag ul li a::before {
    position: absolute;
    top: 0;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    border-color: transparent #00a8f4 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    -webkit-transition: .2s;
    transition: .2s; }
  .dora_exhi_tag ul li a::after {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background-color: #fff;
    border-radius: 100%; }
  .dora_exhi_tag ul li span {
    color: #fff;
    display: block;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .dora_exhi_tag ul li a:hover {
    background-color: #E50000;
    color: #fff; }
  .dora_exhi_tag ul li a:hover::before {
    border-right-color: #E50000; }

/*----------------------------------------------------
	メディアクエリ書き分けテンプレ
----------------------------------------------------


	
	//タブレットの場合
	 @include media(tablet){
		 
	}

	
	
	//スマートフォンの場合
	 @include media(sp){

		 
	}
	
		//iPhoneの場合
	 @include media(iphone){

	}

	

	*/
/*----------------------------------------------------
	ページネーション
----------------------------------------------------*/
.pager {
  margin: 0 auto 5%; }
  .pager ul {
    width: 80%;
    list-style: none;
    position: relative;
    display: inline-block; }
    .pager ul li {
      width: 10%;
      display: inline-block;
      margin: 0 0.8%;
      vertical-align: middle;
      text-align: center; }
      .pager ul li a, .pager ul li span {
        display: block;
        font-size: 150%;
        font-family: 'Baloo Bhaina', cursive;
        padding: 0.5em 0.8em;
        border-radius: 5%; }
      .pager ul li a {
        background: white;
        color: #000;
        text-decoration: none; }
        .pager ul li a:hover {
          background: #ffb10b;
          color: #FFF; }
    .pager ul .current {
      background: #ffff40;
      border-radius: 5%; }
  @media all and (max-width: 640px) {
    .pager ul {
      width: 100%;
      list-style: none;
      display: inline-block; }
      .pager ul li {
        width: 10%;
        display: inline-block;
        margin: 0 0.2%;
        text-align: center; }
        .pager ul li a, .pager ul li span {
          display: block;
          font-family: 'Baloo Bhaina', cursive;
          padding: 0.5em 0.8em;
          border-radius: 5%;
          text-align: center; }
        .pager ul li a {
          background: white;
          color: #000;
          text-decoration: none; }
          .pager ul li a:hover {
            background: #ffb10b;
            color: #FFF; }
      .pager ul .current {
        background: #ffff40;
        border-radius: 5%; } }

/*----------------------------------------------------
	ページネーション
----------------------------------------------------*/
.pager002 {
  margin: 0 auto 5%; }
  .pager002 ul {
    width: 80%;
    list-style: none;
    position: relative;
    display: inline-block; }
    .pager002 ul li {
      width: 10%;
      display: inline-block;
      margin: 0 0.8%;
      vertical-align: middle;
      text-align: center; }
      .pager002 ul li a, .pager002 ul li span {
        display: block;
        font-size: 150%;
        font-family: 'Baloo Bhaina', cursive;
        padding: 0.5em 0.8em;
        border-radius: 5%;
        border: 0.3em solid #eee; }
      .pager002 ul li a {
        background: white;
        color: #000;
        text-decoration: none; }
        .pager002 ul li a:hover {
          background: #ffb10b;
          color: #FFF; }
    .pager002 ul .current {
      background: #ffff40;
      border-radius: 5%; }
  @media all and (max-width: 640px) {
    .pager002 ul {
      width: 100%;
      list-style: none;
      display: inline-block; }
      .pager002 ul li {
        width: 10%;
        display: inline-block;
        margin: 0 0.2%;
        text-align: center; }
        .pager002 ul li a, .pager002 ul li span {
          display: block;
          font-family: 'Baloo Bhaina', cursive;
          padding: 0.5em;
          border-radius: 5%;
          text-align: center;
          border-radius: 5%;
          border: 0.3em solid #eee; }
        .pager002 ul li a {
          background: white;
          color: #000;
          text-decoration: none; }
          .pager002 ul li a:hover {
            background: #ffb10b;
            color: #FFF; }
      .pager002 ul .current {
        background: #ffff40;
        border-radius: 5%; } }

/* 印刷用スタイル*/
/*----------------------------------------------------
	印刷用スタイル
----------------------------------------------------*/
@media print {
  * html body {
    zoom: .7; } }

/*# sourceMappingURL=style.css.map */