@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}



.entry-card, .related-entry-card {
  position: relative;
  height: 100%;
}

.entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb, .carousel-entry-card-thumb {
  float: left;
  margin-top: 3px;
  position: relative;
}

.entry-card-content, .related-entry-card-content {
  padding-bottom: 2px;
}

.entry-card-title, .related-entry-card-title {
  padding: 3px;
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.4;
  margin-bottom: 2px;
  font-weight: bold;
}

.entry-card-snippet, .related-entry-card-snippet {
  font-size: 0.8em;
  max-height: 7.8em;
  line-height: 1.3;
  overflow: hidden;
}

.entry-card-meta, .related-entry-card-meta {
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: right;
  line-height: 1;
}

/* .entry-categories-tags {
  margin-bottom: 18px;
} */

.sns-share, .sns-follow {
  margin: 24px 0;
}

.sns-share-message, .sns-follow-message {
  text-align: center;
  margin-bottom: 3px;
}

body, .header, .appeal {
  /* 画像を常に左右の中央に配置 */
  background-position: top center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: 100% auto;
}
body.ba-fixed, .ba-fixed.header, .ba-fixed.appeal {
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
}

.entry-category, .post-date,
.post-update,
.post-author,
.amp-back {
  padding: 2px;
  display: inline;
  font-size: 1.2rem;
}

.search-edit, input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  padding: 11px;
  border: 1px solid #ddd;
  border-radius: 2px;
  font-size: 1.6rem;
  width: 100%;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.mobile_search_top{
  padding: 0;
  max-width: 1054px;
}
.mobile_search_top form{
  margin: 6px 12px 6px 10px;
}

.sub-caption {
  /* font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif; */
  /* font-family: Tunga, "Trebuchet MS", Tahoma, Verdana, "Segoe UI", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif; */
  font-weight: 400;
  font-size: 0.75em;
  opacity: 0.5;
}

span.sub-caption {
  opacity: 0.8;
}

/************************************
** 基本表示
************************************/
/*初期化*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.container {
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

html{
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  /* フォントの種類 */
  /* font-family: 'Noto Sans JP', sans-serif !important; */
  /* font-family: 'メイリオ'; */
  font-family: 'Helvetica Neue','Helvetica','Arial', sans-serif;
  /* font-family: -apple-system-subset,Helvetica,Hiragino Sans,sHiragino Kaku Gothic ProN,sans-serif ; */
 font-size: 1.4rem;
  /* フォントの色 */
  color: #262524;
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.6;
  margin: 0;
  overflow-wrap: break-word;
  background-color: #f4f5f7;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
}

.article h1, #archive-title{
  font-size: 1.8rem;
  line-height: 1.6;
  padding: 12px 9px 4px 9px;
}

.article h1 .game_title , #main .game_title{
  display: block;
  color: #555;
  font-size: 13px;
  text-indent: -6px;
  font-weight: normal;
}

article .fig img{
  margin-bottom: 10px;
  border-radius: 4px;
}

#archive-title .fa{
  padding-right: 8px;
}

h2{
  font-size: 1.6rem;
}
h3{
  font-size: 1.5rem;
}
h4 , h5{
  font-size: 1.4rem;
}

p img[class*=" wp-image-"]{
  border-radius: 6px !important;
}


/*デフォルトリンク*/
a {
  color: #4c85d3;
  text-decoration: none;
}

ol, ul {
  margin: 0;
  padding-left: 14px;
}

ol li, ul li{
  padding: 4px 10px 4px 0;
}

.nlist{
  list-style: none;
  padding-left: 12px;
}
.nlist li{
  padding: 2px 4px 2px 0;
}
.nlist li::before {
  position: relative;
  top: -3px;
  left: -5px;
  display: inline-block;
  width: 2px;
  height: 2px;
  content: '';
  border-radius: 100%;
  background: #333;
}

hr {
  color: #eee;
}

/* クリアフィックス */
.cf::after {
  clear: both;
  content: "";
  display: block;
}

.header-container,.footer {
  background-color: #fff;
}

/* インナーを囲む */
.wrap {
  margin: 0 auto;
}


.ect-entry-card{
  display: flex;
  background: #ccc;
  flex-wrap: wrap;
  align-items: stretch;
}

.ect-entry-card .entry-card-wrap{
  width: 50%;
  margin: 0px;
  padding: 6px 3px 6px 3px;
}
.ect-entry-card .entry-card-wrap article{
  background-color: #66b6d5;
}

.ect-entry-card .entry-card-wrap figure{
  display: block;
  width: 100%;
  padding: 2px;
  background: #fff;
}


.ect-entry-card .entry-card-wrap img{
  width: 100%;
  object-fit: contain;
  background-image: url(https://dokkan.game-db.org//wp-content/themes/dokkan-game/img/charaImg/com_bg.png);
  background-size: 40px 40px;
}

.eyecatch-categories{
  position: absolute;
  right: auto;
  top: .4em;
  bottom: auto;
  left: .4em;
  font-size: 14px;
  padding: 0;
  opacity: .9;
  border: 1px solid #eee;
  background: #333;
}
.eyecatch-categories .cat-link{
  background-color: transparent;
  margin: 0;
  font-size: 1.3rem;
}
.eyecatch-categories .fa{
  display: none;
}


/************************************
** 広告のスタイル
************************************/
.ad_article{
  text-align: center;
  margin: 8px auto;
  max-width: 340px;
}
.ad_article .ad_name{
  text-align: left;
  font-size: 1.0rem;
  color: #999;
  line-height: 1;
  display: block;
  padding-bottom: 3px;
}

.ad_article ins{
  width: 300px;
  height: 250px;
}

@media(min-width: 375px) {
.ad_article ins{
  width: 336px;
  height: 280px;
} }


/************************************
** 本文部分
************************************/



details{
  background-color: #fff;
  border: 1px solid #c5c5c5;
  width: 100%;
  padding: 4px;
  border-radius: 4px;
  margin: 10px auto 28px auto;
  box-shadow: 0 2px 0 0 #fff, 0 6px 0 -3px #ccc, 0 9px 0 -4px #fff, 0 1.2rem 0 -6px #ccc;
}
details summary{
  padding: 4px 6px;
  color: #718477;
}

/* details summary::after{
  content: "(タップで展開)";
  font-size: 90%;
  color: #888;
} */


.center{
  text-align: center;
}

/* .archive-title{
  padding: 4px 10px;
  background-color: #3a3a3a;
  color: #fff;
} */

.content-in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main {
  max-width: 460px;
  width: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  position: relative;
}
.main .entry-content{
  padding: 0 10px;
}
.main article header h1{
  padding: 8px 12px 4px 12px;
}
.main article header .date-tags{
  padding: 0 10px;
}

/* エディタ用 */
#tinymce.main{
  max-width: 100%;
  font-size: 1.3rem;
}



.no-sidebar .content .main {
  margin: 0;
  width: 100%;
}

.no-scrollable-main .main {
  height: 100%;
}

.main-scroll {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-top: 2em;
}

@media all and (-ms-high-contrast: none) {
  .main-scroll {
    position: static;
    top: auto;
  }

  .logo {
    height: 100%;
  }
}
.publisher {
  display: none;
}

#wpadminbar {
  font-size: 13px;
}

.wp-caption {
  margin: 1em 0;
}

.gaiyo{
  font-size: 1.2rem;
  color: #777;
  line-height: 1.5;
  padding: 8px 4px 2px 4px;
}

.chara_sticky{
  position: fixed;
  top: 0;
  padding: 3px 10px 3px 14px;
  left: 0;
  font-size: 13px;
  margin: 0 auto;
  width: 100% !important;
  z-index: 100002;
  visibility: hidden;
  background: #fff;
  color: #333;
  border-left: none;
  border-bottom: none;
  display: table;
  box-shadow: 0 2px 2px rgba(0,0,0,0.125), 1px 0 1px rgba(0,0,0,0.05), -1px 0 1px rgba(0,0,0,0.05);
}

.chara_sticky span{
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
  font-size: 1.2rem;
}
.chara_sticky span:first-child{
  width : 40px;
  margin-right: 6px;
  line-height: 0;
}
.chara_sticky span:last-child{
  padding-left: 1px;
}
.chara_sticky span:first-child img{
  border-radius: 20px;
}

.sticky {
  position: -webkit-sticky; /* Safari用 */
  position:sticky; /* 要素をスクロールに応じて固定 */
  top:0; /* 縦スクロールに追従 */
  z-index: 900; /* z-indexで最前面に持ってくる */
}

.sticky_44{
  position: -webkit-sticky; /* Safari用 */
  position:sticky; /* 要素をスクロールに応じて固定 */
  top: 44px; /* 縦スクロールに追従 */
  z-index: 99; /* z-indexで最前面に持ってくる */
}

.eval{
  display: inline-block;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}


/* .chara_sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  display:table;
  width:100%;
  background:#fff;
  z-index: 999;
  height:44px;
  border-bottom: 1px solid #ccc;
}

.chara_sticky > div{
  height:44px;position: absolute;
  left:-10px; right: -10px;
  padding: 4px 10px 4px 10px;
}
.chara_sticky > div >img{
  width: 40px;
  vertical-align: middle;
  border-radius: 20px;
}
.chara_sticky > div > span{
  width: calc(100% - 50px);
  float: right;
  line-height: 1.4;
  font-size: 1.2rem;
} */


/************************************
** lazy
************************************/
.lazy-hidden,.entry img.lazy-hidden, img.thumbnail.lazy-hidden {
	background-color: #ffffff;
	background-image: url('img/lazy/loading.gif');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
figure.wp-block-image img.lazy-hidden {
	min-width: 150px;
}
picture source[type="image/webp"] {
	display: block;
}
.clear{clear:both}.nobr{white-space:nowrap}.lazy-hidden,.entry img.lazy-hidden,img.thumbnail.lazy-hidden{background-color:#efefef}


/************************************
** WordPress Misc
************************************/
.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.alignleft {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.alignright {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

.wp-caption {
  padding-top: 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #f3f4f5;
  text-align: center;
  max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
  font-size: 0.8em;
  margin: 2px;
}

.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none;
}

.wp-caption-dd {
  margin: 0;
  padding: 0 4px 5px;
  font-size: 11px;
  line-height: 17px;
}

img.alignright {
  display: inline-block;
  margin: 0 0 1em 1.5em;
}

img.alignleft {
  display: inline-block;
  margin: 0 1.5em 1em 0;
}

.comment-btn {
  margin: 24px 0;
  cursor: pointer;
}

label {
  cursor: pointer;
}

.sitemap li a::before {
  display: none;
}

.content-top,
.content-bottom {
  margin: 1em 0;
}

span.fa {
  font-family: FontAwesome;
}

/************************************
** 画像関係のスタイル
************************************/
figure {
  margin: 0;
}
figure img{
  max-width: 100%;
  height: auto;
}


/************************************
** 画像の囲み効果
************************************/
/*ボーダー*/
.iwe-border img,
.iwe-border amp-img {
  border: 1px solid #ccc;
}

/*ボーダー（太線）*/
.iwe-border-bold img,
.iwe-border-bold amp-img {
  border: 4px solid #eee;
}

/*シャドー*/
.iwe-shadow img,
.iwe-shadow amp-img {
  box-shadow: 5px 5px 15px #ddd;
}

/*シャドーペーパー*/
.iwe-shadow-paper img,
.iwe-shadow-paper amp-img {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.ect-vertical-card .entry-card-thumb,
.rect-vartical-card .related-entry-card-thumb {
  margin: 0;
}

.ib-right .blogcard-thumbnail,
.eb-right .blogcard-thumbnail {
  margin-right: 0;
  margin-left: 1.4%;
}

.no-thumbnail .card-thumb,
.no-thumbnail .widget-entry-card-pv {
  display: none;
}
.no-thumbnail .card-content,
.no-thumbnail .widget-entry-cards .widget-entry-card-content {
  margin: 0;
}
.no-thumbnail .widget-entry-cards div.widget-entry-card-content {
  font-size: 18px;
  margin-bottom: 0.6em;
}
.no-thumbnail .widget-entry-cards.large-thumb-on .card-title {
  max-height: none;
  position: static;
}
.no-thumbnail .entry-card-meta {
  position: static;
  background-color: transparent;
  margin-top: 0.4em;
}
.no-thumbnail .entry-card-snippet,
.no-thumbnail .related-entry-card-snippet {
  max-height: 10.4em;
}
.no-thumbnail .entry-card-day {
  display: inline;
}
.no-thumbnail .entry-card-meta .entry-card-categorys {
  display: inline;
}
.no-thumbnail .entry-card-meta .entry-card-categorys > span {
  margin-left: 0.6em;
}

img.emoji {
  display: inline;
  width: 1em;
  height: auto;
  vertical-align: text-bottom;
  margin-right: 0.1em;
}

/************************************
** ヘッダー
************************************/
.header {
  max-width: 1054px;
  margin: 0 auto;
  display: block;
  background: #333;
}
.header-in{
  width: 100%;
  height: 240px;
  background-image: url(img/custom/header.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
  z-index: 2;
}

.header-in h1, .header-in p a{
  color: #fff;
  font-size: 1.6rem;
}
.header-in p a{
  text-decoration: none;
}

.header_title{
  position: absolute;
  display: table;
  padding: 0px 10px;
  bottom: 6px;
  z-index: 999;
  width: 100%;
}
.header_title .header_img{
  display: table-cell;
  vertical-align: middle;
  border-radius: 6px;
  width: 50px;
  line-height: 1;
}

.header_search_content{
  padding: 0 6px;
}

.header_title p ,.header_title h1{
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  width: calc(100% - 140px);
}

.header_title .header_search{
  display: table-cell;
  vertical-align: middle;
  width: 48px;
  height: 44px;
  color: #ffffff;
  background: #ffffff3d;
  text-align: center;
  border: 1px solid #686c82;
  border-radius: 3px;
  cursor: pointer;
}
.header_title .header_search span{
  display: block;
  font-size: 1.0rem;
}

.header_title .header_search i{
  font-size: 2.2rem;

}

.header-in.in-article{
  height: 80px;
}

.header-in::after{
  height: 100px;
  background: -webkit-linear-gradient(bottom,#000,transparent);
  background: linear-gradient(to top,#1f1f1f,#27293594);
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  position: absolute;
}

.tagline {
  text-align: center;
  font-size: 14px;
  margin: .6em 0;
}

/************************************
** ヘッダーレイアウト
************************************/
.header-container-in.hlt-top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.header-container-in.hlt-top-menu .wrap {
  width: auto;
}
.header-container-in.hlt-top-menu .header {
  background-image: none;
}
.header-container-in.hlt-top-menu .logo-text {
  padding: 0;
  display: flex;
  align-items: center;
  align-content: center;
}
.header-container-in.hlt-top-menu .logo-image {
  padding: 0;
  margin: 0;
}
.header-container-in.hlt-top-menu .site-name-text-link {
  margin: 0 16px;
  display: block;
}
.header-container-in.hlt-top-menu .site-name-text {
  font-size: 22px;
  white-space: nowrap;
}
.header-container-in.hlt-top-menu .tagline {
  display: none;
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: 60px;
}
.header-container-in.hlt-top-menu .logo-header .site-name {
  margin: 0;
}
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 60px;
  height: 100%;
  width: auto;
}
.header-container-in.hlt-top-menu amp-img {
  max-width: 160px;
  max-height: 60px;
}
.header-container-in.hlt-top-menu amp-img img {
  height: auto;
}
.header-container-in.hlt-top-menu .navi {
  width: 100%;
}

.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text-link {
  margin: 0 16px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text {
  font-size: 20px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header {
  height: 40px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .navi-in > ul > li,
.header-container-in.hlt-top-menu.hlt-tm-small .navi-in > ul > .menu-item-has-description > a > .caption-wrap {
  line-height: 40px;
  height: 40px;
  display: block;
}
.header-container-in.hlt-top-menu.hlt-tm-small .item-description {
  display: none;
}

.hlt-tm-right .navi-in > ul {
  justify-content: flex-end;
}

/************************************
** センターロゴ（トップメニュー）
************************************/
.header-container-in.hlt-center-logo-top-menu {
  display: flex;
  flex-direction: column-reverse;
}

.cl-slim .navi-in > ul li {
  height: 40px;
  line-height: 40px;
}
.cl-slim .navi-in > ul li .sub-menu ul {
  top: -40px;
}
.cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap {
  height: 40px;
  line-height: 16px;
  font-size: 14px;
  padding-top: 6px;
}

/************************************
** グローバルメニュー
************************************/
.navi {
  background-color: #fff;
}

.navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  text-align: left;
  box-shadow: 0 1px 1px#ccc;
  /*サブメニュー*/
}
.navi-in > ul li {
  display: block;
  padding: 0;
  width: calc(100% / 3);;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.navi-in > ul li a{
  font-size: 1.3rem;
  padding:6px 4px;
  color: #1967d2;
}

@media screen and (min-width: 720px) {
  .navi-in > ul li {
    width: calc(100% / 9);
    padding-top: 4px; padding-bottom: 2px;
  }
}

.navi-in > ul li:hover > ul {
  display: block;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
  line-height: 21.4285714286px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 60px;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
  width: 100%;
}
.navi-in > ul > .menu-item-has-children {
  position: relative;
}
.navi-in > ul > .menu-item-has-children > a::after {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
  position: absolute;
  right: 3px;
  top: 0;
  font-size: 1.2rem;
}
.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  min-width: 240px;
  list-style: none;
  padding: 0;
  background-color: #fafbfc;
  z-index: 99;
  text-align: left;
  /*サブメニューのサブメニュー*/
}
.navi-in > ul .sub-menu li {
  width: auto;
}
.navi-in > ul .sub-menu .menu-item-has-children {
  position: relative;
}
.navi-in > ul .sub-menu .menu-item-has-children > a::after {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
  position: absolute;
  right: 3px;
  top: 0;
  font-size: 1.2rem;
}
.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}
.navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}
.navi-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 16px;
  transition: all 0.7s;
}
.navi-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}
.navi-in a:hover > ul {
  display: block;
}

/************************************
** モバイルメニュー
************************************/
.navi-in > .menu-mobile {
  display: none;
}
.navi-in > .menu-mobile .sub-menu {
  display: none;
}

/************************************
** フッターメニュー
************************************/
.navi-footer-in > .menu-footer {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: center;
  margin: 0;
}
.navi-footer-in > .menu-footer li {
  width: 120px;
  border-left: 1px solid #ccc;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 1px solid #ccc;
}
.navi-footer-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: all 0.7s;
}
.navi-footer-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

/************************************
** 図鑑
************************************/
.zukan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.zukan li{
  display: inline-block;
  width: 50%;
  padding: 2px;
  margin: 0;
  display: flex;
  cursor: pointer;
}

.zukan-full li{
  width: 100%;
}

.zukan li a{
  list-style:none;
  display:table;
  width: 100%; 
  text-align:left;
  padding: 4px 4px;
  border: 1px solid #eee;
  text-decoration: none;
}

#search_name_input{
  border-radius: 10px;
  font-size: 1.6rem;
  margin: 4px auto;
  width: 98%;
  display: block;
}

.zukan-full li a{
  padding: 2px;
}

.zukan li .zukan-img{
 display: table-cell;
 width: 44px;
 vertical-align: middle;
 padding: 2px;
}
.zukan-full li .zukan-img{
  width: 54px;
}

.zukan li .zukan-img img{
  background: #eee;
  border-radius: 20px;
  vertical-align: middle;
}

.zukan li .zukan-title{
  /* width: %; */
  text-align: left;
  display: table-cell;
  width: calc(100% - 50px);
  z-index: 2;
  font-size: 1.1rem;
  line-height: 1.4;
  vertical-align: middle;
}
.zukan-full li .zukan-title{
  font-size: 1.3rem;
}

.zukan_group_list {
  padding: 0 6px 0 0;
  display: flex;
  /* grid-template-rows: repeat(10, 30vw); */
  /* grid-column-gap: 1rem; */
  /* grid-row-gap: 1rem; */
  flex-wrap: wrap;
  /* height: 90vh; */
  position: sticky;
  top: 0;
  left: 0;
  width: 52px;
  float: left;
  font-weight: 500;
  font-size: 1.6rem;
}

.zukan_group_list .new_group{
  font-size: 1.4rem;
}
.zukan_group_list i{
  font-size: 2.2rem;
}

.zukan.hide{
  display :none;
}


.zukan_group_list li {
  scroll-snap-align: start;
  display: inline-block;
  border-radius: 3px;
  font-size: 1.6rem;
  min-width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid;
  /* border-radius: 30px; */
  margin: 4px  0 !important;
  text-align: center;
  padding: 0;
  cursor: pointer;
  border: 1px solid #aaa;
  color: #999;
}
.zukan_group_list li.select_zukan{
  background-color: #8ecc91;
  border: 1px solid #3d9840;
  color: #fff;
  font-size: 1.6rem;
}


#zukan_area , #zukan_search_area , #zukan_hot_area{
  padding-left: 50px;
}

/************************************
** エントリーカードの設定
************************************/
.a-wrap {
  text-decoration: none;
  display: block;
  color: #333;
  /* padding: 1.5%;
  margin-bottom: 3%;
  transition: all 0.7s; */
}
.a-wrap:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

.card-thumb img {
  width: 100%;
}

/* .entry-card-thumb {
  width: 320px;
} */

.related-entry-card-thumb {
  width: 160px;
}

.cat-label {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  border: 1px solid #eee;
  font-size: 11px;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.7);
  padding: 1px 5px;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-card-info > * {
  font-size: 0.7em;
  padding: 2px;
}

.post-comment-count::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
}

.entry-category::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
}

.entry-card-meta .entry-card-categorys {
  display: none;
}

.e-card-info .post-author {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}


.img_text{
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 6px;;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
}

.img_text .figure{
  flex-shrink: 0;
  line-height: 1;
  padding-right: 6px;
}

.img_text.between{
  justify-content: space-between;
}

.img_text .list_contents{
  width: 100%;
  text-align: left;
}

.img_text img{
  border-radius: 6px;
}
.img_text .price{
  text-align: center;
  width: 100%;
}

.post-author-image {
  margin-right: 3px;
}
.post-author-image img {
  border-radius: 50%;
}

.e-card-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.e-card-info > span {
  margin-right: 4px;
}

/************************************
** エントリーカードタイプ
************************************/
.ect-vertical-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ect-vertical-card .entry-card-wrap {
  width: 100%;
  display: inline-block;
  margin-bottom: 0;
}

#container .ect-vertical-card article{
  display: table;
  width: 100%;
  margin: 0;
  padding: 7px 10px 7px 10px;
  min-height: 62px;
  box-shadow: none;
  border-bottom: 1px dotted #DDD!important;
}

#container .ect-vertical-card article h2{
  font-weight: normal;
  color: #1967d2;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb {
  display: table-cell;
  width: 108px;
  height: 50px;
  vertical-align: middle;
  background-color: #f3f3f3;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
  width: 108px;
  height: 50px;
  object-fit: cover;
  padding: 1px 2px 1px 1px;
  vertical-align: middle;
  background: #eee;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  padding: 0 10px;
  line-height: 18px;
  text-align: left;
}
.ect-vertical-card .entry-card-wrap .post-date, .ect-vertical-card .entry-card-wrap .post-update {
  margin-right: 0;
}
.ect-vertical-card.ect-tile-card .a-wrap {
  margin: 0 0.25% 12px;
}
.ect-vertical-card.ect-tile-card .entry-card-content {
  padding: 0;
}
.ect-vertical-card.ect-tile-card .card-snippet {
  padding: 0;
  margin: 0;
}
.ect-vertical-card.ect-tile-card .card-meta {
  position: static;
}
.ect-vertical-card.ect-tile-card .a-wrap {
  margin: 0 0.16666% 12px;
}

.ect-2-columns > * {
  width: 49.5%;
  display: inline-block;
}

.ect-3-columns {
  justify-content: space-around;
}
.ect-3-columns .entry-card-wrap {
  width: 33%;
  padding: 7px;
}
.ect-3-columns .entry-card-snippet {
  max-height: 4em;
  overflow: hidden;
}

.ect-3-columns > * {
  width: 33%;
  display: inline-block;
}

.ecb-entry-border .entry-card-wrap {
  border: 1px solid #ccc;
}

.entry-card-day span:last-child {
  margin-right: 0;
}

.front-top-page .ect-big-card-first .a-wrap:first-of-type .card-thumb,
.ect-big-card .card-thumb {
  float: none;
  width: 100%;
}
.front-top-page .ect-big-card-first .a-wrap:first-of-type .card-content,
.ect-big-card .card-content {
  margin: 0;
}

/************************************
** 日付関係のスタイル
************************************/
.date-tags {
  line-height: 0.8;
  text-align: right;
  /* display: flex;
  flex-direction: row; */
  margin: 4px 0;
}
.date-tags .post-update {
  margin-right: 0;
}

.post-date,
.post-update,
.post-author,
.amp-back {
  margin-right: 8px;
}

.related-entry-post-date {
  margin-right: 0;
}

.post-update::before {
  font-family: FontAwesome;
  content: "最終更新:";
  padding-right: 4px;
}


/************************************
** パンくずリスト
************************************/
#breadcrumb{
  display: block;
  overflow-x: scroll;
  max-width: 1054px;
  background-color: #fff;
  padding: 10px;
}

.breadcrumb {
  margin: 1em .4em;
  color: #333;
  font-size: 1.2rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-weight: bold;
}
.breadcrumb li{
  display: inline;
  padding: 0;
}

.breadcrumb li:last-child{
  padding-right: 10px;
}

.breadcrumb li a{
  text-decoration: none;
}
.breadcrumb span.sp {
  margin: 0 6px;
}

.new_bread li + li::before{
  content: "";
  border-top: 2px solid #a09999;
  border-right: 2px solid #a09999;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  margin-left: 4px;
  transform: rotate(45deg);
}

.sns-buttons {
  display: flex;
  align-items: center;
}
.sns-buttons a {
  display: block;
  background-color: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  height: 45px;
}
.sns-buttons a:hover {
  opacity: 0.7;
  color: #fff;
  transition: all 0.7s;
}

.sns-share a, .sns-follow a {
  cursor: pointer;
}


/* メッセージ */
.copy-info {
  display: none;
  /*初期状態は非表示*/
  padding: 1em 2em;
  color: #fff;
  border-radius: 8px;
  /*画面上部に表示*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  opacity: 0.8;
  box-shadow: 0 4px 8px #777;
  z-index: 2;
}

/************************************
** 内容
************************************/

/*本文下カテゴリとタグ*/
.entry-categories-tags > div {
  margin-bottom: 0.5em;
}

.ctdt-one-row > div {
  display: inline-block;
}

.ctdt-category-only .entry-tags {
  display: none;
}

.ctdt-tag-only .entry-categories {
  display: none;
}

.ctdt-none {
  display: none;
}

/*本文下カテゴリ*/
.cat-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  font-size: 1.2rem;
  background-color: #333;
  border-radius: 2px;
  word-break: break-all;
}

.cat-link:hover {
  opacity: 0.5;
  color: #fff;
}

/*本文下タグ*/
.tag-link, .comment-reply-link {
  color: #1967d2;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 1px 5px;
  font-size: 1.2rem;
  border-radius: 2px;
  word-break: break-all;
}

.children .comment-reply-link {
  margin-right: -3px;
}

.tag-link:hover, .comment-reply-link:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
p,.paragraph {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 1.3rem;
  line-height: 1.8;
}

.information p{
  margin: 4px 0;
}

.question-box dt , .information-box dt{
  font-weight: bold;
}
.question-box dd, .information-box dd{
  font-size: 1.3rem;
}

.banner_box{
  border: 1px solid #cad3da;
  padding: 0px;
  margin-bottom: 8px;
}

.banner_box img{
  text-align: center;
  width: 100%;
  min-height: 100px;
  min-width: 100%;
  height: auto;
}


.banner_box .period{
  font-size: 1.3rem;
  display: block;
  padding: 4px 0;
  font-weight: bold;
  color: #E91E63;
  background: #fff7e0;
}

#main img.lazy-hidden{
  max-height:120px !important;
  background-color: #eee;
}

#main .article_relate img.lazy-hidden{
  max-height: 72px !important;
}

img[loading=lazy]{
  background-color: #eee !important;
}



.article_relate td , .new_table td{
  border-color: #d4bf91;
  padding: 8px 4px 4px 4px;
  vertical-align: top;
}
.pettan_aisho_data td{
  vertical-align: middle;
}

.article_relate td img{
  padding: 0;
  object-fit: cover;
  border-radius: 8px;
  /* border: 1px solid #9a9797; */
}

.article_relate th , .new_table th{
  border-color: #d4bf91;
  background-color: #f9f8ec;
  color: #452a44;
  font-size: 1.3rem;
}
.new_table th{
  border: 1px solid #d4bf91;
  background-color: #ffd8e6;
}

.memory_table th{
  border-color: #d4bf91;
  background-color: #f9f8ec;
  color: #452a44;
  font-size: 1.3rem;
}
.memory_table thead{
  border:2px solid #d4bf91;
}

.diver{
  position: relative;
  min-height: 20px;
  margin-bottom: 20px;
  pointer-events: none;
}

.diver.mini{
  min-height: 4px;
  margin-bottom: 4px;
}

.diver::after{
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(to right,rgba(155,97,55,0) 0%,rgb(114,97,77) 20%,rgb(129,109,87) 80%,rgba(164,105,62,0) 100%);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}

.article-header{
  border-bottom: 1px solid #fde7e7;
}
.top-home .article-header{
  position: relative;
  border: none;
}
.top-home .entry-title , .top-home .date-tags{
  position: absolute;
  bottom: 24px;
  color:#fff;
  background-color: #000000aa;
  width: 100%;
  z-index: 2;
}
.top-home .date-tags{
  bottom: 0;
  height: 20px;
}

.top-home .gaiyo{
  margin: 0 auto;
}


#container main.top-home article{
  background-color: #fffded;
  background-color: #edf6ff;
}

#container .top-home table , #container .top-home ul, #container .top-home ol{
  background-color: #fff;
}

.top-home table td,.top-home table th{
  border: 1px solid #c1b59c;
}
.top-home table th{
  background-color: #ffdd76;
  color: #333;
}

.top-home table.relate_table td a{
  font-weight: bold;
}

.top-home .ul_table_box p.color{
  background-color: #ffdd76;
  padding: 3px 6px;
  text-shadow: none;
}

#container table.menu_header td{
  border: 1px solid #ddd;
    padding: 4px;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    background-size: contain,contain,contain;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    padding: 8px 4px;
    margin: 0;
}
#container table.menu_header td a{
  text-align: left;
  display: block;
  padding-left: 6px;
  color: #5c7c8c;
}
#container table.menu_header td a::before{
  content: "▼ ";
  font-size: 1.1rem;
}

table {
  table-layout: fixed;
  margin-top: 4px;
  margin-bottom: 12px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}


table caption{
  font-size: 1.3rem;
  color: #f4f5f7;
  background: #686279;
  padding: 2px;
}
/* table caption::before{
  content: "・";
} */

table th {
  border: 1px solid #eaeaea;
  background-color: #f1f6f7;
  /* box-shadow: 0px 0px 25px rgba(224, 187, 81, 0.6) inset;
  background: #ffffff; */
}
/* table tr:nth-of-type(2n+1) {
  background-color: #fafbfc;
} */
table th,
table td {
  border: 1px solid #ddd;
  padding: 6px 4px;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

.battleroad_table td a{
  font-weight: bold;
}

table.list tr:nth-child(even) td {
	background: #fafafa;
}

table th.left,table td.left{
  text-align: left;
} 
table th.right,table td.right{
  text-align: right;
} 

.color_table th{
  border: 1px solid #dec88e;
  box-shadow: 0px 0px 25px rgba(224, 187, 81, 0.6) inset;
  background: #ffffff;
}
.color_table td{
  border: 1px solid #dec88e;
}

.status_area th, td{
  box-shadow: none;  
}


table td .tag{
  display: inline-block;
  font-size: 1.1rem;
}
table td a{
  text-decoration: none;
}

.scrollable-table {
  -webkit-overflow-scrolling: touch;
}

.scrollable-table table {
  border-collapse: collapse;
  max-width: 100%;
}

.scrollable-table th {
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td {
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}

.scrollable-table {
  overflow-x: auto;
  margin-bottom: 1em;
}

.article dl {
  margin: 1em 0;
}
.article dd {
  margin-left: 0px;
  line-height: 1.6;
}
.article ul li,
.article ol li {
  margin: 0;
}
.article ul ul, .article ul ol,
.article ol ul,
.article ol ol {
  margin: 0;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  line-height: 1.5;
  font-weight: bold;
}
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  line-height: 1.3;
  margin: 8px 0 10px;
}


.article h4,
.article h5,
.article h6 {
  padding: 9px 2px;
}
.article h2 , .pickup_footer .main_list_title{
  background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/left.png),url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/right.png),url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/center.png);
  padding-left: 20px;
  color: #FFF;
  background-repeat: no-repeat,no-repeat,repeat;
  background-position: left top,right top,center center;
  background-size: contain,contain,contain;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  padding:10px 10px 12px 10px;
  margin: 24px 0 10px;
}
.pickup_footer .main_list_title{
  margin: 4px 0 10px;
}

h2.related-entry-heading, h2.comment-title{
  padding: 6px 8px;
  background-color: #474e47;
  color: #fff;
}

.article h3 {
  position: relative;
  padding: 5px 8px 4px 7px;
  line-height: 1.4;
  margin: 18px 4px 10px 0;
  border-left: 4px solid #472e17;
  border-bottom: 1px solid #472e17;
  color: #3c3127;
  font-size: 1.5rem;
 }
.article h4::before {
  content: "";
  background-image: url('https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/m4.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 17px;
  position: absolute;
  top: 6px;
  left: -2px;
}
/* .article h4::after {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(to right,rgba(155, 97, 55, 0) 0%,rgb(114, 97, 77) 9%,rgb(129, 109, 87) 77%,rgba(164,105,62,0) 100%);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
} */

.article h4 {
  position: relative;
  padding: 5px 8px 5px 16px;
  line-height: 1.4;
  margin: 16px 4px 2px 4px;
  color: #3c3127;
  font-size: 1.4rem;
}



.article h5 {
  border-bottom: 1px solid #7e6146;
  margin: 10px 2px;
  padding: 6px 2px;
  color: #472e17;
}
.article h6 {
  border-bottom: 1px solid #ccc;
}
.article .column-wrap h1, .article .column-wrap h2, .article .column-wrap h3, .article .column-wrap h4, .article .column-wrap h5, .article .column-wrap h6 {
  margin-top: 0;
}

/************************************
** 引用（blockquote）
************************************/
blockquote {
  background-color: #fafbfc;
  border: 1px solid #ccc;
  margin: 1em 0;
  padding: 10px 1.2em;
  position: relative;
}
blockquote::before, blockquote::after {
  color: #C8C8C8;
  font-family: serif;
  position: absolute;
  font-size: 300%;
}
blockquote::before {
  content: "“";
  line-height: 1.1;
  left: 10px;
  top: 0;
}
blockquote::after {
  content: "”";
  line-height: 0;
  right: 10px;
  bottom: 0px;
}

/*本文下情報*/
.footer-meta {
  font-size: 0.8em;
  text-align: right;
}

/*投稿者*/
.author-info .post-author {
  font-size: 14px;
}

.author-info::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
  padding-right: 0;
}

/************************************
** ページ管理画面の設定で「本文のみ」表示
************************************/
.content-only .header-container,
.content-only .appeal,
.content-only .carousel,
.content-only .ad-area,
.content-only .sns-share,
.content-only .date-tags,
.content-only .sns-follow,
.content-only .article-footer,
.content-only .under-entry-content,
.content-only .breadcrumb,
.content-only .main-scroll,
.content-only .footer,
.content-only .go-to-top-button,
.content-only .notice-area,
.content-only .content-top,
.content-only .content-bottom {
  display: none;
}

/************************************
** 外部リンク・内部リンク
************************************/
span.external-icon,
span.internal-icon {
  margin-left: 3px;
  font-size: 0.8em;
}

.login-user-only {
  text-align: center;
  padding: 2em;
  background-color: #fafbfc;
  border: 1px solid #ccc;
  margin: 1em 0;
}

.no-post-date .post-date,
.no-post-update .post-update,
.no-post-author .author-info {
  display: none;
}

.read-time {
  text-align: center;
  font-size: 0.7em;
  border-top: 4px double #ddd;
  border-bottom: 4px double #ddd;
  margin: 0 3%;
}

.eye-catch-wrap {
  display: flex;
}

.eye-catch {
  position: relative;
  margin-bottom: 4px;
  width: 100%;
  text-align: center;
  background-color: #5f5f5f;
  background-image: url(https://dokkan.game-db.org//wp-content/themes/dokkan-game/img/charaImg/com_bg.png);
  background-size: 40px 40px;
  min-height: 80px;
}
.eye-catch .cat-label {
  position: absolute;
  right: auto;
  top: 0.4em;
  bottom: auto;
  left: 0.4em;
  font-size: 14px;
  padding: 4px 8px;
  opacity: 0.9;
  border: 1px solid #eee;
}
.eye-catch img {
  vertical-align: bottom;
}

.eye-catch-caption {
  color: #fff;
  position: absolute;
  bottom: 0;
  padding: 0.2em 0.6em;
  text-align: right;
  width: 100%;
  font-size: 0.9em;
  background: linear-gradient(180deg, transparent, #555);
  opacity: 0.9;
  padding-top: 2em;
}

@media all and (-ms-high-contrast: none) {
  .eye-catch-wrap {
    display: block;
  }

  /* IE10～ */
}
.show-pinterest-button .eye-catch:hover .cat-label {
  display: none;
}


/************************************
** ブログカードのサムネイルスタイル
************************************/
.ib-right .blogcard-thumbnail,
.eb-right .blogcard-thumbnail {
  float: right;
  margin-left: 1.6%;
}
.ib-right .blogcard-content,
.eb-right .blogcard-content {
  margin-left: 0;
  margin-right: 170px;
}
.blogcard-label{
  display: none;
}
.blogcard-title{
  font-size: 1.3rem;
  padding-top: 6px;
}

.blogcard-snippet{
  font-size: 1.0rem;
  color: #777;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/************************************
** 目次
************************************/
.toc {
  border: 1px solid #b8ac9a;
  font-size: 1.3rem;
  display: table;
  margin: 20px auto;
  width: 100%;
  padding: 4px 10px 1px 13px;
}
.toc ul, .toc ol {
  padding-left: 0;
}
.toc ul {
  list-style: none;
  padding-left: 5px;
}
.toc a {
  color: #1967d2;
  text-decoration: none;
  font-weight: normal;
  padding: 2px 3px;
}
.toc a:hover {
  text-decoration: underline;
}

.toc li .m_indent{
  text-indent: -1px;
  display: inline-block;
  width: calc( 100% - 30px);
  vertical-align: middle;
}

.toc li .m_indent_p{
  text-indent: 8px;
  display: inline-block;
  width: calc( 100% - 30px);
  vertical-align: middle;
}

.toc-center {
  margin: 1em auto;
}

.toc-list{
  list-style: none;
}

.toc-list li::before{
  font-family: FontAwesome;
  content: "\f103";
  padding-right: 0;
  color: #9b732a;
}

.toc-list li{
  font-weight: bold;
  border-bottom: 1px dotted #ddd;
  list-style: none;
}

.toc-list li:first-child{
  border-top: 1px dotted #ddd;
}

.toc-list li:last-child{
  border-bottom: none;
}

.toc-list > li {
  padding: 4px 0;
}


.toc-list > li > ol{
  padding-left: 2px;
}

.toc-list > li > ol > li{
  font-weight: normal;
  border-bottom: none;
  padding: 4px 0 0 0;
}

.toc-list > li > ol > li::before{
  content : "└ ";
}

.toc-title {
  font-size: 1.1em;
  text-align: center;
  display: block;
  padding: 2px 16px;
}

.toc-widget-box .toc-title {
  display: none;
}
.toc-widget-box .toc-content {
  visibility: visible;
  opacity: 1;
  height: 100%;
}

.nwa .toc {
  border: 0;
  padding: 0 1em;
}

.toc-checkbox {
  display: none;
}

.toc-content{
  visibility: hidden;
  height: 0;
  opacity: 0.2;
  transition: all 0.3s ease-out;
}

.toc-checkbox:checked~.toc-content {
  visibility: visible;
  height: 100%;
  opacity: 1;
}


.toc-checkbox:checked+.toc-title::after {
  content: '[閉じる]';
}

.toc-title:hover::after {
  text-decoration: underline;
}

.toc-checkbox:checked+.toc-title::after {
  content: '[閉じる]';
}
.toc-checkbox:checked+.toc-title::after {
  content: '[閉じる]';
}
.toc-title::after {
  content: '[開く]';
  margin-left: .5em;
  cursor: pointer;
  font-size: .8em;
}


/************************************
** h2-h6の見出し目次に連番を振る
************************************/
.toc.tnt-number-detail ol {
  list-style: none;
  counter-reset: toc;
}
.toc.tnt-number-detail ol li:before {
  margin-right: 6px;
  counter-increment: toc;
  content: counters(toc,".") ".";
}


/************************************
** サイドバーの位置
************************************/

.nwa .ranking-item-img-desc,
.nwa .ranking-item-link-buttons {
  display: block;
}
.nwa .ranking-item-img-desc a,
.nwa .ranking-item-link-buttons a {
  padding: 6px 0;
}

.nwa .ranking-item-image-tag {
  max-width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.nwa .ranking-item-name-text,
.nwa .widget_item_ranking .main-widget-label {
  font-size: 20px;
}

.nwa .ranking-item-description p {
  font-size: 0.9em;
}

.nwa .blogcard-wrap {
  width: auto;
}

/************************************
** 新着記事ウィジェット（デフォルト）
************************************/
.widget-entry-cards .a-wrap {
  padding: 5px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.widget-entry-cards figure {
  width: 120px;
}

.widget-entry-card {
  font-size: 16px;
  position: relative;
}

.widget-entry-card-content {
  margin-left: 126px;
}

.widget-entry-card-snippet {
  margin-top: 6px;
  font-size: 1.2rem;
  opacity: 0.8;
}

.widget-entry-card-pv {
  margin-left: 5px;
  font-style: italic;
  font-size: 0.8em;
}

.border-partition a {
  border-bottom: 2px dotted #ddd;
}
.border-partition a:first-of-type {
  border-top: 2px dotted #ddd;
}

.border-square a {
  border-radius: 4px;
  border: 1px solid #ccc;
}

.card-title-bold .card-title {
  font-weight: 700;
}

.card-arrow .a-wrap {
  position: relative;
}
.card-arrow .a-wrap::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 20px;
  width: 6px;
  height: 6px;
  border-top: solid 2px #697b91;
  border-right: solid 2px #697b91;
  transform: rotate(45deg);
  margin-top: -3px;
}
.card-arrow .card-content {
  margin-right: 22px;
}

/************************************
** 新着記事ウィジェット（大きなサムネイル）
************************************/
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 400px;
}
.widget-entry-cards.card-large-image .e-card {
  font-size: 18px;
}
.widget-entry-cards.card-large-image figure {
  float: none;
  width: 100%;
}
.widget-entry-cards.card-large-image figure img {
  width: 100%;
  display: block;
}
.widget-entry-cards.card-large-image .card-content {
  margin: 0 0 0.5em;
}
.widget-entry-cards.card-large-image .widget-entry-card-pv {
  opacity: 0.7;
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 6px;
  background-color: #333;
  color: #fff;
}

/************************************
** 新着記事ウィジェット（タイトルを重ねた大きなサムネイル）
************************************/
.widget-entry-cards.large-thumb-on .a-wrap {
  overflow: hidden;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
  opacity: 0.8;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover .card-content {
  margin-bottom: -4em;
  transition: all 0.5s;
  opacity: 0;
}
.widget-entry-cards.large-thumb-on .e-card {
  position: relative;
}
.widget-entry-cards.large-thumb-on .card-content {
  margin: 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: .6em;
  background-color: rgba(51, 51, 51, 0.7);
  color: #fff;
  max-height: 40%;
  overflow: hidden;
  transition: all 0.5s;
}
.widget-entry-cards.large-thumb-on .card-snippet {
  margin: 0;
}

/************************************
** 人気記事ウィジェットランキング表示
************************************/
.widget-entry-cards.ranking-visible {
  counter-reset: p-rank;
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
  background: #cca11f;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
  background: #b1b1b3;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
  background: #b37036;
}
.widget-entry-cards.ranking-visible .card-thumb {
  counter-increment: p-rank;
}
.widget-entry-cards.ranking-visible .card-thumb::before {
  content: counter(p-rank);
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: #666;
  color: #fff;
  opacity: 0.9;
  text-align: center;
  font-size: 14px;
  font-family: Arial,sans-serif;
  z-index: 1;
}

/************************************
** 最近のコメントウィジェット
************************************/
.recent-comments {
  line-height: 1.3;
}

.recent-comment-avatar {
  float: left;
  margin-right: 10px;
}

.recent-comment-author {
  font-weight: bold;
}

.recent-comment-info,
.recent-comment-article {
  font-size: 16px;
}

.recent-comment-article {
  margin-top: 3px;
}
.recent-comment-article::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
}

.recent-comment-content {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px;
  margin-top: 4px;
  font-size: 0.9em;
  border-radius: 5px;
}
.recent-comment-content::after, .recent-comment-content::before {
  bottom: 100%;
  left: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.recent-comment-content::after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.recent-comment-content::before {
  border-color: rgba(221, 221, 221, 0);
  border-bottom-color: #ccc;
  border-width: 9px;
  margin-left: -9px;
}

/************************************
** フォーローボタウィジェット
************************************/


.widget_mobile_text,
.widget_mobile_ad {
  display: none;
}

.widget h2 {
  font-size: 20px;
}

/*拡張クラスを追加するスタイルシート*/
.badge,
.ref,
.reffer,
.sankou, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
  color: #fff;
  padding: 1px 5px 0;
  border-radius: 2px;
  font-size: 1.2rem;
}

.badge,
.ref,
.reffer,
.sankou {
  background-color: #f39800;
}

.badge-red {
  background-color: #e60033;
}

.badge-pink {
  background-color: #e95295;
}

.badge-purple {
  background-color: #884898;
}
.purple{
  color: purple;
}

.badge-blue {
  background-color: #0095d9;
}

.badge-green {
  background-color: #3eb370;
}

.badge-yellow {
  background-color: #ffd900;
}

.badge-brown {
  background-color: #954e2a;
}

.badge-grey {
  background-color: #949495;
}

/*太字*/
.bold {
  font-weight: bold;
}

/*赤色*/
.red {
  color: #e60033;
}
.tomato {
  color: #ff6600;
}

/*太字で赤色*/
.bold-red {
  font-weight: bold;
  color: #e60033;
}

/*青色*/
.blue {
  color: #0095d9;
}

/*太字で青色*/
.bold-blue {
  font-weight: bold;
  color: #0095d9;
}

/*緑色*/
.green {
  color: #3eb370;
}

.gray{
  color: #818182;
}

.ltgray{
  color: #aaa;
}

.orange{
  color: orange;
}

/*太字で緑色*/
.bold-green {
  font-weight: bold;
  color: #3eb370;
}

/*赤のアンダーライン*/
.red-under {
  border-bottom: 2px solid red;
}

/*マーカーの黄色のような色*/
.marker {
  background-color: #ff9;
}

.marker-red {
  background-color: #ffd0d1;
}

.marker-blue {
  background-color: #a5d7f9;
}

/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, #ffb6b9 60%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, #a8dafb 60%);
}

/*打ち消し線*/
.strike {
  text-decoration: line-through;
}

/*キーボードキーのスタイル*/
.keyboard-key {
  background-color: #f9f9f9;
  background-image: -moz-linear-gradient(center top, #eee, #f9f9f9, #eee);
  border: 1px solid #777;
  border-radius: 2px;
  box-shadow: 1px 2px 2px #ddd;
  font-family: inherit;
  font-size: 0.85em;
  padding: 1px 3px;
}

/*ブートストラップのインフォメーションライクな囲みが表示される*/
.primary-box,
.sp-primary,
.primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*サクセスメッセージ*/
.success-box,
.sp-success,
.success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*インフォメッセージ*/
.info-box,
.sp-info,
.info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*注意メッセージ*/
.warning-box,
.sp-warning,
.warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*警告メッセージ*/
.danger-box,
.sp-danger,
.danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*セカンダリー*/
.secondary-box {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*ライト*/
.light-box {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*ダーク*/
.dark-box {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/*******************************
* 補足説明
********************************/
.information-box,
.question-box,
.alert-box,
.information,
.question,
.alert,
.memo-box,
.comment-box,
.common-icon-box {
  padding: 4px 8px 8px 8px;
  border-radius: 4px;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}

.block-box p:first-child {
  margin-top: 0;
}
.block-box p:last-child {
  margin-bottom: 0;
}
.block-box ol,
.block-box ul {
  margin: 0;
}

.information-box,
.information {
  background: #f3fafe;
  border: 1px solid #bde4fc;
}

.question-box,
.question {
  background: #fff7cc;
  border: 1px solid #ffe766;
}

.alert-box,
.alert {
  background: #fdf2f2;
  border: 1px solid #f6b9b9;
}

.memo-box {
  background: #ebf8f4;
  border: 1px solid #8dd7c1;
}

.comment-box {
  background: #fefefe;
  border: 1px solid #ccd;
}

.ok-box {
  background: #f2fafb;
  border: 1px solid #3cb2cc;
}

.ng-box {
  background: #ffe7e7;
  border: 1px solid #dd5454;
}

.good-box {
  background: #f7fcf7;
  border: 1px solid #98e093;
}

.bad-box {
  background: #fff1f4;
  border: 1px solid #eb6980;
}

.profile-box {
  background: #fefefe;
  border: 1px solid #ccd;
}

.information-box::before,
.question-box::before,
.alert-box::before,
.information::before,
.question::before,
.alert::before,
.memo-box::before,
.comment-box::before,
.common-icon-box::before {
  font-family: "FontAwesome";
  font-size: 1.6rem;
  margin-right: 6px;
  text-align: center;
}

.information-box::before,
.information::before {
  /* content: '\f05a';
  color: #87cefa; */
}

.question-box::before,
.question::before {
  content: '\f059';
  color: gold;
}

.alert-box::before,
.alert::before {
  content: '\f06a';
  color: #f3aca9;
}

.memo-box::before {
  content: '\f040';
  color: #7ad0b6;
  font-size: 36px;
}

.comment-box::before,
.profile-box::before {
  content: '\f0e5';
  color: #999;
  font-size: 36px;
}

.profile-box::before {
  content: '\f007';
}

.ok-box::before {
  content: '\f10c';
  color: #3cb2cc;
  border-right: 1px solid #3cb2cc;
  font-size: 36px;
}

.ng-box::before {
  content: '\f00d';
  color: #dd5454;
  border-right: 1px solid #dd5454;
  font-size: 36px;
}

.good-box::before {
  content: '\f164';
  color: #98e093;
  border-right: 1px solid #98e093;
  font-size: 36px;
}

.bad-box::before {
  content: '\f165';
  color: #eb6980;
  border-right: 1px solid #eb6980;
  font-size: 36px;
}

#wpadminbar .alert::before {
  display: none;
}

@media screen and (max-width: 440px) {
  .information-box,
  .question-box,
  .alert-box,
  .information,
  .question,
  .alert,
  .memo-box,
  .comment-box,
  .common-icon-box {
    padding: 4px 10px 6px 6px;
  }

  .information-box::before,
  .question-box::before,
  .alert-box::before,
  .information::before,
  .question::before,
  .alert::before,
  .memo-box::before,
  .comment-box::before,
  .common-icon-box::before {
    padding: 0;
    top: 1px;
    background: #fff;
    border-radius: 20px;
    left: -5px;
    font-size: 18px;
    border: 0;
    width: auto;
  }

  .container .blank-box {
    margin-left: 0;
    margin-right: 0;
  }
}


.pt_twitter_shara{
  display: block;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  background: #46a1f0;
}

#app .pt_elmentcheck input{
  display: none;
}
#app .pt_elmentcheck label{
  width: 100%;
  display: block;
  padding: 4px;
}

#app .pt_elmentcheck input:checked + label{
  border-bottom: 2px solid #0075ff;
  background: #dcebfd;
}

#app .pt_elmentcheck td{
  text-align: center !important;
  border: 1px solid #ddd;
  padding: 0;
  font-size: 1.3rem;
}


/************************************
** 汎用ボックス共通
************************************/
.block-box-label {
  display: flex;
}
.block-box-label::before {
  margin-right: 0.3em;
}


/************************************
** SNSフォローボタン
************************************/
.sns-follow-buttons a {
  width: 100%;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 30px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}
.sns-follow-buttons a:last-child {
  margin-right: 0;
}
.sns-follow-buttons a .follow-count {
  font-family: Arial, sans-serif;
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 1.2rem;
  line-height: 1;
}

.fbc-hide .follow-count {
  display: none;
}

/************************************
** 関連記事
************************************/
.related-entry-card .cat-label {
  font-size: 9px;
}

/*関連エントリーカード*/
/* .related-entry-heading,
.comment-title {
  margin: 22px 0;
} */

.related-entry-card-content {
  margin-left: 170px;
}

/************************************
** 関連記事表示タイプがミニカードの時
************************************/
.rect-mini-card .related-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rect-mini-card .related-entry-card-wrap {
  width: 49.5%;
  padding: 7px;
}
.rect-mini-card .related-entry-card-thumb {
  width: 120px;
}
.rect-mini-card .related-entry-card-content {
  margin-left: 130px;
}
.rect-mini-card .related-entry-card-title {
  font-size: 16px;
}
.rect-mini-card .related-entry-card-snippet {
  display: none;
}

/************************************
** 縦型カード
************************************/
.rect-vartical-card .related-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.rect-vartical-card .related-entry-card-wrap {
  padding: 5px;
}
.rect-vartical-card .related-entry-card-thumb {
  float: none;
  width: 100%;
}
.rect-vartical-card .related-entry-card-thumb img {
  width: 100%;
}
.rect-vartical-card .related-entry-card-content {
  margin: 0;
}
.rect-vartical-card .related-entry-card-title {
  font-size: 16px;
}

.rect-vartical-card-3 .related-entry-card-wrap {
  width: 33%;
}

.rect-vartical-card-4 .related-entry-card-wrap {
  width: 24.5%;
}

/************************************
** 関連記事ボーダー
************************************/
.recb-entry-border .related-entry-card-wrap {
  border: 1px solid #ccc;
}

/************************************
** コメント
************************************/
.commets-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.commets-list .avatar {
  float: right;
}
.commets-list .reply {
  text-align: right;
  font-size: 0.8em;
}
.commets-list .comment-meta {
  font-size: 0.8em;
}
.commets-list .comment-body,
.commets-list .st-comment-body {
  margin-bottom: 1em;
}
.commets-list .children {
  list-style: none;
  padding-left: 4px;
  border-left: 1px solid #cec4c4;
}
.commets-list .children li{
  padding: 0;;
  margin-top: 8px;
  border: none;
  margin-left: 5px;
}

.comment-image-box img{
  max-width: 120px;
  height: auto;
}

.st-comment-id {
  display: none;
}

.st-comment-edit {
  font-size: 0.8em;
  margin-left: 6px;
}

.st-comment-author .fn {
  font-weight: bold;
}

.comment-form{
  padding-bottom: 8px;
}

.comment-form .required {
  color: red;
}
.comment-form .logged-in-as {
  margin: 0.2em;
  font-size: 0.8em;
}

.comment-area.website-hide .comment-form-url {
  display: none;
}

.commets-list li .parent_reply{
  color: #999;
  font-size: 1.2rem;
  margin: 0;
  padding-left: 2px;
}


/************************************
** ページネーション
************************************/
.pagination {
  margin: 10px 0 4px 0;
  clear: both;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}
.pagination .current {
  background-color: #eee;
}
.pagination a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

.page-numbers {
  color: #333;
  text-decoration: none;
  display: inline-block;
  height: 46px;
  width: 46px;
  border: 1px solid #ccc;
  margin: 0 1px;
  line-height: 46px;
  text-align: center;
  border-radius: 4px;
  font-size: 1.5rem;
}

span.page-numbers{
  font-weight: bold;
  color: white;
  background: #a0b9c6;
}
.dots.page-numbers{
  color: #333;
}

.next.page-numbers , .prev.page-numbers{
  font-size: 1.2rem;
}


.page-numbers span {
  line-height: inherit;
}

.page-numbers.dots {
  opacity: 0.6;
  background-color: #f3f4f5;
}
/************************************
** 「次のページ」ページネーション
************************************/
.pagination-next{
  margin: 6px 10px 2px 10px;
}

.pagination-next-link, .comment-btn {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  color: #333;
  display: block;
  font-size: 1.2em;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: block;
}
.pagination-next-link:hover, .comment-btn:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

/************************************
** マルチページのページャーリンク
************************************/
.pager-links {
  margin: 24px 0;
  clear: both;
  text-align: center;
}
.pager-links .post-page-numbers {
  background-color: transparent;
}
.pager-links span {
  background-color: #eee;
}
.pager-links a {
  display: inline-block;
}
.pager-links a span {
  background-color: #fff;
}
.pager-links a:hover span {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

.pager-prev-next a {
  width: 30%;
  margin: 0 4px;
}
.pager-prev-next span {
  width: 100%;
  margin: 0;
}

/************************************
** 投稿ナビ
************************************/
.pager-post-navi {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #1967D2;
  margin:6px auto;
  padding: 6px;
}
.pager-post-navi a {
  padding: 10px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 0.8em;
  color: #1967D2;
  font-weight: bold;
}
.pager-post-navi a::before {
  font-size: 1.8em;
  color: #1967D2;
}
.pager-post-navi a figure {
  min-width: 120px;
  max-width: 120px;
}
.pager-post-navi a.prev-post {
  flex-direction: row;
  padding-left: 5px;
}
.pager-post-navi a.prev-post::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
  margin-right: 5px;
  padding-right: 0;
}
.pager-post-navi a.prev-post .prev-post-title {
  margin-left: 10px;
}
.pager-post-navi a.next-post {
  flex-direction: row-reverse;
  padding-right: 5px;
}
.pager-post-navi a.next-post::before {
  font-family: FontAwesome;
  content: "\f105";
  padding-right: 4px;
  margin-left: 10px;
  padding-right: 4px;
}
.pager-post-navi a.next-post .next-post-title {
  margin-right: 10px;
  font-size: 1.3rem;
  line-height: 1.6;
}
.pager-post-navi a.prev-next-home {
  justify-content: center;
  font-size: 50px;
  text-align: center;
  color: #777;
}

.post-navi-square a {
  height: auto;
}

.post-navi-default.post-navi-border a {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.post-navi-default.post-navi-border .next-post {
  border-top-width: 0px;
}
.post-navi-default.post-navi-border .next-post:first-child {
  border-top-width: 1px;
}

.pager-post-navi.post-navi-square {
  flex-direction: row;
}
.pager-post-navi.post-navi-square a {
  width: 50%;
}

.post-navi-square.post-navi-border a {
  border: 1px solid #ccc;
}
.post-navi-square.post-navi-border a:last-child {
  border-left-width: 0px;
}

canvas, iframe, video,
.fb_iframe_widget,
.fb_iframe_widget span {
  max-width: 100%;
}

.overflow-container {
  overflow-y: scroll;
}

.aspect-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

.aspect-ratio--object {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

/*!動画の最大幅を指定する*/
.video-container,
.instagram-container,
.facebook-container {
  max-width: 640px;
  margin: 30px 0;
}

/*!動画の大きさを調整*/
.video-container .video {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

/*!Instagramの大きさを調整*/
.instagram-container .instagram,
.facebook-container .facebook {
  position: relative;
  padding-bottom: 120%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

/*!動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed,
.instagram iframe,
.instagram object,
.instagram embed,
.facebook iframe,
.facebook object,
.facebook embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*!Twitterビデオの最小幅を上書き変更*/
.twitter-video {
  min-width: 200px !important;
}

.instagram-media {
  position: static !important;
  min-width: 280px !important;
}




/************************************
** Facebookページを「いいね！」するエリアのスタイル
************************************/
div.fb-like-mobile {
  display: none;
}

.fb-like-balloon {
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
  clear: both;
}

.fb-like-balloon-thumb {
  float: left;
  width: 100px;
}

.fb-like-balloon-thumb img {
  display: block;
}

.fb-like-balloon-body {
  margin-right: 140px;
  float: none;
  padding: 10px;
  font-size: 18px;
  line-height: 1.3em;
  height: 100px;
  overflow: hidden;
  color: #000;
  box-sizing: border-box;
}

.fb-like-balloon-body::after {
  content: '\f054';
  position: absolute;
  right: 110px;
  top: 27px;
  color: #ccc;
  font-size: 50px;
  font-family: FontAwesome;
  line-height: 100%;
}

.fb-like-balloon-button {
  background-color: #f3f3f3;
  width: 100px;
  height: 100px;
  text-align: center;
  float: right;
  padding-top: 27px;
  box-sizing: border-box;
  /*  display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;*/
}

.fb-like-balloon-button iframe {
  background-color: #fff;
}

.fb-like-balloon-arrow-box {
  float: left;
  position: relative;
  border: 1px solid #bbb;
  margin-left: 1.2rem;
  width: calc(100% - 114px);
  border-radius: 5px;
  background-color: #fff;
}

.fb-like-balloon-arrow-box-in {
  border-radius: 5px;
  overflow: hidden;
}

.fb-like-balloon-arrow-box:after, .fb-like-balloon-arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.fb-like-balloon-arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.fb-like-balloon-arrow-box:before {
  border-color: rgba(221, 221, 221, 0);
  border-right-color: #bbb;
  border-width: 11px;
  margin-top: -11px;
}



/************************************
** Facebookページを「いいね！」するエリアのスタイル
************************************/
@media screen and (max-width: 639px) {
  .fb-like-balloon-body {
    margin-right: 100px;
    font-size: 1em;
    line-height: 1.2em;
  }

  .fb-like-balloon-body::after {
    display: none;
  }
}
@media screen and (max-width: 440px) {
  .fb-like-balloon-body {
    font-size: 0.8em;
    padding: 5px;
    line-height: 1.1em;
    margin-right: 0;
    height: 70px;
  }

  .fb-like-balloon-button {
    float: none;
    width: 100%;
    height: 30px;
    display: block;
    padding-top: 0;
    line-height: 24px;
  }

  div.fb-like-mobile {
    display: block;
  }

  div.fb-like-pc {
    display: none;
  }
}
.mobile-menu-buttons {
  background: #fff;
  box-shadow: 0 0 5px darkgrey;
  font-size: 19px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0;
  margin: 0;
  list-style: none;
  display: none;
  align-items: center;
  line-height: 1.4;
  min-height: 50px;
  transition: .3s;
}
.mobile-menu-buttons .menu-icon {
  text-align: center;
  width: 100%;
  display: block;
}
.mobile-menu-buttons .menu-icon::before {
  font-family: FontAwesome;
  font-size: 1em;
}
.mobile-menu-buttons .menu-caption {
  font-size: 9px;
  text-align: center;
  opacity: 0.8;
  display: block;
}
.mobile-menu-buttons .menu-button {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.mobile-menu-buttons .menu-button > a {
  display: block;
  color: #333;
  text-decoration: none;
}
.mobile-menu-buttons .menu-button:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}
.mobile-menu-buttons .ad-area {
  display: none;
}
.mobile-menu-buttons .menu-content {
  cursor: default;
}

.mobile-footer-menu-buttons {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.logo-menu-button {
  text-align: center;
  font-weight: 900;
  line-height: 50px;
  min-width: 200px;
  overflow: hidden;
}
.logo-menu-button img {
  max-height: 44px;
  display: block;
  margin: 0 auto;
}

.fa.menu-icon {
  font: inherit;
}

.navi-menu-icon::before {
  content: '\f0c9';
}

.home-menu-icon::before {
  content: '\f015';
}

.search-menu-icon::before {
  content: '\f002';
}

.top-menu-icon::before {
  content: '\f062';
}

.toc-menu-icon::before {
  content: '\f0ca';
}

.sidebar-menu-icon::before {
  content: '\f03b';
}

.share-menu-icon::before {
  content: '\f1e0';
}

.follow-menu-icon::before {
  content: '\f004';
}

.prev-menu-icon::before {
  content: '\f060';
}

.next-menu-icon::before {
  content: '\f061';
}


/*閉じる用の薄黒カバー*/
#navi-menu-close,
#sidebar-menu-close,
#search-menu-close,
#share-menu-close,
#follow-menu-close {
  display: none;
  /*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;
  /*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  transition: .3s ease-in-out;
}

/*中身*/
.menu-content {
  overflow: auto;
  position: fixed;
  top: 0;
  z-index: 9999;
  /*最前面に*/
  width: 100%;
  /*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 400px;
  /*最大幅（調整してください）*/
  height: 100%;
  background: #fff;
  /*背景色*/
  transition: .3s ease-in-out;
  /*滑らかに表示*/
  opacity: 1;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.menu-content .menu-drawer {
  padding: 0 1em 30px;
}


.navi-menu-content {
  left: 0;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

.sidebar-menu-content {
  right: 0;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}

.search-menu-content,
.share-menu-content,
.follow-menu-content {
  transition: .3s ease-in-out;
  position: fixed;
  top: 40%;
  z-index: 99;
  width: 90%;
  left: 5%;
  right: 5%;
  -webkit-transform: translateY(900%);
  transform: translateY(900%);
}
.search-menu-content .search-edit,
.share-menu-content .search-edit,
.follow-menu-content .search-edit {
  width: 100%;
}

/*チェックが入ったらもろもろ表示*/
#navi-menu-input:checked ~ #navi-menu-close,
#sidebar-menu-input:checked ~ #sidebar-menu-close,
#search-menu-input:checked ~ #search-menu-close,
#share-menu-input:checked ~ #share-menu-close,
#follow-menu-input:checked ~ #follow-menu-close {
  display: block;
  /*カバーを表示*/
  opacity: .5;
}

#navi-menu-input:checked ~ #navi-menu-content,
#sidebar-menu-input:checked ~ #sidebar-menu-content,
#search-menu-input:checked ~ #search-menu-content,
#share-menu-input:checked ~ #share-menu-content,
#follow-menu-input:checked ~ #follow-menu-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.menu-drawer ul {
  list-style: none;
}
.menu-drawer li {
  display: block;
}
.menu-drawer a {
  color: #333;
  text-decoration: none;
  padding: 6px;
  display: block;
}
.menu-drawer a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}
.menu-drawer .sub-menu {
  padding-left: 20px;
}

.menu-close-button {
  display: block;
  cursor: pointer;
  text-align: center;
}
.menu-close-button::before {
  font-family: FontAwesome;
  content: "";
  padding-right: 4px;
  padding: 0;
  font-size: 2em;
}

.share-menu-content .sns-buttons {
  justify-content: space-around;
}
.share-menu-content .sns-buttons .share-count {
  color: #fff;
}
.share-menu-content .button-caption {
  display: none;
}

.follow-menu-content .sns-buttons {
  justify-content: space-around;
}
.follow-menu-content .sns-buttons a {
  width: 24%;
}
.follow-menu-content .sns-follow-message {
  display: none;
}

.ranking-items {
  line-height: 1.4;
}
.ranking-items p {
  font-size: 18px;
  margin-top: 0;
}

.ranking-item, .timeline-box {
  padding: 3%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.ranking-item img[width="1"], .timeline-box img[width="1"] {
  position: absolute;
  bottom: 0;
  right: 0;
}

.ranking-item-name-text {
  font-size: 24px;
  font-weight: bold;
}

.star::before,
.star-half-o::before,
.star-o::before {
  font-family: FontAwesome;
}

.star::before {
  content: '\f005';
}

.star-half-o::before {
  content: '\f123';
}

.star-o::before {
  content: '\f006';
}

.ranking-item-name {
  padding: 3px 2px 6px;
}

.rating-star {
  color: #f5bc55;
  font-size: 1.2em;
}

.rating-number {
  color: #333;
  font-size: 0.9em;
  margin-left: 0.4em;
}

.ranking-item-img-desc,
.ranking-item-link-buttons {
  display: flex;
}
.ranking-item-img-desc > div,
.ranking-item-link-buttons > div {
  width: 100%;
  padding: 2px 0;
}

.ranking-item-img-desc {
  margin-top: 6px;
}

.ranking-item-name {
  display: flex;
}

.ranking-item-name-crown {
  margin-right: 10px;
}

.ranking-item-name-text {
  width: 100%;
}

.ranking-item-image-tag {
  max-width: 302px;
  margin-right: 1em;
  position: relative;
}

.ranking-item-description {
  width: 100px;
  position: relative;
}

.ranking-item-link-buttons {
  margin-top: 6px;
}
.ranking-item-link-buttons > div {
  padding: 0 3px;
  position: relative;
}
.ranking-item-link-buttons a {
  margin: 0 0 8px;
}

.g-crown, .s-crown, .c-crown {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-bottom-width: 35px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
}

.g-crown:after, .s-crown:after, .c-crown:after {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
}

.g-crown-circle, .s-crown-circle, .c-crown-circle {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: -5px;
  left: -21px;
}

.g-crown-circle:before, .s-crown-circle:before, .c-crown-circle:before {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0;
  left: 19px;
}

.g-crown-circle:after, .s-crown-circle:after, .c-crown-circle:after {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0;
  left: 38px;
}

.g-crown {
  border-bottom: 35px solid #bfa930;
}

.g-crown:after {
  border-bottom: 20px solid #ffe973;
  border-left: 20px solid #ffe973;
  border-right: 20px solid #ffd700;
}

.g-crown-circle {
  background-color: #a68c00;
}

.g-crown-circle:before {
  background-color: #a68c00;
}

.g-crown-circle:after {
  background-color: #a68c00;
}

.s-crown {
  border-bottom: 35px solid #909090;
}

.s-crown:after {
  border-bottom: 20px solid #e0e0e0;
  border-left: 20px solid #e0e0e0;
  border-right: 20px solid silver;
}

.s-crown-circle {
  background-color: #909090;
}

.s-crown-circle:before {
  background-color: #909090;
}

.s-crown-circle:after {
  background-color: #909090;
}

.c-crown {
  border-bottom: 35px solid #69433f;
}

.c-crown:after {
  border-bottom: 20px solid #8c4841;
  border-left: 20px solid #8c4841;
  border-right: 20px solid #5b1c15;
}

.c-crown-circle {
  background-color: #69433f;
}

.c-crown-circle:before {
  background-color: #69433f;
}

.c-crown-circle:after {
  background-color: #69433f;
}

.widget_item_ranking .main-widget-label {
  font-size: 23px;
  padding: 6px;
  margin: 28px 0 1.2rem;
  font-weight: bold;
}

/************************************
** フッター
************************************/
.footer {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  background-color: #564e4e;
  color:#fff;
}

.footer a{
  color: #fff;
  text-decoration: none;
}


.fotter_link a{
  text-align: center;
  border: 1px solid #fff;
  padding: 4px 12px;
  margin: 6px auto;
  display: inline-block;
  border-radius: 4px;

  min-width: 250px;
}

.kenri{
  font-size: 1.2rem;
}

.copyright {
  margin-top: 8px;
}

.footer-widgets,
.footer-widgets-mobile {
  margin: 10px auto;
  display: flex;
}

.footer-left,
.footer-center,
.footer-right, .footer-mobile {
  padding: 10px 16px;
}

.footer-left,
.footer-center,
.footer-right {
  width: 33.33%;
}

.footer-widgets-mobile {
  display: none;
}

/************************************
** フッターボトム
************************************/
.footer-bottom {
  margin-top: 24px;
  padding: 8px;
  position: relative;
  font-size: 14px;
}
.footer-bottom.fdt-left-and-right .footer-bottom-logo {
  display: none;
}
.footer-bottom.fdt-left-and-right .footer-bottom-content {
  float: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.footer-bottom.fdt-up-and-down .footer-bottom-logo {
  display: none;
}
.footer-bottom.fdt-up-and-down .footer-bottom-content {
  float: none;
  display: block;
  text-align: center;
}
.footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul {
  justify-content: center;
}
.footer-bottom.fnm-text-width .menu-footer li {
  width: auto;
}
.footer-bottom.fnm-text-width .menu-footer li a {
  padding: 0 10px;
}

.footer-bottom-logo {
  float: left;
  bottom: 0;
  position: absolute;
}
.footer-bottom-logo .logo-text {
  padding: 0;
}
.footer-bottom-logo .site-name-text {
  font-size: 18px;
  padding-bottom: 8px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 120px;
}
.footer-bottom-logo img {
  height: 50px;
  width: auto;
}

.footer-bottom-content {
  float: right;
  text-align: right;
}

/************************************
** トップへ戻るボタン
************************************/
.go-to-top {
  position: fixed;
  display: none;
  right: 0;
  bottom: 40px;
  z-index: 999;
}

.go-to-top-button {
  background-color: #fff;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  font-size: 22px;
  width: 48px;
  height: 48px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  text-align: center;
  box-shadow: 0 1px 10px #999;
  margin-left: 10px;
}

.go-to-top-button .fa-angle-double-up {
  color: #6e8691;
}

.go-to-top-button:hover {
  color: #333;
}

.go-to-top-button-image {
  background-color: transparent;
  padding: 0;
  max-width: 120px;
}

#wpforo-wrap .anchor-icon,
.gallery .anchor-icon,
.amazonjs_item .anchor-icon,
.kaerebalink-box .anchor-icon,
.booklink-box .anchor-icon,
.tomarebalink-box .anchor-icon,
.wpf-sbtn-wrap .anchor-icon,
.btn .anchor-icon,
.ranking-item-link-buttons a .anchor-icon,
.btn-wrap a .anchor-icon,
.no-icon .anchor-icon {
  display: none !important;
}

.gallery {
  margin: auto;
}

.gallery .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  height: auto;
}

.gallery-columns-1 .gallery-item {
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-6 .gallery-item {
  width: 16%;
}

.gallery-columns-7 .gallery-item {
  width: 14%;
}

.gallery-columns-8 .gallery-item {
  width: 12%;
}

.gallery-columns-9 .gallery-item {
  width: 11%;
}

.gallery amp-img {
  border: 2px solid #cfcfcf;
}

.gallery br {
  clear: both;
}

.gallery .gallery-item dd {
  margin: 0;
}

/* 404 */
#list .posts-not-found{
  padding: 20px;
  width: 100%;
}
#list .posts-not-found p{
  margin: 0;
}

/*検索フォーム*/
.search-box {
  margin: 1em 0 2em;
  position: relative;
}

.search-box .search-edit {
  font-family: inherit;
  padding-right: 70px;
  width: calc( 100% - 64px);
}

#search-menu-content .search-edit {
  font-size: 16px;
}

.search-submit {
  /* 
  font-size: 20px;
  cursor: pointer;
  line-height: 49px;
  border: none;
  color: #ccc;
  padding: 0 8px;
  background-color: rgba(255, 255, 255, 0); */
  position: absolute;
  right: 0;
  top: 1px;
  bottom: 1px;
  width: 60px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  padding: 11px;
  border: none;
  vertical-align: middle;
  background: #75cf79;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-box {
  padding: 16px 5px;
}

.timeline-box .timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-title {
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}

.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
.timeline > li.timeline-item {
  overflow: hidden;
  margin: 0;
  position: relative;
}

.timeline-item-label {
  width: 110px;
  float: left;
  padding-top: 18px;
  text-align: right;
  padding-right: 1em;
  font-size: 14px;
}

.timeline-item-title {
  font-weight: bold;
}

.timeline-item-content {
  width: calc(100% - 110px);
  float: left;
  padding: .8em 1.4em;
  border-left: 3px #e5e5d1 solid;
}

.timeline-item:before {
  content: '';
  width: 1.2rem;
  height: 1.2rem;
  background: #6fc173;
  position: absolute;
  left: 105px;
  top: 24px;
  border-radius: 100%;
}

/* for Smartphone */
@media screen and (max-width: 480px) {
  .timeline-box .timeline {
    padding-left: 10px;
  }

  .timeline > li.timeline-item {
    overflow: visible;
    border-left: 3px #e5e5d1 solid;
  }

  .timeline-item-label {
    width: auto;
    float: none;
    text-align: left;
    padding-left: 16px;
  }

  .timeline-item-content {
    width: auto;
    padding: 8px;
    float: none;
    border: none;
  }

  .timeline-item::before {
    left: -1.2rem;
    top: 19px;
    width: 21px;
    height: 21px;
  }
}
/*Cocoon用記事ボックス*/
/*
.navi-card-wrap {
  background-color: $white;
  &.a-wrap {
    position: relative;
    padding: 5px 3px;
    line-height: 1.3;
    margin-top: 0px;
    margin-bottom: 10px;
  }
}

.navi-card-box {
  //background-color: $white;
  padding: 0;
  position: relative;
}

.navi-card-wrap {
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 20px;
    width: 6px;
    height: 6px;
    border-top: solid 2px #697b91;
    border-right: solid 2px #697b91;
    transform: rotate(45deg);
    margin-top: -3px;
  }
  .navi-card-thumb {
    float: left;
    margin: 6px 10px;
    width: 120px;
  }
  .navi-card-content{
    margin: 0 24px 0 140px;
  }
  .navi-card-title {
    margin: 2px 0 6px;
    font-size: 0.9em;
    color: $text_color;
    font-weight: 700;
  }
  .navi-card-snippet {
    margin: 0px 0 2px;
    font-size: 0.7em;
    color: $pallid_text_color;
  }
}
*/
/* リボン部分 */
/*  リボンCSSはnxworld様のページの斜めリボンを改変して利用。
多くのカスタマイズを公開していらっしゃるので 「リボン css nxworld」などgoogle検索すると便利。
Copyright (c)
https://www.nxworld.net/tips/pure-css-corner-ribbon.html
https://codepen.io/nxworld/pen/oLdoWb
*/
.ribbon {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}
.ribbon:before, .ribbon:after {
  position: absolute;
  z-index: 0;
  content: '';
  display: block;
  border: 4px solid #224963;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 185px;
  padding: 5px 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  font: 700 11px/1 'Lato',sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}

.ribbon-color-1 span {
  background-color: #ea7e7e;
}

.ribbon-color-2 span {
  background-color: #7e95ea;
}

.ribbon-color-3 span {
  background-color: #f7c114;
}

.ribbon-color-4 span {
  background-color: #dc669b;
}

.ribbon-color-5 span {
  background-color: #e9546b;
}

/* top left*/
.ribbon-top-left {
  top: -3px;
  left: -9px;
}
.ribbon-top-left::before, .ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left:before {
  top: -1px;
  right: 4px;
}
.ribbon-top-left::after {
  bottom: 4px;
  left: 1px;
}
.ribbon-top-left span {
  right: -45px;
  top: 18px;
  transform: rotate(-45deg);
}

.border-square .ribbon-top-left {
  top: -13px;
  left: -13px;
}

.card-large-image .ribbon-top-left {
  top: -7px;
  left: -9px;
}

[class*="fab-"] {
  font-family: FontAwesome;
}

.fab-info-circle::before {
  content: '\f05a';
}

.fab-question-circle::before {
  content: '\f059';
}

.fab-exclamation-circle::before {
  content: '\f06a';
}

.fab-pencil::before {
  content: '\f040';
}

.fab-edit::before {
  content: '\f044';
}

.fab-comment::before {
  content: '\f075';
}

.fab-ok::before {
  content: '\f10c';
}

.fab-bad::before {
  content: '\f00d';
}

.fab-lightbulb::before {
  content: '\f0eb';
}

.fab-graduation-cap::before {
  content: '\f19d';
}

.fab-book::before {
  content: '\f02d';
}

.fab-amazon::before {
  content: '\f270';
}

.fab-envelope::before {
  content: '\f0e0';
}

.fab-flag::before {
  content: '\f024';
}

.fab-ban::before {
  content: '\f05e';
}

.fab-bolt::before {
  content: '\f0e7';
}

.fab-calendar::before {
  content: '\f073';
}

.fab-clock::before {
  content: '\f017';
}

.fab-cutlery::before {
  content: '\f0f5';
}

.fab-heart::before,
.list-heart li::before {
  content: '\f004';
}

.fab-camera::before {
  content: '\f030';
}

.fab-search::before {
  content: '\f002';
}

.fab-folder::before {
  content: '\f07b';
}

.fab-tag::before {
  content: '\f02b';
}

.fab-trophy::before {
  content: '\f091';
}

.fab-car::before {
  content: '\f1b9';
}

.fab-truck::before {
  content: '\f0d1';
}

.fab-bicycle::before {
  content: '\f206';
}

.fab-motorcycle::before {
  content: '\f21c';
}

.fab-bus::before {
  content: '\f207';
}

.fab-plane::before {
  content: '\f072';
}

.fab-train::before {
  content: '\f238';
}

.fab-subway::before {
  content: '\f239';
}

.fab-taxi::before {
  content: '\f1ba';
}

.fab-file-text::before {
  content: '\f15c';
}

.fab-jpy::before {
  content: '\f157';
}

.fab-usd::before {
  content: '\f155';
}

.fab-eur::before {
  content: '\f153';
}

.fab-btc::before {
  content: '\f15a';
}

.fab-apple::before {
  content: '\f179';
}

.fab-android::before {
  content: '\f17b';
}

.fab-ship::before {
  content: '\f21a';
}

.fab-wordpress::before {
  content: '\f19a';
}

.fab-thumbs-up::before {
  content: '\f164';
}

.fab-thumbs-down::before {
  content: '\f165';
}

.fab-check::before,
.list-check li::before {
  content: '\f00c';
}

.fab-bell::before {
  content: '\f0f3';
}

.fab-star::before,
.list-star li::before {
  content: '\f005';
}

.fab-bookmark::before {
  content: '\f02e';
}

.fab-download::before {
  content: '\f019';
}

.fab-coffee::before {
  content: '\f0f4';
}

.fab-user::before {
  content: '\f007';
}

.iconlist-box ul,
.iconlist-box ol {
  list-style: none;
}
.iconlist-box.list-none ul {
  list-style: disc;
}
.iconlist-box.list-none ol {
  list-style: decimal;
}

.iconlist-box li::before {
  font-family: FontAwesome;
  margin-right: 0.4em;
  margin-left: -1em;
}

.iconlist-title {
  font-weight: 700;
  text-align: center;
}

.fab-check-circle::before,
.list-check-circle li::before {
  content: '\f058';
}

.fab-check-circle-o::before,
.list-check-circle-o li::before {
  content: '\f05d';
}

.fab-check-square::before,
.list-check-square li::before {
  content: '\f14a';
}

.fab-check-square-o::before,
.list-check-square-o li::before {
  content: '\f046';
}

.fab-caret-right::before,
.list-caret-right li::before {
  content: '\f0da';
}

.fab-caret-square-o-right::before,
.list-caret-square-o-right li::before {
  content: '\f152';
}

.fab-arrow-right::before,
.list-arrow-right li::before {
  content: '\f061';
}

.fab-angle-right::before,
.list-angle-right li::before {
  content: '\f105';
}

.fab-angle-double-right::before,
.list-angle-double-right li::before {
  content: '\f101';
}

.fab-arrow-circle-right::before,
.list-arrow-circle-right li::before {
  content: '\f0a9';
}

.fab-arrow-circle-o-right::before,
.list-arrow-circle-o-right li::before {
  content: '\f18e';
}

.fab-play-circle::before,
.list-play-circle li::before {
  content: '\f144';
}

.fab-play-circle-o::before,
.list-play-circle-o li::before {
  content: '\f01d';
}

.fab-chevron-right::before,
.list-chevron-right li::before {
  content: '\f054';
}

.fab-chevron-circle-right::before,
.list-chevron-circle-right li::before {
  content: '\f138';
}

.fab-hand-o-right::before,
.list-hand-o-right li::before {
  content: '\f0a4';
}

.fab-star-o::before,
.list-star-o li::before {
  content: '\f006';
}

.fab-heart-o::before,
.list-heart-o li::before {
  content: '\f08a';
}

.fab-square::before,
.list-square li::before {
  content: '\f0c8';
}

.fab-square-o::before,
.list-square-o li::before {
  content: '\f096';
}

.fab-circle::before,
.list-circle li::before {
  content: '\f111';
}

.fab-circle-o::before,
.list-circle-o li::before {
  content: '\f10c';
}

.fab-dot-circle-o::before,
.list-dot-circle-o li::before {
  content: '\f192';
}

.fab-plus::before,
.list-plus li::before {
  content: '\f067';
}

.fab-plus-circle::before,
.list-plus-circle li::before {
  content: '\f055';
}

.fab-plus-square::before,
.list-plus-square li::before {
  content: '\f0fe';
}

.fab-plus-square-o::before,
.list-plus-square-o li::before {
  content: '\f196';
}

.fab-minus::before,
.list-minus li::before {
  content: '\f068';
}

.fab-minus-circle::before,
.list-minus-circle li::before {
  content: '\f056';
}

.fab-minus-square::before,
.list-minus-square li::before {
  content: '\f146';
}

.fab-minus-square-o::before,
.list-minus-square-o li::before {
  content: '\f147';
}

.fab-times::before,
.list-times li::before {
  content: '\f00d';
}

.fab-times-circle::before,
.list-times-circle li::before {
  content: '\f057';
}

.fab-times-circle-o::before,
.list-times-circle-o li::before {
  content: '\f05c';
}

.fab-window-close::before,
.list-window-close li::before {
  content: '\f2d3';
}

.fab-window-close-o::before,
.list-window-close-o li::before {
  content: '\f2d4';
}

/************************************
** おすすめカード
************************************/
.recommended .navi-entry-cards {
  display: flex;
  justify-content: center;
}
.recommended .navi-entry-cards a {
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.recommended figure {
  margin: 0;
}
.recommended img {
  vertical-align: bottom;
}
.recommended .card-content {
  font-size: 0.8em;
  text-align: center;
}
.recommended .card-snippet {
  display: none;
}
.recommended.rcs-image-only .card-content {
  display: none;
}
.recommended.rcs-center-title .card-content {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  opacity: 1;
  font-size: 1em;
  max-height: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.recommended.rcs-center-title .a-wrap:hover .card-content {
  opacity: 1;
}
.recommended.rcs-center-white-title .card-content {
  background-color: rgba(51, 51, 51, 0.3);
  transition: all .7s;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
  transition: all .7s;
  opacity: 0;
}
.recommended.rcs-center-label-title .card-content {
  background-color: rgba(51, 51, 51, 0);
  padding: 0;
}
.recommended.rcs-center-label-title .card-content .card-title {
  color: #333;
  background-color: #fffffc;
  padding: 6px 1em;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  transition: all .5s;
}
.recommended.rcs-center-label-title .card-content:hover .card-title {
  transition: all .3s;
}
.recommended.rcs-card-margin a {
  margin: 1em;
  margin-right: 0;
}
.recommended.rcs-card-margin a:last-child {
  margin-right: 1em;
}
.recommended .ribbon {
  display: none;
}

.nwa .recommended .navi-entry-cards {
  flex-wrap: wrap;
  justify-content: space-around;
}
.nwa .recommended .navi-entry-cards a {
  width: 50%;
}
.nwa .recommended.rcs-card-margin a {
  margin: .3em 0;
  width: 48%;
}
.nwa .recommended.rcs-card-margin a:last-child {
  margin-right: 0;
}

.no-border {
  border: none;
}

.no-after::after {
  display: none;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

.notice-area-link {
  display: block;
  text-decoration: none;
}
.notice-area-link:hover {
  opacity: 0.8;
}

.notice-area {
  color: #fff;
  text-align: center;
  background-color: #4cae4c;
  padding: 0.6em;
  font-size: 0.8em;
}
.notice-area.nt-warning {
  background-color: #f7ab00;
}
.notice-area.nt-danger {
  background-color: #ff6666;
}

/************************************
** アピールエリア
************************************/
.no-appeal-area .appeal {
  display: none;
}

.appeal-in {
  display: flex;
  min-height: 200px;
  padding: 3% 5%;
}

.appeal-content {
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.85);
  margin: auto;
  padding: 1em;
  text-align: center;
  border-radius: 4px;
  display: block;
}

.appeal-title {
  font-size: 1.1em;
  font-weight: bold;
}

.appeal-message {
  margin-bottom: 1em;
}

.appeal-button {
  color: #fff;
  text-decoration: none;
  background-color: #dd4b39;
  font-weight: bold;
  text-align: center;
  display: block;
  max-width: 80%;
  margin: auto;
  padding: 10px 2em;
  border-radius: 4px;
}
.appeal-button:hover {
  color: #fff;
  opacity: 0.7;
}

/************************************
** 入力フォーム
************************************/
textarea {
  min-height: 200px;
}

option {
  padding: 1.2rem;
}

input[type='submit'],
#bbp_reply_submit,
.bp-login-widget-register-link a {
    width: 98%;
    border: none;
    background-color: #5aac5d;
    border-bottom-color: #337c36;
    color: #fff;
    font-size: 1.5rem;
    display: block;
    margin: 6px auto;
    padding: 10px 1.2rem;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-radius: 4px;
}

.bp-login-widget-register-link {
  display: block;
  margin-top: 10px;
}
.bp-login-widget-register-link a {
  color: #333;
  text-decoration: none;
  display: block;
  text-align: center;
  border: 1px solid #777;
  padding: 6px;
  border-radius: 2px;
}
.bp-login-widget-register-link a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}

.widget.buddypress #bp-login-widget-form input#bp-login-widget-submit {
  margin: 0;
}

#wp-comment-cookies-consent {
  margin-right: 5px;
}

/* コメントカスタマイズ */
/* コメント */

.more_comment{
  display: block;
    width: 80%;
    text-align: center;
    padding: 8px;
    border: 2px solid #4CAF50;
    font-weight: bold;
    color: #4CAF50;
    border-radius: 30px;
    margin: 10px auto;
}

.more_comment .comment_load{
  width: 20px;
  margin-left: 10px;
  vertical-align: middle;
}

#commentform{
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
}

#respond .comment-form-author{
  order: 1;
}

#respond .comment-area{
  order: 2;
}
#respond .form-submit{
  order: 4;
  margin-top: 0;
}
#respond .comment-form-cookies-consent{
  order: 3;
}

button , input[type="button"]{
  -webkit-appearance: button;
  appearance: button;
  border: 1px solid #888;
}


.comment-reload{
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  color: #777;
  background: #fafafa;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}

.comment-witer-button{
  border: none;
  color: #2196f3;
  background-color: #fff;
  font-size: 1.4rem;
  padding: 8px 14px;
  border-radius: 4px;
  display: block;
  width: 96%;
  margin: 10px auto;
}
.comment-witer-button i{
  font-size: 1.8rem;
  vertical-align: middle;
}

.commets-list{
}

.commets-list > li{
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
}

.commets-list .children li {
  border-top: 1px dotted #ddd;
}


/* #respond{
  display: none;
} */
#comments{
  margin-bottom: 10px;
  background: #333;
  color: #fff;
  padding: 6px;
}

textarea#comment{
  font-size: 16px;
}

#comment_image_reloaded{
  display: none;
}

#comment-image-reloaded-wrapper label{
  font-size: 13px;
  color: #777;
}

#upload_delete{
  display: none;
  background: #fff;
  border: none !important;
  color: #de7272;
  width: 100%;
  text-align: center;
  font-size: 13px;
}

#fileUploadBtn{
  display: inline-block;
  width: 50%;
  border-radius: 20px;;
  font-family: FontAwesome ;
  color: #888;
  background-color: #fafafa !important;
  font-size: 1.4rem;
  padding: 6px;
  margin-left: 10px;
}


#preview_img{
  text-align: center;
}

#preview1, #preview2{
  display: inline-block;
  width: auto;
  max-width: 200px;
  max-height:200px;
  padding: 10px;
}

#comments-thread{
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

#comments-thread p{
  font-size: 14px;
  line-height: 20px;
  margin: 6px 0;
  padding: 4px;
  font-family: Arial,'Open Sans', sans-serif,'Hiragino Kaku Gothic ProN', Meiryo, Helvetica;
}

#comments-thread #comments{
  font-size: 16px;
  padding:6px;
  background: #333;
  color: #fff;
}

#comments-thread h2#resp, #comments-thread h2#reply-title, h3#reply-title{
  font-size: 16px;
  padding:6px;
  margin-bottom: 0;
  background: #f0f0f0;
}

#comments-thread ol{
  margin: 0;
}

#comments-thread .children{
  padding-left: 0px;
  margin-left: 0;
 list-style: none;
}

#comments-thread ol.commets-list, #comments-thread div#respond {
  padding-left: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
#comments-thread .commets-list{
  margin-top: 10px;
  border-top: 1px solid #eee;
}

.comment-listCon{
    border-bottom: 1px solid #eee;
}



.replay_no{
  font-size: 1.2rem;
  color: #888;
}

.commets-list li p{
  clear: both;
  padding: 6px 2px 2px 2px;
  margin: 0 0 2px 0;
  font-size: 1.3rem;
}

.commets-list li{
  list-style: none;
  margin: 8px 8px;
  border: 1px solid #d8d8d8;
}



.comment-author , .comment-meta{
  display: inline-block;
  width: 50%;
  float: left;
  font-size: 1.2rem;
  color: #439347;
}

.comment-author .fn{
  font-style: normal;
}

.comment-meta{
  text-align: right;
  color: #999;
}

#comments-thread cite.comment-author{
  font-style: normal;
  font-size: 80%;
  color: #6ea4db;
}

.commets-list .comment-info{
  font-weight: normal;
}

.commets-list  .comment-id{
  font-size: 80%;
  color: #aaa;
  padding-left: 6px;
  font-weight: normal;
}
.commets-list  .comment-datetime{
  display: block;
  font-size: 80%;
  color: #888;
  font-weight: normal;
}

.commets-list .comment-no{
      font-size: 80%;
  color: #888;
}

#comments-thread #commentform input, #comments-thread #commentform textarea{
  border: 1px solid #ddd;
}

input[name="image"]{
  font: small-caption;
  /*display: none;*/
}


#comments-thread #commentform input[type=submit]{
  text-align: center;
  display: inline-block;
  padding: 8px 4px;
  margin: 0 auto;
  background-color: #6dbcdc;
  border: none;
  border-radius: 4px;
  color: #FFF;
  width: 100%;
}

.write_comment_btn{
   text-align: center;
}
.write_comment_btn a{
  display: inline-block;
  width: 80%;
  padding: 6px 1.2rem;
  text-decoration: none;
  color: #48914a;
  text-align: center;
  border-radius: 6px;
  font-weight: bold;
}

/* コメント画像*/
.comment-image-box{
  display: table;
}

.comment-image-box:after, .comment-image-box:before {
  content: "";
  clear: both;
  display: block;
}

.comment-image-reloaded{
  display: table-cell;
  padding-right: 10px !important;
}

#comments-thread .comment-form-comment{
  margin-bottom: 0;
  padding-bottom: 0;
}

#comments-thread #comment-image-reloaded-error{
  margin: 0;
}

.comment-page-link{
  margin: 10px auto;
  text-align: center;
}
.comment-page-link a{
  text-decoration: none;
}


/************************************
** カルーセル
************************************/
.carousel {
  margin-top: 10px;
  line-height: 1.1;
}
.carousel .slick-arrow:before {
  color: #ccc;
}

.carousel-in {
  background-color: #fff;
  padding: 2px 0;
}

.carousel-content {
  margin: 0 30px;
  padding-bottom: 4px;
}
.carousel-content a {
  float: left;
  width: 10%;
}
.carousel-content .slick-track {
  display: flex;
}
.carousel-content .slick-slide {
  height: auto;
}
.carousel-content .a-wrap {
  margin: 0 3px 3px;
}

.carousel-entry-card-thumb {
  float: none;
  display: inline-block;
}

.carousel-entry-card-title {
  font-size: 16px;
  margin-top: 4px;
  max-height: 3.2em;
  overflow: hidden;
}

/************************************
** カルーセルの非表示設定
************************************/
.no-carousel .carousel {
  display: none;
}

.carousel {
  display: none;
}
.carousel .a-wrap {
  padding: 0.2em 0.3em;
}

.ccb-carousel-border .a-wrap {
  border: 1px solid #ccc;
}

.admin-panel {
  background-color: #333;
  color: #fff;
  opacity: 0.8;
  padding: 10px;
  font-size: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transition: .3s;
  z-index: 9999;
}
.admin-panel a {
  color: #fff;
}

.admin-pv,
.admin-edit,
.admin-amp,
.admin-checks,
.admin-cresponsive {
  border-radius: 3px;
  padding: 0 10px;
  border: 1px solid #ccc;
  margin: 6px 4px;
}
.admin-pv > span,
.admin-edit > span,
.admin-amp > span,
.admin-checks > span,
.admin-cresponsive > span {
  padding: 0 4px;
}

.admin-amp a,
.admin-checks a,
.admin-cresponsive a {
  margin: 0 4px;
  font-size: 0.8em;
}

.admin-pv {
  position: relative;
}
.admin-pv .admin-pv-by {
  position: absolute;
  bottom: -1em;
  right: 0.4em;
  font-size: 0.6em;
  background-color: #333;
  padding: 0 5px;
}

.apdt-pc-only {
  display: flex;
}

.apdt-mobile-only {
  display: none;
}


.entry-card .admin-pv {
  margin: 0 0 8px;
  padding: 0;
  border-width: 0;
}
.entry-card .admin-pv .admin-pv-by {
  background-color: transparent;
  bottom: 0;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.carousel .slick-dotted.slick-slider {
  margin-bottom: 0;
}

/*
    Mobile Menu Core Style
*/
.slicknav_btn {
  position: relative;
  display: block;
  vertical-align: middle;
  float: right;
  padding: 0.438em 0.625em 0.438em 0.625em;
  line-height: 1.125em;
  cursor: pointer;
}

.slicknav_menu .slicknav_menutxt {
  display: block;
  line-height: 1.188em;
  float: left;
}

.slicknav_menu .slicknav_icon {
  float: left;
  margin: 0.188em 0 0 0.438em;
}

.slicknav_menu .slicknav_no-text {
  margin: 0;
}

.slicknav_menu .slicknav_icon-bar {
  display: block;
  width: 1.125em;
  height: 0.125em;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
  margin-top: 0.188em;
}

.slicknav_nav {
  clear: both;
}

.slicknav_nav ul,
.slicknav_nav li {
  display: block;
}

.slicknav_nav .slicknav_arrow {
  font-size: 0.8em;
  margin: 0 0 0 0.4em;
}

.slicknav_nav .slicknav_item {
  cursor: pointer;
}

.slicknav_nav .slicknav_row {
  display: block;
}

.slicknav_nav a {
  display: block;
}

.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
  display: inline;
}

.slicknav_brand {
  float: left;
}

.slicknav_menu:before,
.slicknav_menu:after {
  content: " ";
  display: table;
}

.slicknav_menu:after {
  clear: both;
}

/* IE6/7 support */
.slicknav_menu {
  *zoom: 1;
}

/*
    User Default Style
    Change the following styles to modify the appearance of the menu.
*/
.slicknav_menu {
  font-size: 16px;
  box-sizing: border-box;
}

/* Button */
.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  background-color: #222222;
}

/* Button Text */
.slicknav_menu .slicknav_menutxt {
  color: #FFF;
  font-weight: bold;
  text-shadow: 0 1px 3px #000;
}

/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}

.slicknav_menu {
  background: #4c4c4c;
  padding: 5px;
}

.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
}

.slicknav_nav, .slicknav_nav ul {
  list-style: none;
  overflow: hidden;
}

.slicknav_nav ul {
  padding: 0;
  margin: 0 0 0 20px;
}

.slicknav_nav .slicknav_row {
  padding: 5px 10px;
  margin: 2px 5px;
}

.slicknav_nav a {
  padding: 5px 10px;
  margin: 2px 5px;
  text-decoration: none;
  color: #fff;
}

.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
  padding: 0;
  margin: 0;
}

.slicknav_nav .slicknav_row:hover {
  border-radius: 6px;
  background: #ccc;
  color: #fff;
}

.slicknav_nav a:hover {
  border-radius: 6px;
  background: #ccc;
  color: #222;
}

.slicknav_nav .slicknav_txtnode {
  margin-left: 15px;
}

.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 1.2rem;
  height: 44px;
}

.slicknav_nav .caption-wrap,
.slicknav_nav .item-label,
.slicknav_nav .item-description {
  display: inline;
}
.slicknav_nav .item-description {
  margin-left: 1em;
}

.slicknav_menu {
  display: none;
}

/*bbPressのスタイルを整える*/
.bbp-breadcrumb-home,
.bbp-breadcrumb-home + .bbp-breadcrumb-sep,
.topic .post-date,
.topic .post-update,
.topic .footer-post-meta,
.post-0 .post-date,
.post-0 .post-update,
.post-0 .footer-post-meta,
.forum .post-date,
.forum .post-update,
.forum .footer-post-meta {
  display: none;
}

#bbp_search {
  font-size: 17px;
  height: 28px;
}

.post-0 .post-meta {
  height: 27px;
}

.bbp-reply-content {
  font-size: 16px;
  line-height: 170%;
}

.bbp-forum-title {
  font-size: 16px;
}

.bbp-topic-permalink {
  font-size: 14px;
}

div#bbpress-forums {
  font-size: 16px;
}
div#bbpress-forums .bbp-topic-permalink {
  font-size: 16px;
}

div#bbpress-forums #bbp-user-wrapper {
  margin-top: 1.6em;
}
div#bbpress-forums .entry-title {
  background-color: transparent;
  color: #333;
  padding-left: 0;
}
div#bbpress-forums #bbp_topic_submit {
  padding: 1.2rem 24px;
}
div#bbpress-forums input[type=text] {
  width: 100%;
}
div#bbpress-forums div.odd,
div#bbpress-forums ul.odd {
  background-color: #fefefe;
}
div#bbpress-forums span.bbp-admin-links a,
div#bbpress-forums .status-closed,
div#bbpress-forums .status-closed a {
  color: #555;
}
div#bbpress-forums a.bbp-topic-permalink {
  text-decoration: none;
}
div#bbpress-forums a.bbp-topic-permalink:before {
  content: " \f096";
  font-family: FontAwesome;
  margin-right: 3px;
}
div#bbpress-forums .status-closed a.bbp-topic-permalink:before {
  content: " \f046";
  font-family: FontAwesome;
}
div#bbpress-forums .status-closed .bbp-reply-content:before {
  content: " \f046\00A0 Closed";
  font-family: FontAwesome,"Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

#bbp_search_submit {
  padding: 4px;
  width: auto;
}

@media screen and (max-width: 480px) {
  div#bbpress-forums div.bbp-reply-author img.avatar {
    position: static;
  }

  div#bbpress-forums .bbp-body div.bbp-reply-author {
    padding-left: 0;
    width: 80px;
    text-align: center;
  }

  div#bbpress-forums .bbp-body div.bbp-reply-content {
    clear: none;
    margin: 0;
  }
  div#bbpress-forums .bbp-body div.bbp-reply-content p {
    margin-top: 0;
  }
}
#buddypress h2 {
  background-color: transparent;
  color: #333;
  padding: 0;
}
#buddypress #members-friends {
  margin-left: 6px;
}
#buddypress #members-friends select,
#buddypress #members-friends option {
  padding: 3px;
  font-size: 16px;
}
#buddypress div.item-list-tabs ul li.last select {
  min-width: 210px;
}

div#wpforo-wrap {
  padding: 0;
}
div#wpforo-wrap .wpfl-1 .wpforo-forum-description,
div#wpforo-wrap .wpfl-1 .wpforo-last-post-title,
div#wpforo-wrap .wpforo-post-head {
  font-size: 16px;
}
div#wpforo-wrap .wpfl-1 .head-title,
div#wpforo-wrap .wpforo-topic-title a {
  font-size: 20px;
}
div#wpforo-wrap .wpforo-post .wpf-right .wpforo-post-content,
div#wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-spost-title .wpf-spost-title-link,
div#wpforo-wrap .wpf-htr td {
  font-size: 18px;
}
div#wpforo-wrap .wpfl-1 .wpforo-post,
div#wpforo-wrap #wpforo-stat-body {
  background-color: transparent;
}
div#wpforo-wrap pre,
div#wpforo-wrap .wpforo-post .wpf-right code {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  font-size: 17px;
}
div#wpforo-wrap .wpforo-post .wpf-right ol,
div#wpforo-wrap .wpforo-post .wpf-right ul {
  margin: 2em 1em;
}

.wpforo-list-item p {
  margin: 0;
}

div#wpforo-wrap .wpforo-post .wpf-right .wpforo-post-content p {
  line-height: 1.8;
}

.bleft {
  font-weight: bold;
}

#wpf-form-wrapper .mce-edit-area iframe {
  min-height: 400px;
}

.mce-wpf-emoji-extra-wrap {
  min-width: 300px !important;
  min-height: 300px !important;
}

.wpf-emoji-wrap .wpf-emoji {
  font-size: 24px;
}

.wpforo-attached-file {
  word-break: break-all;
}

.live-writer .main {
  max-width: 860px;
  width: 860px;
  min-width: 860px;
}
.live-writer .article {
  width: 800px;
}
.live-writer blockquote,
.live-writer .information-box,
.live-writer .question-box,
.live-writer .alert-box {
  padding: 10px;
}
.live-writer blockquote::before, .live-writer blockquote::after,
.live-writer .information-box::before,
.live-writer .information-box::after,
.live-writer .question-box::before,
.live-writer .question-box::after,
.live-writer .alert-box::before,
.live-writer .alert-box::after {
  display: none;
}

.information-box::before, .information::before {
  content: none;
}

.gsc-search-box table {
  margin-bottom: 0;
}
.gsc-search-box table th,
.gsc-search-box table td {
  border: 0;
}

#cse-search-box input[name="q"] {
  line-height: 34px;
  width: calc(100% - 60px);
  float: left;
}

#cse-search-box input[name="sa"] {
  width: 60px;
  padding: 0;
  line-height: 34px;
}

twitter-widget {
  overflow: hidden;
}

/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 *
 * Cocoon WordPress Theme incorporates code from "Youtube SpeedLoad" WordPress Plugin, Copyright 2017 Alexufo[http://habrahabr.ru/users/alexufo/]
"Youtube SpeedLoad" WordPress Plugin is distributed under the terms of the GNU GPL v2
 */
.video-click {
  cursor: pointer;
}

.video-click:hover .video-play {
  background: url("images/youtube-play.png") no-repeat scroll -101px -13px rgba(0, 0, 0, 0);
}

.video-play {
  background: url("images/youtube-play.png") no-repeat scroll 2px -13px rgba(0, 0, 0, 0);
  height: 62px;
  left: 50%;
  margin-left: -45px;
  margin-top: -33px;
  position: absolute;
  top: 50%;
  width: 100px;
  opacity: 0.8;
}

.video-title-grad {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAQAAAA7fHH2AAAAQUlEQVQYV22KQQoAIAzDyv7/Et/oVlGZVCfkkIYamsENXESyi8vc0u/PKZ6o8+7fZ0h8ShRYnD+BFKToRJkHFpkM2hZSxuyWpEYAAAAASUVORK5CYII=");
  background-position: center top;
}

.video-title-text {
  color: #eeeeee;
  font-family: Roboto,Arial,Helvetica,sans-serif;
  font-size: 17px;
  overflow: hidden;
  padding: 1.2rem 16px 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#main .wp-block-embed__wrapper::before {
  display: none;
}

.entry-content .wp-block-gallery .blocks-gallery-item {
  display: list-item;
}

/* 検索フォーム風スタイルのボタンを装飾 */
.search-form div.sbtn {
  transition: 0.3s;
  /* 変化をなめらかにする */
}

/* ボタンにカーソルを合わせた時のスタイル */
.search-form div.sbtn:hover {
  color: #333;
  /* 文字色 */
  background: #fff;
  /* 背景色 */
  border-color: #333;
  /* ボーダーの色 */
  cursor: pointer;
  /* カーソルをポインターに */
}

.b_red_marker {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 40%, #ffffbc 0%) repeat scroll 0 0;
  font-weight: bold;
  color: #ff6600;
}
.blue_marker{
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #e3f0f7 0%) repeat scroll 0 0;
  color: #605a6b;
  font-weight: 600;
}
.yellow_marker{
  color: #e62b6b;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 56%, #f7ffb6 0%) repeat scroll 0 0;
}



/************************************
** ソースコード
************************************/
pre {
  background-color: #f3f4f5;
  border: 1px solid #ccc;
  overflow: auto;
  padding: 10px;
  margin: 1em 0;
}


/************************************
** (追記)子テーマ用のスタイルを書く
************************************/
/*リセット*/
.article dl,
.article dt,
.article dd{
  padding: 0;
  margin: 0;
}



#container {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  justify-content: center;
  margin-top: 10px;
}
#container main {order:2;}
#container #left_side {order:1;width:260px;margin-right: 18px;}
#container #right_side {order:3;width:300px; margin-left: 18px;}
#container .side_menu{background-color: #fff;  border:1px solid #eee;}

#container .side_menu h2{
  background-color: #474e47;
  color:#fff;
  font-size: 1.4rem;
  padding: 4px 6px;
}

#container .side_menu h3{
  background-color: #eee;
  color:#333;
  font-size: 1.5rem;
  padding: 4px 6px;
}

#container .side_menu h4{
  background-color: #fff;
  color:#333;
  font-size: 1.4rem;
  padding: 4px 6px;
  border-top: 4px double #ccc;
  border-bottom: 4px double #ccc;
}

#container .side_menu .search-box{
  margin: 10px;
}


.side_menu ul{
  list-style: none;
  padding-left: 0;
}
.side_menu ul li{
  border-bottom: 1px solid #eee;
  padding: 6px 8px;
}
.side_menu ul a{
  text-decoration: none;
}


#container main{
  flex-basis: 460px;
}

#container main article{
  box-shadow: 0 0 2px 0 #ccc, 0 1px 2px 0 #ccc;
  background-color: #fff;
  margin-bottom: 10px;
  padding-bottom: 10px;
}


.under-entry-content{
  box-shadow: 0 0 2px 0 #ccc, 0 1px 2px 0 #ccc;
  background-color: #fff;
}
.comment-area{
}

@media screen and (max-width: 768px){
  #container main{
    box-shadow: none;
  }
  #container .side_menu{border: none;}

}


#container #left_side,#container #right_side{
  flex-basis: auto;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/


/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
  .main{max-width:100%;}

  #container{flex-direction: column; margin-top: 4px;}
  #container main {order:1; background-color: #fff;}
  #container #left_side {order:3; width: 100%; margin: 0;}
  #container #right_side {order:2;width: 100%; margin: 0;}
  #container #left_side,#container #right_side{
    flex-basis: auto;
    max-width: 100%;
    border:1px solid #ddd;
  }

  .header-in{
    height: 120px;
  }
  .header-in.in-article{
    height: 60px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/


}

article img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}


.article-footer{
  padding: 1.2rem;
}

.related-list{
  padding: 1.2rem;
}

/* -----------------
     ツール 
--------------------*/
#app{
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 10000;
  border: 2px solid #444;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: auto;
}


#app input[type=checkbox] {
  display: none;
}

#app button{
  margin: 0;
}

/* S_メイン検索 */
#app .category_filter{
  border: none;
  margin: 0px auto;
  width: 100%;
}
#app .category_filter .cate_select select{
  border: 4px solid #eee;
  font-weight: bold;
}


/* #app .category_filter th{
  border: none;background: none;
  font-size: 1.2rem;
  padding-left: 10px;
  text-align: left;
}

#app .category_filter td{
  border: none;background: none;
} */

#app .category_filter .main_category{
  padding: 0;
}

#app .category_filter .main_category span{
  margin-top: 0px;
  font-size: 16px;
  text-align: center;
  display: block;
  padding: 10px 0;
  text-align: center;
  color: #b73333;
  font-weight: bold;
}


/* S_絞り込みエリア */
#app .tool_filter th ,.tool_filter td{
  background: #fff;
  border: none;
  text-align: left;
  padding: 2px;
}

#app .tool_filter .cate_select.cate_sp select{
  font-size: 1.3rem;
  padding: 8px 38px 8px 14px;
}


#app #linkSelect{
  font-size: 1.3rem;
  min-height: 34px;
}

/* E_絞り込みエリア */


#app ul.chara_select_area{
  margin: 0 auto;
  padding: 0;
  padding-bottom: 300px;
  display: block;
  max-width: 520px;
  width: 100%;
  height: 100%;
  /* overflow: scroll;
  overflow-y: auto; */
  -webkit-overflow-scrolling: touch;
  background: #3b3030;
  min-height: 300px;
}

#app .app_inner{
  height: 100%;
  min-height: 55px;
  background: #3b3030;
  overflow: auto;
  /* padding-bottom: 400px; */
}

#app #s0 + label,#app #s6 + label{
  position: relative;
}

#app #s0 + label::before{
  content: "　";
  position: absolute;
  top: -7px;
  left: -10px;
  display: block;
  width: 60px;
  color: #fff;
  padding: 0px 4px;
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/03/leader.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#app #s6 + label::before{
  content: "　";
  position: absolute;
  top: -7px;
  left: -10px;
  display: block;
  width: 60px;
  color: #fff;
  padding: 0px 4px;
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/11/friend.png);
  background-size: contain;
  background-repeat: no-repeat;
}


#app .chara_select_area li{
  position: relative;
}

#app .v_chara_li button{
  width: 98%;
  height: 60px;
  margin: 4px;
  border: 1px solid #fff;
  background-color: #333;
  color:#fff;
}

.app_header{
  background: #315c33;
  padding: 4px;
}
.app_header span{
  display: block;
  border-left: 4px solid #FFBF00;
  color: #ffd350;
  padding-left: 8px;
  font-size: 1.4rem;
}

#app .v_chara_li{
  display: none;
  width: calc(100% / 6);
  vertical-align: top;
  padding: 1px;
  float: left;
}

#app .chara_select_area li.c_active{
  display: block;
}

#app .v_chara_li label{
  display: blcok;
  min-height: 60dp;
}

/* #app .chara_select_area input[type=checkbox]:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: green;
  border-radius: 50%;
} */

#app label.active img{
  background: #888;
  position: relative;
}

#app label.active::before , #app label.selected::before{
  content: "";
  background: #888;
  position: absolute;
  top: 0;
  left:0;
  z-index: 99;
  bottom: 0;
  width: 100%;
  background: #292727;
  opacity: 0.7;
}

#app label.selected::after{
  font-family: FontAwesome;
  font-size: 15px;
  content: "\f00c";
  color: #45e545 !important;
  position: absolute;
  top: 6px;
  left: 5px;
  z-index: 999;
}


#app .friend label.active::before{
  content: none;
}
#app .friend label.selected::after{
  content: none;
}

#app .friend.all label::before{
  content: none;
}

#app .category_tool_header{
  /* border: 1px solid #dec88e;
  box-shadow: 0px 0px 25px rgba(224, 187, 81, 0.6) inset; */
  background: #fff;
  border: 1px solid #ddd;
  padding-top: 6px;
}



#app .tool_select_chara{
  max-width: 520px;
  margin: 0 auto;
  padding: 4px 0 2px 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  background: #ffffff;
  border: 1px solid #fff;
}

#app .leader_skill_area{
  padding: 0 8px;
  margin: 0;
}


#app #main_select_or_and{
  display: inline;
}

#app #main_select_category span{
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 2px;
  color: #fff;
  background: #607d8b;
}

#app #reselect{
  margin: 0;
    position: relative;
    display: block;
    width: 100%;
    padding: .8em;
    margin: 2px auto 12px auto;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background: #4caf50;
    border: 0;
    border-radius: 4px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.19);
}

input[type="checkbox"].categorybox:checked + label {
  color: #31A9EE;
font-weight: bold;
}

input[type="checkbox"].categorybox:checked + label::before{
  content:"★";
  color: orange;
}

.category_modal_title{
  font-size: 1.4rem;
}

#category_select{
  width: 100%;
  padding:0 0 60px 0;
  margin-bottom: 80px;
}

#category_select td{
  padding: 0;
  /* display: block;
  width: 100%; */
}
/* #category_select tr{
  display: block;
  width: 100%;;
  padding: 0;
} */

.categorylabel {
  display: block;
  font-size: 1.3rem;
  margin: 0px;
  text-align: center;
  padding: 8px 2px;
  cursor: pointer;
  color: #506d7a;
}


#category_modal{
  display: none;
  position: fixed;
  background: #fff;
  padding: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 520px;
  z-index: 99999;
  overflow: scroll;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  left: 0;
  right: 0;
  border: 2px solid #444;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
@media screen and (min-width: 720px) {
  #category_modal{
    padding-top: 30px;
  }
}


#category_modal.show{
  display: block;
}

#category_modal button{
  display: block;
  bottom: 16px;
  left: 10px;
  font-size: 1.6rem;
  width: 50%;
  padding: 10px;
  margin: 2px auto 12px auto;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background: #4caf50;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.19);
  max-width: 520px;
  margin: 10px auto;
}

.select_chara_modal{
  font-size: 1.4rem;
  font-weight: bold;
  width: 100%;
  background: #fff;
}

.select_chara_modal.modal_link{
  border: 0;
  color: #346cd3;
  display: inline-block;
  text-align: right;
}

.select_chara_modal img{
  width: calc(100% / 7);
  margin: 4px 0;
}
.select_chara_modal span{
  display: block;
}
.app_title button{
  font-size: 2.6rem;
  border: 0;
  background: no-repeat;
  position: absolute;
  right: 12px;
  /* padding: 2px 6px; */
  top: 12px;
  display: block;
  width: 44px;
  height: 40px;
  color: #555;
}



#linkSelect{
  padding: 8px 38px 8px 13px;
  color: #666;
  font-size: 16px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
}


.leader_skill_area{
  background: #fff;
  display: none;
}
.leader_skill_area.active{
  display: block;
}

.leader_skill_area span:first-child{
  background: none;
  font-size: 10px;
  /* text-shadow: #5d4612 2px 0px 0px, #5d4612 -2px 0px 0px, #5d4612 0px -2px 0px, #5d4612 0px 2px 0px, #5d4612 2px 2px 0px, #5d4612 -2px 2px 0px, #5d4612 2px -2px 0px, #5d4612 -2px -2px 0px, #5d4612 1px 2px 0px, #5d4612 -1px 2px 0px, #5d4612 1px -2px 0px, #5d4612 -1px -2px 0px, #5d4612 2px 1px 0px, #5d4612 -2px 1px 0px, #5d4612 2px -1px 0px, #5d4612 -2px -1px 0px, #5d4612 1px 1px 0px, #5d4612 -1px 1px 0px, #5d4612 1px -1px 0px, #5d4612 -1px -1px 0px; */
  color: #FF9800;
}
.leader_skill_area span:last-child{
  font-size: 1.2rem;
  line-height: 1.4;
  display: block;
  /* text-shadow: #5d4612 2px 0px 0px, #5d4612 -2px 0px 0px, #5d4612 0px -2px 0px, #5d4612 0px 2px 0px, #5d4612 2px 2px 0px, #5d4612 -2px 2px 0px, #5d4612 2px -2px 0px, #5d4612 -2px -2px 0px, #5d4612 1px 2px 0px, #5d4612 -1px 2px 0px, #5d4612 1px -2px 0px, #5d4612 -1px -2px 0px, #5d4612 2px 1px 0px, #5d4612 -2px 1px 0px, #5d4612 2px -1px 0px, #5d4612 -2px -1px 0px, #5d4612 1px 1px 0px, #5d4612 -1px 1px 0px, #5d4612 1px -1px 0px, #5d4612 -1px -1px 0px; */
  color: #555;
}


#app .tool_select_chara input{
  display: none;
}

#app .tool_select_chara input[type=radio]:checked+label {
  border:2px solid orange;
}


#app .tool_select_chara label{
  display: inline-block;
  width: calc(100% / 7);
}

#app .cate_select {
  overflow: hidden;
  width: 100%;
  margin: 0;
  text-align: center;
}
#app .cate_select select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#app .cate_select select::-ms-expand {
    display: none;
}
#app .cate_select.cate_sp {
  position: relative;
  border-bottom: 1px solid #bbbbbb;
  border-radius: 2px;
  background: #ffffff;
}
#app .cate_select.cate_sp::before {
  position: absolute;
  top: 20px;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}
#app .tool_filter .cate_select.cate_sp::before{
  top: 15px;
}
#app .tool_filter{
  padding: 2px;
  margin: 0;
  width: 100%;
  margin-bottom: 6px;
}

#app #close_app{
  display: inline-block;
  width: 100px;
  position: absolute;
  color: #fff;
  right: -48px;
  top: 4px;
}


#app .cate_select.cate_sp select {
  padding: 6px 38px 6px 8px;
  color: #666666;
  font-size: 14px;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
}

.radius_4{
  border-radius: 4px;
}

 .ul_table_box { border: 1px solid #b8c6ce; margin: 16px 0 1.2rem 0;}
 .ul_table_box p{ background: #e6f0fa;border-bottom: 1px solid #b8c6ce; text-align: center;margin:0;padding:0;font-size: 13px;padding: 2px;}
 .ul_table_box ul{margin:0; padding:0; list-style:none;letter-spacing: -.4em;display: flex;flex-wrap: wrap;}
 .article .ul_table_box li {
    padding: 6px 4px;display:inline-block;text-align:center;margin: 0;letter-spacing: 0;vertical-align: top;
    background: #fff;
    border: 1px solid #f6f6f6;
  }
 .ul_table_box li a{font-size:1.2rem;display:block;}
 .ul_table_box li span{display: block; line-height: 1.4;}
 .ul_table_box .col_4 li{width: calc(100% /4)}
 .ul_table_box .col_3 li{width: calc(100% /3)}
 .ul_table_box .col_2 li{width: calc(100% /2)}
 .ul_table_box .col_1 li{width: 100%; text-align:left}
 .ul_table_box .col_1 li img{width: 50%}
 .ul_table_box .col_1 li span{padding:6px 8px;max-width: 50%}
 .ul_table_box p.color{
  border-bottom: 1px solid #ddd;
  padding: 8px 6px;
  display: block;
  font-size: 13px;
  font-weight: bold;
  text-shadow: #FFF 2px 0px 0px, #FFF -2px 0px 0px, #FFF 0px -2px 0px, #FFF 0px 2px 0px, #FFF 2px 2px 0px, #FFF -2px 2px 0px, #FFF 2px -2px 0px, #FFF -2px -2px 0px, #FFF 1px 2px 0px, #FFF -1px 2px 0px, #FFF 1px -2px 0px, #FFF -1px -2px 0px, #FFF 2px 1px 0px, #FFF -2px 1px 0px, #FFF 2px -1px 0px, #FFF -2px -1px 0px, #FFF 1px 1px 0px, #FFF -1px 1px 0px, #FFF 1px -1px 0px, #FFF -1px -1px 0px;
}

/* .article td,.article th {
  border-color: #b8c6ce;
} */

/* .lozad{
  background-color: #f4f4f4;;
} */


.chara_skill_list th{
  text-align: left;
}

.chara_skill_list td{
  text-align: left;
  padding: 6px 6px;
}

.chara_skill_list th.center ,.chara_skill_list td.center{
  text-align: center;
}

.eball{
  font-size: 1.0rem;
  color: #e0668f;
  padding-right: 4px;
}
.skill_label {
  color: #666;
  font-size: 1.1rem;
}

.label_status_normal{
  display: block;
  font-size: 1.0rem;
  color: #fea400;
  border-top: 1px dotted #eee;
  margin-top: 0;
  padding-top: 2px;
}

.chara_skill_list .chara_icon{
  text-align: center;
}

/* キャラアイコン */
.chara_icon{
  border-radius: 4px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  background: #f0f0f0;
  font-size: 1.0rem;
  color: #ccc;
}

.chara_icon.big{
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin: 1px;
}

.chara_icon.normal{
  width: 46px;
  height: 46px;
  min-height: 40px;
  margin: 1px;
}

.chara_icon.mini{
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 1px;
}

.chara_icon.small{
  width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 1px;
}

.chara_icon.tiny{
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin: 1px;
}



.support_connecter{
  margin: 0;
}

.support_connecter .chara_icon{
  width: 100%;
  max-width: 54px;
  height: auto;
  min-height: auto;
}
.support_connecter td{
  padding: 2px;
}

.support_connecter td table{
  margin: 0;
}

.chara_link{
  text-align: center;
  /* text-indent: -7px; */
  display: block;
}

.linkstar{
  color: #FFB200;
}

.zlimit{
  display: block;
  color: purple;
  border-top: 1px dotted #ccc;
  margin-top: 4px;
  padding-top: 2px;
}

.pt_table{
  margin: 4px auto 10px auto;
  padding: 0;
  width: 100%;
}

.pt_table .leader::before ,.pt_table .friend::before{
  content: " ";
  display: block;
  width: 60px;
  height: 28px;
  top: -1px;
  left: -7px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 54px 27px;
}
.pt_table .leader::before {
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/03/leader.png);
}

.pt_table .friend::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/11/friend.png);
}

.pt_table td{
  vertical-align: top;
  padding: 5px 1px 3px 0;
  position: relative;
  line-height: 1.4;
}


.noborder{
  border: none !important;
}
.noboxshadow{
  box-shadow: none !important;
}

.pt_table.noborder td{
  border: none;
  width: calc(100% / 7);
}

.tool_button td{
  border: none;
}

.tool_button button{
  margin: 0;
  position: relative;
  display: block;
  width: 100%;
  padding: 0.8em;
  margin: 2px auto 12px auto;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background: #4caf50;
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.tool_button button.tool_reset{
  color: #F44336;
  background: #fff;
  border: 1px solid #F44336;
}

.tool_button button.nonactive{
  background: #ddd;
}

/* キャラリンクスキル */

.chara_linkskill , .chara_category{
  padding: 0 4px;
  list-style: none;
}

.chara_linkskill .link_name{
  font-size: 1.2rem;
}
.chara_linkskill li{
  display: table;
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 2px 0;
}
.chara_linkskill li:last-child{
  border-bottom: none;
}

.chara_linkskill li a{
  display: table-cell;
  text-decoration: none;
  width: 35%;
  padding: 4px 0;
  font-size: 1.3rem;
}


.chara_linkskill .link_desc{
  display: table-cell;
  font-size: 1.1rem;
  width: 60%;
  vertical-align: middle;
}

.chara_category{
  padding: 0;
  margin-bottom: 10px;
}

.chara_category li{
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 1px 1px 1px 0;
}

.chara_category li a{
  display: block;
  padding: 4px 2px;
  border: 1px solid #ddd;
  text-decoration: none;
  word-break: keep-all;
  font-size: 1.2rem;
  font-weight: bold;
}


.chara_fixheader{
  display:table; width:100%;
}
.chara_fixheader div{
  display: table-cell;
  width: 60px;
  vertical-align: middle;
}

.chara_fixheader span{
  display: table-cell;
  width: calc(100% - 60px);
}

.linkskill_items{
  padding: 0;
  margin: 3px 0;
  list-style: none;
  text-align: left;
}

.article .linkskill_items li{
  display: inline-block;
  padding: 2px;
  margin: 1px;
  border: 1px solid #eee;
  font-size: 1.0rem;
  color: #888;
}
.article .linkskill_items li.linkskill_match{
  /* color: #EB7BAB; */
  background-color: #fdf3f6;
  color: #5b3145;
}

.article .tag_match{
  display: inline-block;
  color: #696465;
  font-size: 1.0rem;
  padding: 1px 2px;
  border: 1px solid #ccc;
  margin: 2px 3px 2px -2px;
  border-radius: 5px;
  min-width: 32px;
  text-align: center;
}


.article .match_pt{
  text-align: left;
  margin-bottom: 2px;
  padding: 2px 2px;
  border-radius: 2px;
  width: calc(100% - 60px);
  float: left;
}
.article .match_pt > span:first-child{
  color: #888;
  display: block;
  font-size: 1.0rem
}

.c_status_box{
  padding: 2px 4px;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: left;
}

.c_status{
  display: inline-block;
  margin-right: 4px;
  font-weight: bold;
}

.fa-angle-double-up {
  color: #41afe2;
}
.fa-angle-double-down {
  color: #4388c0;
}

.status_val{
  color: #E91E63;
  font-weight: bold;
  padding-right: 6px;
}

.chara_route{
  margin: 10px 0 20px 0;
}

.chara_route .chara_select{
  background-color: #ebf3ff;
}



.chara_route td{
  vertical-align: top;
  padding: 4px 2px;
  position: relative;
}

.chara_route td .cr_head{
  font-size: 10px;
  border-bottom: 1px dotted #ddd;
  margin-bottom: 4px;
  display: block;
}

.chara_route td::before{
  position: absolute;
  top: 1%;
  right: -10px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid #eee;
  background: #555454;
  line-height: 16px;
  z-index: 2;
}

.chara_route td.r0::before{
  content: "1";
}

.chara_route td.r1::before{
  content: "2";
}
.chara_route td.r2::before{
  content: "3";
}


.chara_route td:last-child::before{
  content: none;
}


.chara_route .chara_name{
  display: block;
  font-size: 1.0rem;
}

.label{
  position: absolute;
  top: 0;
  left: 10px;
  border: 1px solid #ddd;
  padding: 6px 10px;
}

/* キャラ個別：基本情報 */
.chara_base > dt{
  background: #25302f;
  color: #ffffff;
  display: inline-block;
  margin-top: 6px;
  padding: 0px 20px 0px 8px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  /* border-bottom: 4px double orange; */
  min-width: 120px;
  font-size: 1.2rem;
  position: relative;
}
.chara_base > dt:after{
  content: "";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  /* border-width: 25px 15px 25px 0; */
  border-width: 0px 15px 25px 0;
}

.chara_base_content dt, .chara_base_content dd{
  border-bottom: 1px solid #e9e5e5;
}

.chara_base_content > dt{
  background: #f4f4f4;
  color: #555;
  display: inline-block;
  margin-top: 10px;
  padding: 0px 20px 0px 8px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  /* border-bottom: 4px double orange; */
  min-width: 80px;
  font-size: 1.2rem;
  position: relative;
}

.chara_base_content > dt:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  /* border-width: 25px 15px 25px 0; */
  border-width: 0px 15px 25px 0;
}

.chara_base_content > dd{
  display: inline-block;
  width : calc( 100% - 90px);
  text-align: center;
}

.chara_base_content > dd.half{
  display: inline-block;
  width : calc( 50% - 90px);
  text-align: center;
}

.chara_base_content > dd.full{
  text-align:center; 
  padding: 8px 0px 4px 4px;
  vertical-align: middle; 
  width: calc( 100% - 90px);
  font-size: 1.3rem;
}
.chara_base_content > dd.full a{
  text-decoration: none;
}

.chara_base_content.full dt{
  width: 100%;
  padding: 4px 5px;
  background: #ecf2f9;
  margin-top: 10px;
  color: #222;
  font-weight: bold;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-radius: 0;
  border: 1px solid #ddd;
  /* box-shadow: 0 0 25px rgba(224,187,81,.6) inset; */
  /* background: #fff8f3; */
}

.chara_base_content.full dt::after{
  content: none;
}

.chara_base_content.full dd{
  text-align: left;
  width: 100%;
  padding: 8px 7px;
  border: 0;
  font-size: 1.3rem;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  /* border-bottom: 1px solid #dec88e; */
}

.skill_item{
  padding: 0;
}
table .skill_item{
  padding: 2px;
  font-weight: bold;
}
.chara_skill_list .skill_item{
  font-weight: normal;
}

.drop_area{
  border-top: 1px dotted #bbb;
  padding: 4px 2px 2px 2px;
  margin: 6px 0 0 0;
}



.skill_item_hosoku {
  font-size: 1.2rem;
  color: #555;
  padding: 6px 1px;
  background: #fafafa;
  margin-bottom: 8px;
  margin-top: 1px;
}

.chara_base_content.full .active_skill_area{
  padding: 8px;
}
.active_skill_area table{
  margin: 0;
}
.active_skill_area td, .active_skill_area th{
  border: 0;
  padding: 0;
  background: #fff;
  text-align: left;
}
.active_skill_area td{
  font-size: 1.3rem;
  padding-bottom: 4px;
}

.active_skill_area th{
  text-indent: -8px;
}



.mlabel{
  position:relative;
  background: #6aa7cd;
  padding: 1em;
}
.mlabel:after{
  content: "";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  border-width: 25px 15px 25px 0;
}







/* ステータス */

.article .status_area{
  margin-bottom: 0;
}
.article .status_area th , .article .status_area td{
  border: none;
  background-color: transparent;
}

.article .status_area  tr td{
  border-top: 1px solid #eee;
  /* border-right: 1px solid #fafafa;
  border-left: 1px solid #fafafa; */
  font-size: 1.3rem;
}

.article .status_area tr:nth-child(2) td{
  border: none;
}


/* .article .status_area td:first-of-type{
  color: #237e27;
}
.article .status_area td:first-of-type+td{
  color: #e1658f;
}
.article .status_area td:first-of-type+td+td{
  color: #4397bd;
} */

.article .status_area th{
  font-size: 0.9rem;
  font-weight: normal;
  padding: 0;
}
.article .status_area th span{
  font-size: 1.3rem;
}

.article .status_area th .s_label{
    /* background-color: #f4f4f4; */
    font-size: 1.2rem;
    color: #666;
    display: inline-block;
    margin: 6px 0 2px 0;
    padding: 2px 0px 2px 4px;
    /* border-bottom: 4px double orange; */
    min-width: 90px;
    position: relative;
    text-align: left;
}



/* .article .status_area th .s_label:after{
  content: "";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  border-width: 0px 15px 25px 0;
} */

.s_hp , .s_atk , .s_def{
  display: block;
  margin: 0 auto;
  color: #4a9a4e;
  width: 80%;
  /* border-radius: 11px; */
  border-bottom: 1px solid #4a9a4e;
  
}
.s_atk{
  color: #e77a9f;
  border-bottom: 1px solid #e77a9f;

}

.s_def{
  color: #79c1e1;
  border-bottom: 1px solid #79c1e1;
}

.chara_skill_list td.center{
  text-align: center;
}

.main_chara_img{
  position: relative;
  display: block;
  margin: 10px auto;
  width: 200px;
  text-align: center;
}
.main_chara_img img.label_zlimit{
  position: absolute;
  bottom: 27px;
  right: -3px;
  display: inline-block;
  background-color: transparent;
}

.main_chara_img .rarity{
  position: absolute;
  left: -11px;
  top: 2px;
  width: 80px;
}

.main_chara_img .element{
  position: absolute;
  left: 6px;
  top: 47px;
  width: 42px;
}

.main_chara_img img.label_fes{
  position: absolute;
  left: 0;
  bottom: 24px;
  display: inline-block;
  background-color: transparent;
  width: 70px;
}

.main_chara_img img.label_lr{
  position: absolute;
  left: 0px;
  bottom: -6px;
  display: inline-block;
  background-color: transparent;
}


.st_filter{
  text-align: center;
}

.st_filter .c_atk{
  display: inline-block;
  border: 1px solid #ddd;
  padding: 2px 10px;
  border-radius: 20px;
  margin: 4px 2px;
  color: #888;
  cursor: pointer;
}

.st_filter .c_atk.select{
  border: 1px solid #ff6666;
  color:#ff6666
}

.link_filter{
  width: calc((100% - 3px) / 3);
  font-size: 1.3rem;
  display: inline-block;
  padding: 6px 6px 4px 6px;
  text-align: center;
  font-weight: bold;
  background: #e4e4e4;
  color: #888;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
  margin-right: 1px;
}
.link_filter.select{
  background:#5ab4bd;
  color: #fff;
}
.data_t{
  border: 1px solid #5ab4bd;
  margin-bottom: 1.2rem;
}

.data_t table{
  margin: 0;
}
.data_t table td{
  font-size: 1.3rem;
}



/* 投票システム */
.wp-polls{
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding-bottom: 4px;
  padding-top: 2px;
  margin: 8px auto 14px auto;
}

.wp-polls .wp-polls-ul{
  padding: 6px;
  margin: 0;
}

.wp-polls .wp-polls-ul li{
  display: table;
  width: 100%;
  position: relative;
  padding-left: 10px;
  border: 1px solid #ddd;
  margin: 2px auto !important;
}


.wp-polls .Buttons{
  border: 1px solid #ddd;
  font-size: 1.4rem;
  background-color: #f3f6f8;
  background: #fff;
  border: 2px solid #4caf50;
  padding: 2px 1.2rem;
  border-radius: 4px;
}


.wp-polls .wp-polls-ul li input{
  display: table-cell;
  width : 30px;
  vertical-align: middle;
}

.wp-polls .wp-polls-ul li input:checked + label{
  color: orangered;
}

.wp-polls .wp-polls-ul li label{
  display: table-cell;
  width : 100%;
  vertical-align: middle;
  text-align: left;
  font-size: 1.3rem;
  font-weight: bold;
}


.wp-polls-ul li b{
  position: absolute;
  right: 0;
  top:0;
  padding-left: 4px;
}

.wp-polls-ul li .pollbar{
  width: 1%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background: #BBDEFB;
  background-image: none;
  border: none;
  margin: 0;
}


.wp-polls-ans li div:last-child{
  padding-right: 40px;
  font-size: 1.3rem;
  position: relative;
}


.link_button{
  display: block;
  padding: 10px 30px 10px 10px;
  margin: 6px auto 20px auto;
  border-radius: 25px;
  width: 98%;
  font-size: 1.3rem;
  background: #fff;
  border: 2px solid #1270c3;
  color: #1270c3;
  text-align: center;
  position: relative;
  word-break: keep-all;
  line-height: 1.5;
  text-decoration: none;
  font-weight: bold;
}

.link_button::after{
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f054";
  position: absolute;
  font-weight: normal;
  top: 53%;
  margin-top: -8px;
  right: 10px;
  font-size: 12px;
}

.link_button.down_icon::after{
  content: none;
}

.link_button:hover{
  color: #fff;
  background-color: #509fe4;
}

.pt_item .link_button:hover{
  background-color: #fff;
  color: #509fe4;
}


.tag_passive , .tag_active{
  font-weight: bold;
}

/*キャラ一覧*/
.chara_div{
  border: 1px solid #e9dab2;
  font-size: 1.2rem;
  margin-bottom: 1px;
}

/* キャラ一覧 */
.article .chara_list_box{
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}

.article .chara_list_box.ranking > li{
  counter-increment: rank;
  position: relative;
  min-height: 124px;
}

.osusume span{
  color: #ffc107;
}

.article .chara_list_box.ranking > li::before {
  /* content: "【第"counter(rank)"位】"; */
  /* content: counter(rank); */
  /* position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  height: 20px;
  text-align: center; */
  /* background: #70838c; */
  color: #70838c;
  /* text-shadow: 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #3F51B5, 0 0 1.5px #FF9800; */
}

.divi_label{
  background: #eee;
  border-left: 3px solid #555;
  padding: 4px 7px;
  font-size: 1.4rem;
}


.article .chara_list_box > li{
  display: table;
  padding: 0;
  width: 100%;
  font-size: 1.2rem;
  border-left: 1px solid #e9dab2;
  border-right: 1px solid #e9dab2;
  border-bottom: 1px solid #e9dab2;
}

.article .chara_list_box > li:first-child{
  border-top: 1px solid #e9dab2;
}

.chara_list_box .list_box_icon{
  display: table-cell;
  width: 90px;
  vertical-align: middle;
  text-align: center;
  padding: 6px 4px;
  border-right: 1px solid #e9dab2; ;
}

.chara_list_box .list_box_icon.double_icon{
  width: 124px;
}
.chara_list_box .list_box_icon.single_icon{
  width: 110px;
}

.chara_list_box .list_box_content{
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  padding: 6px;
  line-height: 1.5;
  font-size: 1.1rem;
}
.chara_list_box .list_box_content .zlimit{
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.list_box_content .chara_name{

}

/* 図鑑キャラリスト */
.chara_list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.chara_list td{
  font-size: 1.3rem;
}

.chara_list td a{
  display: block;
}

.rare_count td{
  font-size: 1.4rem;
}

.chara_nav{
  display: table;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid #ddd;
}
.chara_nav a{
  display: table-cell;
  width: 50%;
  text-align: center;
  padding: 1px;
  position: relative;
  text-decoration: none;
}
.chara_nav a:first-child{
  border-right: 1px solid #ddd;
}
.chara_nav a:first-child::before{
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f104";
  color:#888;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: 14px;
  font-size: 1.8rem;
}

.chara_nav a:last-child::after{
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f105";
  color:#888;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 14px;
  font-size: 1.8rem;
}

.chara_nav a span{
  display: block;
  line-height: 1.4;
  font-size: 1.3rem;
}

.chara_tag{
  padding: 1px 3px;
  border-radius: 2px;
  /* background-color: #7593a2; */
  color: #7593a2;
  font-size: 1.0rem;
  display: block;
}

/* もっと見る */
.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 140px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}

.grad-trigger:after {
  line-height: 2.5rem;
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  width: 200px;;
  padding:4px 10px;
  font-family: FontAwesome;
  content: "\f13a もっと見る";
  transform: translate(-50%, 0);
  letter-spacing: 0.05em;
  color: #ffffff;
  border-radius: 20px;
  background-color: rgba(27, 37, 56, 1);
}

.grad-item {
  position: relative;
  overflow: hidden;
}

.grad-item .chara_link{
  text-align: left;
}

.grad-item.is-hide {
  height: 1200px;
}

.connector_aisho_area .grad-item.is-hide {
  height: 600px;
}

.grad-item.is-hide.chain {
  height: 600px;
}


.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}

/* 評価ボックス */
.zakkuri{
  position: relative;
  margin-bottom: 10px;
  padding: 22px 0 1px 0;
  background: #eee;
}
.zakkuri::before{
  content:'注目性能';
  position:absolute;
  top:0;
  left:0;
  display:inline-block;
  background:#51b8d6;
  color:#fff;
  font-size:11px;
  font-weight:bold;
  line-height:20px;
  padding:0 10px;
  height:20px;
}
.zakkuri::after{
  content:'';
  position:absolute;
  top:20px;
  left:42px;
  border-top:10px solid #51b8d6;
  border-left:8px solid transparent;
}
.zakkuri ul{
  list-style-type: none;
  /* margin: 0 0 0 1.5em; */
  margin: 4px;
  padding: 4px;
  background: #fff;
  position: relative;
}
.zakkuri li{
  display: inline-block;
  align-items:baseline;
  margin:0.5em 0;
  padding-left: 10px;
}

.zakkuri li a{
  display: inline-block;
  line-height: 1.4;
  border-bottom: 1px solid #1967d2;
}

.zakkuri li::before{
  content:'◎';
  color:#51b8d6;
  margin-right:6px;
}
.zakkuri p:empty{
  display:none;
}

.zakkuri ul:first-child {
  margin-top: 20px;
}

.zakkuri .title{
  font-size: 1.2rem;
  background: #fff;
  display: block;
  padding-left: 9px;
  color: #999;
  margin-left: 4px;
  margin-right: 4px ;
  padding-top: 6px;
}
.zakkuri .title + ul{
  margin-top: 0;
}
.zakkuri .sp::before{
  content: "必殺技";
  position: absolute;
  top: -10px;
  font-size: 1.2rem;
  color: orange;
}
.zakkuri .pa::before{
  content: "パッシブ";
  position: absolute;
  top: -10px;
  font-size: 1.2rem;
  color: orange;
}

.passive_list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.passive_list li{
  padding: 1px 10px 2px 5px;
  border-bottom: 1px dotted #eee8e8;
  position: relative;
}

.passive_list li:last-child{
  border-bottom: none;
}

.passive_list li::before{
  position: absolute;
  top: 8px;
  left: -1px;
  display: inline-block;
  width: 2px;
  height: 2px;
  content: '';
  border-radius: 100%;
  background: #333;
}

.passive_name{
  display: block;
  font-size: 1.2rem;
  color:#888;
}

span.num{
  color: #d63c3c;
  font-size: 1.4rem;
}

.normal_ul{
  padding: 0;
  margin: 0;
}
.normal_ul li{
  padding: 0;
  margin: 0;
}

/* キャラスキル */
ul.chara_effect{
  text-align: center;
  font-size: 1.2rem;
}

ul.chara_effect li{
  display:inline-block;
  padding: 6px 6px;
  margin: 2px;
  border:1px solid #ddd;
}

/* キャラフィルター */
ul.charalist{
  padding: 0;
  margin: 0;
  background-color: #fff;
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  align-items: stretch;
  list-style: none;
}

ul.charalist li .year_disp{
  opacity: 0.4;
  filter: grayscale(0.6);
  width: 60px;
  line-height: 60px;
  font-weight: bold;
  font-size: 18px;
}

#app2 ul.charalist > li{
  display:block;
  /* flex-basis: calc(50% - 4px); */
  flex-basis: 100%;
  padding: 0;
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.charalist a{
  width: 100%;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  /* display: block; */
  display: table;
}
ul.charalist.cl2 a{
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.3;
}
ul.charalist.cl2 .tag{
  font-size: 1.1rem;
}

ul.charalist .chara_img{
  display: table-cell;
  width: 90px;
  text-align: center;
  border-right: 1px solid #ddd;
  vertical-align: middle;
  padding: 6px 0;
}

ul.charalist.skill_chara_list .chara_img{
  width:  70px;
  padding: 6px;
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}
ul.charalist.skill_chara_list a{
  display: inline;
}
ul.charalist.skill_chara_list .skill_desc{
  font-size: 1.2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  margin-bottom: 1px;
}
ul.charalist.skill_chara_list .chara_detail{
  width: calc(100% - 130px);
  padding: 6px;
}
.list_header {
  padding: 2px 4px;
  background: #eff0ff;
}
.list_header .tag_area{
  width:  74px;
  display: inline-block;
  margin-bottom: 0;
}
ul.charalist .l_h_name{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block !important;
  line-height: 1;
  width: calc(100% - 80px);
  vertical-align: middle;
}

#app2 ul.charalist.skill_chara_list {
background: #f8f4f4;
}

#app2 ul.charalist.skill_chara_list > li{
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;;
  margin: 0;
  margin: 5px;
  background: white;
}
#app2 ul.charalist.skill_chara_list .tag_area{
  border-bottom: none;
}

ul.charalist.skill_chara_list{
  list-style: none;
}
ul.charalist.skill_chara_list > li{
  border: 1px solid #ddd;
  padding: 0;
  margin-top: 12px;
  width: 100%;
}


ul.charalist.skill_chara_list .label_skill{
  text-shadow: #5d4612 1px 0 0, #5d4612 -1px 0 0, #5d4612 0 -1px 0, #5d4612 0 1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  font-size: 1.1rem;
  font-weight: bold;
  display: block;
  border-bottom: 1px dashed #ece396;
  margin: 4px 0 4px 0;
  padding-bottom: 2px;
}
ul.charalist.skill_chara_list .condition{
  background: #f3f3f3;
  padding: 6px 4px 4px 4px;
  border-radius: 4px;
  line-height: 1.4;
  margin-top: 4px;
}
ul.charalist.skill_chara_list{
  border-bottom: 1px solid #ddd;
}


ul.charalist .chara_img img{
  vertical-align: middle;
  line-height: 0;
  border-radius: 4px;
}

ul.charalist .chara_detail{
  display: table-cell;
  width: calc(100% - 90px);
  vertical-align: middle;
  padding: 0 6px;
  white-space: normal;
  word-break: break-all;
}
.chara_detail span.lanme{
  color: #888;
  display: block;
  font-weight: normal;
}
ul.charalist a div .list_tag{
  display: inline-block;
  padding: 1px 4px;
  margin: 1px;
  border: 1px solid #5f9561;
  font-size: 0.9rem;
  color: #5f9561;
  /* background: #5f9561; */
  font-weight: normal;
} 



ul.elefilter{
  padding: 0;
  margin: 0;
}
ul.elefilter li{
  display: inline-block;
  position: relative;
  width: 20%;
  padding: 1px;
  margin: 0;
  font-size: 1.3rem;
}

ul.optionfilter{
  padding: 0;
  margin: 0;
  text-align: left;
}

ul.optionfilter li{
  display: inline-block;
  list-style: none;
  padding: 4px;
  
}

.optionfilter label{
  margin: 2px;
  font-size: 1.3rem;
  line-height: 1.5;
  display: inline-block;
}

.optionfilter input[type=checkbox]:checked+label , .optionfilter input[type=radio]:checked+label{
  display: inline-block;
  font-weight: normal;
  font-size: 1.4rem;
  background: #fff;
  line-height: 1.5;
  color: #009688;
}

.floatBtnSearch {
  position: fixed;
  bottom: 40px;
  right: 70px;
  background: #42AFE3;
  font-size: 1.0rem;
  z-index: 999;
  border-radius: 6px;
}

.floatBtnSearch .search_icon {
  display: inline-block;
  position: relative;
  font-family: zozofont;
  margin-top: 8px;
  fill: #fff;
}

.floatBtnSearch .floatText {
  font-size: 0.9rem;
  margin-top: -7px;
  letter-spacing: -1px;
  color: #fff;
}

.floatBtn {
  width: 48px;
  height: 48px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  text-align: center;
  box-shadow: 0 1px 10px #999;
}

#filter_open table{
  margin: 0;
}

#filter_open input[type="checkbox"]{
  display:none;
}

#filter_open .optionfilter input[type="checkbox"]{
  display: inline-block;
}

ul.elefilter input[type="checkbox"] + label {
  border:1px solid #ccc;
  color: #999;
  background-color: #fafafa;
  display: block;
  margin: 1px;
  width: 100%;
	height: 36px;
	text-align: center;
	line-height: 36px;
}

/* input[type="checkbox"]:checked + label{
  display: inline-block;
  font-weight: bold;
  font-size: 1.4rem;
  background: #fff;
} */

.elefilter input[type="checkbox"]:checked + label::before{
  font-family: FontAwesome;
  content: "\f058";
  padding-right: 1px;
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 1.7rem;
}

input[type="checkbox"]:checked + .e10 , input[type="checkbox"]:checked + .e20{
  border:1px solid #5097dd;
  color: #5097dd;
}
input[type="checkbox"]:checked + .e11 , input[type="checkbox"]:checked + .e21{
  border:1px solid #62ac67;
  color: #62ac67;
}
input[type="checkbox"]:checked + .e12 , input[type="checkbox"]:checked + .e22{
  border:1px solid #993AB0;
  color: #993AB0;
}
input[type="checkbox"]:checked + .e13 , input[type="checkbox"]:checked + .e23{
  border:1px solid #d5575c;
  color: #d5575c;
}
input[type="checkbox"]:checked + .e14 , input[type="checkbox"]:checked + .e24{
  border:1px solid #EFBD00;
  color: #EFBD00;
}

input[type="checkbox"]:checked + .fes , input[type="checkbox"]:checked + .drop{
  border:1px solid #888;
  color: #888;
}

input[type="checkbox"]:checked + .rare{
  border:1px solid #999;
  color: #999;
}

input.name_search {
  border-radius: 2px;
}

input::placeholder {
  color: #aaa !important;
}

/* IE */
input:-ms-input-placeholder {
  color: #aaa !important;
}

/* Edge */
input::-ms-input-placeholder {
  color: #aaa !important;
}

.filter_clear{
  height: 40px;
  text-align: center;
  display: block;
  line-height: 40px;
  background-color: #fce8e8;
  color: #fb4949;
  font-size: 1.6rem;
  cursor: pointer;
}

[v-cloak] {
 display: none;
}


.chara_single th{
  border: 1px solid #dec88e;
  box-shadow: 0px 0px 25px rgba(224, 187, 81, 0.6) inset;
  background: #fff8f3;
}
.chara_single td{
  border: 1px solid #e9dab2;
  padding: 6px;
}
.chara_single td:first-child{
  width: 90px;
}
.chara_single .chara_name{
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}
.chara_single .skill_desc{
  padding: 2px;
}
.chara_single .list_tag{
  display: block;
  font-size: 1.1rem;
  color: #555;
}

.new_icon::before{
  content: "NEW";
  font-size: 1.0rem;
  color: red;
  padding-right: 3px;
  padding-bottom: 1px;
}

/* カテゴリ関連リンク */
.relate_box{
  border: 1px solid #d4bf91;
  margin-bottom: 10px;
}



.relate_box ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.relate_box ul li{
  text-align: center;
  margin: 1px;
  /* border: 1px solid #eaeaea; */
}

.relate_box.link_manage{
  margin-top: 16px;
}


.relate_box.link_manage ul li {
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding-top: 6px;
} 
.relate_box.link_manage ul li:nth-child(even) {
  border-right: none;
} 

.relate_box.link_manage ul li:nth-child(2n+1):nth-last-child(1) {
  border-bottom: none;
}

.relate_box.link_manage a{
  display: block;
}
.relate_box.link_manage > span{
  border-bottom: 1px solid #ddd;
  font-size: 1.3rem;
  padding: 6px 0;
  display: block;
  text-align: center;
  background-color: #33272b;
  color: #ffffff;
  font-weight: normal;
}

.divider{
  border-top: 1px dashed #968e8e;
  width: 96%;
  margin: 20px auto 0 auto;
}

/* .relate_box.link_manage ul li:nth-child(1) ,.relate_box.link_manage ul li:nth-child(2){
  border-bot: none;
}  */

.relate_box ul li.current_event , .relate_box ul li.future_event{
  position: relative;
}
.relate_box ul li.current_event::before{
  position: absolute;
  content: "開催中";
  top:0;
  left: 0;
  background-color: #E91E63;
  display: inline-block;
  color: #fff;
  font-size: 10px;
  padding: 0 2px;
}

.relate_box ul li.future_event::before{
  position: absolute;
  content: "開催予定";
  top:0;
  left: 0;
  background-color: #3F51B5;
  display: inline-block;
  color: #fff;
  font-size: 10px;
  padding: 0 2px;
}

.relate_box > span{
  font-size: 1.3rem;
  padding: 6px 4px;
  display: block;
  text-align: center;
  border-color: #d4bf91;
  background-color: #f9f8ec;
  color: #452a44;
  font-weight: bold;
}

.relate_box.col5 li{
  width: calc( (100% - 10px )/ 5);
  padding: 4px 2px;
  font-size: 1.1rem;
}

.relate_box.col4 li{
  width: calc( (100% - 8px )/ 4);
  padding: 4px 2px;
  font-size: 1.1rem;
}
.relate_box.col3 li{
  width: calc( (100% - 6px )/ 3);
  padding: 8px 4px 4px 4px;
  font-size: 1.1rem;
}
.relate_box.col2 li{
  width: calc( (100% - 4px )/ 2);
  padding: 4px;
  font-size: 1.1rem;
}
.relate_box.col1 li{
  width: 100%;
  padding: 4px;
  font-size: 1.1rem;
}


.category_relate_link {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.category_relate_link li{
  text-align: center;
  display: block;
  width: calc( (100% - 8px) / 3 );
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid #ece2cc;
  line-height: 1.2;
  box-sizing: border-box;
}
.category_relate_link li .c_item{
  display: block;
  padding: 8px 2px;
}
.category_relate_link li span.c_item{
  font-weight: bold;
}
.category_image_link li .c_item{
  padding: 0;
}


/* ul.category_relate_link li:nth-child(3n+1) {
  border-left-width: 1px;
}
ul.category_relate_link li:nth-child(n+4) {
  border-top-width: 0;
} */

.side_menu .category_relate_link li {
  padding:2px;
  width: calc( 100% / 2 );
}

.ranking_table li p{
  font-size: 1.2rem;
}


/*ランキング一覧*/
.sga-ranking {
  padding-left: 0 !important;
  list-style: none;
  counter-reset: my-counter;
  margin: 4px 4px;
}
.sga-ranking li{
  margin-bottom: 10px;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
  display: table;
  width: 100%;
}
.sga-ranking li:before{
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #83969f;
  color: #fff;
  display: block;
  float: left;
  line-height: 18px;
  margin-left: -28px;
  text-align: center;
  height: 18px;
  width: 18px;
  border-radius: 2px;
  position: relative;
  left: 28px;
  top: 1px;
  font-weight: bold;
  font-size: 1.3rem;
}

.sga-ranking .sga-ranking-list-1:before{
  background-color: #ffbb00;
}
.sga-ranking .sga-ranking-list-2:before{
  background-color: #b4b4db;
}
.sga-ranking .sga-ranking-list-3:before{
  background-color: #dbb914;
}

.sga-ranking li a{
  text-decoration: none;
  font-size: 13px;
  display: block;
}

.sga-ranking .sga-ranking-list {
  min-height: 42px;
  text-align: left;
  margin-bottom: 4px !important;
  border: none !important;
  border-bottom: 1px dotted #DDD !important; }

.sga-ranking .sga-ranking-list-1{
  border-top: 1px dotted #DDD !important;
}

.sga-ranking .sga-ranking-list .ranking-img {
  display: table-cell;
  width: 108px;
  height: 50px;
  vertical-align: middle;
}


.sga-ranking .ranking-img img{
  width: 108px;
  height: 50px;
  object-fit: cover;
  padding: 1px 2px 1px 1px;
  vertical-align: middle;
  background: #eee;
}

.sga-ranking .sga-ranking-list .date , .entry-card-content .date {
display: block;
font-weight: normal;
font-size: 12px;
color: #888;
}

.sga-ranking .sga-ranking-list .ranking-title{
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px 0 14px;
  line-height: 18px;
}

.sga-ranking .sga-ranking-list .ranking-title a{
  padding: 0;
  display: block;
  font-weight: normal;
}


.sga-ranking .ranking-img a{
  display: inline-block;
  padding: 0;
}

/*.sga-ranking:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }*/

.side_contents .sga-ranking {
  padding: 6px; }

#contents #sub .side_contents .sga-ranking-list {
  clear: both; }

/* サムネなしver */
.no_thumbnail .sga-ranking .ranking-img{
  display: none;
}
.no_thumbnail .sga-ranking a{
  padding-left: 12px;
}
.no_thumbnail .sga-ranking .sga-ranking-list .ranking-title{
  padding: 0 4px;
}
.no_thumbnail .sga-ranking .sga-ranking-list{
  min-height: 44px;
}
.no_thumbnail .sga-ranking li:before{
  margin-left: -36px;
  top: 8px;
}

/* 開催期間 */
.period{
  text-align: center;
}
.link_text{
  display: block;
  padding: 0 6px 0 8px;
  margin-bottom: 8px;
}

.link_text::before{
  font-family: FontAwesome;
  content: "\f101";
  padding-right: 4px;
}

.link_text.down::before{
  font-family: FontAwesome;
  content: "\f103";
  padding-right: 4px;
}

.down_icon::before{
  font-family: FontAwesome;
  content: "\f103";
  padding-right: 4px;
}


.divi{
	color: #444;
	font-size: 13px;
	display: flex;
  align-items: center;
  margin: 10px 0 6px 0;
}
.divi:before, .divi:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}
.divi:before {
	margin-right: .4em;
}
.divi:after {
	margin-left: .4em;
}

.pickup_footer{
  padding: 8px;
}

.hosoku_down{
  color: green;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0;
}
.hosoku_down::before{
  content: "▼";
}

.hosoku_up{
  color: green;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0;
}
.hosoku_up::before{
  content: "▲";
}

.awake_down{
  position: relative;
  margin-bottom: 6px;
}

.awake_down::after{
  font-family: FontAwesome;
  content: "\f103";
  position: absolute;
  bottom: -17px;
  left: 46%;
  color: #333;
  font-size: 1.8rem;
}


.chara_header_box{
  position: relative;
}
.chara_header{
  background-image: url(https://dokkan.game-db.org//wp-content/themes/dokkan-game/img/charaImg/com_bg.png);
  background-size: 40px 40px;
}
.chara_name_header{
  display: block;
  width: 100%;
  background: #333333a1;
  position: absolute;
  bottom: 0;
  left: 0px;
  color: #fff;
  text-align: center;
}
.chara_header_box .mini_icon{
  position:absolute;top:10px;left:0; width:80px;height:80px;
}

.zukan_name td{
  padding: 0;
}
.zukan_name .select_page{
  font-size: 1.4rem;
  background-color:#4CAF50;
  color: #fff;
  font-weight: bold;
  display: block;
  line-height: 36px;
}
.zukan_name a{
  display: block;
  font-size: 1.4rem;
  line-height: 36px;
}

.caption_label{
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  padding:3px 0 0 22px;
  font-weight: bold;
  margin-bottom: 0;
}
.db1{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/1.png");
}
.db2{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/2.png");
}
.db3{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/3.png");
}
.db4{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/4.png");
}
.db5{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/5.png");
}
.db6{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/6.png");
}
.db7{
  background-image: url("https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/7.png");
}

.main_header_caption{
  text-align: left !important;
  background-color: #474e47;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 4px 4px;
  border: none;
  color: #FFF;
  padding: 4px 0 4px 8px !important;
  margin: 0 !important;
  font-size: 1.4rem;
}
.sd_label{
  /* background-color: #45bb91;
  display: block; */
  font-size: 11px;
  /* width: 100px;
  margin: 4px auto;
  border-radius: 4px;
  color: #fff; */
}
.sd_label .f14{
  font-size: 11px !important;
}

/* ヘッダーお知らせ */
.news_area{
  background: #fff;
  padding: 10px 10px 10px 10px;
}
.news_list{
  list-style: none;
  padding: 2px 8px;
}

.news_area_content li a{
  font-size: 1.3rem;
  font-weight: bold;
}

.news_area_content {
  position: relative;
  margin: 3em 0 1em 0;
  padding: 0px 0px 4px 0px;
  background-color: #fff;
  line-height: 2;
  color: #4e6d7c;
  font-weight: bold;
  margin: 0 0 1px 0px;
  border: 1px solid #ce89a1;
  border-radius: 2px;
}

.news_area_content li{
  padding: 0;
  line-height: 1.6;
}

.news_area-title {
  font-size: 1.3rem;
  margin: 0 0 4px 0;
  color: #ffffff;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding: 3px 2px 1px 2px;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  background: #fff0d4;
  border-bottom: 1px dotted #bc974e;
}

.news_area-title .db1{
  width: 25px;
  height: 26px;
  background-repeat: no-repeat;
  background-size: 22px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.news_area_content p {
  margin: 0;
  padding: 0;
}


.floatBtnHome{
  position: fixed;
  bottom: 40px;
  left: 0px;
  background: #fff;
  font-size: 1.0rem;
  z-index: 999;
}

.floatBtnHome .search_icon {
  display: inline-block;
  position: relative;
  font-family: zozofont;
  margin-top: 8px;
  fill: #6e8691;
}

.floatBtnHome .floatText {
  font-size: 9px;
  margin-top: -6px;
  letter-spacing: -1px;
  color: #fff;
  color: #6e8691;
}

/* ミッション */
.mission_item{
  cursor: pointer;
}

.mission_item .reward_title{
  background: #f9ebeb;
  padding: 0 4px;
}


.article .mission_list.chain_battle {
  /* background: #eee;
  padding: 6px; */
}

.article .chain_battle .mission_item {
  margin-bottom: 30px;
  border-radius: 10px;
}
.chain_battle .mission_item dt{
  font-size: 1.4rem;
  text-align: center;
  background: #fff8dc;
  color: #101010;
  border-bottom: 1px solid #c5c5c5;
  padding-left: 28px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.chain_battle .mission_item dd{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #fff;
}
.chain_battle .mission_item .reward_item{
  margin: 5px;
}

  
.article .mission_header{
  padding-left: 20px;
  padding-top: 2px;
}

 .mission_header.db7{
  background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/dragonball/mission.png);
  background-size: 26px 26px;
  background-repeat: no-repeat;
  padding-left: 30px;
}
.article .mission_item{
  border: 1px solid #dcc29d;
  margin: 4px auto;
}

  
.mission_item .period{ color:#888;text-align: right;}

dl.mission_list{
  margin: 8px 0 20px 0;
}

.mission_list .reward_item{
  display:inline-block;
  margin: 2px;
  font-size:11px;
}
.reward_item {
  display: inline-block;
  text-align: center;
  position: relative;
}
.mission_list dd{
    margin: 0;
    padding: 6px 8px;
    font-size: 1.3rem;
    line-height: 1.6;
}
.mission_item dt{
  position: relative;
  font-size: 1.4rem;
  background: #faf6eb;
  padding: 6px 28px 6px 6px;
  font-weight: bold;
  color: #50302d;
  border-bottom: 1px solid #f5e6d1;
}

  .mission_item dt::after{
    content: "ー";
    position: absolute;
    right: 10px;
    font-size: 1.4rem;
    border: 1px solid #827c7c;
    width: 23px;
    top: 3px;
    line-height: 23px;
    height: 23px;
    text-align: center;
    border-radius: 3px;
  }

  .mission_list.noexpand  .mission_item dt::after{
    content: none;
  }

  .mission_item.ex_mission dt::after{
    content: "＋";
  }

  .mission_item dd{
    display: block;
  }

  .mission_item.ex_mission dd{
    display: none;
  }

  .mission_item .select_label{
    padding: 10px 6px;
    font-size: 1.6rem;
  }





.tab-group{
    display: flex;
    width: 100%;
    padding: 0;
    background: #fff;
    justify-content: center;
}
.tab{
    flex-grow: 1;
    padding: 10px 5px;
    list-style:none;
    border-bottom:solid 1px #CCC;
    text-align:center;
    cursor:pointer;
    width: 50%;
    background-color: #eee;
}
.panel-group{
    border-top:none;
    padding: 8px;
}
.panel{
    display:none;
}
.tab.is-tab-active{
    border-bottom: 3px solid #ff9800;
    color:#ff9800;
    background-color: #fff;
    transition: all 0.2s ease-out;
}
.panel.is-show{
    display:block;
}

  .reward_item span {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    padding: 1px;
    border-radius: 2px;
    margin-top: -4px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333333bf;
}

.cp_ipcheck {
	width: 94%;
  margin: 4px 6px;
	text-align: left;
}
.cp_ipcheck input {
	display: none;
}
.cp_ipcheck label {
	position: relative;
	display: inline-block;
	padding: 4px 0;
	padding-right: 35px;
	cursor: pointer;
}
.cp_ipcheck input[type='checkbox'] {
	position: absolute;
	visibility: hidden !important;
}
.cp_ipcheck input[type='checkbox'] + label:before,
.cp_ipcheck input[type='checkbox'] + label:after {
	position: absolute;
	top: 50%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin-top: -7.5px;
	content: '';
}
.cp_ipcheck input[type='checkbox'] + label:before {
	right: 0;
	width: 30px;
	height: 15px;
	border: 1px solid #e4e3e1;
	border-radius: 15px;
	background: #ffffff;
}
.cp_ipcheck input[type='checkbox'] + label:after {
	right: 15px;
	width: 15px;
	height: 15px;
	-webkit-transition: all 200ms ease-out;
	        transition: all 200ms ease-out;
	border-radius: 50%;
	background: #bdbdbd;
}
.cp_ipcheck input[type='checkbox']:checked + label:after {
	right: 0;
	background: #da3c41;
}


#category_modal .elefilter input[type='radio']:checked + label {
  display: inline-block;
	background: #e6cccd;
}

/* リンクチェックツール */
#tool_link_checker .deck_child_box div div {
  display: none !important;
}

#tool_link_checker #chara_result td div{
  /* display: none !important; */
}



#skill_checker .sortable-ghost{
opacity: .2;
}
#skill_checker{
  position: relative;
}

#tool_link_checker a.checklink , .category_select_list .checklink{
  position: relative;
  display: block;
  width: 160px;
  padding: 0.8em;
  margin: 2px auto 12px auto;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background: #4caf50;
  border-bottom: 2px solid #1f6922;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}

 .category_select_list .checklink{
   display: inline-block;
 }
 #category_reset_btn{
   border: none;
   background: #dd6767;
 }

#result_check{
 width: 100%;
max-width: 320px;
margin: 0 auto;
width:100%;
}

#result_check td{
display: table-cell;
width:33%;
border: none;
vertical-align: top;
}



#result_check .summary{
text-align: center;
}

#result_check .match{
  width: 33%;
  font-size: 14px;
  background: none;
  border: none;
}

#result_check .summary span{
  color: #ff9800;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
}


#result_check .summary span:first-child{
  color: #ffffff;

  font-weight: normal;
}

#result_check .summary i{
  color: #fbd3d3;
}

#result_check .link{
  padding: 4px 3px;
  background: #333333;
  margin: 4px;
}

#result_check .link .lname{
font-size:10px;
color: #ffc107;
display: block;
line-height: 12px;
font-weight: bold;
}
#result_check .link .ldesc{
display:block;
font-size:8px;
color: #ccc;
line-height: 12px;
}

#result_check .no_match .lname{
  color: #d8d8d8;
}
#result_check .no_match{
  background: #5d5858;
  display: none;
}

#skill_checker .checklink_input{
  display: none;
}

#skill_checker .checklinkbox{
  font-size: 12px;
}

#skill_checker .checklink_input:checked + .checklinkbox{
  /* background: #ff555e; */
color: #a5d7ff;
}

#skill_checker .checklinkbox{
  position: relative;
    padding: 10px 4px 10px 42px;
    transition: .3s;
    color: #ccc;
    border-radius: 8px;
    display: inline-block;
    line-height: 1;
}

#skill_checker .checklink_input:checked + .checklinkbox::before {
    border: 1px solid #2196f3;
}

#skill_checker .checklink_input:checked + .checklinkbox::after{
  left: 26px;
    background: #2196f3;
}

#skill_checker .checklinkbox::after{
  content: "";
display: block;
position: absolute;
top: 12px;
left: 12px;
width: 10px;
height: 10px;
background: #aaa;
border-radius: 50%;
transition: .2s;
display: block;
}

#skill_checker .checklinkbox::before {
    content: "";
    display: block;
    left: 9px;
    top: 9px;
    width: 30px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid #aaa;
    background: #fff;
    position: absolute;
}

#skill_checker #chara_sort{
width:100%;
text-align:center;
max-width: 320px;
margin: 4px auto;
min-height: 160px;
border: 1px solid #6f6262;
}

#skill_checker #check_area{
text-align:left;
max-width: 276px;
margin: 12px auto;
min-width: 276px;
}



#skill_checker .border_box{
text-align:center;
border: 4px double #ff9800;
max-width: 320px;
margin: 0 auto;
height: 92px;
}



#skill_checker #chara_sort img ,#skill_checker  #check_area img{
  width:60px;
  margin: 12px 16px;
  border-radius: 8px;
  box-shadow: 1px 1px 5px #b5a0a0;
}
#skill_checker .trans , #skill_checker .notrans {
  position: relative;
  display: inline-block;

}
#skill_checker #check_area .trans , #skill_checker #check_area .notrans{
  width: 33%;
  text-align: center;
}


#skill_checker .trans::after{
  content: "変身後";
  color: #ffeb3b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 10px;
  text-align: center;
}

#skill_checker  #check_area img.match{
    box-shadow: 1px 2px 26px rgba(253, 231, 25, 1);
}

#skill_checker .link_match{
  display: block;
  width: 40px;
  height: 40px;
}

#skill_checker .link_match0 ,#skill_checker  .link_match1{
position: absolute;
bottom:50%;
}

#skill_checker .link_match0 {
  top:35%;
left: 26%;
}
#skill_checker .link_match1 {
  right: 27%;
  top: 33%;
}

#skill_checker .link_match2 {
  display: none !important;
}

#skill_checker .doumei{
  color: red;
  font-weight: bold;
  font-size: 12px;
}

#skill_checker #check_area {
  height: 80px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
    display: inline-block;
}

.modaal-container{
　-webkit-tap-highlight-color:rgba(0,0,0,0);
  background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/charaImg/com_bg.png) !important;
  background-size: 40px 40px !important;
}

.modaal-content-container{
padding:0 !important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.modaal-fullscreen{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  /* max-width: 380px !important; */
}


#skill_checker .border_box{
  position: relative;
}
#skill_checker .help_mess{
  color: #ddd;
  position: absolute;
  top: 10px;
  width: 100%;
}
#skill_checker{
  padding: 20px 0 8px 0;
}


@media screen and (min-width:375px) {
  .modaal-fullscreen .modaal-container{
    max-width: 375px !important;
  }
  #result_check{
    max-width: 360px;
  }
  #skill_checker .border_box{
    max-width: 360px;
    height: 98px;
  }
  #skill_checker #chara_sort{
    max-width: 360px;
    min-height: 160px;
  }
  #skill_checker #chara_sort img{
    width: 60px;
    margin: 4px;
  }
  #skill_checker #check_area img{
    width: 68px;
    margin: 8px 16px;
  }
  #skill_checker #check_area{
    max-width: 360px;
    height: 96px;
    width: 310px;
  }

  #skill_checker .link_match1{
    right: 30%;
  }

  .modaal-close{
    width: 45px !important;
    height: 45px !important;
  }
  .modaal-close:before, .modaal-close:after{
    top: 12px !important;
    left: 21px !important;
  }

}
@media screen and (min-width:768px)  {
    /*　for iPad 　*/
    .modaal-fullscreen .modaal-container{
      max-width: 480px !important;
      max-height: 800px !important;
      margin-top: 80px !important;
    }
    #skill_checker .border_box{
      max-width: 400px;
      height: 112px;
    }
    #skill_checker #chara_sort{
      max-width: 400px;
      min-height: 210px;
    }
    #skill_checker #chara_sort img{
      width: 60px;
      margin: 8px;
    }
    #skill_checker #check_area img{
      width: 60px;
      margin: 8px 16px;
    }
    #skill_checker #check_area{
      max-width: 400px;
      height:112px;
      width: 350px;
    }
}

.category_tag , .link_tag{
  padding: 0;
  margin: 4px 0 0 0;
}

.article .category_tag li , .article .link_tag li{
  display: inline-block;
  font-size: 1.1rem;
  font-weight: normal;
  padding: 1px 4px 2px 0;
  border-radius: 2px;
}
.article .category_tag li a , .article .link_tag li a{
  text-decoration: underline;
}

.article .enemy .category_tag{
  margin: 0;
  text-align: left;
}

.article .enemy .category_tag li{
  display: inline-block;
  font-size: 1.1rem;
  font-weight: normal;
  padding: 2px 3px;
  margin: 1px;
  line-height: 1;
  border-radius: 2px;
  color: #504c4c;
}


.article .link_tag li b{
  font-size: 1.2rem;
}

.article .link_tag li{
  padding: 1px 4px 2px 0;
  margin: 1px;
}



.link_tag{
  padding: 2px 10px;
}


.list_poll .wp-polls .wp-polls-ul{
  counter-reset: number;
}

.list_poll .wp-polls .wp-polls-ul li::before{
  counter-increment: number;
  content: counter(number);
  padding-right: 0;
  font-size: 1.2rem;
  position: absolute;
  line-height: 1;
  top: -1px;
  left: -5px;
  bottom: -1px;
  z-index: 99999;
  background: #607D8B;
  width: 16px;
  text-align: center;
  color: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
}


.list_poll .wp-polls-ul li label{
  font-size: 1.3rem;
  line-height: 1.4;
  counter-reset: number;
}
.list_poll .wp-polls-ul li div{
  font-size: 1.3rem;
  line-height: 1.4;
  padding-left: 6px;
  counter-reset: number;
}

.list_poll .wp-polls-ul li div strong{
  font-weight: normal;
}
.list_poll .wp-polls-ul li div strong::after{
  content:"\f00c";
  font-family: FontAwesome;
  color: #607d8b;
  font-size: 80%;
}

/* .list_poll .wp-polls-ul li label div span{
  display: table-cell;
}

.list_poll .wp-polls-ul li label div::before{
  counter-increment: number;
  content: counter(number);
  display: table-cell;
  width: 10px;
  text-align: center;
  top: 0;
  vertical-align: middle;
} */

.normal{
  font-weight: normal !important;
}

.gray_boss{
  background: #d9d3d3;
  display: inline-block;
  margin: 1px;
  color: #fafafa;
  padding: 1px 6px;
  border-radius: 3px; 
}

.red_boss {
  background: #d5575c;
  display: inline-block;
  margin: 1px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px; 
}

.blue_boss {
  background: #5097dd;
  display: inline-block;
  margin: 1px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px; }

.green_boss {
  background: #62ac67;
  display: inline-block;
  margin: 1px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px; }

.orange_boss {
  background: #EFBD00;
  display: inline-block;
  margin: 1px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px; }

.purple_boss {
  background: #b351ca;
  display: inline-block;
  margin: 1px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px; }


  .blogcard-wrap {
    margin: 10px auto;
    padding: 0;
    width: 100%;
    background-color: #fff;
  }
  
  .blogcard {
    padding: 1.4% 2% 1.8%;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 1.3;
    position: relative;
  }
  
  .blogcard-thumbnail {
    float: left;
    margin-top: 3px;
    width: 160px;
  }
  .blogcard-thumbnail img {
    width: 100%;
  }
  
  .blogcard-content {
    margin-left: 170px;
    max-height: 140px;
    min-height: 100px;
    overflow: hidden;
  }
  
  .blogcard-title {
    font-weight: bold;
  }
  
  .blogcard-snippet {
    font-size: 0.8em;
  }
  
  .blogcard-footer {
    clear: both;
    font-size: 0.8em;
    padding-top: 0.6%;
  }
  
  .blogcard-site {
    float: left;
    display: flex;
    align-content: center;
  }
  
  .blogcard-date {
    float: right;
    display: flex;
    align-content: center;
  }
  
  .blogcard-favicon {
    margin-right: 4px;
    margin-top: 2px;
  }
  
  /************************************
  ** ブログカードのサムネイルスタイル
  ************************************/
  .ib-right .blogcard-thumbnail,
  .eb-right .blogcard-thumbnail {
    float: right;
    margin-left: 1.6%;
  }
  .ib-right .blogcard-content,
  .eb-right .blogcard-content {
    margin-left: 0;
    margin-right: 170px;
  }  


/* そーとテーブル */
.tablesorter-default .header, .tablesorter-default .tablesorter-header{
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-position: center right;
  background-repeat: no-repeat;
  cursor: pointer;
  white-space: normal;
  padding: 4px 20px 4px 4px;
  font-size: 1.2rem;
}

.tablesorter-noSort{
  background-image: none !important;
  padding: 0 !important;
}

.tablesorter-default thead .headerSortUp, .tablesorter-default thead .tablesorter-headerAsc, .tablesorter-default thead .tablesorter-headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  border-bottom: #000 2px solid;
}
.tablesorter-default thead .headerSortDown, .tablesorter-default thead .tablesorter-headerDesc, .tablesorter-default thead .tablesorter-headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  border-bottom: #000 2px solid;
}

.tablesorter td{
  font-size: 1.4rem;
}

.tablesorter tr:nth-child(even) td {
	background: #fcfcfc;
}

/* * 単体CSS * */

.st_match{
  color: #e91e63;
}


.block{
  display: block;
  padding: 1px 0;
}

.inblock{
  display: inline-block !important;
}

.black{
  color: #333;
}

.bb{
  border-bottom: 1px solid #ddd;
  margin-bottom: 2px;
}

.m0{
  margin-bottom: 0;
}

.m6{
  margin:6px !important;
}

.mb0{
  margin-bottom: 0;
}
.mt0{
  margin-top: 0 !important;
}
.mt8{
  margin-top: 8px;
}
.mb4{
  margin-bottom: 4px;
}
.mb8{
  margin-bottom: 8px !important;
}

.m10{
  margin-bottom: 10px;
}

.mt2{
  margin-top: 2px;
}

.mt6{
  margin-top: 6px;
}

.ml4{
  margin-left: 4px;
}

.ml30{
  margin-left: 30px;
}

.nml3{
  margin-left: -3px;
}

.right{
  text-align: right;
}

.p0{
  padding: 0 !important;
}
.p2{
  padding: 2px !important;
}
.p6{
  padding: 6px !important;
}

.p8{
  padding: 8px !important;
}

.pl0{
  padding-left: 0 !important;
}
.pr0{
  padding-right: 0 !important;
}

.pr6{
  padding-right: 6px !important;
}
.pl4{
  padding-left: 4px !important;
}
.pl2{
  padding-left: 2px !important;
}


.pl6{
  padding-left: 6px !important;
}
.pl10{
  padding-left: 10px !important;
}
.pt0{
  padding-top: 0 !important;
}

.pt4{
  padding-top: 4px !important;
}
.pt6{
  padding-top: 6px !important;
}
.pt12{
  padding-top: 12px !important;
}
.pb12{
  padding-bottom: 12px !important;
}

.vtop{
  vertical-align: top;
}


.p4{
  padding: 4px !important;
}

.p8{
  padding: 8px !important;
}

.bg_beige{
  background: #f9f6ff;
}

.rank_back{
  background-color: #f1f6f7;
}

.gm_cname{
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
  border-bottom: 1px dotted #ddd;
}

.va-top{
  vertical-align: top !important;
}
.w3{
  width: calc( 100% / 3);
}

.lh2{
  line-height: 1.2;
}

table.element_table{
  margin: 0;
}
table.element_table th , table.element_table td {
  padding: 2px;
  font-size: 1.4rem;
}
table.element_table th {
  font-weight: normal;
  font-size: 1.2rem;
}

.l1{
  line-height: 1;
}

.f10{
  font-size: 1.0rem;
}
.f11{
  font-size: 1.1rem;
}
.f12{
  font-size: 1.2rem;
}
.f13{
  font-size: 1.3rem;
}
.f14{
  font-size: 1.4rem;
}
.f15{
  font-size: 1.5rem;
}
.f16{
  font-size: 1.6rem;
}
.f18{
  font-size: 1.8rem;
}
.f20{
  font-size: 2.0rem;
}

.td_f14 td{
  font-size: 1.4rem;
}

table.f14 td ,table.f14 th{
  font-size: 1.4rem !important;
}
table.f13 td ,table.f13 th{
  font-size: 1.3rem !important;
}


.lh13{
  line-height: 1.3;
}

.lh16{
  line-height: 1.6;
}

.link_manage_table{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
}
.link_manage_table span.img{
  width: 30px;
}
.link_manage_table span.text{
  width: calc( 100% - 30px);
}



.ltgray{
  color: #999;
}
.fnormal{
  font-weight: normal;
}

.item_label{
  display: inline-block;
  font-size: 1.0rem;
  padding: 0 3px;
  line-height: 1.4;
  border: 1px solid #d0d0d0;
  color: #999;
  border-radius: 3px;
  margin-left: -2px;
}



.blue_border{
  border-color: blue;
}
.red_border{
  border-color: red;
}
.purple_border{
  border-color: purple;
}
.green_border{
  border-color: green;
}

.border-top{
  border-top: 1px solid #ddd;
  padding-top: 4px;
  margin-top: 4px;
}

.border-bottom{
  border-bottom: 1px solid #ddd;
  padding-top: 4px;
  margin-top: 4px;
}

.border-bottom-dot{
  border-bottom: 1px dotted #ddd;
  padding-top: 4px;
  margin-top: 4px;
}
.border-bottom-dashed{
  border-bottom: 1px dashed #ddd;
  margin-top: 4px;
  margin-bottom: 2px;
}

.border-top-dot{
  border-top: 1px dotted #ddd;
  padding-top: 4px;
  margin-top: 4px;
}

.border-top-dashed{
  border-top: 1px dashed #ddd;
  padding-top: 2px;
  margin-top: 2px;
}

.border{
  border: 1px solid #aaa;
  padding: 2px 3px;
  font-size: 11px;
  margin-top: 4px;
  display: inline-block;
  border-radius: 4px;
}

.pl6{
  padding-left: 6px;
}
.pl8{
  padding-left: 8px;
}

.ti6{
  text-indent: -6px;
}


.vat{
  vertical-align: top;
}

.bg_white{
  background-color: #fff;;
}

.p4_8{
  padding: 4px 8px;
}

.left{
  text-align: left;
}
.right{
  text-align: right;
}

.tips{
  display: inline-block;
  background: #999;
  color: #fff;
  border-radius: 5px;
  font-size: 10px;
  margin: 3px;
  padding: 0px 9px;
}

/* パーティー */
article .party_tpl{
  list-style:none;
  padding:0;
  margin: 8px auto 14px auto;
}

article .party_tpl th{
  font-size: 11px;
  padding: 2px;
  border:1px solid #bec8bf;
}

article .party_tpl caption{
  background: #dcd9ea;
}

article .party_tpl td{
  border:1px solid #bec8bf;
  width:100%;
}
article .party_tpl td.sub{
  width: calc(100% / 5 );
  vertical-align: top;
  text-align: center;
}

.party_tpl .tpl_icon{
  width: 100px;
  display: table-cell;
  text-align: center;
  padding: 2px;
  border-right: 1px solid #ddd;
  vertical-align: middle;
}
.party_tpl .tpl_icon span , .party_tpl .sub span{
  display:block;
  font-size:10px;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.party_tpl .tpl_detail{
  display: table-cell;
  vertical-align: top;
  padding: 6px;
  font-size: 1.2rem;
}
.party_tpl span.party_tpl_label{
  display: block;
  font-size:11px;
  color: #914f3a;
  text-indent: -6px;
  font-weight: bold;
}


.label_status{
  background: #f4f4f4;
  color: #555;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 2px;
  padding: 1px 20px 1px 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  min-width: 100px;
  font-size: 1.0rem;
  position: relative;
}

.label_status::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  border-width: 0 15px 15px 0;
  }

/* 覚醒メダル */
.medal_box{
  display: table;
  width: 98%;
  border: 1px solid #dec88e;
  margin: 6px auto;
}


.medal_box.notable{
  display: block;
}
.medal_box.notable > span{
  display: block;
  font-size: 1.2rem;
  background: #fff8f3;
  text-align: center;
  border-bottom: 1px solid #dec88e;
}

.medal_box.notable ul{
  display: block;
  width: 100%;
  text-align: center;
}

.medal_box .medal_item{
  display: table-cell;
  width: 100px; 
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #dec88e;
  font-size: 11px;
  padding: 4px 2px;
  font-weight: bold;
  background: #fff8f3;
  text-align: center;
}


.medal_box.full_mode .medal_item ,.medal_box.full_mode ul{
  display: block;
  width: 100%;
  border: none;
}

.medal_box.full_mode ul li{
  width: 20%;
}


.medal_box ul{
  display: table-cell;
  width: calc(100% - 100px);
  list-style: none;
  padding: 6px 0 2px 0;
  margin: 0;
  text-align: left;
  vertical-align: middle;
}
.medal_box ul li{
  display: inline-block;
  width: 25%;
  padding: 0;
  text-align: center;
}

.medal_box_list table{
  margin-bottom: 5px;
}

.medal_box_list ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  width: 100%;
}
.medal_box_list li{
  display: table-cell;
  width: 20%;
  padding: 0;
}
.medal_box_list li .block{
  line-height: 1;
}

.medal_box_list .left_area{
  position: relative;
}

.table td{
  padding: 0;
}

.table{
  display: table;
  width: 100%;
}
.table .left_area{
  display: table-cell;
  width: 60px;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.table .right_area{
  display: table-cell;
  width: calc(100% - 60px);
  vertical-align: middle;
}

.medal_box_list .left_area::after{
  content: "+";
  font-size: 1.8rem;
  top: 32%;
  right: -6px;
  position: absolute;
  color: #607D8B;
}




.get_information{
  background: #f3fafe;
  border: 1px solid #bde4fc;
  padding: 4px;
}

/* トップ新着記事 */
.latest_news{
  font-size: 1.3rem;
  padding: 0;
  border: 1px solid #a4771e;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #404040;color: #fff;
}
.latest_news p{
  background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/left.png),url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/right.png),url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/banner/center.png);
  padding-left: 20px;
  color: #FFF;
  background-repeat: no-repeat,no-repeat,repeat;
  background-position: left top,right top,center center;
  background-size: contain,contain,contain;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  padding: 6px 10px;
  margin: 0;
}
.latest_news dl {
  font-size: 13px;
  /* border: 1px solid #b72e2e; */
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: none;
  /* padding: 6px 10px; */
}
.latest_news dt , .latest_news dd{
  margin: 0;
  padding: 0;
}
.latest_news dt{
  color: #6c6d6d;
  font-weight: bold;
  padding-top: 4px;
  border-top: 1px dotted #ddd;
  background: #efefef;
  padding: 2px 6px;
  font-family: Helvetica;
}
.latest_news dt:first-child{
  border-top: none;
}
 .latest_news dd {
   border-bottom: 1px dotted #ddd;
   padding: 0 8px;;
   background: #fff;
 }

 .latest_news dd a{
   text-decoration: none;
   display: inline-block;
   padding: 5px 1px;
   font-weight: normal;
   line-height: 1.4;
   width: 100%;
 }

 .latest_news dd a span.mark_indent{
   text-indent: 0;
 }



 .latest_news dd a.new::before{
   content: "新着";
   font-size: 9px;
   color: #F25353;
   padding: 1px 2px;
   border-radius: 2px;
   margin-right: 6px;
   display: inline-block;
   font-weight: bold;
   border: 1px solid #F25353;
   vertical-align: top;
 }
 .latest_news dd a.update::before{
   content: "更新";
   font-size: 9px;
   color: #79B408;
   padding: 1px 2px;
   border-radius: 2px;
   margin-right: 6px;
   display: inline-block;
   font-weight: bold;
   border: 1px solid #79B408;
   vertical-align: top;
 }


 .latest_news dd a.mark_indent::after{
   text-indent: 0;
 }

 .latest_news dd span{
     display: inline-block;
     width: calc( 100% - 34px);
 }
 .latest_news details{
   padding: 0;
   border: none;
   border-bottom: 1px solid #a4771e;
   /* border: 1px solid #b72e2e;; */
   box-shadow: 0 2px 0 0 #FFF, 0 6px 0 -3px #a4771e, 0 9px 0 -4px #FFF, 0 1.2rem 0 -6px #a4771e;
 }

 .latest_news details summary{
   color: #a4771e;
 }

 .latest_news .mark_indent span{
   text-indent: -7px;
 }

 /* カード画像リンク */
 .card_image_link{
   margin: 4px auto;
   background-color: #fff;
   display: table;
   width: 100%;
   /* border: 1px solid #936e24; */
   border: 1px solid #c1b59c;
 }

 .card_image_link .image_area{
   display: table-cell;
   width: 120px;
   padding: 4px;
   vertical-align: middle;
   text-align: center;
 }

 .card_image_link .image_area img{
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
  min-height: 54px;
  max-height: 70px;
 }

 .card_image_link .title_area{
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
  font-size: 1.3rem;
}
.card_image_link .card_title , .card_image_link .card_gaiyo{
  display: block;
  line-height: 1.4;
}
.card_image_link .card_title{
  font-size: 1.3rem;
  font-weight: bold;
  padding: 4px 0 2px 0;
}
.card_image_link .card_gaiyo{
  font-size: 1.2rem;
  color: #5f4a23
}

/* バナータイプ */
.card_image_link.banner .image_area{
  width: 164px;
}
.card_image_link.banner .image_area img{
  min-height: 50px;
  object-fit: cover;
  width: 163px;
  height: 50px;
}
.card_image_link.banner .card_title{
  font-weight: normal;
  padding-top: 0;
  padding-bottom: 6px;
  font-size: 1.3rem;
}
.card_image_link.banner .card_title::before{
  content: none;
}
.card_image_link.banner .title_area::before{
  content: 'CHECK';
  font-size: 10px;
  line-height: 15px;
  font-weight: bold;
  color: #f9f9f9;
  display: inline-block;
  padding: 0;
  position: relative;
  text-align: left;
  top: -3px;
  left: 0;
  text-align: left;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #4CAF50;
  padding: 0 4px;
}


.card_big a ,  .card_big .title_area ,  .card_big .image_area{
  display: block;
  width: 100%;
}
.card_big .title_area .card_title{
  text-align: center;
  font-size: 1.3rem;
  border: 2px solid #5383c6;
  border-radius: 20px;
  padding: 6px 4px;
  width: 97%;
  margin: 0 auto 5px auto;
}

.card_big .image_area img{
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
  min-height: 90px;
  max-height: 160px;

 }
 .card_image_link.mini .image_area{
   width: 86px;
   padding: 4px 4px 4px 8px;
 }
 .card_image_link.mini img{
   width: 72px;
   object-fit: contain;
 }
 .card_big .card_gaiyo{
   font-size: 1.3rem;
   padding: 4px;
   line-height: 19px;
 }

 ul.card_type_table {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 ul.card_type_table li{
  border: 1px solid #cdbe93;
  padding: 4px;
 }
 ul.card_type_table a{
  display: table;
  width: 100%;
 }
 ul.card_type_table a figure{
  display: table-cell;
  width: 48%;
  border-right: 1px solid #ddd;
 }
 ul.card_type_table a .title{
  display: table-cell;
  width: 52%;
  vertical-align: middle;
  font-size: 1.2rem;
  padding-left: 4px;
  line-height: 1.4;
 }

 ul.card_type_list{
  list-style: none;
  padding-left: 0 !important;
  width:100%;
  margin:0;
  padding:0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

ul.card_type_list li{
  display: inline-block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0px 4px #ddd;
  padding: 2px 2px 5px 2px;
  text-align: center;
  margin-bottom: 4px;
  position: relative;
}

ul.card_type_list li img{
  border-radius: 6px 6px 0 0;
}

ul.card_type_list li a{
  text-decoration: none;
}

ul.card_type_list li.half{
  width: 50%;
}

ul.card_type_list .contents_img_title{
  font-size:12px;
  display: block;
  line-height: 1.3;
}

ul.card_type_list li .now{
  position: absolute;
  top: 4px;
  left: 4px;
  background: #f44336;
  color: #fff;
  font-size: 11px;
  padding: 2px;
}

ul.card_type_list li span{
  font-size: 13px;
}


ol.order, ul.check{
  counter-reset: list;
  list-style-type: none;
  padding: 0;
  border: 1px solid #5f896a;
  margin: 0 auto 12px auto;
  width: 98%;
}

.mokuji{
  border: 1px solid #b8ac9a;
  list-style: none;
  padding: 2px 12px;
  margin: 4px auto 6px auto;
  border-radius: 4px;
}
.mokuji li{
  border-bottom: 1px dotted #ddd;
}
.mokuji li:last-child{
  border-bottom: none;
}

.mokuji li::before{
  font-family: FontAwesome;
  content: "\f103";
  padding-right: 0;
  color: #9b732a;
}
.mokuji li a{
  padding-left: 6px;
}

ol.order > li , ul.check > li{
  position: relative;
  padding: 6px 5px 6px 34px;
  margin: 1px 0 0 4px;
  font-weight: 400;
  font-size: 1.3rem;
  border-bottom: dotted 1px #009688;
}

ol.order > li:last-child , ul.check > li:last-child{
  border-bottom: none;
}

ol.order.normal > li , ul.check.normal > li{
  font-weight: normal;
}

ol.order > li:last-child{
  border: none;
}

ol.order > li > li{
  padding: 2px;
}

ol.order > li ul{
  margin-left: -6px;
}

ol.order > li ul li{
  font-weight: normal;
  line-height: 1.5;
  padding: 4px 0px;
}

ol.order > li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 3px;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  color: #fff;
  background: #009688;
  border-radius: 50%;
  top: 18px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ul.check > li:before{
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  left: 9px;
  width: 23px;
  height: 23px;
  line-height: 23px;
  font-size: 1.6rem;
  color: #009688;
}

ul.check_cross > li:before{
  content: "\f00d";
  color: red;
}

ol.stage_mokuji{
  border: 2px solid #6492a9;
  padding: 10px 10px 10px 29px;
  border-radius: 4px;
}
ol.stage_mokuji li{
  font-weight: bold;
  border-bottom: 1px dotted #1967d2;
}
ol.stage_mokuji li:last-child{
  border: none;
}
ol.stage_mokuji li::marker{
  font-size: 1.7rem;
  color: #666;
}


/* Google検索 */
/*googleカスタム検索用*/

.searchBox{
  display: table;
  width: 100%;
  padding: 2px 4px;
  background-color: transparent !important;
  margin: 0;
}

.searchBox  input {
  font-size: 16px;
  vertical-align: middle;
}
.searchBox  input[type="search"] {
  padding: 0.5em;
  display: block;
  height: 50px;
  border-radius: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  -webkit-appearance: none;
}

.gsc-search-button .gsc-search-button-v2{
  padding: 10px;
}

.searchBox td{
  padding:0;
  border:none !important;
}

.searchBox input[type="submit"] {
  display: block;
  background: #ff3c5f;
  color: white;
  font-weight: bold;
  border: none;
  border-color: #3079ED;
  background-color: #4D90FE;
  background-image: none;
  filter: none;
  width: 44px;
  height: 50px;
  font-family: FontAwesome;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

form.gsc-search-box{
  padding:6px 2px;
}
.gsc-search-box .gsc-search-button{
  width: 44px;
  height:50px;
}

.gsc-search-box table{
  table-layout: auto;
  height: 50px;
  margin: 0;
}

.gsc-search-button{
  padding: 0;
  margin: 0;
}

table.gsc-search-box td.gsc-input{
  padding: 0;
  margin: 0;
}

.gsc-above-wrapper-area-container td{
  border:none;
}

.gsc-result-info-container td{
  border-right:1px solid #ddd;
}

html>body .gsc-result-info , #main .gsc-control-cse , .gsc-control-cse{
  padding:0;
}

html>body .gsc-orderby{
  display:table;
  width:100%;
}

html>body .gsc-orderby-label{
  display:table-cell;
  width: 40%;
}

html>body .gsc-option-menu-container{
  display:table-cell;
  width:50%;
} 

.gsc-input-box , .gsc-search-button{
  height: 50px;
  min-width: 40px;
}


.gsib_a{
  font-size: 1.6rem;
}

.gsib_b {
  width: 30px;
  padding: 0;
  margin: 0;
}


.event_time{
  color: #dc1a1a;
  font-weight: bold;
}
.event_now{
  display:inline-block;
  border:1px solid #fd5f00;
  color:#fd5f00;
  padding: 0 4px;
  font-size: 11px;
  border-radius: 3px;
  margin-right:4px;
}
.event_fiture{
  display:inline-block; background:#2196f3;color:#fff;
  padding: 1px 5px;
  font-size: 11px;
  border-radius: 3px;
  margin-right:4px;
}
.event_end{
  display:inline-block;
  background:#fefefe;
  color:#666;
  padding: 1px 5px;
  font-size: 11px;
  border-radius: 3px;
  margin-right:4px;
}

.calender tr.today th span::after{
  content: "開催中 ▶︎";
  background: #E91E63;
  display: block;
  color: #fff;
  padding: 3px 2px;
  border-radius: 5px;
}

.calender td{
  padding: 2px 2px;
}

.calender th{
  /* font-weight: normal; */
}

.calender .cal_item{
  text-align:center;
  width:49%;
  display:inline-block;
  margin: 2px 1px;
  border: 1px solid #ddd;
}

/* 過去記事 */
ul.old_article{
  list-style: none;
  padding: 10px;
  margin: 0;
}

ul.old_article li .pub_date{
  font-size: 12px;
  color: #888;
  display: block;
}
ul.old_article li{
  border-bottom: 1px solid #ddd;
}
ul.old_article li a{
  display: block;
}
ul.old_article .mark_indent{
  text-indent: -6px; 
  display: inline-block;
}

.sga-ranking.no_count li:before{
  content: none;
}

.chain_support_battle{
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 17px auto;
  box-shadow: 1px 1px 10px #ddd;
}

/* チェインバトル */
.chain_support_battle .icon_area{
  margin: 4px;
  text-align: center;
}
.chain_support_battle .icon_area span{
  display: block;
  font-size: 13px;
    text-shadow: #5d4612 2px 0px 0px, #5d4612 -2px 0px 0px, #5d4612 0px -2px 0px, #5d4612 0px 2px 0px, #5d4612 2px 2px 0px, #5d4612 -2px 2px 0px, #5d4612 2px -2px 0px, #5d4612 -2px -2px 0px, #5d4612 1px 2px 0px, #5d4612 -1px 2px 0px, #5d4612 1px -2px 0px, #5d4612 -1px -2px 0px, #5d4612 2px 1px 0px, #5d4612 -2px 1px 0px, #5d4612 2px -1px 0px, #5d4612 -2px -1px 0px, #5d4612 1px 1px 0px, #5d4612 -1px 1px 0px, #5d4612 1px -1px 0px, #5d4612 -1px -1px 0px;
    color: #ffd079;
}

.chain_support_battle .icon_area img{
  margin: 2px;
}

.chain_support_battle details {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: 0 4px;
  box-shadow: 0 2px 0 0 #FFF, 0 6px 0 -3px #bbb, 0 9px 0 -4px #FFF, 0 1.2rem 0 -6px #bbb;
  border-radius: 27px;
  text-align: center;
}

.custom_button , .open_modal , .search_sd{
  display: block;
  width: 98%;
  font-size: 1.4rem;
  text-align: center;
  padding: 10px;
  margin: 6px auto;
  color: #fff;
  background-color: #4caf50;
  border-radius: 20px;
  border: none;
}

#parts_choice_area li::before{
  font-family: FontAwesome;
  font-size: 15px;
  content: "\f057";
  color: #fff;
  position: absolute;
  top: 1px;
  left: 6px;
  pointer-events: none;
}

#parts_choice_area .modal_empty_message{
  width:100%;padding-top: 24px;
  color: #fff;
}

#parts_choice_area li.modal_empty_message::before{
  content: none;
}


.chara_select_area .select_chara.p_select::after{
  font-family: FontAwesome;
  font-size: 15px;
  content: "\f00c";
  color: #45e545;
  position: absolute;
  top: 6px;
  left: 5px;
}

.modal_header{
  background-image: url(https://dokkan.game-db.org//wp-content/themes/dokkan-game/img/charaImg/com_bg.png) !important;
  background-size: 30px 30px !important;
}

.chain_power{
  background-color: #f3f3f3;
  width:100%;
}

td.chain_power{
  background: #fff;
  padding: 0 20px;
}

.chain_power span{
  display: block;
  height: 10px;
  background-color: #5ab6ff;
}

.chain_power .max{
  background-color: #5ab6ff;
}

.chain_power .no-max{
  background-color: #c0d7ee;
}

.chain_power .over-max{
  background-color: #616a9b;
}

.chain_power_bar{
  width: 100%;
  display: table;
}

.chain_power_bar .chain_left{
  display: table-cell;
  width: 70%;
  vertical-align: bottom;
}
.chain_power_bar .chain_right{
  display: table-cell;
  width: 30%;
  vertical-align: bottom;
}

.result_box{
  width: 100%;
  line-height: 60px;
  border: 1px dotted #ccc;
  text-align: center;
}

.sp_effect_table th{
  /* background-color: #554d40;
  color: #fff; */
}

.sp_effect_table th.sp_effect{
  padding: 4px;
  background: #fff8e2;
  font-weight: bold;
  color: #795548;
}

.element_label{
  padding: 2px 4px;
  background: #f4f4f4;
}

.element_header {
  text-align: left;
}

.element_header span{
  display: inline-block;
  padding: 1px 6px;
  padding-left: 10px;
  font-size: 1.3rem;
}

.element_header.red span{
  border-left: 2px solid #d5575c;
}
.element_header.blue span{
  border-left: 2px solid #5097dd;
}
.element_header.green span{
  border-left: 2px solid #62ac67;
}
.element_header.orange span{
  border-left: 2px solid #EFBD00;
}
.element_header.purple span{
  border-left: 2px solid #b351ca;
}

.effect_turn{
  background: #726969;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

/* イベント基本情報 */


.event_info_table th{
  font-weight: normal;
}

.event_info_table .drop_chara a:last-child{
  border: none;
}

.event_info_table .img_text{
  text-align: left;
}

.event_info_table .img_text:last-child{
  border: none;
}

.etag{
  display: inline-block;
  font-size: 1.0rem;
  background: #a09a9a;
  color: #fff;
  padding: 3px 5px;
  line-height: 1;
  border-radius: 3px;
  margin: 1px;
}
.etag.match_tag{
  /* background: #d0537e; */
  background: #4caf50;
}

.elabel{
  /* display: inline-block;
  font-size: 1.2rem;
  color: #ec3c3c;
  font-weight: bold;
  line-height: 1;
  padding-left: 2px;
  padding-right: 4px; */

  display: inline-block;
  font-size: 1.1rem;
  color: #f3217d;
  color: #8f7e7e;
  font-weight: bold;
  line-height: 1;
  padding-left: 2px;
  padding-right: 4px;
  background: #eeee;
  padding: 4px 6px;
  margin: 1px 0 0 4px;
  border-radius: 5px;
}
/* .elabel::before{
  content: "★";
  font-size: 1.0rem;
} */

.tag_blue{
  background: #3e70b3;
}
.tag_green{
  background: #3eb370;
}
.tag_red{
  background: #e97f7f;
}
.etag.tag_fes{
  background: #9467b5;
  margin: 2px auto 4px auto;
  padding: 2px 6px;
}

.etag.tag_gacha{
  background: #e34e81;
  margin: 2px auto 4px auto;
  padding: 2px 6px;
}
.etag.tag_gacha_lr{
  background: #63a051;
  margin: 2px auto 4px auto;
  padding: 2px 6px;
}
.etag.tag_event{
  background: #3eb370;
  margin: 2px auto 4px auto;
  padding: 2px 6px;

}
.etag.tag_other{
  margin: 2px auto 4px auto;
  padding: 2px 6px;
}

.plist{
  margin: 0;
  padding: 0 4px 0 4px;
  list-style: none;
}

.plist li{
  padding: 3px 2px 2px 0;
  font-size: 1.2rem;
  line-height: 1.4;
}
.plist li::before {
  position: relative;
  top: -2px;
  left: -4px;
  display: inline-block;
  width: 2px;
  height: 2px;
  content: '';
  border-radius: 100%;
  background: #333;
}

.chara_grid{
  padding: 4px;
}
.chara_grid ul li a div{
  position: relative;
  margin-bottom: 3px;
}
.chara_grid ul div.h{
  background: #f0f6f9;
  border-bottom: 1px dashed #dbdbdf;
  vertical-align: middle;
  margin-bottom: 1px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.chara_grid ul li .etag{
  margin: 4px auto 3px auto;
}

.chara_grid ul li .zlawake{
  display: block;
  position: absolute;
  bottom: -6px;
  z-index: 10;
  width: 100%;
  text-align: center;
  background: transparent;
  z-index: 2;
}

.relate_box.chara_grid ul li{
  padding: 0 0 4px 0;
  border-radius: 6px;
  background: #fafafa;
  margin: 2px 1px;
}

.etag.tag_zlimit{
  color: #884898;
  background: #fff;
  border: 1px solid #884898;
  margin: 2px auto 4px -2px;
  padding: 2px 4px;
  transform: scale(0.9);
  transform-origin: center bottom;
  vertical-align: middle;
  line-height: 1;
}
.etag.tag_dokkan{
  color: #f44336;
  background: #fff;
  border: 1px solid;
  margin: 2px auto 4px auto;
  padding: 2px 1px;
  font-size: 8px;
  transform: scale(0.9);
  transform-origin: center bottom;
  vertical-align: middle;
  line-height: 1;
}
.etag.tag_empty{
  background: none;
  margin: 0;
  padding: 10px 0 6px 0;
  /* height: 14px; */
}


#category_search_area{
  text-align: center;
}

#category_search_area .select2-container .select2-selection--single{
  padding: 4px;
  height: 38px;
}

#category_search_area .select2-selection__rendered{
  font-size: 1.5rem;
}

#category_search_area .select2-results , .select2-results__options{
  -webkit-tap-highlight-color:transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#category_search_area table{
  background: #fff;
  margin-bottom: 0;
}

.select2-results__option:active{
  background-color: #33333333;
}

#category_search_area .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 38px;
}

/* 汎用性タブ */
.c-tab-wrap {
	background: White;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 10px;
  border: 2px solid #e9e1da;
}

.c-tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.c-tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.c-tab-switch:checked + .c-tab-label {
	color: DeepSkyBlue;
}

.c-tab-label::after {
	background: DeepSkyBlue;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.c-tab-switch:checked ~ .c-tab-label::after {
	transform: translateX(-100%);
}

.c-tab-switch:checked + .c-tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.c-tab-content {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.c-tab-switch:checked ~ .c-tab-content {
	transform: translateX(30%);
}

.c-tab-switch:checked + .c-tab-label + .c-tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.c-tab-wrap::after {
	content: '';
	height: 10px;
	order: -1;
	width: 100%;
}

.c-tab-switch {
	display: none;
}


/* タブ */

.tab_panel_box{
  /* border: 1px solid #839fac; */
}
.tab_panel_box .tab_content{
  /* padding: 6px; */
}

.article .tab_panel_box .tab_content h3{
  border-left: none;
}

.article .tab_panel_box .tab_content h3:first-child{
  /* margin: 0; */
}

.tab_panel_item{
  width: 50%;
  text-align: center;
  cursor: pointer;
  padding: 2px;
  border: 1px solid #839fac;
}

.tab_panel{
  margin-bottom: 10px;
  display:flex;text-align:center;background:#F5F5F5;
}

.tab_panel .tab_panel_item:first-child{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.tab_panel .tab_panel_item:last-child{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


.tab_label{
  color: #777;
  
}

.tab_label i{
  display: none;
  padding-right: 4px;
  font-size: 1.6rem;
}

.tab_label span{
  font-size: 1.1rem;
  color: #888;
  display: block;
}

.current_tab .tab_label{
  color: #333;
}

.tab_label:after {
  color: white;
  background-image: linear-gradient(to right, #F7CFE0, #A3D8E5);
}

.current_tab {
  background: #839fac;

}

.current_tab .tab_label, .current_tab .tab_label > span {
  color: #fff;
}

.current_tab i{
  display: inline-block;
}

/* 関連記事 */
.relate_tag_header{
  background-color: #f0eaea;
  margin: 0;
  padding: 2px 6px;
  font-weight: bold;
  border: 1px solid #ddd;
  margin-left: -1px;
}

ul.relate_tag {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 padding: 0;
}
ul.relate_tag > li {
 align-items: center;
 border: 1px solid #ddd;
 box-sizing: border-box;
 flex: 50%;
 padding: 3px;
 margin-left:-1px;
 margin-top:-1px;
 list-style: none;
}

ul.relate_tag .relate_title{
  display: block;
  padding-top: 4px;
  line-height: 1.4;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

ul.relate_tag .image_area {
  text-align: center;
  display: block;
}

ul.relate_tag .image_area img{
  object-fit: cover;
  width: 100%;
  max-width: 168px;
  height: 50px;
  background: #fafafa;
  border: 1px solid #ada8ca;
}

/* ul.relate_tag li:nth-child(2n+1):last-child .image_area img {
  height: 94px;
  max-width: 360px;
} */



/* 敵情報 */
.enemy_info{
  padding: 4px;
  list-style: none;
}
.enemy_info li{
  padding: 0;
}
.enemy_info .e_name{
  font-size: 120%;
  font-weight: bold;
  border-left: 3px solid #009688;
  padding-left: 5px;
}

/* 交換 */
.exchange_table td{
  padding: 7px 4px;
}

.ic_left_text{
  display: table;
  width: 98%;
  margin-left: 4px;
}
.ic_left_text div{
  display:table-cell;
  width:44px;
  height:44px;
  border-radius:4px
}
.ic_left_text div img{
  width:44px;
  height:auto;
  min-height:auto;
}

.ic_left_text span{
  display:table-cell;
  vertical-align: middle;
}

.special td:last-child::before{
  content: "必殺技";
  display: block;
  width: 98%;
  color: #ee9339;
  font-size: 1.0rem;
  border-bottom: 1px dotted #eee;
  margin-bottom: 1px;
  padding-bottom: 2px;
  line-height: 1.4;
  padding-left: 2px;
}

.passive td:last-child::before{
  content: "パッシブスキル";
  display: block;
  width: 98%;
  color: #ee9339;
  font-size: 1.0rem;
  border-bottom: 1px dotted #eee;
  margin-bottom: 2px;
  padding-bottom: 2px;
  line-height: 1.4;
  padding-left: 2px;
}

.diff_last{
  color: #e61313;
}

.porunga_box .porunga_title{
font-size: 15px;
    padding: 5px;
    border-left: 3px solid #2c8330;
    line-height: 1.1;
    margin: 16px 2px 6px 4px;
    color: #2c8330;
}

.porunga_box dt , .porunga_box dd{
padding:0;
margin:0;
font-size:13px;
}

.porunga_get_dl{
border:2px solid #ddd;
background: #ffffff;
margin: 4px 2px 16px 2px;
}

.porunga_get_dl dd{
  padding:0;
  margin: 0;
  line-height: 1.6;
}

.porunga_get_dl .porunga_hint_area{
  border-bottom: 1px dotted #ddd;
  background: #ffffff;
  color: #35272c;
  font-weight: 600;
  cursor: pointer;
}

.porunga_get_dl .porunga_hint_area::before{
  content: "ヒント";
  display: block;
  font-size:11px;
  line-height: 12px;
  color:orange;
}

.porunga_get_dl dd::before{
  content: "獲得条件";
  display: block;
  font-size:11px;
  line-height: 14px;
  color:orange;
}

  
.porunga_get_dl dt ,.porunga_get_dl dd{
  padding: 8px;
}

.porunga_hint{
display:block;
font-size:11px;
color:orange;
line-height: 13px;
padding-bottom: 2px;
}
  
.porunga_get_dl .porunga_dragonball{
  padding: 3px 5px;
  color: #5d5d5d;
  background-color: #e7e7e7;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 8px 5px;
  border: none;
}
.porunga_get_dl .porunga_dragonball img{
  vertical-align: middle;
  padding-right:4px;
  padding-bottom: 3px;
}

.article .porunga_get_area{
  border: 1px solid #dccbb1;
  border-radius: 10px;
  margin: 2px 2px 14px 2px;
}

.article .porunga_get_area dd{
  padding: 12px 10px 14px 10px;
  font-size: 1.4rem;
  background: #fffced;
  color: #331010;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.article .porunga_get_area dd p{
  margin: 4px auto;
  font-size: 1.4rem;
}

.article .past_porunga{
  display: inline-block;
  width: calc(100% - 30px);
  vertical-align: middle;
}

.article .new_porunga_hint{
  position: relative;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  font-weight: bold;
  background: #333;
  color: #ffffff;
  text-align: center;
  font-size: 1.5rem;
  padding: 6px 10px;
  text-shadow: 0 0 6px #000000;
  background: linear-gradient( 
135deg, #4d614d 25%, transparent 25%) -50px 0, linear-gradient( 
225deg, #4d614d 25%, transparent 25%) -50px 0, linear-gradient( 
315deg , #4d614d 25%, transparent 25%), linear-gradient( 
45deg, #4d614d 25%, transparent 25%);
  background-color: #576757;
  background-size: 2em 2em;
  
}

.article .porunga_h4{
  font-size: 1.5rem;
  padding: 5px 8px 5px 32px;
  position: relative;
  margin: 12px 4px 2px 4px;
}
.article .porunga_h4::before{
  content: none;
  position:absolute;
  content: "";
  display: block;
  width:40px;
  height: 40px;
  left: 0;
  top: calc(50% - 13px);
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db7.png");
}

.article .p_db1.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db1.png");
}
.article .p_db2.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db2.png");
}
.article .p_db3.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db3.png");
}
.article .p_db4.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db4.png");
}
.article .p_db5.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db5.png");
}
.article .p_db6.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db6.png");
}
.article .p_db7.porunga_h4:before{
  background-image: url("https://dokkan.game-db.org/wp-content/uploads/2018/08/myp_db7.png");
}

.article .first_big{
  padding: 2px 8px 3px 7px;
  margin: 16px 4px 10px 0;
}
.article .first_big::first-letter{
  font-size: 2.4rem;
}

.mission_table td{
 padding: 2px 6px;
}
.mission_table tr td:first-child{
  text-align: left;
}
.mission_table .reward_item span {
  right: -5px;
}

.reward_hosoku{
  background: #f6f6f6;
  padding: 1em;
  border-top: 1px dotted #aaa;
}

.battleroad_table{
  counter-reset: stage;
}

.battleroad_table td{
  position: relative;
  text-align: left;
  padding-left: 26px;
}

.battleroad_table .battle_ele td{
  padding-left: 20px;
}

.battleroad_table td::before {
 counter-increment: stage;
 content: counter(stage)". ";
 position: absolute;
 left: 4px;
 color: #8f8f8f;
}


.link_lv_table{
  background-color: #fafafa;
  border: 1px solid #d3d1cf;
  border-radius: 4px;
  margin-bottom: 15px;
  padding: 4px 4px 0 4px;
}

.link_lv_table caption{
  color: #7e5d3a;
  font-size: 1.2rem;
  padding: 4px;
  color: #fff;
  background: linear-gradient(45deg,transparent,#271a12,transparent);
  margin-bottom: 4px;
}

.link_lv_table p{
  margin: 0;
  font-size: 1.2rem;
  margin-top: 6px;
}

.link_lv_table table , .link_lv_table td{
  margin: 0;
  border: none;
}
.link_lv_table td{
  /* border-bottom: 1px solid #b9a085; */
  padding: 4px 4px;
  background-color: #fff;
}

.link_lv_table tr{
  border-top: 1px dotted #b9a085;
}
.link_lv_table tr:first-child{
  border-top: none;
}


.link_init{
  position: relative;
  border-right: 1px solid #fff;
}
.link_init span{
  display: block;
}

.link_init span::before{
  position: absolute;
  font-family: FontAwesome;
  content: "\f101";
  right: -3px;
  bottom: 14%;
  font-size: 1.5rem;
  color: #888;
}


.rank{
  font-size: 1.6rem;
  font-weight: bold;
}
.rank_ss{
  color: #ff22ed;
}
.rank_s{
  color: #fe6665;
}
.rank_a{
  color: #fe912a;
}
.rank_b{
  color: #ffcd5e;
}
.rank_c{
  color: #299bc3;
}
.rank_d{
  color: #7f969e;
}


.vote_bar span{
 display:inline-block;
 height:15px;
}

.vote_bar .rank_hosei{
  background-image:linear-gradient(-45deg, #c1d9e4 25%, #a1becc 25%, #a1becc 50%, #c1d9e4 50%, #c1d9e4 75%, #a1becc 75%, #a1becc);
  background-image:-webkit-linear-gradient(-45deg, #c1d9e4 25%, #a1becc 25%, #a1becc 50%, #c1d9e4 50%, #c1d9e4 75%, #a1becc 75%, #a1becc);
  background-image:-moz-linear-gradient(-45deg, #c1d9e4 25%, #a1becc 25%, #a1becc 50%, #c1d9e4 50%, #c1d9e4 75%, #a1becc 75%, #a1becc);
  background-image:-ms-linear-gradient(-45deg, #c1d9e4 25%, #a1becc 25%, #a1becc 50%, #c1d9e4 50%, #c1d9e4 75%, #a1becc 75%, #a1becc);
  -webkit-background-size:10px 10px;
  -moz-background-size:10px 10px;
  -ms-background-size:10px 10px;
  background-size:10px 10px;
}

.vote_bar .rank_ss{
  background-color: #ff63f2aa;
}
.vote_bar .rank_s{
  background-color: #fe6665aa;
}
.vote_bar .rank_a{
  background-color: #fe912aaa;
}
.vote_bar .rank_b{
  background-color: #ffcd5eaa;
}
.vote_bar .rank_c{
  background-color: #299bc3aa;
}
.vote_bar .rank_d{
  background-color: #c2ccd0aa;
}

.article .ranking_table .vote_ranking{
  min-height: 86px !important;
}

.vote_ranking a img{
  margin-right: 2px;
}

/* .rank_1{
  color: #ffc107;
  font-size: 1.8rem;
}
.rank_2{
  color: #ffc107;
  font-size: 1.8rem;

}
.rank_3{
  color: #ffc107;
  font-size: 1.8rem;

} */

.crown_1{
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/ranking/crown1.png);
  background-size: 24px 18px;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 46%;
}
.crown_1 span , .crown_2 span, .crown_3 span{
  text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px 0px 1px #fff, 0px 1px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff;
  color: #333;
  font-size: 1.6rem;
  padding: 0 1px;
}

.crown_2{
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/ranking/crown2.png);
  background-size: 24px 18px;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 46%;
}
.crown_3{
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/ranking/crown3.png);
  background-size: 24px 18px;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 46%;
}


.tag_area {
  border-bottom: 1px dotted #ddd;
  margin-bottom: 4px;
}

.tag_area .tag{
  color: #ffffff;
  background: #4CAF50;
  margin-right: 2px;
  padding: 1px 5px;
  text-align: center;
  display: inline-block;
  line-height: 1.4;
  margin-bottom: 2px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.0rem !important;
  min-width: 60px;
}
.tag_fes .tag{
  color: #fff;
  background: #dfc77a;
}
.tag_gacha .tag{
  color: #fff;
  background: #38a0b4;
}
.tag_other .tag{
  color: #fff;
  background: #919491;
}

.osusume_category .category_tag{
  padding: 0 10px;
}
.osusume_category .category_tag li{
  font-size:1.4rem;
  margin: 2px 4px;
}

#main .gaiyo_box{
  border: 2px solid #e2cebd;padding: 3px;
  margin: 4px 0 10px 0;
}
#main .gaiyo_box > div{
  box-shadow: 0px 0px 10px #f4dbbd; background: #fffaf3; padding: 10px;text-align:center;
}
#main .gaiyo_box > div > span{
  display: block;
  border-bottom: 1px solid #e5d0bd;
  margin-bottom: 6px;
  padding-bottom: 4px;
  text-align: center;
  font-size: 15px;
  color: #af835b;
  font-weight: bold;
}

#main .gaiyo_box p{
    margin-bottom: 8px;
    text-align: left;
}

#link_aisho_area .filter_name{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#link_aisho_area{
  border: 1px solid #a8b8c2;
}
#link_aisho_area .data_t{
  border: none;
  padding: 4px 6px;
}

#link_aisho_area .chara_link{
  text-align: center;
}
#link_aisho_area .link_filter{
  border-radius: 0;
  color: #1da1f2;
  background: #fff;
  color: #657786;
  border-bottom: 2px solid #e6ecf0;
}
#link_aisho_area .link_filter.select{
  color: #1da1f2;
  border-bottom: 2px solid #1da1f2;
}

#link_aisho_area .chara_link.left{
  text-align: left;
}

#link_aisho_area .link_filter.col_2{
  width: calc((100% - 3px)/2);
}
#link_aisho_area .link_filter.col_3{
  width: calc((100% - 3px)/3);
}
#link_aisho_area .link_filter.col_4{
  width: calc((100% - 4px)/4);
}

#chara_modal tr.match .linkname::before{
  content: "★";
  color: orange;
}

.search_element .elefilter label{
  font-size: 1.5rem;
  padding: 6px 4px;
}

.article .label_font{
  display: block;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  margin: 10px auto 4px auto;
  padding: 10px 5px 8px 8px;
  background: #d8d5cf;
  text-align: left;
  position: sticky;
  font-size: 1.6rem;
  font-weight: normal;
}
.article .label_font::after , .article .label_font::before{
  content: none;
}

.menu_table_f14 td , .menu_table_f14 th{
  font-size: 1.4rem;
}


@media screen and (max-width:375px) {
  .chara_icon{
    height: auto;
    min-height: auto;
  }
  #skill_checker #chara_sort img, #skill_checker #check_area img{
    width: 52px;
    margin: 4px 6px;
  }
  #skill_checker .border_box img{
    margin: 10px 18px !important
  }
}

.virtual_mode{
  color: #da3c41;
  font-weight: bold;
}

.chara_card{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.chara_card .chara_card_content{
  margin: 6px auto 12px auto;
  border-radius: 6px;
  box-shadow: 0 0 6px #ccc;
  padding: 14px 6px 8px 6px;
  font-size: 12px;
}
.chara_card .chara_card_header{
  display: table;
  width:100%;
  border-bottom: 1px dashed #ada5a5;
  margin-bottom: 6px;
  padding-bottom: 6px;
}
.chara_card .chara_card_img{
  display:table-cell;
  width: 36%;
  vertical-align: middle;
  text-align: center;
}
.chara_card .chara_card_get{
  display:table-cell;
  width:64%;
  vertical-align: top;
  margin: 6px 0;


  text-align: left;
  line-height: 1.5;
}

.chara_card .chara_card_get p{
  border-radius: 6px;
  padding: 6px 8px;
  background: #ebf6ff;
}

.chara_card p{
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 4px;
  padding: 4px;
  margin: 0;
}

.chara_card .link_text{
  text-align: right;
  padding: 6px 0 0 0;
  margin: 0;
  font-size: 1.3rem;
}

.evnet_list_detail{
  border-bottom: 3px double #dbd1e2;
  padding: 6px;margin:2px auto
}
.evnet_list_detail.no_border{
  border-bottom: none
}

.evnet_list_detail.no_border .evnet_list_item{
  margin-bottom: 4px;
  display: block;
}

.drop_chara_area .evnet_list_detail:last-child{
  border-bottom: none;
}

.evnet_list_item{
  border-top: 1px dotted #ddd;
  padding: 4px;
  display: table;
  width: 100%;
  font-size: 1.2rem;
}

.evnet_list_detail .evnet_list_item:first-child{
  border-top: none;
}


.evnet_list_item .evnet_list_child{
  display: table-cell;
  vertical-align: middle;
}
.evnet_list_item .evnet_list_child:first-child{
  width: 50px;
}

.evnet_list_item .evnet_list_child:last-child{
  text-align: right;
  width: 100px;
  font-size: 1.1rem;
}
.evnet_list_item a:last-child span{
  border-bottom: 1px solid #1da1f2;
  padding:4px; 
}

.evnet_list_item .evnet_list_child.full{
  width: calc(100% - 80px);
  text-align: left;
}
.evnet_list_item .evnet_list_child.full a span{
  border-bottom: none;
}

.page_section h4{
  margin-bottom: 0;
}
.page_section .link_button{
  margin-top: 16px;
}




.page_section{
  padding: 8px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 1px 1px 10px #c7c7c7;
}
.page_section table th{
  padding: 4px 6px 4px 8px;
}

.event_drop_list td{
  padding: 6px 2px;
  vertical-align: top;
  cursor: pointer;
}

.event_drop_list tr td:first-child{
  vertical-align: middle;
}

.back_top{
  cursor: pointer;
  margin-bottom: 16px;
  color: #1270c3;
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}

.event_drop_list tr:nth-child(odd) td {
  background: #fefff2;
  border-bottom: 4px double #ddd;
  border-top: 4px double #ddd;
}

.img_half{
  width: 350px;
  margin: 10px auto;
}

.img_small{
  width: 250px;
  margin: 10px auto;
}

.o_button{
  text-align: center;
  margin: 10px;
  padding: 6px;
  border-radius: 10px;
}
.o_button a{
  color: #1967d2;
  font-size: 1.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 11px;
}

/* お知らせボックス */
.info_wrapper {  
  display: block;
  position: relative;
  margin: 25px auto 17px auto;
  padding: 20px 0 0 0;
  width: 99%;
  background: #ffffff;
  border: 3px double #e0628d;
  border-radius: 4px;
}
.info_wrapper .info_content{
  padding: 0 10px;
}
.info_label {
  display: inline-block;
  position: absolute;
  left: 0;
  top: -15px;
  box-sizing: border-box;
  padding: 0 12px;
  margin: 0;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: white;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  background: #e91e63;
  box-shadow: 0 2px 2px rgb(0 0 0 / 12%);
}
.info_label:before {
position: absolute;
content: '';
top: 0;
left: -7px;
border: none;
height: 38px;
width: 7px;
background: #e91e63;
border-radius: 5px 0 0 5px;
}
.info_label:after {
position: absolute;
content: '';
bottom: -7px;
left: -5px;
border: none;
height: 7px;
width: 5px;
background: #ff558f;
border-radius: 5px 0 0 5px;
}


.info_wrapper.box_blue{
  border: 3px double #8494b7;
}

.info_wrapper.box_blue .info_label{
  background: #4d99ca;
}

.info_wrapper.box_blue .info_label:after{
  background: #89b9d8;
}
.info_wrapper.box_blue .info_label:before{
  background: #4d99ca;
}

.tokusei tr td:first-child{
  background-color: #fffef1;
}
.tokusei .information{
  font-size: 1.2rem;
}

.boss_img{
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.boss_img img{
  position: absolute;
  top: -2px;
  width: 60px;
  height: 60px;
  left: 0;
  right: 0;
}

.boss_img div{
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
}
.boss_img div span{
  line-height: 1.2;
}

.bar{
  width: calc(100% - 60px);
  height: 16px;
  display: inline-block;
  background-color: #ddd;
  vertical-align: middle;
}
.bar_scale{
  width: 56px;
  display: inline-block;
  line-height: 16px;
  text-align: center;
}


.current_bar{
  background-color: green;
  height: 16px;
  display: inline-block;
}

.category_chara_list .rank{
  font-size: 1.1rem;
  line-height: 1;
  background: #484848;
  border: 1px solid #bbb;
  border-radius: 10px;
  color: #ffffff;
  padding: 2px 0;
  display: inline-block;
  margin: 1px;
  width: 38px;
  font-weight: normal;
}

.cate_list_all tr td{
  padding: 2px 4px;
}
.category_img {
  text-align: center;
}
.category_img img{
  max-width: 100%;
  vertical-align: middle;
  object-fit: cover;
  width: 200px;
  height: 140px;
  border-radius: 10px;
  object-position: 20% 24%;
}

.category_chara_list.list_small .rank{
  font-size: 1.0rem;
}

.icon-crown.rank_1::before{
  content: "★";
  color: yellow;
}
.icon-crown.rank_2::before{
  color: #f3f3f3;content: "★";
}
.icon-crown.rank_3::before{
  color: burlywood;content: "★";
}

.category_chara_list li{
  display:inline-block;
  width:50px;
  text-align: center;
  padding: 0;
}
.category_chara_list.list_small li{
  width:40px;
}

.category_filter{
  font-size : 1.1rem;
  margin: 6px 0 0 0;
  border-top: 1px solid #ddd;
}


 

.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: 'B!';
}

.share {
  margin: 10px;
}

.share ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.share ul:after {
  display: block;
  clear: both;
  content: '';
}

.share li {
  float: left;
  width: 25%;
  margin: 0;
  margin-top: 15px;
  padding: 2px;
}

.share li a {
  font-size: 12px;
  display: block;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 3px;
}

.share li a:hover {
  opacity: .8;
}

.share li a:visited {
  color: #fff;
}

.tweet a {
  background-color: #55acee;
}

.facebooklink a {
  background-color: #315096;
}

.line a {
  background-color: #00b900;
}

.hatena a {
  background-color: #008fde;
}


.potential_table td img{
  width: 50px;
}
.potential_table tr td:first-child{
  position: relative;
}

.potential_table tr td span{
  position: absolute;
  bottom: 0;
  left: 30%;
  color: orange;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
}

.gacha_schedule td{
  padding: 4px;
}


table tr.odd td{
  background-color: #fffef4;
}


.big_label{
  width: 100%;
  height: 70px;
  background: #cab492;
  font-size: 1.3rem;
  margin: 0 0 4px 0;
  color: #fff;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding: 3px 2px 1px 2px;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  background: #fff0d4;
  font-size: 19px;
  text-align: center;
  line-height: 70px;
}

.small_label{
  width: 100%;
  background: #cab492;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding:0;
  margin:0;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  background: #fff0d4;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
}

.article h3.chara_header_label{
  color: #ffd079 !important;
  background: #5d461229;
  padding: 10px 4px;
  position: absolute;
  bottom: -10px;
}

.chara_header_label{
  width: 100%;
  background: #5d461229;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding:0;
  margin:0;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  padding: 1px 4px;
  position: absolute;
  bottom: 0;
}

.small_label_white{
  width: 100%;
  min-height: 30px;
  background: #cab492;
  font-size: 1.2rem;
  color: #fff !important;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding:0;
  margin:0;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  background: #fff0d4;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  margin: 0 !important;
}
.small_label_white::before{
  content: '' !important;
  background-image: none !important;
}


.enemy_label{
  width: 100%;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 1px 1px #654e4e;
  font-weight: bold;
  padding: 0;
  margin: 0;
  text-shadow: #5d4612 2px 0 0, #5d4612 -2px 0 0, #5d4612 0 -2px 0, #5d4612 0 2px 0, #5d4612 2px 2px 0, #5d4612 -2px 2px 0, #5d4612 2px -2px 0, #5d4612 -2px -2px 0, #5d4612 1px 2px 0, #5d4612 -1px 2px 0, #5d4612 1px -2px 0, #5d4612 -1px -2px 0, #5d4612 2px 1px 0, #5d4612 -2px 1px 0, #5d4612 2px -1px 0, #5d4612 -2px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
  font-size: 14px;
  text-align: left;
  line-height: 40px;
}

.review_area{
  border: 1px solid #ada4af;
}

.review_area table{
  width: 98%;
  margin: 6px auto 6px auto;
}

.review_area li{
  border-bottom: 1px dotted #ddd;
  line-height: 1.5;
}

.review_area .good ,.review_area .bad{
  font-size: 1.4rem;
  margin-top: 10px;
  padding: 2px 10px;
  margin: 10px 4px 0 4px;
  background: #cde9ff;
}
.review_area .bad{
  background: #ffcdcd;
}

.review_label{
  width: 100%;
  font-size: 1.4rem;
  color: #fff;
  font-weight: bold;
  padding: 6px 8px;
  margin:0;
  background: #404040;
  text-align: center;
  line-height: 1.6;
}


.article .divi_h::after{
  background: none !important; 
}


.chara_detail_list{
  padding-left:14px
}
.chara_detail_list li{
  padding:1px;
  font-size:1.2rem
}
.chara_detail_list li span{
  margin-left:-6px;
  display:block;
}

.help , .story{
  border: 2px solid #e2cebd;
  padding: 3px;
  margin: 4px 0 10px 0;
}

.help div , .story div{
  box-shadow: 0px 0px 10px #f4dbbd;
  background: #fffaf3;
  padding: 10px;
  text-align: left;
}

.help div p:last-child , .story div p:last-child{
  margin-bottom: 0;
}

.information-box.story{
  background: initial;
  padding: 10px;
}
.information-box.story::before{
  content: none;
}

.information-box p:last-child{
  margin-bottom: 0;
}

.pettan_table tr{
  border-bottom: 1px solid #ddd;
}

.pettan_table tr td{
  position: relative;
  border:none;
  padding: 4px 2px 2px 2px;
  vertical-align: top;
}


.red_pettan{
  background: #fff8f8;
}
.blue_pettan{
  background: #f8fbff;
}

.blue_pettan tr td{
  border: 1px solid #aabed2;
  background: #ffffff;
}

/* .blue_pettan tr.odd td{
  background-color: #eef8ff;
} */

.sd_no{
  background: #eee;
  padding: 0 4px;
  margin-bottom: 5px;
}



.pettan_table tr td div{
  position: relative;
  z-index: 1;
}


.pettan_table tr td:first-child .sd_no{
  right: 10px;
}
.pettan_table tr td:last-child .sd_no{
  left: 10px;
}


.pettan_table tr td:first-child:before{
  content : none;
}

.pettan_table tr td:last-child:after{
  content : none;
}

.red_pettan tr td::after , .red_pettan tr td::before{
  color: #e67584;
}


.no_pettan tr td::after , .no_pettan tr td::before{
  color: #888;
  content : "×";
}
.mini_label{
  font-size: 10px;
  color: #2f2a2a;
  background: #f7efef;
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 72px;
  display: inline-block;
  text-align: center;
}
.normal_label{
  font-size: 14px;
  color: #2f2a2a;
  background: #f7efef;
  border-radius: 4px;
  padding: 4px 6px;
  display: inline-block;
  text-align: center;
  margin-bottom: 8px;
}


.category_pt_list td{
  padding: 6px 4px 2px 4px;
}

.category_pt_list td a{
  display: block;
  border-radius: 6px;
}

.category_pt_list .cate_title{
  display: block;
  /* background: #487388; */
  /* color: #fff; */
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  /* border: 1px solid #ddd; */
  width: 96%;
  margin: 2px auto;
}

.category_pt_list .cate_figure{
  width: 80px;
  height:34px;
  object-fit:cover;
  background: #f7f3f3;
  border-radius: 6px;
}

.relate_aricle ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.relate_aricle ul li{
  display: inline-block;
  width: 50%;
  padding: 4px 4px 2px 4px;
  margin: 0;
  border: 1px solid #dbdce0;
  text-align: center;
  font-weight: normal;
  position: relative;
}

.relate_aricle{
  margin-bottom: 10px;
}

.relate_aricle ul li img{
  margin-bottom: 2px;
  padding: 0 2px;
}

.relate_aricle ul li:first-child{
  border-right: none;
}

.relate_aricle ul li.new::after{
  font-size: 1.1rem;
  content: "New";
  position: absolute;
  top: 0;
  left: 0;
  background: #f34343;
  color: #fff;
  line-height: 1;
  padding: 1px 4px;
}

.virtual_enemy{
  background-image: url(https://dokkan.game-db.org//wp-content/themes/dokkan-game/img/charaImg/com_bg.png);
  background-size: 40px 40px;
  min-height: 80px;
  color: #fff;
  background: linear-gradient(135deg, #eee 25%, transparent 25%) -50px 0, linear-gradient( 
    225deg, #eee 25%, transparent 25%) -50px 0, linear-gradient(315deg
, #eee 25%, transparent 25%), linear-gradient( 45deg, #eee 25%, transparent 25%);
  background-color: #e4e4e4;
  background-size: 2em 2em;
}

.hp_bar{
  display: flex;
}

.hp_bar span{
  display: flex;
  align-self: auto;
  flex-basis: 18px;
  height: 10px;
  margin-right: 2px;
  margin: 6px 1px 0 1px;
  display: inline-block;
  border: 1px solid #e8e8e8;
  transform: skewX(-40deg);
}
.hp_bar span:nth-child(1){
  background: #e8e207;
}
.hp_bar span:nth-child(2){
  background: #02f967;
}
.hp_bar span:nth-child(3){
  background: #04e1fb;
}
.hp_bar span:nth-child(4){
  background: #ae8efd;
}
.hp_bar span:nth-child(5){
  background: #026ae7;
}
.hp_bar span:nth-child(6){
  background: #099543;
}
.hp_bar span:nth-child(7){
  background: #f6820e;
}
.hp_bar span:nth-child(8){
  background: #fac307;
}
.hp_bar span:nth-child(9){
  background: #e90e00;
}
.hp_bar span:nth-child(10){
  background: #8700cc;
}


/* レーティング */
.rate {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
  font-size: 16px;
}
.rate:before, .rate:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 16px;
  line-height: 16px;
}
.rate:before {
  color: #ddd; /*星色*/
}
.rate:after {
  color: #ffa500;
  overflow: hidden;
  white-space: nowrap; /*重要*/
}

.rate00:after{width: 0;}
.rate05:after{width: 8px;}
.rate10:after{width: 16px;}
.rate15:after{width: 24px;}
.rate20:after{width: 32px;}
.rate25:after{width: 40px;}
.rate30:after{width: 48px;}
.rate35:after{width: 56px;}
.rate40:after{width: 64px;}
.rate45:after{width: 72px;}
.rate50:after{width: 80px;}

.rank_select_option{
  width: 68px;
  display: inline-block;
  text-align: center;
  font-size: 1.6rem;
  border: 2px solid #2196f3;
  margin-right: 5px;
  line-height: 1;
  padding: 8px;
}

#tmp_open td{
  padding: 0 !important;
  border: none;
}
#tmp_open td button{
  margin: 0 !important;
  height: 50px;
  width: 100%;
}

.label_diff{
  display: inline-block;
  border: 1px solid red;
  color: red;
  font-size: 11px;
  padding: 3px 3px;
  border-radius: 4px;
  line-height: 1;
  margin-right: 4px;
  min-width: 60px;
  text-align: center;
}
.z-hard{
  border: 1px solid red;
  color: red;
}
.super{
  border: 1px solid #3f51b5;
  color: #3f51b5;
}

.header_link th{
  border-color: #d4bf91;
  background-color: #f9f8ec;
  color: #452a44;
}
.header_link td{
  border-color: #d4bf91;
  padding: 4px 6px;
}

.cate_tab{
  display: inline-block;
  padding: 2px 6px;
  background: #f54e87;
  border-radius: 12px;
  font-size: 1.1rem;
  margin: 4px 2px 0 0;
  color: #fff;
}

.post_pt_list{
  padding:10px 0;
}

.post_pt_list .cate_filter{
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 2px 4px;
  padding-left: 6px;
  font-size: 1.2rem;
  display: inline-block;
}
.post_pt_list .cate_filter label{
  padding: 6px 8px 6px 2px;
  display: inline-block;
}


.post_pt_list .cate_filter input{
  vertical-align: middle;
}

.post_pt_list .cate_filter input:checked + label{
  color: #f54e87;
}

.post_pt_list .cate_other{
  background: #999;
}

.area_table .z-hard{
  border: none;
}

.area_table .super{
  border: none;
}

/* キャラ育成 */
.c_ikusei .c_hosoku{
  border: 1px solid #c5aa5e;
  background: #fffce5;
  margin: 6px auto 8px auto;
}
.c_ikusei .c_hosoku li{
  line-height: 1.3;
}

.c_ikusei > li{
  line-height: 1.8;
  padding: 8px 5px 8px 34px;
}

.c_ikusei li a{
  border-bottom: 1px solid #9fbbe9;
  padding-bottom: 2px;
}

.item_by_mission td{
  background: #fefffb;
}
.item_by_mission .name{
  color: #443013;
}
.item_by_mission .desc{
  color: #5e4f3a;
  line-height: 1.5;
  margin: 2px 0;
}

.item_by_mission th, .item_by_mission td{
  border: 1px solid #a1927d;
}
.item_by_mission th{
  background: #e7dcc7;
  color: #70490e;
}

.author_area{
  margin-top: 8px;
  padding: 2px 12px;
}
.author_area table{
  margin: 0 auto 10px 0;
  border:1px solid #472e17;
}

.author_label{
  padding: 5px 8px 4px 5px;
  line-height: 1;
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
  background: #472e17;
}


/* コンポーネント新規 */
.andor{
  border: 1px solid #ddd;
  border-radius: 16px;;
  margin: 6px auto;
  display: table;
  width: 90%;;
}
.andor input{
  display: none;
}

.andor #and + label{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.andor #or + label{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.andor label{
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 1.3rem;
  padding: 6px;
  box-sizing: border-box;
  display: table-cell;
  background: #fafafa;
  color: #999;
}

.andor input:checked + label{
  background: #8bc34a !important;
  font-weight: bold;
  font-size: 1.4rem;
  color: #ffffff;
  text-shadow: 1px 1px 2px #aaa;
}


.check_list{
  padding: 0;
  margin: 0;
  list-style: none;
}
.link_checker {
  border: 1px solid #ddd;
}

.link_checker li table{
  display: inline-block;
  width: calc( 100% - 30px);
  vertical-align: middle;
  margin: 0;
}

.link_checker li table td , .link_checker li table th{
  border: none;
  padding: 0;
  background: transparent;
}
.link_checker li table th{
  color: #888;
}

.check_list li input:checked + label table th{
  color: #333;
}


.check_list li {
  width: 100%;
  padding: 1px;
  display:inline-block;
}
.check_list .cate_display input{
  display:none;
}

.check_list li input {
  display:none;
}

.check_list.rarity_filter li{
  width: calc(100% / 4 );
}
.check_list.category_filter li{
  width: calc(100% / 2 );
}

.check_list li .checkbox{
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 18px;
  border-radius: 20px;
  border: 1px solid #ddd;
  vertical-align: middle;
  background: #f2f2f2;
}

.check_list li input + label{
  background: #fafafa;
  display: block;
  padding: 6px;
}

.check_list li input + label span{
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  color: #888;
  display: inline-block;
  width: calc(100% - 30px);
  vertical-align: middle;
  line-height: 1.2;
}
.check_list li input:checked + label span{
  color: #333;
}

.check_list li input:checked + label{
  background: #fff9c1;
}
.check_list li input:checked + label .checkbox{
  background: #8bc34a;
}

.check_list li input:checked + label .checkbox:after{
  content: '○';
  content: '\f00c';
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  width: 24px;
  height: 24px;
  color: #fff;
  position: relative;
  left: -1px;
  bottom: 3px;
}

.check_list li.link_match input + label .checkbox{
  background: orange;
}

.check_list li.link_match input + label .checkbox:after{
  color: #FFF;
  content: '○';
}

.ok_icon span ,.ng_icon span{
  background-color: #4caf50;
  display: inline-block;
  height: 22px;
  width: 22px;
  line-height: 22px;
  border-radius: 20px;
  margin-right: 6px;
  text-align: center;
}

.ng_icon span{
  background-color: #d3c9c9;

}

.ok_icon span::before , .ng_icon span::before{
  content: 'OK';
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  font-size: 10px;
  line-height: 22px;
  width: 22px;
  height: 22px;
  color: #fff;
}
.ng_icon span::before{
  content: '×';
  font-size: 18px;
}

.pt_form{
  box-shadow: 0 0 10px #ddd;
  border-radius: 6px;
}
.pt_form_content{
  padding: 6px;
  background: #fffdea;
}
.pt_form .pt_form_title{
  margin: 0;
  padding: 4px 0 3px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #627985;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}


/* ボトムシート */
.bottom_sheet {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
  pointer-events: none;
  display: none;
}

.bottom_sheet.sheet_show {
  opacity: 1;
  visibility: visible;
  transition: .6s;
  display: block !important;
  z-index: 100000;
}

.bottom_sheet_inner {
  position: absolute;
  left: 10px;
  right:10px;
  bottom: 20px;
  top: 20px;
  width: calc(100% - 20px);
  max-width: 600px;
  background-color: #fff;
  min-height: 30%;
  margin: 0;
  border-radius: 20px;
  z-index: 100000;
  padding: 2%;
  pointer-events: auto;
  box-sizing: border-box;
  overflow: scroll;
  margin: 0 auto;
}

.bottom_sheet_fotter{
  position: fixed;
  bottom: 8px;
  width: calc(100% - 20px);
  height: 40px;
  background: red;
  z-index: 100000;
  left: 10px;
  pointer-events: none;
}

.bottom_sheet_inner img {
  width: 100%;
}

.bottom_sheet_back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  background: #33333377;
}

.header_link .achievement{
  display: inline-block;
  width: 40px;
  height: 24px;
  border-color: #cad3dd;
  /* background-color: #0d468c; */
  color: #452a44;
  border-width: 4px;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px #333;
  color: #fff;
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: contain;
  vertical-align: middle;
}

  .header_link .achievement.normal_bronze {
    background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/item/mydata_achievement/achive_bronze.png);
  }
  .header_link .achievement.normal_silver {
    background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/item/mydata_achievement/achive_silver.png);
  }
  .header_link .achievement.normal_gold {
    background-image: url(https://dokkan.game-db.org/wp-content/themes/dokkan-game/img/item/mydata_achievement/achive_gold.png);
  }
  .header_link .normal_bronze{
    color: #b93f05; 
  }
  .header_link .normal_silver{
    color: #0d468c; 
    text-shadow: #eee 1px 0 0, #eee -1px 0 0, #eee 0 -1px 0, #eee 0 1px 0, #eee 1px 1px 0, #eee -1px 1px 0, #eee 1px -1px 0, #eee -1px -1px 0, #eee 1px 1px 0, #eee -1px 1px 0, #eee 1px -1px 0, #eee -1px -1px 0, #eee 1px 1px 0, #eee -1px 1px 0, #eee 1px -1px 0, #eee -1px -1px 0, #eee 1px 1px 0, #eee -1px 1px 0, #eee 1px -1px 0, #eee -1px -1px 0;
  }

  .header_link .normal_gold{
    color: #ce2932; 
    text-shadow: #ece396 1px 0 0, #ece396 -1px 0 0, #ece396 0 -1px 0, #ece396 0 1px 0, #ece396 1px 1px 0, #ece396 -1px 1px 0, #ece396 1px -1px 0, #ece396 -1px -1px 0, #ece396 1px 1px 0, #ece396 -1px 1px 0, #ece396 1px -1px 0, #ece396 -1px -1px 0, #ece396 1px 1px 0, #ece396 -1px 1px 0, #ece396 1px -1px 0, #ece396 -1px -1px 0, #ece396 1px 1px 0, #ece396 -1px 1px 0, #ece396 1px -1px 0, #ece396 -1px -1px 0; 
  }

.achivement{
  background: #f9f9f9;
  padding: 10px;
}

.achive_item{
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 10px 10px 8px 10px;
  background: #fff;
}

.achive_item a{
  color: #4c85d3;
  text-decoration: underline;
  font-weight: bold;
}

.achive_banner{
  position: relative;
  width: 260px;
  margin: 0 auto;
}
.achive_banner .achive_text{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  /* text-shadow: 0.05em 0.05em 0.05em #333, -0.05em -0.05em 0.05em #333, -0.05em 0.05em 0.05em #333, 0.05em -0.05em 0.05em #333; */
  text-shadow: 2px 2px 1px #333, 0 2px 1px #333, -2px 0px 1px #333, 0 -2px 1px #333, 2px -1px 1px #333;;
}

.a_c_0 .achive_banner{
  color: #fddcb5;
}

.a_c_1 .achive_banner{
  color: #fafafa;
}

.a_c_2 .achive_banner{
  color: #fffc36;
}

.achive_desc{
  background: #eaf3ff;
  padding: 1em;
  font-size: 1.4rem;
  display: block;
  margin-top: 4px;
  color: #4f4343;
  border-radius: 10px;
  line-height: 1.5;
}

.a_c_0 .achive_desc{
  background: #fef0df;
}
.a_c_1 .achive_desc{
  background: #eaf3ff;
}
.a_c_2 .achive_desc{
  background: #ffffd9;
}



/* border-color: #cad3dd;
background-color: #0d468c;
color: #452a44;
border-width: 4px;
font-size: 1.3rem;
font-weight: bold; 


border-color: #e3c226;
    background-color: #ce2932;
*/

.table_auto{
  table-layout: auto !important;
}

.medal_flex{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  align-items: center;
}
.medal_flex span:first-child{
  width: calc(100% - 30px);
  border-right: 1px dotted #ddd;
  padding-right: 4px;
  margin-right: 4px;
}
.medal_flex span:last-child{
  display: block;
  text-align: center;
  flex-grow: 1;
}

.flex_table{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.flex_table li{
  display: inline-block;
  width: calc( 100% / 3 );
  padding: 4px;
}

.flex_table.col4 li{
  width: calc( 100% / 4 );
}

.flex_table.col5 li{
  width: calc( 100% / 5 );
}
.flex_table.col6 li{
  width: calc( 100% / 6 );
}
.flex_table.col7 li{
  width: calc( 100% / 7 );
}


.flex_table.min_56 li{
  width: 56px;
}

.thumb_banner img{
  border-radius: 12px;
  margin: 6px auto;
}

ul.flex_table.ul_table li{
  padding: 1px;
  line-height: 32px;
}
.ul_table li a{
  display: block;
  border: 1px solid #ddd;
  text-align: center;
}



/************************************
** 新ナビ Ver2 2021.11.09
************************************/
.is-nav-open .nav_overlay{
  background: #66666699;
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}


.gbl-nav {
  position: relative;
  top: 0;
  overflow: visible;
  height: 50px;
  z-index: 5;
  box-shadow: 0 0px 8px #aaa;
}

.gbl-nav-btn {
  position: relative;
  left: 0;
  width: 100%;
  top: 0;
  background: rgb(243 241 241);
}

.gbl-nav-btn > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gbl-nav-btn>ul>li {
  width: 25%;
  margin: 0;
  cursor: pointer;
  padding: 0;
}
.gbl-nav-btn>ul>li>a{
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  display: inline-block;
  height: 50px;
  padding: 6px 0 0 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.gbl-btn span{
  color: #4c3b0a;
  line-height: 1.1;
}

.gbl-btn  svg{
  width: 24px;
  height: 24px;
}

.gbl-btn  svg  g  path{
  fill: #4c3b0a;
}


.is-nav-open .gbl-btn a:hover svg g path{
  fill: #ff9800;
}

.is-nav-open .gbl-btn a:hover {
  background: #fff;
}
.is-nav-open .gbl-btn a:hover span{
  color: #ff9800;
  font-weight: bold;
}

.gbl_items {
  background-color: #fff;
  text-align: center;
  padding: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  height: 0;
  /* 閉じるアニメーション */
  transition: opacity .3s ease-out;
}
.gbl_items .gbl_item{
  display: none;
}

.gbl_items.is-open {
  opacity: 1;
  display:block;
  height: auto;
  padding: 10px;
  visibility: initial;
  transition: opacity .5s ease-out;
  box-shadow: 0 1px 6px #ccc;
}
.gbl_items.is-open .gbl_item{
  display: block;
}

.header_sticky{
  position: fixed;
  left:0;
  width: 100%;
}

/* リーダー適正表 */
.leader_tekisei{
  padding:8px;background:#ffc14f;padding-top:10px;position: relative;
    background: linear-gradient( 135deg , #5b875c 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #5b875c 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #5b875c 25%, transparent 25%), linear-gradient( 45deg , #5b875c 25%, transparent 25%);
    background-color: #f5f5f5;
    background-size: 2em 2em;
    background-color: #4a824c;
    background-size: 2em 2em;
    /* background: linear-gradient( 135deg , #f2cb56 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #f2cb56 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #f2cb56 25%, transparent 25%), linear-gradient( 45deg , #f2cb56 25%, transparent 25%);
    background-color: #f5f5f5; */
    /* background-color: #eec13b; */
    /* background: linear-gradient( 135deg , #b2dcfd 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #b2dcfd 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #b2dcfd 25%, transparent 25%), linear-gradient( 45deg , #b2dcfd 25%, transparent 25%);
    background-color: #b2dcfd; */
    background: linear-gradient( 135deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #f0f0f0 25%, transparent 25%), linear-gradient( 45deg , #f0f0f0 25%, transparent 25%);
    background-color: #f5f5f5;
    background-size: 2em 2em;
}

.leader_tekisei.leader_mokuji .l_item{
  width: calc(100% /6);
}

.leader_tekisei .leader_tekisei_title{
  text-align: left;
  font-size: 1.6rem;
  text-shadow: #444444 1px 0 0, #444444 -1px 0 0, #444444 0 -1px 0, #444444 0 1px 0, #444444 1px 1px 0, #444444 -1px 1px 0, #444444 1px -1px 0, #444444 -1px -1px 0, #444444 1px 1px 0, #444444 -1px 1px 0, #444444 1px -1px 0, #444444 -1px -1px 0, #444444 1px 1px 0, #444444 -1px 1px 0, #444444 1px -1px 0, #444444 -1px -1px 0, #444444 1px 1px 0, #444444 -1px 1px 0, #444444 1px -1px 0, #444444 -1px -1px 0;  color: #fff;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
  vertical-align: top;
  padding: 4px 2px;
}
.leader_tekisei .brown{
  color: #ffffff;
  font-size: 1.2rem;
  background: #ffffff38;
  padding: 6px;
  border-radius: 5px;
  font-weight: bold;
  text-shadow: #2e6591 1px 0 0, #2e6591 -1px 0 0, #2e6591 0 -1px 0, #2e6591 0 1px 0, #2e6591 1px 1px 0, #2e6591 -1px 1px 0, #2e6591 1px -1px 0, #2e6591 -1px -1px 0, #2e6591 1px 1px 0, #2e6591 -1px 1px 0, #2e6591 1px -1px 0, #2e6591 -1px -1px 0, #2e6591 1px 1px 0, #2e6591 -1px 1px 0, #2e6591 1px -1px 0, #2e6591 -1px -1px 0, #2e6591 1px 1px 0, #2e6591 -1px 1px 0, #2e6591 1px -1px 0, #2e6591 -1px -1px 0;}
.leader_tekisei table{
  background:transparent;
  margin-bottom: 0;
}
.leader_tekisei table td{
  /* border: 1px solid #ccc;
  background-color: #fffc; */
  border: 1px solid #86c1d5;
  background: #ffffff9c;
}
.leader_tekisei table th{
  /* background-color: #48a84cab;
  border: 1px solid #608e65;
  color: #fff; */
/* 
  background-color: #fffaba;
  border: 1px solid #608e65;
  color: #1e1e1e;
  text-shadow: 1px 1px #fff; */

  background-color: #0c4c7f57;
  border: 1px solid #608e65;
  color: #ffffff;
  text-shadow: 1px 1px #2e6591;
}
.leader_tekisei .l_item{
  margin-top: 6px;
  display:inline-block;
  width: calc( 100% / 5);
  max-width: 66px;
  text-align: center;
  position: relative;
  min-height: 66px;
}
.op5{
  opacity: 0.3;
}

.leader_tekisei .l_item .l_st{
  position: absolute;
  bottom: 2px;
  text-align: center;
  width: 92%;
  left: 4%;
  color: #6a6a7a;
  font-weight: 500;
  background: #ffffff;
  border-radius: 7px;
  font-size: 1.1rem;
  line-height: 1.2;
  padding: 1px 0;
}
.leader_tekisei .l_item .doumei{
  position: absolute;
  bottom: 19px;
  color: red;
  font-weight: bold;
  right: 3px;
  background: #ffffffe3;
  border-radius: 10px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  display: inline-block;
  text-align: center;
}
.leader_tekisei .doumei_hosoku{
  text-align: right;
  font-weight: bold;
  margin: 4px 0 0 0;
  color: #fff;
  font-size: 1.1rem;
  border-radius: 6px;
  padding: 4px 12px 4px 0;
}


.leader_tekisei {
  padding: 8px;
  background: #ffc14f;
  padding-top: 10px;
  position: relative;
  background: linear-gradient( 135deg , #5b875c 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #5b875c 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #5b875c 25%, transparent 25%), linear-gradient( 45deg , #5b875c 25%, transparent 25%);
  background-color: #f5f5f5;
  background-size: 2em 2em;
  background-color: #4a824c;
  background-size: 2em 2em;
  /* background-color: #eec13b; */
  background: linear-gradient( 135deg , #7f8e9a 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #7f8e9a 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #7f8e9a 25%, transparent 25%), linear-gradient( 45deg , #7f8e9a 25%, transparent 25%);
  background-color: #76848f;
  /* background: linear-gradient( 135deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #f0f0f0 25%, transparent 25%), linear-gradient( 45deg , #f0f0f0 25%, transparent 25%);
  background-color: #f5f5f5;
  border: 2px solid #c4cddb; */
  background-size: 2em 2em;

}

.leader_tekisei .brown {
  color: #ffffff;
  margin-top: 7px;
  font-size: 1.2rem;
  background: rgb(0 0 0 / 33%);
  padding: 6px;
  border-radius: 5px;
  font-weight: bold;
  text-shadow: none;
}
.leader_tekisei .brown img{
  border: 2px solid #4a5965;
  background: #000;
  margin-right: 6px;
}

.leader_tekisei table th{
  background-color: rgb(82 180 214 / 79%) !important;
  border: 1px solid #1b849a;
  color: #ffffff;
  text-shadow: 1px 1px #2e6591;
}

.leader_tekisei table td {
  border: 1px solid #b4c7cf;
  background: rgb(255 255 255 / 90%);
}

/* .leader_tekisei .leader_tekisei_title{
  text-shadow: #5d4612 1px 0 0, #5d4612 -1px 0 0, #5d4612 0 -1px 0, #5d4612 0 1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0, #5d4612 1px 1px 0, #5d4612 -1px 1px 0, #5d4612 1px -1px 0, #5d4612 -1px -1px 0;
  color: #ffd079;
} */

details.text_mode{
  text-align: right;
  border: none;
  box-shadow: none;
  margin: 0;
}

.new_chara{
  background-color: #fff;
}
.new_chara caption{
  font-size: 1.4rem;
  color: #623d06;
  background: #f5f1be;
  padding: 5px 0 2px 0px;
  font-weight: bold;
  line-height: 1;
  border-top: 1px solid #e1d3b3;
  border-right: 1px solid #e1d3b3;
  border-left: 1px solid #e1d3b3;
  text-align: left;
}

.new_chara caption .db1{
  width: 25px;
  height: 26px;
  background-repeat: no-repeat;
  background-size: 22px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.new_chara a{
  display: inline-block;
  position: relative;
  margin: 1px;
}
.new_chara a span{
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 1;
  background: #ffffffcc;
  padding: 2px;
  color: purple;
  font-size: 1.0rem;
}

.fukidashi{
  position:relative;
  background: #fff3d0;
  padding: 10px 4px;
  text-align: center;
  color: #7c5926;
  font-weight: bold;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin-bottom: 5px;
  margin-top: 20px;
}


.fukidashi table{
  margin: 0;
}

.fukidashi td,.fukidashi th{
  border: none;
}

.leader_tekisei .leader_result{
  margin-bottom: 40px;
}

.leader_tekisei .circle{
  display: inline-block;
  background: #fff;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 2px;
  font-weight: bold;
  color: #555;
  box-shadow: 0 0 3px #595959;
}

.leader_tekisei .leader_result th{
  border: 1px solid #38aec7;
}

.leader_tekisei .leader_result td{
  border: 1px solid #b9c6c8;
  background: rgb(246 252 255 / 88%);
}

.leader_tekisei table.leader_result  th{
  background-color: rgb(81 143 200 / 75%) !important;
  border: 1px solid #6a9bc9;
}

.leader_tekisei table.leader_result .th_col th{
  background: #ffe2e2 !important;
  text-shadow: none;
  color: #d16868;
  border-color: #eec1c1;
}


.leader_result .th_col td{
  font-size: 1.4rem;
}
.leader_tekisei.bg_gray{
  background: linear-gradient( 135deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #f0f0f0 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #f0f0f0 25%, transparent 25%), linear-gradient( 45deg , #f0f0f0 25%, transparent 25%);
  background-color: #f5f5f5;
  background-size: 2em 2em;
}

/* .leader_result{
  margin-bottom: 40px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), 0 2px 2px rgb(0 0 0 / 19%);
  background: linear-gradient( 135deg , #7f8e9a 25%, transparent 25%) -50px 0, linear-gradient( 225deg , #7f8e9a 25%, transparent 25%) -50px 0, linear-gradient( 315deg , #7f8e9a 25%, transparent 25%), linear-gradient( 45deg , #7f8e9a 25%, transparent 25%);
  background-color: #76848f;
  background-size: 2em 2em;
}
.leader_result th{
  background-color: rgb(141 243 255 / 33%);
  border-color: #b4c7cf;
  color: #fff;
  text-shadow: 1px 1px #2e6591;
}
.leader_result td{
  border-color: #c7daf4;
  background: #f6fcff;
  font-size: 1.4rem;
  padding: 4px;
}
.leader_result .th_col th{
  background: rgb(144 204 225 / 62%);
} */
.select_chara_modal .btn{
  display: block;
  font-size: 1.5rem;
  width: 50%;
  padding: 6px 10px;
  margin: 0 auto 12px auto;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background: #4caf50;
  border: 0;
  border-radius: 28px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), 0 2px 2px rgb(0 0 0 / 19%);
  max-width: 520px;
  margin: 4px auto 10px;
}
#result_select_chara img{
  margin: 6px 0 2px 0;
  padding: 2px;
  box-sizing: border-box;
}
.leader_tag{
  line-height: 1;
  display: inline-block;
  font-size: 1.0rem;
  padding: 0 1px 2px -3px;
  border-radius: 8px;
  position: absolute;
  bottom: -12px;
  left: 5px;
  content: "　";
  position: absolute;
  top: -12px;
  left: -10px;
  width: 42px;
  padding: 0px 4px;
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/03/leader.png);
  background-size: contain;
  background-repeat: no-repeat;
}

h3 .kidama::before{
  content: "　";
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: 20px 20px;
  width: 20px;
  display: inline-block;
  margin-right: 4px;
  margin-left: 2px;
}

.ki_blue::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/1ca69c4be0f905492520aeda8f5df847.png);
}
.ki_red::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/489378dc9f613bf0d741bd39907bf3e4.png);
}
.ki_green::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/c8f0492c8800e95d8137af76d1ff1fdb.png);
}
.ki_orange::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/b990b42b772272d90b20e718d571897e.png);
}
.ki_purple::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/34e66c72bf77a9b5e485df337babb819.png);
}
.ki_rainbow::before{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2018/09/2cc0b94dd8b97389163e15bdf5fc499f.png);
}

/* もっと見る */
.ptdetail-wrap{
  position: relative;
}
.ptdetail-btn {
  display: block;
  margin: 0 auto;
  width: 120px;
  text-align: center;
  font-size: 1.4rem;
  color: #bb5151;
  position: absolute;
  bottom: 5px;
  z-index: 10;
  left: calc(50% - 60px);
}
.ptdetail-item {
  position: relative;
  overflow: hidden;
  height: 160px; /*隠した状態の高さ*/
}
.ptdetail-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.ptdetail-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.ptdetail-trigger:checked + .ptdetail-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.ptdetail-trigger:checked ~ .ptdetail-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.ptdetail-trigger:checked ~ .ptdetail-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.enemy_table {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
 
.enemy_table table {
  width: 90%;
  margin: 5px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.enemy_gaiyo{
  table-layout: auto;
  border: 2px solid #b8c2c0;;
}
.enemy_gaiyo td, .enemy_gaiyo th{
  border: 1px solid #d5dfd6;
}
.enemy_gaiyo tbody{
  border-top: 3px double #ccc;
}

.enemy_gaiyo tbody:nth-child(odd) th {
  background: #f8f6ff;
}
.enemy_gaiyo tbody:nth-child(odd) td {
  background: #fff;
}

.enemy_gaiyo_h{
  background: #edeff5;
  color: #5b5555;
  padding: 4px;
  text-align: left;
  padding-left: 6px;
}

.enemy_gaiyo_h span{
  font-size: 144%;
  padding-right: 2px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #9f9f9f;
  text-align: center;
  color: #fff;
  line-height: 1;
  border-radius: 4px;
  line-height: 22px;
  margin-right: 5px;
  vertical-align: bottom;
}

.enemy_gaiyo_r{

}
.enemy_gaiyo_r span{
  color: #999;
  width: 24px;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  border-radius: 4px;
  font-size: 1.4rem;
}

.new_anime::after {
  content: "NEW";
  background: #ff0000;
  border-radius: 3px;
  color: #ffffff;
  /* font-weight: bold; */
  font-size: 10px;
  letter-spacing: -1px;
  line-height: 1;
  vertical-align: middle;
  margin: 2px;
  padding: 1px 2px;
  animation: newAnime 1.4s infinite alternate;
}
@keyframes newAnime {
 0% { color      : #ff0000; 
      background : #ffffff;
    }
100% { color      : #ffffff;
      background : #ff0000;
    }
}

#gimmick_point{
  position: sticky;
  top: 0;
  padding: 7px;
  margin-bottom: 5px;
  background: #fff;
  border-bottom: 1px dashed #887;
  text-align: center;
}
#gimmick_point span{
  font-size: 18px;
  font-weight: bold;
  color: #ff5722;
}
.burst_gimmick{
  margin-bottom: 6px;
}

.preview_gimmick td{
  padding: 4px 6px;
}
.preview_gimmick .double-border-top{
  border-top: 4px double #ddd;
}



.gimmick_list_border{
  border: 1px solid;
  padding: 6px;
}

.gimmick_h {
  background: #3a3131;
  padding: 5px 10px;
  margin-bottom: 0;
}
.gimmick_h span{
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #f88b20 20%, #ffe435 89%);
  background: -webkit-linear-gradient(90deg, #f88b20 20%, #ffe435 89%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gimmick_label{
  font-size: 1.4rem;
  border-bottom: 2px solid #7e6146;
  margin: 6px 2px;
  padding: 6px 2px 2px 3px;
  color: #472e17;
  font-weight: bold;
}
.rich_btn{
  -webkit-appearance: button;
  appearance: button;
  border: 1px solid #888;
  padding: 4px;
  border-radius: 6px;
  border: none;
  border-bottom: 3px solid #5797c9;
  background: #67a9de;
  color: #fff;
  text-shadow: #163146 1px 1px 0px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  margin: 6px 1px;
  font-size: 1.3rem;
}

/* トグルボタン */
.toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle_label {
  width: 36px;
  height: 20px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
}

.toggle_label:after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  left: 2px;
  top: 1px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}

.toggle_input:checked + .toggle_label {
  background-color: #7d93e4;
}

.toggle_input:checked + .toggle_label:after {
  left: 18px;
}

.toggle_button , .toggle_open{
  position: relative;
  width: 36px;
  height: 20px;
}



.op_skill_result{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.op_skill_result li{
  display: inline-block;
  font-size: 1.1rem;
  background: #4b91b2;
  color: #fffdef;
  text-align: center;
  line-height: 1;
  margin: 1px !important;
  padding: 4px 5px;
  border-radius: 3px;
  min-width: 58px;
}

.op_main_title{
  display: flex;
  padding: 2px;
  border-bottom: 2px solid #f97070;
}
.op_main_title_label{
  flex-grow: 1;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 3px 6px;
}
.op_main_title .filter_clear{
  height: 24px;
  text-align: center;
  display: block;
  line-height: 24px;
  background-color: #f97070;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0px 8px 2px 8px;
  border-radius: 20px;
  font-weight: bold;
  margin: 3px 3px 0 0;
}

.op_item{
  padding: 0;
  border-radius: 2px;
  background: #fff;
  margin-top: 2px;
  border: 1px solid #d1c1c1;
}
.op_item table td{
  padding: 2px;
}

.op_item_label{
  color: #5b4747;
  background: #fbfcf2;
  font-size: 1.3rem;
  padding: 8px 6px 6px 0;
  line-height: 1;
  font-weight: bold;
  border-bottom: 1px solid #e4e8bb;
}

.op_item details{
  margin: 0;
  padding: 0;
}
.op_item summary {
  /* background: #fbfcf2; */
  padding: 4px 6px;
}

.op_item summary .op_item_label{
  display: inline;
  border-bottom: none;
  background: none;
}

.op_item_label_sub{
  font-size: 1.2rem;
  padding: 5px 0px 4px 4px;
  line-height: 1;
  margin: 0 0px;
  color: #612525;
  border-left: 3px solid #807070;
  margin-left: 6px;
  margin-right: 6px;
}


.op_filter{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 4px;
}
.op_filter li{
  width: calc(100% / 4);
  padding: 3px 2px;
}
.op_filter.op_item_5 li{
  width: calc(100% / 5);
}
.op_filter.op_item_3 li{
  width: calc(100% / 3);
}
.op_filter.op_item_2 li{
  width: calc(100% / 2);
}

.op_filter li input{
  display: none;
}
.op_filter li label{
  text-align: center;
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 24px;
  background: #f3f3f3;
  color: #999;
  font-weight: bold;
}




.op_input_search{
  padding: 1px;
  display: flex;
  align-items: center;
  background: #f3f3f3;
  align-items: stretch;
  margin-top: 10px;
}
.op_input_search input{
  border-color: #fff;
  display: block;
  width: calc(98% - 40px);
  height: auto;
  padding: 10px;
  margin: 4px auto 4px auto;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #fff;
  border-radius: 4px;
}
.op_input_search .cancel{
  width: 40px;
  height: 100%;
  align-items: stretch;
  display: inline-block;
  font-size: 3rem;
  color: rgb(170, 170, 170);
  text-align: center;
}




.op_filter li input:checked + label{
  background: #7badc2;
  color: #fff;
  font-weight: bold;
}
.op_filter.select_blue li input:checked + label{
  background: #5968d0; 
  border: 1px solid #3d4cb3;
  color: #fff;
}

.op_filter.select_purple li input:checked + label{
  background: #884898; 
  border: 1px solid #884898;
  color: #fff;
}

.op_filter.select_red li input:checked + label{
  background: #d05959; 
  border: 1px solid #ae3e3e;
  color: #fff;
}

.op_filter_icon li{
  padding: 7px 2px;
}



.op_filter_icon li label{
  position: relative;
  height: 24px;
  border: none;
  filter: grayscale(0.7);
  opacity: 0.4;
}

.op_filter_icon li input:checked + label{
  border: none !important;
  background: #eaf3f7;
  /* 7badc2 */
  filter: none;
  opacity: 1;
}

.op_filter_icon li label div{
  position: absolute;
  width: 100%;
  bottom: -5px;
}

.op_filter.op_radio li{
  padding: 0;
}
.op_filter.op_radio li label{
  border-radius: 0;
}
/* .op_filter.op_radio li:first-child label{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.op_filter.op_radio li:last-child label{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
} */


.op_list{
  display: flex;
  justify-content: flex-end;
  padding: 6px 6px 4px 6px;
  border-top: 1px dotted #ddd;
  margin-top: 5px;
}
.op_list .op_label{
  margin-right: auto;
  font-size: 1.2rem;
  color: #525252;
  font-weight: bold;
}

.border-none{
  border: none;
  margin: 0;
}
.border-none tr ,.border-none td , .border-none th{
  border: none !important;
  padding: 2px;
}

.skill_tag{
  font-size: 1.1rem;
  display: inline-block;
  border: 1px solid #c8c4c4;
  padding: 3px 6px;
  line-height: 1;
  border-radius: 12px;
  margin: 0 3px 2px 0;
}
.skill_tag_area{
  margin-left: -2px;
  color: #676161;
  border-top: 1px dotted #ccc;
  margin-top: 0px;
  padding-top: 2px;
}



/* PTボックス */
.pt_box_list{
  margin: 0 -10px;
  padding: 6px 8px;
  background: #eff3f4;
  box-shadow: 0 0 6px #e7e7e7;
  border-radius: 5px;
}

.pt_box{
  padding: 10px 10px 0 10px;
  background: #fff;
  margin-bottom: 12px;
  border: 1px solid #d7d2e3;
  border-radius: 6px;
  box-shadow: 0 0 4px #ccc;
}

.pt_box_nav{
  margin: 10px 0 16px 0;
  display: table;
  width: 100%;
  text-align: center;
  padding: 9px 0;
  border-bottom: 1px dashed #ccc;
  border-top: 1px solid #eee;
}
.pt_box_header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pt_box_date, .pt_box_count{
  font-size:1.1rem;
  color: #818182;
  display:block;
}

.pt_box .pt_list{
  list-style:none;
  padding:0;
  margin: 14px auto 6px auto;
  display:block;
  max-width: 500px;
}


.pt_box .pt_list li{
  display:inline-block;
  padding:0;
  text-align:center;
  line-height: 1;
  vertical-align: top;
  position: relative;
  width: calc(100% / 7);
}

.pt_box .pt_list li img{
  width: 100%;
  height:auto;
  min-height:auto;
  border-radius: 6px;
  vertical-align: middle;
  padding: 2px;
}


.pt_box .pt_list li:first-child::after , .pt_box .pt_list li:last-child::after{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/03/leader.png);
  content: " ";
  display: block;
  width: 60px;
  height: 28px;
  top: -10px;
  left: -12px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 60px 30px;
}
.pt_box .pt_list li:last-child::after{
  background-image: url(https://dokkan.game-db.org/wp-content/uploads/2017/11/friend.png);
}

.pt_box_link{
  font-size:1.2rem;
  color: #818182;
  display:block;
}
.pt_box_link span{
  font-size:1.4rem;
  font-weight:bold;
  color: #39a13d;
}
.pt_box .link_text{
  font-weight: bold;
  padding: 8px 10px 0px 0;
  margin: 0;
}
.pt_box_url{
  display: block;
  padding: 10px;
  margin: 12px auto 0 auto;
  width: 98%;
  font-size: 1.3rem;
  background: #fff;
  color: #1270c3;
  text-align: center;
  position: relative;
  word-break: keep-all;
  line-height: 1.5;
  text-decoration: none;
  font-weight: bold;
  border-top: 1px dotted #9a9090;
}
.pt_box_url::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f054";
  position: absolute;
  font-weight: normal;
  top: 53%;
  margin-top: -8px;
  right: 10px;
  font-size: 12px;
}

.pt_box .clear_event{
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
}

.pt_box .pt_user .clear_event{
  border-bottom: none;
}
.pt_user p{
  margin-top: 4px;
  border-top: 1px dotted #e8e3e3;
  padding: 4px 10px;
}

.pt_box .clear_event span{
  background: #8b8e9e;
  color: #fff;
  font-weight: bold;
  padding: 2px 4px;
  display: block;
  width: 70px;
  text-align: center;
}
.pt_box .clear_event div{
  font-size: 1.2rem;
  font-weight: bold;
  width: calc(100% - 70px);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 8px;
}
.pt_box .official_mark {
  background: #4caf50;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  margin-right: 2px;
}

.pt_box .official_mark::before {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 9px;
  height: 6px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(-45deg);
}

.vac{
  vertical-align: middle;
  display: inline-block;
}


/* 展開タグ */
.custom_detail{
  max-width: 500px;
  margin-bottom: 20px;
  border: 2px solid #d6dde3;
  border-radius: 5px;
}

.custom_detail summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.custom_detail summary::-webkit-details-marker {
  display: none;
}

.custom_detail summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-bottom: 2px solid #333333b3;
  border-right: 2px solid #333333b3;
  content: '';
  transition: transform .3s;
}

.custom_detail[open] summary::after {
  transform: rotate(225deg);
}

.custom_detail p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 1.2em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.custom_detail.nopd p{
  padding: 2px 6px;
}

.custom_detail[open] p {
  transform: none;
  opacity: 1;
}




.gold_equip{
  border-radius: 5px;
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #ecd06f 70%, #DAAF08 85%, #B67B03 90% 100%);  color: #fff;
  border-radius: 5px;
}

.silver_equip{
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #bcb5b5 70%, #9E9E9E 85%, #757575 90% 100%);
  color: #fff;
  border-radius: 5px;
}

.bronze_equip{
  color: #fff;
  background: linear-gradient(45deg, #B67B03 0%, #ce8a20 45%, #cb8e1f 70%, #d58126 85%, #B67B03 90% 100%);
  border-radius: 5px;
}


.tool_log_container{
  position:relative;
}
.tool_log_container .tool_log_ranking{
    position: absolute;
    top: -2px;
    left: -4px;
    width: 20px;
    height: 20px;
    background: orange;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}
.tool_log_subitem{
border: 2px solid #777;
}

.tool_log_label{
display: block;;
display: flex;
align-items: center;
}

.tool_charalabel{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: keep-all;
line-height: 1.5;
font-size: 1.3rem;
font-weight: bold;

}

.tool_log_label > span:first-child{
width: 60px;
display: block;
}
.tool_log_label > span:nth-child(2){
width: calc(100% - 60px);
display: block;
padding-left: 10px;
}

.tool_log_hosoku{
font-size: 1.1rem;
text-align: right;
display: block;
margin-bottom: 10px;
}

.tool_log_result{
display:block; 
height: 16px;
background-color: #ece030;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}

.tool_log_subitem{
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.tool_log_subitem li{
padding: 4px 6px;
width : 100%;
border-bottom: 1px dotted #ddd;;
}

.tool_log_subitem li:first-child{
width : 100%;
}

.tool_log_subitem li:nth-child(2){
width : 100%;
}




.party_use_rate .hosoku_down{
position: relative;
z-index: 2;
color: #fff;
}

.party_use_rate::before  {
content: ' ';
width: 100%;
height: 100%;
background: #2827277a;
position: absolute;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index:1;
}

.tool_log_subitem_table{
display : flex;
flex-wrap : wrap;
list-style: none;
padding: 0;
}
.tool_log_subitem_table li{
width: calc(100% / 6);
min-width: 58px;
text-align: center;
padding: 4px 0;
z-index: 2;
}

.tool_log_container .chara_icon.big {
box-shadow: 1px 1px 8px #fff;
}
.tool_charalabel {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: keep-all;
  line-height: 1.5;
  font-size: 1.3rem;
  font-weight: bold;
  /* box-shadow: 1px 1px 10px; */
  text-shadow: 1px 0px 6px #000;
}
.tool_log_subitem li{
  border-bottom : 1px solid #aaa;
  z-index:2;
}

.event_relate_title{
  padding: 4px 10px;
  margin: 0 0 0 0;
  border-color: #d4bf91;
  background-color: #f9f8ec;
  color: #452a44;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #d9c9ac;

}
.event_relate_link{
  margin: 6px 0 0 0;
  border: 1px solid #d9c9ac;
}

.event_relate_link ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  align-items: stretch;
}
.event_relate_link ul li{
  width: calc(100% / 4);
  text-align: center;
  padding: 2px;
}
.event_relate_link ul li > div{
  background: #f7f9ff;
  height: 100%;
  border: 1px solid #c1d9e4;
}

.info_box{
  border: 1px solid #bcc0cb;
  border-radius: 5px;
}

.info_box_title{
  text-align: center;
  font-weight: bold;
  background: #8da9c0;
  color: #fff;
  padding: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.info_box_contents{
  list-style-type: none;
  counter-reset: number;
  margin: 0;
  padding: 0 7px;
  color: #5c5959;
  font-size: 13px;
  border: none;
  list-style-type: none;
}

.info_box_contents li{
  line-height: 1.8;
  position: relative;
  padding: 6px 0;
  padding-left: 22px;
  border-bottom: dashed 1px #ccc;
}

.info_box_label{
  display: inline-block;
  min-width: 70%;
  padding: 0;
  margin-bottom: 2px;
  color: #509452;
}
.info_box_label::before{
  content: "▼";
}


.info_box_contents li:before{
  display: inline-block;
  position: absolute;
  content: counter(number);
  counter-increment: number;
  top: 8px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}

.info_box_contents.check_type li:before{
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  /* background: #eee;
  color: #009688; */
  background: #30ba79;
  color: #eee;
}



span.ps_img{
  position: relative;
  margin-right: 18px;
}
span.ps_img::after{
  background-size: 16px 12px;
  width: 16px;
  height: 12px;
  background-position: bottom;
  display: inline-table;
  content: "";
  position: absolute;
  bottom: 1px;
  filter: contrast(0.8);
}
span.up_g::after {
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/passive_icon/passive_skill_dialog_arrow01.png);
}
span.down_r::after{
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/passive_icon/passive_skill_dialog_arrow02.png);
}
span.down_y::after{
  background-image: url(https://dokkan.game-db.org/db/wp-content/themes/db-child/img/passive_icon/passive_skill_dialog_arrow03.png);
}


.icon_ps{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 27px;
  text-align: center;
}
.icon_ps span{
  font-size: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.icon_ps img{
  vertical-align: top;
}
.ps_detail{
  padding: 2px 1px 6px 6px;
}
.ps_detail.leak{
  padding : 0 1px 3px 0px
}

.ps_detail.leak .ps_label{
  font-size: 1.2rem !important;
  margin-top: 5px !important;
}

.ps_detail .ps_label{
  font-size: 1.3rem;
  font-weight: bold;
  color: #d8872d;
  background: #f4f4f4;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.6;
  margin-top: 8px;
}

.ps_detail .ps_label:first-child{
  margin-top: 0;
}

.ps_detail ul{
  padding-left: 12px;
  list-style: none;
}
.ps_detail li{
  padding: 3px 4px 0px 0;
  border-bottom: 1px dotted #eee;
  font-size: 1.3rem;
}
.ps_detail.leak li{
  padding: 4px 4px 0px 0;
  font-size: 1.2rem;
}

.ps_detail ul li:last-child{
  border-bottom: none;
}

.ps_detail li img{
  vertical-align: bottom;
  margin: 1px;
}

.ps_detail li img.p_eff{
  vertical-align: middle;
  margin-left: -4px;
}

.ps_detail li::before{
  position: relative;
  top: -3px;
  left: -5px;
  display: inline-block;
  width: 3px;
  height: 3px;
  content: '';
  border-radius: 100%;
  background: #605959;
}



.tabs_v2 {
  display: flex;
  cursor: pointer;
  margin-top: 10px;
}
.tab_v2 {
  padding: 4px;
  background: #ddd;
  transition: background 0.3s;
}
.tab_v2 span{
  pointer-events: none;
  display: block;
  background: #eee;
  color: #999;
  text-align: center;
  border-radius: 4px;
  padding: 4px 4px;
}

.tab_v2.active span {
  background: #5b98eb;
  color: #fff;
  font-weight: bold;
}

.tab_v2_content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  background: #fff;
  margin-bottom: 10px;
}
.tab_v2_content.active {
  display: block;
  opacity: 1;
}

.enemy_detail .etag{
  padding: 4px 6px;
  font-size: 1.2rem;
}
.enemy_detail ul{
  padding-left: 18px;
}
.enemy_detail ul.category_tag{
  padding-left: 0;
}

.territory_desc{
  border: 1px dashed red;
  margin: 7px;
  padding: 4px 2px;
  background: #fff8f8;
}

.enemy_list{
  display: flex;
  align-items: center;
  font-size: 1.0rem;
  margin-bottom: 6px;
  padding: 2px 2px;
  position: relative;
  background: #f0f0f0;
  border-radius: 4px;
}
.enemy_list span{
  padding:1px 3px;
}

.enemy_list img{
  max-width: 44px;
}
.enemy_list_round{
  display: inline-block;
  font-size: 13px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: 11px;
  font-weight: bold;
  background: #d7417b;
  color: #fff;
}
/* .enemy_list::after {
  content: "▶";
  margin-left: 0px;
  position: absolute;
  right: -12px;
} */

td .enemy_list:last-child{
  /* border: none; */
  margin-bottom: 0;
}
.enemy_icon{
  margin: 1px 7px 1px 2px;
  position: relative;
  min-width: 49px;
}
.enemy_icon span{
  padding: 1px 3px;
  position: absolute;
  bottom: 0;
  right: -13px;
}

.block_num{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #4caf50;
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  border-radius: 4px;
  margin-right: 4px;
}
.block_num.black_num{
  background: #82859a;
}

.gacha_simu_btn{
  font-size: 1.3rem;
  display: inline-block;
  width: 80%;
  color: #fff !important;
  padding: 6px;
  font-weight: bold;
  text-align: center;
  margin: 4px auto;
  border-radius: 4px;
  background: radial-gradient(circle, #decb6b 10%, #d1b91a 50%, #bc9b10 90%);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px #a87f43;
}
.gacha_simu_btn svg{
  vertical-align: text-bottom;
}

.generate_table td{
  padding-top: 6px;
}

.mokuji_start{
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 24px;
    background: tomato;
    color: #fff;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;;
}

.contact_post{
  background-color: #34b792;
  border: 1px solid #34b792;
  color: #fff;
  display: block;
  width: 80%;
  padding: 10px;
  margin: 5px auto;
  font-size: 16px;
  cursor:pointer;
}


.table_blue th{
  background: #78c2c7;
  color: #fff;
  font-size: 1.3rem;
}
.table_blue th.main_th{
  background: #4d91c1;
  font-size: 1.4rem;
}
.table_blue td{
  border-color: #dac3c3;
  font-size: 1.3rem;
}
.table_blue tr:nth-child(even) td {
  background-color: #fffafa;
}

.table_red th{
  background: #cc81a8;
  color: #fff;
}
.table_red th.main_th{
  background: #c14d5f;
  font-size: 1.4rem;
}
.table_red td{
  border-color: #dac3c3;
}
.table_red tr:nth-child(even) td {
  background-color: #fffafa;
}

.stage_header{
  font-weight: bold;
  color:#fff;
  margin-bottom: 4px;
  padding: 4px;
}
.stage_header .stage_no{
  background: #d7ae5e;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  text-shadow: none;
  font-size: 86%;
}

.chara_table ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
}
.chara_table th{
  font-size: 1.4rem;
}

.chara_table ul li{
  width: calc(100% / 3);
  padding: 2px 4px;
  text-align: center;
}

.chara_table.col4 ul li{
  width: calc(100% / 4);
}

.chara_table ul li .charaname{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最大2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}
.chara_table .icon_area{
  position: relative;
  margin-bottom: 6px;
}
.chara_table .icon_area{
  position: relative;
}
.chara_table .icon_area .zawake_img{
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
}






.chara_list_type , .chara_slide{
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}
.chara_list_type{
  border: 1px solid #aa9a83;
}
.chara_list_type li{
  padding: 0;
}

.chara_list_type .plist li{
  padding: 3px 2px 3px 0;
  line-height: 1.4;
  border-bottom: 1px dashed #ccc;
}
.chara_list_type .plist li:last-child{
  border-bottom: none;
}

.chara_list_type > li{
  margin: 0 !important;
}
.chara_list_type .chara_item{
  display: table;
  width: 100%;
  border-bottom: 1px solid #d0c5a5;
  height: 100%;
  min-height: 160px;
}

.chara_list_type > li:last-child .chara_item{
  border-bottom: none;
}
.chara_list_type .chara_img{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 90px;
  border-right: 1px solid #ddd;
  padding: 8px 6px;
  background: #fffef5;
  
}
.chara_list_type .chara_content{
  display: table-cell;
  width: calc(100% - 100px);
  vertical-align: middle;
  padding: 8px 4px 4px 4px;
}
.chara_slide{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  width: 100%;
  align-items: stretch;
  scroll-snap-type: x mandatory;
}
.chara_slide::-webkit-scrollbar {  
  display: none;
}
.chara_slide li{
  display: inline-block;
  min-width: 100%;
  scroll-snap-align: end;
  min-height: 100%;
}
.chara_list_type .change_chara{
  position: absolute;
  bottom: 7px;
  left: 6px;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  width: 78px;
  padding: 3px 0;
  border: 1px solid #d0cece;
  color: #8a784c;
  border-radius: 19px;
  box-sizing: content-box;
  background: linear-gradient(180deg,#fefee7,#e3dfc4);
  text-shadow: 0 1px #fff;
}

.plist_wrap {
  position: relative;
  max-height: 150px;
  overflow: hidden;
}
.plist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plist_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255 254 254) 100%);
}
.plist_more {
  all: unset;
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 6px;
  right: 12px;
  width: 40%;
  min-width: 100px;
  padding: 6px 14px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  border-radius: 20px;
  color: #FFF;
  font-weight: 600;
  background: #4caf50;
  max-width: 120px;
  transition: 0.3s ease-in-out;
  justify-content: center;
}
.plist_more svg{
  color: #fff;
  margin-right: 6px;
}


.plist_wrap.active {
  max-height: none;
}
.plist_wrap.active .plist_overlay {
  display: none;
}
.plist_wrap.active .plist_more {
  position: relative;
  margin-top: 5px;
}
.plist_wrap .plist ul{
  list-style: none;
  padding-left: 7px;
}