@charset "UTF-8";

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

@keyframes spinOpen {
	0%   { transform: rotate(0); }
	100% { transform: rotate(180deg); }
}

@keyframes spinClose {
	0%   { transform: rotate(180deg); }
	100% { transform: rotate(0); }
}

.non-functional {
	filter: grayscale(100%);
	opacity: 0.30;
}

.non-functional a {
	cursor: default !important;
	text-decoration: none !important;
}

/* L1 ######################################## Twitterステータス ######################################## */

#twitter-status {
	position: relative;
	z-index: 1;
	margin: 2px;
	padding: 0.5em 0;
	text-align: center;
	background: #336699;
	border: 1px solid #ffffff;
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
}

#twitter-status img {
	position: relative;
	top: -0.05em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

#twitter-status a {
	color: #ffffff !important;
}

/* L1 ######################################## 検索項目 ######################################## */

#menu h2 {
	display: none;
}

/* L2 **************************************** 共通項目 **************************************** */

/* L3 ======================================== 枠 ======================================== */

div.search {
	position: relative;
	z-index: 1;
	margin: 2px;
}

div.search > div.wrapper {
	overflow: hidden;
	height: 0;
	transition: height 0.5s ease-in-out;
}

/* L3 ======================================== 見出し ======================================== */

div.search > h3 {
	overflow: hidden;
	cursor: pointer;
	position: relative;
	padding: 0.2em 35px 0.4em 0.5em;
	font-size: 2.8rem;
	font-family: "Ubuntu Condensed", sans-serif;
	font-weight: normal;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid rgba(0, 128, 255, 1);
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
}
div.search > h3::before {
	content: "\f13a";
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 26px;
	height: 25px;
	font-family: "FontAwesome";
	font-size: 2.4rem;
	line-height: 1.0;
	text-indent: 3px;
}
div.search > h3::after {
	overflow: hidden;
	display: block;
	margin-left: 2.4em;
	padding-right: 35px;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.2rem;
}

div.search > h3 i {
	position: relative;
	top: -2px;
	margin-right: 3px;
	font-size: 75%;
}

div.search > h3.closed::before {
	animation: spinClose 0.3s linear forwards;
}
div.search > h3.opened::before {
	animation: spinOpen 0.3s linear forwards;
}

/* L3 ======================================== ラッパー ======================================== */

div.search > div.wrapper {
	margin: 0 2%;
	text-align: center;
}

/* L3 ======================================== 検索条件（開始） ======================================== */

div.search div.group {
	position: relative;
	width: 100%;
	margin: 2px 0;
	line-height: 1.0;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #444444;
	box-sizing: border-box;
}
div.search div.group::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 2px;
	z-index: 10;
	width: 48px;
	height: 6px;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9));
	border-radius: 0 3px 3px 0;
}

div.search div.wrapper fieldset + div.group {
	margin-top: 2em;
}

div.search div.group h4 {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 0.8em 35px 0.8em 60px;
	font-weight: normal;
	text-align: left;
	line-height: 1.4;
	vertical-align: middle;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: #000000;
	background-image: linear-gradient(0deg, 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: 4px 4px;
	box-sizing: border-box;
}
div.search div.group h4::before {
	position: relative;
	color: #ffffff;
	font-family: "FontAwesome";
	margin-right: 0.5em;
}
#quick-search div.group h4::before {
	content: "\f0c1";
}
#various div.group h4::before {
	content: "\f00a";
}
#creator div.group h4::before {
	content: "\f007";
}
#leader-skill div.group h4::before {
	content: "\f004";
}
#divers-skill div.group h4::before {
	content: "\f005";
}
#od-skill div.group h4::before {
	content: "\f013";
}

#various div.group h4::after,
#creator div.group h4::after,
#leader-skill div.group h4::after,
#divers-skill div.group h4::after {
	content: "\f13a";
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 23px;
	height: 20px;
	color: #ffffff;
	font-family: "FontAwesome";
	font-size: 2.0rem;
	line-height: 1.0;
	text-indent: 3px;
}
#various div.group h4.closed::after,
#creator div.group h4.closed::after,
#leader-skill div.group h4.closed::after,
#divers-skill div.group h4.closed::after {
	animation: spinClose 0.3s linear forwards;
}
#various div.group h4.opened::after,
#creator div.group h4.opened::after,
#leader-skill div.group h4.opened::after,
#divers-skill div.group h4.opened::after {
	animation: spinOpen 0.3s linear forwards;
}

#various div.group h4,
#creator div.group h4,
#leader-skill div.group h4,
#divers-skill div.group h4 {
	cursor: pointer;
}

div.search div.group div.contents {
	position: relative;
	padding: 0 1em;
}

#various div.group div.contents,
#creator div.group div.contents,
#leader-skill div.group div.contents,
#divers-skill div.group div.contents {
	overflow: hidden;
	height: 0;
	transition: height 0.5s ease-in-out;
}

#various div.group div.contents div.inner,
#creator div.group div.contents div.inner,
#leader-skill div.group div.contents div.inner,
#divers-skill div.group div.contents div.inner {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

div.search div.group div.contents h5 {
	margin: 0.5em 0;
	padding: 0.4em 10px;
	font-weight: normal;
	text-align: left;
	background: #092642;
	border-radius: 15px;
	background-image: linear-gradient(45deg,  rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%), linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%);
	background-size: 8px 8px;
}
div.search div.group div.contents h5::before {
	content: "\f002";
	margin-right: 0.6em;
	font-family: "FontAwesome";
}

div.search ul.nav {
	position: relative;
	list-style-type: none;
	text-align: center;
	margin: 2px 0;
}

div.search ul.nav + ul.nav {
	margin-top: 6px;
}

div.search ul.nav li {
	cursor: pointer;
	display: inline-block;
	margin: 4px 2px;
	padding: 0.5em;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.5) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

div.search ul.nav li.no-data {
	cursor: default;
	filter: grayscale(100%);
	opacity: 0.30;
}

div.search ul.nav img {
	position: relative;
	top: -4px;
	height: 16px;
	margin-bottom: -6px;
}

/* L3 ======================================== fieldset デザイン ======================================== */

div.search form {
	margin-bottom: 3em;
}

div.search:nth-last-child(1) form {
	margin-bottom: 0;
}

fieldset {
	margin: 1em 0;
	padding: 0.1em 0 0.6em 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.5) linear-gradient(transparent, rgba(0, 128, 255, 0.1));
	border-radius: 5px;
}

fieldset legend {
	position: relative;
	top: -0.1em;
	margin-left: 1em;
	padding: 0.3em 1em 0.1em 1em;
	text-align: left;
	line-height: 1.0;
	border: 1px solid #cccccc;
	background: #222222;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
	background-size: 4px 4px;
	border-radius: 10px;
}

/* L4 ---------------------------------------- 属性選択 ---------------------------------------- */

fieldset.attr label span {
	cursor: pointer;
	display: block;
	padding: 0 8px;
}

fieldset.attr ul {
	text-align: center;
	font-size: 0;
}

fieldset.attr li {
	display: inline-block;
}

fieldset.attr img {
	height: 40px;
	margin-bottom: 5px;
}

/* L4 ---------------------------------------- レアリティ選択 ---------------------------------------- */

fieldset.rarity label span {
	cursor: pointer;
	display: block;
	padding: 0 12px;
}

fieldset.rarity label span::before {
	content: "★";
	font-size: 1.1rem;
}

fieldset.rarity ul {
	text-align: center;
	font-size: 0;
}

fieldset.rarity li {
	display: inline-block;
	font-size: 1.4rem;
}

fieldset.rarity img {
	height: 40px;
}

/* L4 ---------------------------------------- ソート選択 ---------------------------------------- */

fieldset.sort div.wrapper {
	text-align: center;
	padding: 0 5px;
}

fieldset.sort label span {
	cursor: pointer;
	display: block;
	padding: 0 10px;
}

fieldset.sort ul {
	display: inline-block;
	padding-right: 15px;
	text-align: center;
	font-size: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

fieldset.sort li {
	display: inline-block;
	font-size: 1.4rem;
}

fieldset.sort select {
	position: relative;
	top: -0.8em;
	margin-left: 15px;
	padding: 5px;
	border-radius: 5px;
}

/* L4 ---------------------------------------- テキスト入力フォーム ---------------------------------------- */

#input{
	margin: 1em 0;
}

#input input[type="text"] {
	width: 250px;
	padding: 0.2em 10px;
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.0;
	border-radius: 20px;
}

div.error {
	overflow: hidden;
	margin-bottom: 0.5em;
	color: #ffffff;
	background: rgba(255, 0, 0, 0.8);
	transition: height 0.3s linear;
}

div.error p {
	padding: 0.5em 0;
	font-size: 1.1rem;
	line-height: 1.0;
}

/* L2 **************************************** クイックサーチ **************************************** */

#quick-search h3::after {
	content: "基本データ・キーワード から探す";
}

/* L2 **************************************** タイプ・種族・クエスト・入手方法 **************************************** */

#various h3::after {
	content: "タイプ・種族・クエスト・入手方法 から探す";
}

/* L2 **************************************** イラストレーター・声優 **************************************** */

#creator h3::after {
	content: "イラストレーター・声優 から探す";
}

/* L2 **************************************** リーダースキル **************************************** */

#leader-skill h3::after {
	content: "リーダースキル から探す";
}

/* L2 **************************************** 固有スキル **************************************** */

#divers-skill h3::after {
	content: "固有スキル から探す";
}


/* L2 **************************************** ODスキル **************************************** */

#od-skill h3::after {
	content: "ODスキルから探す";
}

#od-skill div.group ul {
	margin: 0.1em 0;
}

#od-skill div.group ul li {
	display: inline-block;
	padding: 2px 0;
}

#od-skill div.contents img {
	cursor: pointer;
	width: 50px;
	height: 50px;
}

/* L1 ######################################## スペシャルリンク ######################################## */

#special-links {
	position: relative;
	z-index: 1;
	margin: 2em 2px;
	text-align: center;
}

#special-links li {
	cursor: pointer;
	display: inline-block;
	margin: 2px;
	padding: 0.5em;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}


/* L1 ######################################## 検索結果 ######################################## */

#result {
	position: relative;
	z-index: 1;
	min-height: 250px;
	margin: 0 2px 3em 2px;
	padding-top: 1em;
	padding-bottom: 1em;
	border: 1px solid #444444;
	background: rgba(0, 0, 0, 0.4);
}

#menu + #result {
	margin-top: 4em;
}

#result h2 {
	display: none;
}

/* L2 **************************************** メッセージ関連 **************************************** */

/* L3 ======================================== ローディングメッセージ・他 ======================================== */

p.message {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1em 0;
	font-size: 1.2rem;
	text-align: center;
}

p.loading {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 1em;
	margin: auto;
	line-height: 1.0;
	font-size: 1.2rem;
	text-align: center;
}

/* L3 ======================================== 検索条件 ======================================== */

p.search-cond {
	margin: 0 2% 0.4em 2%;
	padding-left: 2.0em;
	font-size: 1.6rem;
	text-indent: -1.55em;
	border-bottom: 1px dotted #444444;
}
p.search-cond::before {
	content: "\f002";
	margin-right: 0.6em;
	font-family: "FontAwesome";
}

p.search-cond strong {
	color: #ffff00;
	font-weight: normal;
}

p.search-cond img {
	position: relative;
	top: -2px;
	height: 18px;
	margin-bottom: -6px;
}

/* L3 ======================================== 絞り込み 設定 ======================================== */

#result > ul.narrowing-info {
	list-style-type: none;
	margin: 0 2% 1em 2%;
}

#result > ul.narrowing-info.no-use {
	cursor: default;
	filter: grayscale(100%);
	opacity: 0.40;
}

#result > ul.narrowing-info li {
	display: inline-block;
	font-size: 1.1rem;
	margin: 0 2px 0.3em 2px;
	padding-right: 14px;
	border: 1px solid #333333;
	border-radius: 15px;
}

#result > ul.narrowing-info li.change {
	margin: 0;
	padding: 0;
	border: none;
}

#result > ul.narrowing-info li span.category {
	display: inline-block;
	margin-right: 8px;
	padding: 0.1em 8px 0.1em 10px;
	border-right: rgba(200, 66, 66, 0.7);
	background: #333333;
	border-radius: 15px 0 0 15px;
}

/* L4 ---------------------------------------- 変更ボタン ---------------------------------------- */

#result > ul.narrowing-info li span.button {
	cursor: pointer;
	display: inline-block;
	margin: 2px;
	padding: 0.4em 0.8em;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

/* L4 ---------------------------------------- img 要素 ---------------------------------------- */

#result > ul.narrowing-info img {
	position: relative;
	top: -2px;
	height: 18px;
	margin-bottom: -2px;
	vertical-align: middle;
}

/* L2 **************************************** 並べ替え再設定 **************************************** */

#narrowing {
	overflow: hidden;
	height: 0;
	transition: height 0.5s ease-in-out;
}

#narrowing > div.wrapper {
	margin: 0 2%;
	padding: 0 2% 10px 2%;
	border: 1px solid #333333;
	background: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

#narrowing p {
	text-align: center;
}

#narrowing span.button {
	cursor: pointer;
	display: inline-block;
	margin: 2px;
	padding: 0.5em;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

/* L2 **************************************** 検索結果トップに戻るボタン **************************************** */

#result p.goto-result {
	text-align :center;
	line-height: 1.0;
}

#result p.goto-result i {
	cursor: pointer;
	font-size: 3.5rem;
	opacity: 0.3;
	transition: opacity 0.3s linear;
}
#result p.goto-result i:hover {
	opacity: 1;
}

/* L2 **************************************** 広告 **************************************** */

#result p.ad {
	padding: 1.5em 5px;
	text-align :center;
	line-height: 1.0;
}

#result p.ad img {
	max-width: 100%;
	max-height: 240px;
	height: auto;
	border: 1px solid #ffffff;
	box-sizing: border-box;
}

/* L1 ######################################## ダイバーアイコン ######################################## */

figure {
	position: relative;
	text-align: center;
	line-height: 1.4;
}

figure::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
figure::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}

figure img {
	position: relative;
	z-index: 2;
}

figure figcaption img {
	width: auto;
}

/* L1 ######################################## ダイバー一覧（サムネイル） ######################################## */

.thumb {
	width: 100%;
	margin: 1em auto;
	max-width: 680px;
	margin-bottom: 2em;
	text-align: center;
}

.thumb ul {
	list-style-type: none;
	font-family: "Trebuchet MS", sans-serif;
	text-align: center;
}

.thumb li {
	display: inline-block;
	margin: 4px;
	vertical-align: top;
}

.thumb ul.nav {
	position: relative;
	margin-top: 0.6em;
}

.thumb ul.nav.prev,
.thumb ul.nav.next {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

.thumb ul.nav li {
	cursor: pointer;
	display: inline-block;
	margin: 2px;
	padding: 0.5em;
	vertical-align: middle;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

.thumb ul.nav li.location {
	cursor: default;
	color: #ffff00;
	border-color: #ffff00;
	box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.thumb ul.nav li.minus::before {
	content: "\f100";
	margin-right: 0.4em;
	font-family: "FontAwesome";
}

.thumb ul.nav li.plus::after {
	content: "\f101";
	margin-left: 0.4em;
	font-family: "FontAwesome";
}

.thumb ul.nav li.leader {
	cursor: default;
	padding: 0;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	border: none;
	background: none;
}

.thumb ul.nav li.no-use {
	cursor: default;
	filter: grayscale(100%);
	opacity: 0.25;
}


/* L2 **************************************** サムネイル **************************************** */

/* L3 ======================================== figure 要素周り ======================================== */

.thumb figure::before {
	width: 60px;
	height: 60px;
}
.thumb figure::after {
	width: 60px;
	height: 60px;
}

.thumb figure img {
	width: 60px;
	height: 60px;
}

.thumb figcaption {
	display: none;
}

/* L1 ######################################## ダイバー ######################################## */

/* L2 **************************************** 外枠 **************************************** */

div.diver {
	overflow: hidden;
	position: relative;
	margin: 1.5em 2%;
	transition: height 0.5s ease-in-out;
}


/* L2 **************************************** 注意書き **************************************** */

div.diver p.caution {
	padding: 0.4em 4%;
	color: #ffffff;
	font-size: 1.2rem;
	text-align: center;
	background: #cc0000;
}

/* L2 **************************************** ダイバーデータ **************************************** */

div.diver dl {
	position: relative;
	margin: 1em 0;
	padding-left: 90px;
	transition: opacity 0.5s linear;
	backface-visibility: hidden;
}

div.diver dl.has-words {
	margin-top: 80px;
}

div.diver dl.useR ul a {
	cursor: default !important;
	text-decoration: none !important;
}

/* L3 ======================================== ダイバー名 ======================================== */

div.diver dl dt {
	position: relative;
	font-size: 1.9rem;
	margin-bottom: 0.4em;
	padding-left: 10px;
	padding-right: 65px;
	line-height: 1.5;
}
div.diver dl dt::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.8em;
	background-image: linear-gradient(0deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
	background-size: 4px 4px;
	border-radius: 0 5px 5px 0;
}

div.diver dl dt a {
	color: #ffffff !important;
	text-decoration: none;
}

div.diver dl dt strong {
	position: relative;
	z-index: 20;
	margin-left: 0.35em;
	font-weight: normal;
}

div.diver dl dt img {
	position: relative;
	top: -1px;
	z-index: 2;
	width: 25px;
	height: 25px;
}
div.diver dl dt img:nth-child(2) {
	left: -7px;
	z-index: 1;
	margin-right: -7px;
}

/* L3 ======================================== ダイバーID ======================================== */

div.diver dl dd.id {
	position: absolute;
	top: -5px;
	right: 10px;
	width: 50px;
	padding: 5px 1px 5px 1px;
	font-family: "Trebuchet MS";
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.0;
	border: 1px solid #666666;
	background: #000000;
}
div.diver dl dd.id::before {
	content: "DiverID";
	display: block;
	font-size: 1.0rem;
}

div.diver dl dd.id a {
	color: #ffffff !important;
}

/* L4 ---------------------------------------- ダイバー追加ボタン ---------------------------------------- */

div.diver dl dd.id span.add-diver {
	cursor: pointer;
	display: block;
	position: relative;
	top: 4px;
	padding: 2px 0;
	text-align: center;
	border: 1px solid #333333;
	background: rgba(255, 255, 255, 0.1);
}

/* L3 ======================================== セリフ ======================================== */

div.diver dl dd.words {
	overflow: hidden;
	position: absolute;
	top: -68px;
	left: 10px;
	z-index: 10;
	cursor: pointer;
	width: 400px;
	height: 87px;
	padding-top: 20px;
	padding-left: 12px;
	padding-right: 12px;
	color: #000000;
	font-family: "ヒラギノ丸ゴ ProN W4", "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.2rem;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: url(../images/others/fukidashi.png) 50% 50% no-repeat;
	background-size: contain;
	box-sizing: border-box;
}

/* L3 ======================================== アイコン ======================================== */

div.diver dl dd.icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	text-align: center;
}
div.diver dl dd.icon::after {
	content: "";
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	z-index: 11;
}

div.diver dl dd.icon figure::before {
	width: 90px;
	height: 90px;
}
div.diver dl dd.icon figure::after {
	width: 90px;
	height: 90px;
}

div.diver dl dd.icon figure img {
	width: 90px;
}

div.diver dl dd.icon figure figcaption img {
	width: auto;
	height: 12px;
}

/* L3 ======================================== 進化 ======================================== */

div.diver dl dd.evolution {
	position: absolute;
	top: 120px;
	left: 0;
	width: 90px;
	text-align: center;
}

div.diver dl dd.evolution ul {
	list-style-type: none;
	color: #ffffff;
}

div.diver dl dd.evolution li {
	cursor: pointer;
	margin: 2px 0;
	padding: 0.5em 0;
	font-size: 1.2rem;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: linear-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 49%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.40) 100%);
	border-radius: 2px;
}

div.diver dl dd.evolution li.before {
	background-color: #333333;
}

div.diver dl dd.evolution li.after {
	background-color: #444400;
}

/* L3 ======================================== パラメータ ======================================== */

div.diver dl dd.data {
	padding-left: 10px;
	margin-bottom: 1em;
}

div.diver dl dd.data ul {
	list-style-type: none;
}

div.diver dl dd.data ul li {
	display: inline-block;
	max-width: calc(100% - 4px);
	font-size: 1.1rem;
	margin: 0 2px 0.3em 2px;
	vertical-align: top;
	border: 1px solid #333333;
	box-sizing: border-box;
}

div.diver dl dd.data ul li div.inner {
	display: table;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.diver dl dd.data ul li span.category {
	display: table-cell;
	padding: 0.1em 8px;
	white-space: nowrap;
	vertical-align: middle;
}

div.diver dl dd.data ul li span.data {
	display: table-cell;
	padding: 0.1em 8px;
}

div.diver dl dd.data ul li span.rank {
	font-size: 80%;
}

div.diver dl dd.data ul:nth-child(1) {
	margin-bottom: 0.5em;
	padding-right: 65px;
}

div.diver dl dd.data ul:nth-child(1) li {
	font-size: 1.3rem;
	padding-right: 4px;
	border: 1px solid rgba(200, 66, 66, 0.7);
	border-radius: 15px;
}
div.diver dl dd.data ul:nth-child(1) li span.category {
	border-right: rgba(200, 66, 66, 0.7);
	background: rgba(200, 66, 66, 0.7);
	border-radius: 15px 0 0 15px;
}

div.diver dl dd.data ul:nth-child(2) li {
	border: 1px solid rgba(174, 43, 154, 0.7);
}
div.diver dl dd.data ul:nth-child(2) li span.category {
	border-right: rgba(174, 43, 154, 0.7);
	background: rgba(174, 43, 154, 0.7);
}

div.diver dl dd.data ul:nth-child(3) li {
	border: 1px solid rgba(66, 150, 66, 0.7);
}
div.diver dl dd.data ul:nth-child(3) li span.category {
	border-right: rgba(66, 150, 66, 0.7);
	background: rgba(66, 150, 66, 0.7);
}

div.diver dl dd.data ul:nth-child(4) li {
	border: 1px solid rgba(66, 66, 180, 0.7);
}
div.diver dl dd.data ul:nth-child(4) li span.category {
	border-right: 1px solid rgba(66, 66, 180, 0.7);
	background: rgba(66, 66, 180, 0.7);
}

div.diver dl dd.data ul li a {
	cursor: pointer;
	color: #ffffff !important;
	white-space: nowrap;
	text-decoration: underline;
}

div.diver dl.useR dd.data ul a {
	color: #ffffff !important;
}

/* L3 ======================================== スキル関連 ======================================== */

div.diver dl dd[class*="skill"] {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 10px;
	font-size: 1.2rem;
}
div.diver dl dd[class*="skill"].no-data {
	filter: grayscale(100%);
	opacity: 0.3;
}

div.diver dl dd[class*="skill"] p {
	padding: 0.1em 15px;
}
div.diver dl dd[class*="skill"] p.name + p {
	margin-top: 0.2em;
}

div.diver dl dd[class*="skill"] p.name {
	position: relative;
	padding-left: 9em;
	font-size: 1.3rem;
	background: #993300;
	border-radius: 15px;
	
	background-image: linear-gradient(45deg,  rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%), linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%);
	background-size: 8px 8px;
}

div.diver dl dd[class*="skill"] p.name::before {
	font-family: "FontAwesome";
	margin-right: 0.5em;
}
div.diver dl dd.leader-skill p.name::before {
	content: "\f004";
}
div.diver dl dd.skill p.name::before {
	content: "\f005";
}
div.diver dl dd.od-skill p.name::before {
	content: "\f013";
}

div.diver dl dd[class*="skill"] p.name::after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 9.5em;
	margin: 0 auto;
	padding-top: 0.3em;
	padding-left: 0.1em;
	color: #ffffff;
	font-size: 1.1rem;
	text-align: center;
	white-space: nowrap;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	background: #993300;
	border-radius: 15px 0 0 15px;
}
div.diver dl dd.leader-skill p.name::after {
	content: "リーダースキル";
}
div.diver dl dd.skill p.name::after {
	content: "固有スキル";
}
div.diver dl dd.od-skill p.name::after {
	content: "ODスキル";
}

div.diver dl dd.skill p:nth-child(2)::after {
	content: "発動ターン数 "attr(data-turn-min)"（スキルLV最大時）";
	display: block;
	margin: 0.2em 0;
	padding: 0.3em;
	text-align: center;
	border: 1px dotted rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.05);
}

div.diver dl dd.skill p:nth-child(2).no-data::after {
	filter: grayscale(100%);
	opacity: 0.30;
}



/* L3 ======================================== ODスキル ======================================== */

div.diver dl dd.od-skill {
	
}

div.diver dl dd.od-skill ul {
	margin-top: 1em;
	list-style-type: none;
	text-align: center;
}

div.diver dl dd.od-skill ul li {
	display: inline-block;
	position: relative;
	margin: 0 4px 1em 4px;
	font-size: 1.0rem;
}
div.diver dl dd.od-skill ul li::before {
	content: attr(data-od);
	position: absolute;
	top: -8px;
	right: -5px;
	z-index: 2;
	width: 2.6em;
	padding: 0.5em 0;
	text-align: center;
	line-height: 1.0;
	border: 1px solid #ffffff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 50%;
}
div.diver dl dd.od-skill ul li::after {
	content: attr(data-val);
	display: block;
	margin-top: 2px;
	border: 1px solid #333333;
	background: rgba(0, 0, 0, 0.8);
}

div.diver dl dd.od-skill ul li img {
	cursor: pointer;
	width: 65px;
	height: 65px;
}

/* L3 ======================================== プロフィール ======================================== */

div.diver dl dd.profile {
	position: relative;
	margin-left: 10px;
	margin-bottom: 0.5em;
	padding: 0.5em 10px;
	font-size: 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 5px;
}
div.diver dl dd.profile::before {
	content: "profile";
	position: absolute;
	bottom: -1.1em;
	right: 5px;
	padding: 0.3em 10px;
	color: #ffffff;
	font-size: 1.1rem;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: #222222;
	border-radius: 15px;
}

dd.od-skill.no-data + dd.profile {
	margin-top: 1.4em !important;
}

div.diver dl dd.profile p.words {
	color: #ffcc00;
	font-size: 1.4rem;
	letter-spacing: 0.2em;
}

/* L3 ======================================== メモ ======================================== */

div.diver dl dd.memo {
	position: relative;
	margin-top: 1em;
	margin-left: 75px;
	padding: 0 10px;
	font-size: 1.1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.1)
}

div.diver dl dd.memo::before {
	position: absolute;
	content: "メモ";
	left: -60px;
	width: 50px;
	text-align: right;
}

/* L3 ======================================== OD対象ダイバー / OD専用アイテム ======================================== */

div.diver dl dd[class^="overdive-"] {
	position: relative;
	margin-top: 1em;
	text-align: center;
}

div.diver dl dd[class^="overdive-"] p {
	display: inline-block;
	position: relative;
	z-index: 2;
	margin-bottom: 0.5em;
	padding: 0 1em;
	color: #ffffff;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	white-space: nowrap;
}
div.diver dl dd[class^="overdive-"] p::before,
div.diver dl dd[class^="overdive-"] p::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 200px;
	height: 1px;
}
div.diver dl dd[class^="overdive-"] p::before {
	right: 100%;
	
	background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}
div.diver dl dd[class^="overdive-"] p::after {
	left: 100%;
	
	background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

div.diver dl dd[class^="overdive-"] ul {
	text-align: center;
}

div.diver dl dd[class^="overdive-"] ul li {
	display: inline-block;
	position: relative;
	width: 50px;
	margin: 2px;
	vertical-align: top;
}

div.diver dl dd[class^="overdive-"] ul li::after {
	content: "";
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	z-index: 11;
}

div.diver dl dd[class^="overdive-"] ul li figure::before {
	width: 50px;
	height: 50px;
}
div.diver dl dd[class^="overdive-"] ul li figure::after {
	width: 50px;
	height: 50px;
}

div.diver dl dd[class^="overdive-"] ul li figure img {
	width: 50px;
}

div.diver dl dd[class^="overdive-"] ul li figure figcaption img {
	width: auto;
	height: 10px;
}

/* L3 ======================================== スタッフ ======================================== */

div.diver dl dd.staff {
	margin-top: 1em;
	padding-left: 10px;
}

div.diver dl dd.staff ul {
	list-style-type: none;
	text-align: center;
}

div.diver dl dd.staff ul li {
	display: inline-block;
	font-size: 1.1rem;
	margin: 0 4px;
	padding-right: 10px;
	border: 1px solid #333333;
	border-radius: 15px;
}

div.diver dl dd.staff ul li span.category {
	display: inline-block;
	margin-right: 8px;
	padding: 0.1em 8px 0.1em 10px;
	border-right: rgba(200, 66, 66, 0.7);
	background: #333333;
	border-radius: 15px 0 0 15px;
}

div.diver dl dd.staff ul li a {
	cursor: pointer;
	color: #ffffff !important;
	text-decoration: underline;
}

/* L3 ======================================== コメント ======================================== */

div.diver dl dd.comments {
	display: none;
}
div.diver dl dd.comments[data-user-fade="true"]::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 50px;
	background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 1) 90%);
}


div.diver dl dd.comments:has(li) {
	overflow: hidden;
	display: block;
	position: relative;
	margin: 1em 0 0 -90px;
	transition: height 0.5s ease-in-out;
}

div.diver dl dd.comments div.form {
	display: table;
	width: 100%;
	
	margin-bottom: 0.5em;
	text-align: center;
}

div.diver dl dd.comments div.form span {
	display: table-cell;
	vertical-align: middle;
}

div.diver dl dd.comments div.form span.B {
	width: 8em;
}

div.diver dl dd.comments div.form textarea {
	display: inline-block;
	width: 100%;
	margin: 0;
	min-height: 29px;
	padding: 5px;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.1rem;
	vertical-align: bottom;
	border-radius: 5px;
	box-sizing: border-box;
	resize: vertical;
}

div.diver dl dd.comments div.form button {
	cursor: pointer;
	display: inline-block;
	width: 8em;
	padding: 0.5em 0;
	color: #ffffff;
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.0;
	border: 1px solid #ffffff;
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
	border-radius: 20px;
}

div.diver dl dd.comments div.form button.disabled {
	cursor: default;
	filter: grayscale(100%);
}

div.diver dl dd.comments ul {
	list-style-type: none;
	border-top: 1px dotted #444444;
}

div.diver dl dd.comments ul li {
	overflow: hidden;
	position: relative;
	padding: 4px 8px 4px 32px;
	font-family: "Verdana", "Arial", "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.1rem;
	border-bottom: 1px dotted #444444;
	transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

div.diver dl dd.comments ul li.info {
	padding-left: 8px;
	text-align: center;
}

div.diver dl dd.comments ul li.info a {
	color: #ffffff;
}

div.diver dl dd.comments ul li:nth-child(2n+1) {
	background: rgba(255, 255, 255, 0.08);
}

div.diver dl dd.comments ul li img {
	position: absolute;
	top: 4px;
	left: 8px;
	width: 18px;
	height: 18px;
	margin-bottom: -4px;
	border-radius: 50%;
}

div.diver dl dd.comments p.more {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px 0;
	text-align: center;
	font-size: 1.1rem;
}

div.diver dl dd.comments p.more span {
	position: relative;
	z-index: 2;
	cursor: pointer;
	display: inline-block;
	margin-top: 5px;
	padding: 0.5em;
	font-family: "Trebuchet MS";
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

div.diver dl dd.comments p.more span.loading {
	border-color: transparent;
	background: none;
}

div.diver dl dd.comments p.more i {
	font-size: 1.1rem;
}

/* L1 ######################################## pagination ######################################## */

#pagination {
	max-width: 580px;
	width: 100%;
	margin: 2.5em auto 0 auto;
}

#pagination ul {
	list-style-type: none;
	font-family: "Trebuchet MS", sans-serif;
	text-align: center;
}

#pagination li {
	cursor: pointer;
	display: inline-block;
	width: 1.5em;
	margin: 2px;
	padding: 0.5em;
	font-family: "Trebuchet MS";
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.6) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

#pagination li.location {
	color: #ffff00;
	border-color: #ffff00;
	box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

/* L1 ######################################## ダイバー画像 ######################################## */

#diver-view {
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	transition: opacity 0.3s linear;
}
#diver-view::after {
	content: "画面をタップで画像を閉じる";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1em 0;
	color: #ffffff;
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.0;
}

#diver-view.show {
	opacity: 1;
}

#diver-view div.inner {
	cursor: pointer;
	visibility: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	margin: auto;
	border: 1px solid #ffffff;
	background: 50% 50% no-repeat;
	box-shadow: 0 0 20px rgba(0, 0, 0, 1.0);
	background-size: contain;
	transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#diver-view div.inner.loaded {
	visibility: visible;
}

#diver-view i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 40px;
	height: 40px;
	margin: auto;
	font-size: 4rem;
}

#diver-view img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 0;
	height: 0;
}

#diver-view img.loaded {
	width: 512px;
	height: 512px;
	object-fit: contain;
}

/* L1 ######################################## カスタムリスト ######################################## */

#custom-list {
	overflow: hidden;
	display: none;
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0 2px 3em 2px;
	padding-top: 1em;
	padding-bottom: 2em;
	border: 1px solid #444444;
	background: rgba(0, 0, 0, 0.4);
}

#custom-list h2 {
	margin: 0 2% 0.4em 2%;
	padding-left: 2.0em;
	font-size: 1.6rem;
	font-weight: normal;
	text-indent: -1.55em;
	border-bottom: 1px dotted #444444;
}
#custom-list h2::before {
	content: "\f0cb";
	margin-right: 0.6em;
	font-family: "FontAwesome";
}

#custom-list li {
	cursor: pointer;
}

#custom-list p.title {
	margin: 1em 2% 1.2em 2%;
	text-align: center;
}

#custom-list input {
	padding: 0.2em 0;
	width: 100%;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 16px;
	text-align: center;
	border-radius: 10px;
	box-sizing: border-box;
}

#custom-list p.tweet {
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.0;
}

#custom-list p.tweet a {
	padding: 0.3em 20px;
	color: #ffffff;
	text-decoration: none;
	background: #1da1f2;
	border-radius: 40px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

#custom-list p.tweet a::before {
	content: '\f099';
	font-family: "FontAwesome";
	margin-right: 0.6em;
}

#notice {
	overflow: hidden;
	visibility: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	padding: 0.8em 2%;
	color: #ffffff;
	font-size: 1.3rem;
	text-align: center;
	background: rgba(0, 60, 150, 0.95) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
	box-sizing: border-box;
}

#notice p.link {
	max-width: 800px;
	margin-top: 0.2em;
	margin-left: auto;
	margin-right: auto;
	padding: 0.2em 0;
	border: 1px solid #ffffff;
	background: rgba(255, 255, 255, 0.1);
	text-align: center;
}

#notice.animate {
	transition: bottom 0.3s ease-out;
}

#notice a {
	color: #ffffff !important;
	text-decoration: none;
}

/* L1 ######################################## アイコン ######################################## */

/* L4 ---------------------------------------- 主属性：なし ---------------------------------------- */

figure.no-attr::before {
	background: url(../images/frame/light_bg.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity1::after {
	background: url(../images/frame/non_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity2::after {
	background: url(../images/frame/non_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity3::after {
	background: url(../images/frame/non_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity4::after {
	background: url(../images/frame/non_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity5::after {
	background: url(../images/frame/non_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity6::after {
	background: url(../images/frame/non_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.no-attr.rarity7::after {
	background: url(../images/frame/non_7.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L4 ---------------------------------------- 主属性：火 ---------------------------------------- */

figure.main-fire::before {
	background: url(../images/frame/fire_bg.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-fire.rarity1::after {
	background: url(../images/frame/fire_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity2::after {
	background: url(../images/frame/fire_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity3::after {
	background: url(../images/frame/fire_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity4::after {
	background: url(../images/frame/fire_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity5::after {
	background: url(../images/frame/fire_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity6::after {
	background: url(../images/frame/fire_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.rarity7::after {
	background: url(../images/frame/fire_7.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-fire.sub-water.rarity4::after {
	background: url(../images/frame/fire_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-water.rarity5::after {
	background: url(../images/frame/fire_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-water.rarity6::after {
	background: url(../images/frame/fire_6_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-water.rarity7::after {
	background: url(../images/frame/fire_7_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-fire.sub-green.rarity4::after {
	background: url(../images/frame/fire_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-green.rarity5::after {
	background: url(../images/frame/fire_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-green.rarity6::after {
	background: url(../images/frame/fire_6_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-green.rarity7::after {
	background: url(../images/frame/fire_7_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-fire.sub-light.rarity4::after {
	background: url(../images/frame/fire_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-light.rarity5::after {
	background: url(../images/frame/fire_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-light.rarity6::after {
	background: url(../images/frame/fire_6_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-light.rarity7::after {
	background: url(../images/frame/fire_7_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-fire.sub-dark.rarity4::after {
	background: url(../images/frame/fire_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-dark.rarity5::after {
	background: url(../images/frame/fire_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-dark.rarity6::after {
	background: url(../images/frame/fire_6_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-fire.sub-dark.rarity7::after {
	background: url(../images/frame/fire_7_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L4 ---------------------------------------- 主属性：水 ---------------------------------------- */

figure.main-water::before {
	background: url(../images/frame/water_bg.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-water.rarity1::after {
	background: url(../images/frame/water_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity2::after {
	background: url(../images/frame/water_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity3::after {
	background: url(../images/frame/water_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity4::after {
	background: url(../images/frame/water_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity5::after {
	background: url(../images/frame/water_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity6::after {
	background: url(../images/frame/water_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.rarity7::after {
	background: url(../images/frame/water_7.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-water.sub-fire.rarity4::after {
	background: url(../images/frame/water_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-fire.rarity5::after {
	background: url(../images/frame/water_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-fire.rarity6::after {
	background: url(../images/frame/water_6_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-fire.rarity7::after {
	background: url(../images/frame/water_7_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-water.sub-green.rarity4::after {
	background: url(../images/frame/water_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-green.rarity5::after {
	background: url(../images/frame/water_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-green.rarity6::after {
	background: url(../images/frame/water_6_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-green.rarity7::after {
	background: url(../images/frame/water_7_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-water.sub-light.rarity4::after {
	background: url(../images/frame/water_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-light.rarity5::after {
	background: url(../images/frame/water_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-light.rarity6::after {
	background: url(../images/frame/water_6_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-light.rarity7::after {
	background: url(../images/frame/water_7_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-water.sub-dark.rarity4::after {
	background: url(../images/frame/water_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-dark.rarity5::after {
	background: url(../images/frame/water_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-dark.rarity6::after {
	background: url(../images/frame/water_6_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-water.sub-dark.rarity7::after {
	background: url(../images/frame/water_7_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L4 ---------------------------------------- 主属性：木 ---------------------------------------- */

figure.main-green::before {
	background: url(../images/frame/green_bg.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-green.rarity1::after {
	background: url(../images/frame/green_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity2::after {
	background: url(../images/frame/green_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity3::after {
	background: url(../images/frame/green_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity4::after {
	background: url(../images/frame/green_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity5::after {
	background: url(../images/frame/green_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity6::after {
	background: url(../images/frame/green_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.rarity7::after {
	background: url(../images/frame/green_7.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-green.sub-fire.rarity4::after {
	background: url(../images/frame/green_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-fire.rarity5::after {
	background: url(../images/frame/green_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-fire.rarity6::after {
	background: url(../images/frame/green_6_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-fire.rarity7::after {
	background: url(../images/frame/green_7_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-green.sub-water.rarity4::after {
	background: url(../images/frame/green_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-water.rarity5::after {
	background: url(../images/frame/green_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-water.rarity6::after {
	background: url(../images/frame/green_6_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-water.rarity7::after {
	background: url(../images/frame/green_7_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-green.sub-light.rarity4::after {
	background: url(../images/frame/green_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-light.rarity5::after {
	background: url(../images/frame/green_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-light.rarity6::after {
	background: url(../images/frame/green_6_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-light.rarity7::after {
	background: url(../images/frame/green_7_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-green.sub-dark.rarity4::after {
	background: url(../images/frame/green_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-dark.rarity5::after {
	background: url(../images/frame/green_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-dark.rarity6::after {
	background: url(../images/frame/green_6_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-green.sub-dark.rarity7::after {
	background: url(../images/frame/green_7_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L4 ---------------------------------------- 主属性：光 ---------------------------------------- */

figure.main-light::before {
	background: url(../images/frame/light_bg.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-light.rarity1::after {
	background: url(../images/frame/light_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity2::after {
	background: url(../images/frame/light_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity3::after {
	background: url(../images/frame/light_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity4::after {
	background: url(../images/frame/light_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity5::after {
	background: url(../images/frame/light_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity6::after {
	background: url(../images/frame/light_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.rarity7::after {
	background: url(../images/frame/light_7.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-light.sub-fire.rarity4::after {
	background: url(../images/frame/light_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-fire.rarity5::after {
	background: url(../images/frame/light_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-fire.rarity6::after {
	background: url(../images/frame/light_6_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-fire.rarity7::after {
	background: url(../images/frame/light_7_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-light.sub-water.rarity4::after {
	background: url(../images/frame/light_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-water.rarity5::after {
	background: url(../images/frame/light_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-water.rarity6::after {
	background: url(../images/frame/light_6_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-water.rarity7::after {
	background: url(../images/frame/light_7_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-light.sub-green.rarity4::after {
	background: url(../images/frame/light_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-green.rarity5::after {
	background: url(../images/frame/light_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-green.rarity6::after {
	background: url(../images/frame/light_6_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-green.rarity7::after {
	background: url(../images/frame/light_7_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-light.sub-dark.rarity4::after {
	background: url(../images/frame/light_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-dark.rarity5::after {
	background: url(../images/frame/light_4_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-dark.rarity6::after {
	background: url(../images/frame/light_6_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-light.sub-dark.rarity7::after {
	background: url(../images/frame/light_7_sub_dark.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L4 ---------------------------------------- 主属性：闇 ---------------------------------------- */

figure.main-dark::before {
	background: url(../images/frame/dark_bg.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-dark.rarity1::after {
	background: url(../images/frame/dark_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity2::after {
	background: url(../images/frame/dark_1.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity3::after {
	background: url(../images/frame/dark_3.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity4::after {
	background: url(../images/frame/dark_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity5::after {
	background: url(../images/frame/dark_4.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity6::after {
	background: url(../images/frame/dark_6.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.rarity7::after {
	background: url(../images/frame/dark_7.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-dark.sub-fire.rarity4::after {
	background: url(../images/frame/dark_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-fire.rarity5::after {
	background: url(../images/frame/dark_4_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-fire.rarity6::after {
	background: url(../images/frame/dark_6_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-fire.rarity7::after {
	background: url(../images/frame/dark_7_sub_fire.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-dark.sub-water.rarity4::after {
	background: url(../images/frame/dark_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-water.rarity5::after {
	background: url(../images/frame/dark_4_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-water.rarity6::after {
	background: url(../images/frame/dark_6_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-water.rarity7::after {
	background: url(../images/frame/dark_7_sub_water.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-dark.sub-green.rarity4::after {
	background: url(../images/frame/dark_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-green.rarity5::after {
	background: url(../images/frame/dark_4_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-green.rarity6::after {
	background: url(../images/frame/dark_6_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-green.rarity7::after {
	background: url(../images/frame/dark_7_sub_green.png) 50% 50% no-repeat;
	background-size: contain;
}

figure.main-dark.sub-light.rarity4::after {
	background: url(../images/frame/dark_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-light.rarity5::after {
	background: url(../images/frame/dark_4_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-light.rarity6::after {
	background: url(../images/frame/dark_6_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}
figure.main-dark.sub-light.rarity7::after {
	background: url(../images/frame/dark_7_sub_white.png) 50% 50% no-repeat;
	background-size: contain;
}

/* L1 ######################################## 広告 ######################################## */

div.restricted::after,
div.search ul.nav.useR::after,
#next ul.nav.useR::after {
	content: "現在、使える機能が制限されています。";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 110;
	margin: auto;
	width: 100%;
	height: 1em;
	font-size: 1.2rem;
	line-height: 1.0;
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */